みんなの「作ってみた」
Nuxt.jsで草野球の走力測ってみるやで
2019/03/06
kusa89oji
概要
どうも草野球おじさんです。
おじさんになると、走力の衰えを感じます。
そこで 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