Help us understand the problem. What is going on with this article?

Nuxt.jsで草野球の走力測ってみるやで

概要

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

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

画面スクリーンショット

スクリーンショット 2019-03-06 23.29.14.png

じっさいのデモ: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 = "広島東洋カープ X.バティスタ 並";
                } else {
                    this.player = "オリックス・バファローズ C.マレーロ 並";
                }
            }

        },

        // 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
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした