ROAD TO ClapBox Vol.4

Web開発

ClapBoxとは

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

開発記録をつけ始めて2週間経って、若干モチベーションが落ちてきました。
また、世の中に必要ないサービスを作っているんではなかろうかという思いが募り始めてます。
なんとかこの期間を耐えて世に出すとこまで行きたいと思います。

ツイッターでの最近の進捗

ブログにするのもやや時間がかかって億劫なときもあるのでそういうときはツイッターに投稿している。
動画が簡単にアップロードできて良きです。

Clapしたときのアニメーションを実装

メッセージ機能は必要最低限の機能ではないので工事中にしておく。

ユーザーがログインしたときのトップページ
PV数とClap数をグラフで確認できるように。
ただ数字にするだけなら簡単だけど、見たときの楽しさと動きが欲しかったのでchatjsで実装

NuxtでのChart,js

/components/DataGraph.vue

 <script>
import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Bar,
  props: ['options'],
  mixins: [reactiveProp],
  mounted () {
    this.renderChart(this.chartData, this.options)
  },
}
</script>

/pages/index.vue

<template> <div>
    <v-tabs
        slot="extension"
        v-model="tabs"
        fixed-tabs
        color="transparent"
      >
        <v-tabs-slider></v-tabs-slider>
        <v-tab @click="changeToPv">
          <v-icon>people</v-icon>
        </v-tab>

        <v-tab @click="changeToClap">
          <!--  SVG Created by Luis Durazo from the Noun Project  -->
          <svg style="color: rgba(0,0,0,0.54);width: 24px;" id="clap--icon" xmlns="http://www.w3.org/2000/svg" viewBox="-549 338 100.1 125">
          <path d="M-471.2 366.8c1.2 1.1 1.9 2.6 2.3 4.1.4-.3.8-.5 1.2-.7 1-1.9.7-4.3-1-5.9-2-1.9-5.2-1.9-7.2.1l-.2.2c1.8.1 3.6.9 4.9 2.2zm-28.8 14c.4.9.7 1.9.8 3.1l16.5-16.9c.6-.6 1.4-1.1 2.1-1.5 1-1.9.7-4.4-.9-6-2-1.9-5.2-1.9-7.2.1l-15.5 15.9c2.3 2.2 3.1 3 4.2 5.3zm-38.9 39.7c-.1-8.9 3.2-17.2 9.4-23.6l18.6-19c.7-2 .5-4.1-.1-5.3-.8-1.8-1.3-2.3-3.6-4.5l-20.9 21.4c-10.6 10.8-11.2 27.6-2.3 39.3-.6-2.6-1-5.4-1.1-8.3z"/>
          <path d="M-527.2 399.1l20.9-21.4c2.2 2.2 2.7 2.6 3.5 4.5.8 1.8 1 5.4-1.6 8l-11.8 12.2c-.5.5-.4 1.2 0 1.7.5.5 1.2.5 1.7 0l34-35c1.9-2 5.2-2.1 7.2-.1 2 1.9 2 5.2.1 7.2l-24.7 25.3c-.5.5-.4 1.2 0 1.7.5.5 1.2.5 1.7 0l28.5-29.3c2-2 5.2-2 7.1-.1 2 1.9 2 5.1.1 7.1l-28.5 29.3c-.5.5-.4 1.2 0 1.7.5.5 1.2.4 1.7 0l24.7-25.3c1.9-2 5.1-2.1 7.1-.1 2 1.9 2 5.2.1 7.2l-24.7 25.3c-.5.5-.4 1.2 0 1.7.5.5 1.2.5 1.7 0l14.6-15c2-2 5.2-2 7.2-.1 2 2 2.1 5.2.1 7.2l-27.6 28.4c-11.6 11.9-30.6 12.2-42.5.6-12-11.7-12.2-30.8-.6-42.7m18.1-48.4l-.7 4.9-2.2-4.4m7.6.9l-3.7 3.4 1.2-4.8m5.5 4.7l-4.8 1.6 3.1-3.9"/>
        </svg>
        </v-tab>
    </v-tabs>

    <data-graph :chart-data="chartData" :options="options"/>
  </div>
</template>

<script>
import DataGraph from '~/components/DataGraph.vue'
import moment from '~/plugins/moment'

export default {
  components: {
    DataGraph
  },
  layout (context) {
    if (context.store.getters['user/isLoggedIn']) {
      return "default"
    }
    return "index-no-login"
  },
  created: function() {
    // 最初はPVデータを表示させる
    this.fillData(this.pvData)
  },
  methods: {
    changeToClap: function () {
      this.fillData(this.clapData)
    },
    changeToPv: function () {
      this.fillData(this.pvData)
    },
    fillData: function(datas) {
      const labels = []
      const data = []

      this.week.forEach((value, key) => {
        labels.push(moment(value).format("M/D"))
        data.push(datas[value])
      });

      this.chartData = {
        labels: labels.reverse(),
        datasets: [
          {
            data: data.reverse(),
            backgroundColor: '#03B5AA'
          }
        ]
      };
    }
  },
  computed: {
    week: function() {
      const retList = []
      const slice = (this.page - 1) * 7
      for (let i = slice; i < slice + 7; i++) {
        retList.push(moment().add(-i, "d").format("YYYYMMDD"))
      }
      return retList
    }
  },
  data () {
    return {
      tabs: null,
      page: 1,
      chartData: null,
      options: {
        legend: {                          //凡例設定
          display: false                 //表示設定
        },
        scales: {
          yAxes: [{                      //y軸設定
            ticks: {                      //最大値最小値設定
              min: 0,                   //最小値
            }
          }]
        }
      },
    }
  },
  asyncData(context) {
    // ログインしてたら
    console.log('index.vueのasyncdata')

    if (!context.store.getters['user/isLoggedIn']) {
      return
    }

    const pvData = {"20190212": 132, "20190211": 334, "20190210": 534 ,"20190209": 233 ,"20190208": 435 ,"20190207": 736 ,"20190206": 233, "20190204": 12, "20190204": 34, "20190203": 54 ,"20190202": 23 ,"20190201": 45 ,"20190131": 76 ,"20190130": 23}

    return {
      pvData: pvData,
      // pvData: [13,21,33,24,25,46,47],
      clapData: {"20190212": 12, "20190211": 77, "20190210": 34 ,"20190209": 55 ,"20190208": 55 ,"20190207": 76 ,"20190206": 23, "20190204": 12,"20190205": 13, "20190204": 354, "20190203": 54 ,"20190202": 23 ,"20190201": 45 ,"20190131": 76 ,"20190130": 23},
    }

    // context.store.commit('claps/updateClaps', data)
  }
}
</script>
Web開発
スポンサーリンク
hid3をフォローする
踊りながらWebサービスを個人開発している人のブログ