サーモンランの結果を手動で記録できるWebアプリを作った件
はじめに
サーモンランの結果を手動で入力することで記録を残したり簡単な統計とかが見られるアプリを作りました。
動機
スプラトゥーン2のCoopモード「サーモンラン」みなさんやってますか。私はたまにやってます。楽しいのでみなさんもやりましょう。
ところでこのサーモンラン、スプラトゥーン2の公式アプリ「イカリング2」で実績が見られません。アオリちゃんのセリフから実績の集計はしているようなのですが、勝率とかどれくらい貢献したかとか手軽に見たいですよね。見たくない？
同じように思っていた人がいたみたいで、手動でメモを取って統計が見られるiOSアプリがありました。……Android版はないんですか？ ないなら作るぜー今なら作れる気がするぜー、ということでWebアプリとして作ってみました。
Salmon-Logについて
Salmon-Logはサーモンランの結果を手動で入力することで結果を後から見返したり、勝率やどこで落ちたか等の簡単な統計？を確認できるアプリです。ついでにトップページでバイトスケジュールも確認できます。
スケジュールを表示
実績を表示
過去のバイトを確認
結果は手動で頑張って入力
調整中だけどモバイル（タブレット含む）表示も対応
プレイしながらの手動入力は結構大変なのが課題です。Waveごとのジャンプ中にブキと潮の高さ・Waveの種類（特殊Wave等）を入力、リザルト画面で各Waveごとの納品数・最終結果を入力、とかなり忙しいです。スクリーンショットを取っておいて後で入力がおすすめです。
技術的な話
ここからは何を使ってどうやって作ったかという話になるので興味がある方だけ読んでください。
開発環境はVagrantでUbuntuを立ち上げてvue-cli、ホスト側でVS Codeで記述する形です。フロントエンドはVue.js＋Buefy、バックエンドはSpla2 API（バイトスケジュールや過去バイト情報）とfirebase（ログイン、DB、ホスティング）です。どれもほぼ初めて使う技術だったので、有識者向けというより初級者がどのようにしてアプリを作り上げたかみたいな話をしたいと思います。
開発環境
N予備校のプログラミング入門で作った開発環境をそのまま使っています。N予備校のプログラミング入門は開発環境を作ったり簡単なWebアプリを作ってHerokuに公開したりテストを書いたりして、課題をGitHubでフォークしてきてプルリクすることで提出したり、非常に楽しかったです。恥ずかしながらGitHubでプルリクしたのもHeroku等を使って個人的にデプロイしたのもこれが初めてでした。
入門だけでも結構ボリュームがありましたが、これが終わっても大規模開発やスマホアプリ開発、機械学習の授業もあったりして面白そうなので今年の初め頃から継続して月1000円課金しています。
vue-cliはVue.jsのプロジェクトのボイラープレートを作ってくれる便利なやつです。Webpackについてはあまり明るくありませんがデフォルトでも十分使えるので重宝しています。
npm run devとコマンドを打つことで開発用のサーバを立ててローカルで確認できるようになりますが、Vagrantで使う際にいくつか注意点がありました。
Vagrantで立てたサーバにアクセスする
->Vagrantのport forwardingを利用する。 qiita.com
N予備校で作った環境はポート8000に設定していたので、環境変数PORTに8000を指定する（PORT=80000 npm run devとする）ことでホスト側からlocalhost:8000にアクセスして確認ができました。
Hot Reloadが効かない
->ポーリングを有効にする。 qiita.com
上記をそのまま利用するとCPUをものすごく食われたので以下のようにポーリング間隔と無視するディレクトリの設定をしました。
poll: 5000, pollIgnored: /node_modules/,
フロントエンド
Vue.jsは3月中旬頃に勉強を始めました。
学習に役に立ったのはこちらの動画群です。
動画を見ながら写経をすると、Vue.jsで何ができてどういう意図でコードを書いたかが学べました。動画は英語ですが字幕の自動翻訳を使うと雰囲気で理解できるのでオススメです。この動画を終える頃には簡単なアプリ（単純なコンポーネントやディレクティブで書けるアプリ）なら空で書けるようになりました。
今回はVuexは利用していません。理由はVue.jsの本来のデータのやり取りに慣れておきたい、上記の動画で簡単なStoreパターンを書く講座がありまずは自前で書いてみたい、等です。実際Storeパターンについては書いていてこれでいいのか自信がない箇所でした。今後このアプリにVuexを導入してみることで、その利点等を噛みしめていきたいと考えています。
BuefyはCSSフレームワークのBulmaをVue.js用にwrapしたプラグインです。CSSに時間をかけたくなかったのでフレームワークを導入しました。Bulmaを直接入れてもよかったのですが、インストールに時間を取られるのもなーということで素直にVue用のプラグインをインストールすることにしました。
Buefy（Bulma）の使い方については公式のドキュメントを見ながらコツコツ作りました。こちらも英語ですが、ドキュメント上にさわれるサンプルがあるので雑に作る分には全く問題ありませんでした。Bulmaはタブレット含むモバイルにも対応するレスポンシブなグリッドを簡単に書けてちょうど良かったです。
Buefyの導入で1つだけ詰まった点がありました。私の環境だと、ドキュメントの通りに導入するとSCSSのコンパイルが失敗しました。イカのIssuesのようにパスを書き直すことで解決できました。
バックエンド
サーモンランの情報はSpla2 APIを利用することで簡単にJSONという気味の悪いデータ（時事ネタ）が取得できました。
バックエンドにはFirebaseを利用しました。
サーモンランの記録アプリを作るのにログイン機能とDBが必要になり、以前からログイン機能を作るならFirebaseを利用してみようと考えていたためです。ちなみに余談ですがN予備校のプログラミング入門にはExpress.jsを使ってログイン機能を実装したりDBを利用したりする講座があります。どのような脅威があって脆弱性をつぶすにはどうすれば良いかなども学べるのでオススメです。でも今回はFirebaseを使って楽をしました。
実際Firebaseの導入は非常に簡単で、公式のドキュメントを見てすぐに利用できました。あっという間にログイン機能が実装できてしまいました。
Add Firebase to your JavaScript Project | Firebase
ちょっと余談ですが、Twitterの認証にはTwitterでアプリのAPIキー等を取得する必要があり、これにはSMSが利用できる電話番号が必要です。当時はIP電話の番号しかもっておらず、現在のデータSIMをSMSプランに変えようにも結構時間がかかるなと思ったので、新たに「0 SIM」のSMSプランを契約しました。これで月額150円でSMSが使えます。Webで契約してから3日ほどでSIMが届きました。早い。
DBにFirebaseのRealtime Databaseを利用するかはちょっと迷いましたが、大っぴらに告知する気がなかったのでそのまま利用することにしました。Realtime Databaseは基本的に常時繋ぎっぱなしで明示的に切断するAPIが（たぶん）無く、無料のプランでは同時接続数100人が上限のため注意が必要です。Cloud Firestoreの方はベータ版とのことで念のため避けてみましたが、やることが無くなったらブランチ切って試してみたいと考えています。
Realtime Databaseにはルールが記述でき、UIDの一致で読み書きの権限を設定できるのでセキュリティ的にも問題なさそうです。……と特に調べもしないで思ったのですが、不安なのでちょっと調べます。
追記
Firebase Hostingは以下を参考にしたら一瞬でホスティングできました。
追記2
GitHubに上げました。
今後の展望？
- 全ユーザの統計や別日のバイトを跨ぐ統計等に対応していません
- 頑張ってしっかりバックエンドを作らなくても、定期的にFirebaseにAdminでアクセスして計算して統計をDBに登録するだけみたいなやり方で全体の統計が計算できそうなので検討します
- スクリーンショットを取って後から入力することをオススメしましたが、Switchのホーム画面に戻るたびにサーモンランの接続が切れて（フレンドマッチなら必然的に）部屋を立て直す必要があるデメリットがあり、どうにかしたいです
- 音声入力とか、Webカメラで画面を撮って自動入力みたいなのができると面白そうですが調べるところからなので時間がかかりそうです
- かなり雑に書いたのでまだ上げていませんが、GitHubにコードを公開する予定です
- テストフレームワークも入れてるくせにテストコード全然書いてないので書きたい……
