Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@kusa89oji(おじさん 草野球)

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

Last updated at Posted at 2019-03-06

概要

どうも草野球おじさんです。
おじさんになると、走力の衰えを感じます。
そこで 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 = "広島東洋カープ　Ｘ．バティスタ 並";
                } 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
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?