イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです。ITトレンド・List Finderの開発をベースに、業務外での技術研究などもブログとして発信していってます!


このエントリーをはてなブックマークに追加

Vuejs とFirebase,Firestoreでサーバレスの麻雀成績管理(α版)AppをPWAで作ってみたお話。

こんばんはkoheです。
元雀荘店員エンジニアとして、最新技術を駆使し、サーバレスで麻雀成績管理Appを作る責務があるため作りました。

背景

雀荘に行くたびに、成績を紙で管理している人を多く見かける。 かくいう自分もアプリを使うより、紙を使ったほうが楽という理由で毎回紙を使って成績管理をしてしまっていた。
なぜか?
それは、アプリの入力において

  1. 入力箇所をタップ

  2. 数値を入力

  3. Enterをおす(キーボードを下げる)

という作業を4人分行わなくてはならない。
であるのであれば、雀卓を前にして雀士はその工数をかけることはしないだろう。

そこで

  1. スライダーによる⇡の3ステップを1ステップに短縮

  2. 自動点数計算機能による4人目の点数入力の省略

  3. 自動成績同期機能による、点数の確認作業の簡略化

の3機能をメインとした、使いやすさUI,UXを重視した成績管理アプリを作成する。 実際に私自身が使い、自己FBを繰り返し、より良いものにしていく。

機能要件

  • PWA

  • 麻雀の得点を記録できる

  • 得点の履歴が見れる

  • 3人の点数を入力した時点で残りの人の点数が自動で計算される

  • ログイン機能をつけ、アカウントにデータを紐付ける

  • 参加しているメンバーに点数を紐づけ、リアルタイムに更新する(β版で実装予定)

  • 三麻の成績も同様に管理する(β版で実装予定)

構成

デプロイ

Firebase Hosting

DB

Firestore

認証

Firebase Authentication

フロント

Vue

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

UI

Login

mahjong score01.png

Score

mahjong score02.png

MyPage(Score History)

mahjong score03.png

PWA

manifest json

{
  "name": "mahjong-point",
  "short_name": "MahjongScore",
  "icons": [
    {
      "src": "/static/img/icons/u-pin-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/img/icons/u-pin-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

まだ、HomeIconの登録設定くらいしかしていないため。
スコアはこんな感じ

mahjong score04.png

ある程度のメイン機能が完成し次第、サービスワーカーを使いオフライン対応をしていく。

Deploy

yarn build デコンパイルをしたあとに、

firebase deploy 一発で本番環境にデプロイすることができる。

mahjong score05.png

RollBackも超簡単であり、デプロイした瞬間に勝手に httpsになってくれる。 まさにいたせりつくせり。

自動入力

mahjong score00.gif

最後に

β版といえるところまでの機能を作り次第ドメインをとり、ローンチする予定です。 たくさんの FBをお待ちしております。 余裕があれば技術チュートリアルなどをnoteなどで書いていこうかなーとかも考えていたりします。

意見コメントがある方は