【Vue.js,Firebase】麻雀好きのエンジニアによる麻雀好きのためのサーバレスな麻雀成績管理PWAアプリをリリースした【個人開発】

**今までにない麻雀成績管理アプリ**をリリースしました！

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://t.co/jjpEyVcSHh">https://t.co/jjpEyVcSHh</a><br><br>麻雀の成績管理アプリローンチしました！<br>全ての麻雀好きのためになりますように！</p>&mdash; kooooohe@旅人 (@kooooohe_) <a href="https://twitter.com/kooooohe_/status/1059473277515554817?ref_src=twsrc%5Etfw">2018年11月5日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



#背景
雀荘に行くたびに麻雀の成績をほとんどの人が紙で書いている
かくいう私もアプリを数個入れていたが、結局紙に成績をつけてしまっていた...
紙のUI,UXにアプリが勝てていないのか？
元雀荘店員エンジニアとして、最新技術を駆使し、麻雀成績管理Appを作ることが私の**責務**である

#機能要件
- PWA
- 麻雀の得点を記録できる
- 得点の履歴が見れる
- 3人の点数を入力した時点で残りの人の点数が**自動で計算**される
- ログイン機能をつけ、アカウントにデータを紐付ける
- 参加しているメンバーに点数を紐づけ、**リアルタイム**に更新する
- 三麻の成績も同様に管理する

#期間
2~3ヶ月位

#作ったもの
URL: https://mahjong-score.fun
※PC用には作っていないので、スマホで見てください。


・ログイン画面

<img src="https://qiita-image-store.s3.amazonaws.com/0/149791/1ff9982b-8e04-5edf-9515-870b2504546d.png" width=50% >

GoogleAuthと匿名認証の２つを実装。
両方共Firebaseの機能を使えば簡単に実装ができる。


・成績入力画面
<img src="https://qiita-image-store.s3.amazonaws.com/0/149791/4dd19fd8-4a4a-2bec-fb32-ffd439b6abb4.png" width=50%>

・MyPage
<img src="https://qiita-image-store.s3.amazonaws.com/0/149791/6c9f02cd-5ad0-ff79-3d5f-e5b824d01350.png" width=50%>


#構成など
|  |  |
|---|---|
|デプロイ  |Firebase Hosting  |
|DB  |Firestore  |
|認証  |Firebase Authentication |
|フロント  |Vue Vuex |

UIのライブラリとして https://quasar-framework.org/ を使用。
Icons https://fontawesome.com/

#PWA
<img src="https://qiita-image-store.s3.amazonaws.com/0/149791/1db4c733-f242-748a-565a-2d68a8a4769a.png" width=50%>
PWA対応をすると↑のようにHome画面に追加する旨を聞いてくれるようになる。
まだオフライン対応やServiceWorkerなどの活用はしていないがそれは後々していく予定。
また、PWAにすることによりアプリのインストールの手間を省き、成績のシェア、複数のスマホでの確認を容易にする。

#三麻（秋刀魚）に切替可能！
![Oct-12-2018 19-16-22.gif](https://qiita-image-store.s3.amazonaws.com/0/149791/e4ccaeda-ad14-2f8d-b70d-e7da713bf19f.gif)
Vueの双方向バインドが便利すぎて、この実装も変数を変えるだけで簡単にできた。

#自動入力
![Oct-12-2018 19-29-05.gif](https://qiita-image-store.s3.amazonaws.com/0/149791/c1d10dff-27fb-9220-01bb-c697710a7a62.gif)

麻雀はゼロサム・ゲームなので、残り１人以外の点数が入力された段階で自動的に点数を計算し入力する

#成績シェア＆リアルタイム更新
![Oct-12-2018 20-01-00.gif](https://qiita-image-store.s3.amazonaws.com/0/149791/9272a830-de65-4058-9d2a-60c0d206481d.gif)

左上のシェアボタンをクリックすることにより、同じ部屋に入れるリンクを発行する

Firestoreの機能を使い、データの状況を監視し、リアルタイムに全員の成績を更新することができる

Firestoreはもともと関数を用意してくれているので↓のように、非常に簡単にリアルタイム同期が実装できる。


```javascript
db.collection("cities").doc("SF")
    .onSnapshot(function(doc) {
        console.log("Current data: ", doc.data());
    });
```
※公式より
https://firebase.google.com/docs/firestore/query-data/listen?hl=ja

#こだわり！


![Nov-07-2018 18-38-10.gif](https://qiita-image-store.s3.amazonaws.com/0/149791/26613006-66bf-b5e4-013d-7dbff151906e.gif)
成績入力にミスがあると（１レコードのサムが０じゃない場合） **赤く** お知らせ！！

![Nov-07-2018 18-40-23.gif](https://qiita-image-store.s3.amazonaws.com/0/149791/c3edd505-e1c5-0fdb-75ee-78d5d6c656de.gif)
いい感じの履歴削除:)

#デプロイ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/149791/c29fadbd-7967-2b50-a431-fd39717e6af2.png)

`firebase deploy` コマンドを打つだけで、サイトを更新できる。
めちゃくちゃ便利。
それにロールバックも画像のようにボタンひとつででき、
`https`にもなってくれる、まさにいたせりつくせり。

#最後に
麻雀好きな皆さんぜひ使っていただいてフィードバックを貰えると嬉しいです！
どんどん機能改善していき、より麻雀業界に貢献できるように！

コメントなどはTwitterやQiitaコメントからいただけると
https://twitter.com/kooooohe_

詳細は随時更新していこうと思います