ROAD TO ClapBox Vol.3

Web開発

ClapBoxとは

匿名で応援をする・してもらうことのできるサービスである。

個人開発ではモチベを保つために速攻で作って速攻でリリースすることが大事である。
まずは必要最低限の機能だけで作ってリリースしよう。

ClapBoxで必要な最低限の機能
・ツイッターを用いたユーザー登録・ログイン
・匿名ユーザーがClap(応援)を送れる機能
・ユーザーがClapの数を見ることができる機能

メッセージを受け取ってツイッター上で返信できるサービスはリリースしてからでも遅くない。
(なんか昨日までメッセージ関連のことやってた…)

というわけでClapを送る機能を作ります

Mediumのclapのアイコンとエフェクトがめっちゃ好きなのであんなのを実装したい。
これ↓

プラグインとかSVGアイコンとか探しまくって見つけたもの。

svg はこれ。
https://codepen.io/ohansemmanuel/pen/dVdvJQ

アニメーションはこれを参考に作ればいいかも?
https://tympanus.net/Development/Animocons/
mo.jsを使っているのでそれをVueで実装する方法を調べていた。

mo.jsのNuxtへの導入

vue-mo-jsを使う。
https://www.npmjs.com/package/vue-mo-js

plugins/vuemo.client.js

サーバーサイドレンダリングしないために末尾を.client.jsにする。

import Vue from 'vue'
import VueMoJS from 'vue-mo-js'
Vue.use(VueMoJS)

nuxt.config.js

plugins: [
    ...,
    '@/plugins/vuemo.client.js'
  ],

使うcompornent

<template> <div>
    <a href="#" v-mojs="mojsOptions">Burst Element</a>
  </div>
</template>

<script>
  export default {
    data : function() {
      return {
          mojsOptions : {
            count : 6,
            radius: { 15: 100 },
            origin: '100% 100%',
            degree: 360,
            children: {
              shape: 'polygon',
              fill: ['black','white'],
              isSwirl:true,
              swirlSize: 10,
              swirlFrequency: 2,
              delay: 'stagger(0, 30)'
            }
          }
        }
    }
  }
</script>
Web開発
スポンサーリンク
hid3をフォローする
踊りながらWebサービスを個人開発している人のブログ