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

6317 ワード
Firebase PWA 個人開発 Vue.js Webサービス Vue.js テキストリンク

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

背景

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

機能要件

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

期間

2~3ヶ月位

作ったもの

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

・ログイン画面

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

・成績入力画面

・MyPage

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

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

PWA


PWA対応をすると↑のようにHome画面に追加する旨を聞いてくれるようになる。
まだオフライン対応やServiceWorkerなどの活用はしていないがそれは後々していく予定。
また、PWAにすることによりアプリのインストールの手間を省き、成績のシェア、複数のスマホでの確認を容易にする。

三麻（秋刀魚）に切替可能！


Vueの双方向バインドが便利すぎて、この実装も変数を変えるだけで簡単にできた。

自動入力

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

成績シェア＆リアルタイム更新

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

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

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

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

こだわり！


成績入力にミスがあると（１レコードのサムが０じゃない場合） 赤く お知らせ！！


いい感じの履歴削除:)

デプロイ

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

最後に

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

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

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