オリジナルビンゴの作成 その1
オリジナルビンゴ、オリジンゴを作成
ビンゴってめっちゃ楽しくないですか？
新歓、同窓会、結婚式、送別会などいろんなところでビンゴをやったことがあると思います。
そんな楽しいビンゴですが、毎回数字だけなのは少し残念な気がしてます。
なので参加者の名前や顔でビンゴできるものがあれば、もっと盛り上がるのでは？と思い、オリジナルビンゴのオリジンゴを作成して見ようと思いました。
最終目標は人の画像や名前ですが、初めに普通のビンゴから作成して、徐々に機能を追加していく予定です。
とりあえず、普通のビンゴの作成からスタート。
使用技術
Next.js(15系)
Supabase
Next.jsを使った理由は
・TypeScriptが標準で使える
・ルーティング管理が楽
・Vercelにそのままデプロイできる
という理由で個人開発で無駄に悩まない選択肢でした。
Supabase
・リアルタイム通信が勝手にできる
という理由です。
ビンゴみたいに「抽選番号を全員で共有したい」シーンでは、
普通ならWebSocketサーバーやPusherなどを自前で用意する必要がありますが、Supabaseならデータベースの更新を購読するだけで済むので楽だった。
今回はガッツリ作り込むより、速さを優先したかったのでサーバーレスで完結できる構成にしました。
まとめるとサーバーレス・リアルタイム・コストゼロ・最速リリースができる構成です。
実際の機能
・ビンゴを引く親のルーム作成
・QRコード＆合言葉で子参加
・数字ビンゴの抽選＋リアルタイム同期
・ゲーム終了の検知と子画面通知
・途中参加・復帰にも対応
まずビンゴを引く人(親)がルームの作成。
穴を開ける子はQRコードを読み込んで参加か、合言葉を入力して参加。
親側でビンゴの番号を抽選するとリアルタイムで、子のビンゴカードに反映される
ビンゴになれば自動判定をして、親側でビンゴが終了すれば、子側でも終了の通知
途中参加の人はこれまでの番号を取得して穴を開ける処理
ハマったポイント
子画面で画面復帰時の同期問題
子画面でビンゴカードの画面から別アプリを開き、戻ってきた場合、抽選された番号がリアルタイム同期されておらず抽選された番号とズレが生じた。
これはSupabase Realtimeは「画面開いてる間」しか機能しないみたい。
visibilitychangeイベントを使って、画面がアクティブになった瞬間にSupabaseからもう一度全番号をSELECTして追いつく実装を追加。
リロードでビンゴカードが再抽選
認証機能など入れていないので、ビンゴカード画面(子画面)で画面を再読み込みすると新しいビンゴカードが再作成される。
ビンゴの途中で行うと、ビンゴしたカードを手に入れることが可能→不正ができた
ビンゴカードをlocalStorageに保存しておき、localStorageにデータあればそちらを使用するように修正
その他にもマイグレーションの失敗などもありました。。
今後について
今回はただの普通のビンゴまでの処理を作成しました。
これからオリジナルビンゴの核となる、ユーザーが好きなビンゴを作成できるように、画像や文字を入れる機能を作っていく予定です。
その場合、認証機能などセキュリティ関連も重要になっていくので注意しながら進めていきたい。
Discussion