概要

どうも草野球おじさんです。
おじさんになると、走力の衰えを感じます。
そこで Nuxt, Firebaseで自分の一塁到達タイムはプロ野球選手で言うと
誰くらいなのか測れるアプリを作ってみました。

https://qiita.com/kusa89oji/items/78bc9da4db7cec4e3300 のアプリを Nuxt.jsで書き直しました。

画面スクリーンショット

じっさいのデモ：https://vue-baseball-8142f.firebaseapp.com/

0. 準備

yarn をインストール
cf. https://qiita.com/masterkey1009/items/50f95b1187646a7db385

yarnのinstallを確認

$ which yarn
/usr/local/bin/yarn

1. プロジェクト作成

pj用のディレクトリを作成する

$ pwd
/Users/hoge/Dev
$ mkdir hoge-pj

yarn コマンドで Nuxt ベースの app を作成する

$ yarn create nuxt-app hoge-app

? Project name hoge-app

そのままエンター

? Project description (My lovely Nuxt.js project)

特に何も書かないので、そのままエンター

? Use a custom server framework (Use arrow keys)
❯ none
  express
  koa
  adonis
  hapi
  feathers
  micro
(Move up and down to reveal more choices)

none にカーソルがある事を確認してエンター

? Choose features to install (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Progressive Web App (PWA) Support
 ◯ Linter / Formatter
 ◯ Prettier
 ◯ Axios

後に(別記事)外部のAPIを使うので、 Axios を選んでスペースーキーを押して、印がついた段階で、
エンター

? Use a custom UI framework (Use arrow keys)
❯ none
  bootstrap
  vuetify
  bulma
  tailwind
  element-ui
  buefy

bulma を使うので　bulma をを選んでエンター

? Use a custom test framework (Use arrow keys)
❯ none
  jest
  ava

特に使わないので、none でエンター

? Choose rendering mode (Use arrow keys)
❯ Universal
  Single Page App

Universal でエンター

? Choose a package manager yarn

yarn　を選んでエンター

2. firebase ホスティングの設定をしていく

hoge-appの中で firebase コマンドを打っていく

$ firebase init hosting

? What do you want to use as your public directory? (public)

dist と打ち込んでエンター

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

そのままenterキーを押す

3. コードを書く

2. コードを書く

index.vue

$ cat pages/index.vue
<template>
  <div>
    <myheader/>
     <section class="section">
     <div class="container">
      <div class="notification">
      <p class="subtitle is-3 is-spaced">
          打った瞬間にStartを<br>一塁を踏んだらStopを押して下さい。
      </p>
      <p class="subtitle is-3 is-spaced">{{time}}</p>
      <p class="title is-2 is-spaced">{{player}}の走力です</p>
      <div class="buttons">
        <span class="button is-success is-large" v-on:click="Start">Start</span>
        <span class="button is-info is-large" v-on:click="Stop">Stop</span>
        <span class="button is-danger is-large" v-on:click="Reset">Reset</span>
      </div>
      </div>
     </div>
  </section>
  </div>
</template>


<script>
import myheader from '~/components/myheader'

let id;
let isRunning=false;
let player_time=0.00;

export default {
  components: {
    myheader
  },
  data () {
    return {
      msg : 'Hello world',
      time :'00.000',
      player :"-",
      startBtn :'スタート',
      stopBtn :'ストップ',
      resetBtn :'リセット'
    }
  },
  methods: {
    clear(){
      this.msg = ''
    },

    Start: function(){
            this.player="-";
            if(isRunning === false){
                let vm = this;
                let startTime = Date.now();
                let count;

                count = function() {
                    let countup = Date.now() - startTime;
                    //console.log(countup);
                    player_time=countup;
                    let sec = Math.floor(countup % 60000 / 1000);
                    let msc = countup % 1000;

                    sec = ('0'  + sec).slice(-2);
                    msc = ('00' + msc).slice(-3);
                    vm.time = `${sec}.${msc}`;
                    id = setTimeout(count, 10);
                }
                count();
                isRunning = true;
            } // if (isRunning === false)
        },
        // Stopボタンを押したときの処理
        Stop: function() {
            if (isRunning === true) {
                clearTimeout(id);
                isRunning = false;
                //console.log(this.time);
                if (player_time <= 3750){
                    this.player = "横浜DeNAベイスターズ 宮本 秀明 並";
                } else if (player_time <= 3780){
                    this.player = "中日ドラゴンズ 京田　陽太 並";
                } else if (player_time <= 3800){
                    this.player = "広島東洋カープ 田中　広輔 並";
                } else if (player_time <= 3840){
                    this.player = "埼玉西武ライオンズ 源田　壮亮 並";
                } else if (player_time <= 3850) {
                    this.player = "埼玉西武ライオンズ 秋山　翔吾 並";
                } else if (player_time <= 3870){
                    this.player = "東京ヤクルトスワローズ　青木　宣親 並";
                } else if (player_time <= 3800){
                    this.player = "阪神タイガース 髙山　俊 並";
                } else if (player_time <= 3900) {
                    this.player = "阪神タイガース 糸原 並";
                } else if (player_time <= 3910){
                    this.player_time = "福岡ソフトバンクホークス　福田　秀平 並";
                } else if (player_time <= 3920){
                    this.player = "福岡ソフトバンクホークス　城所　龍磨 並";
                } else if (player_time <= 3940){
                    this.player = "読売ジャイアンツ　吉川　尚輝 並";
                } else if (player_time <= 3970){
                    this.player = "東北楽天ゴールデンイーグルス　岡島　豪郎 並";
                } else if (player_time <= 4000){
                    this.player = "福岡ソフトバンクホークス　柳田　悠岐 並";
                } else if (player_time <= 4030){
                    this.player = "広島東洋カープ　菊池　涼介 並";
                } else if (player_time <= 4040){
                    this.player = "中日ドラゴンズ　平田　良介 並";
                } else if (player_time <= 4060){
                    this.player = "阪神タイガース　中谷　将大 並";
                } else if (player_time <= 4090){
                    this.player = "読売ジャイアンツ　吉川　大幾 並";
                } else if (player_time <= 4016){
                    this.player = "北海道日本ハムファイターズ　近藤　健介 並";
                } else if (player_time <= 4019){
                    this.player = "北海道日本ハムファイターズ　清宮　幸太郎 並";
                } else if (player_time <= 4022){
                    this.player = "東京ヤクルトスワローズ　山田 哲人 並";
                } else if (player_time <= 4025){
                    this.player = "横浜DeNAベイスターズ　筒香　嘉智 並";
                } else if (player_time <= 4340){
                    this.player = "読売ジャイアンツ　陽　岱鋼 並";
                } else if (player_time <= 4440){
                    this.player = "北海道日本ハムファイターズ　中田　翔 並";
                } else if (player_time <= 4560){
                    this.player = "北海道日本ハムファイターズ　レアード 並";
                } else if (player_time < 4570){
                    this.player = "福岡ソフトバンクホークス　内川　聖一 並";
                } else if (player_time <= 4590){
                    this.player = "福岡ソフトバンクホークス　デスパイネ 並";
                } else if (player_time <= 4620){
                    this.player = "読売ジャイアンツ　岡本　和真 並";
                } else if (player_time <= 4720){
                    this.player = "広島東洋カープ　Ｘ．バティスタ 並";
                } else {
                    this.player = "オリックス・バファローズ　Ｃ．マレーロ 並";
                }
            }

        },

        // Resetボタンを押したときの処理
        Reset: function() {
            if (isRunning === false) {
                this.time = '00:00.000';
                this.player = "-";
            }
        }

  }
}
</script>

<style>


.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

myheader.vue

$ cat components/myheader.vue
<template>
  <section class="hero is-primary is-bold">
    <div class="hero-body">
      <h1 class="title is-size-2">
        走力チェッカー
      </h1>
      <h2 class="subtitle is-size-4">
        一塁到達タイムは誰並？
      </h2>
    </div>
  </section>
</template>

4. firebaseにdeployしてみる

distにgenerateする

$ pwd
/Users/hoge/Dev/hoge-pj/hoge-app
$ yarn run generate

firebase deploy コマンドを打ってdeploy

$ firebase deploy