【完全無料】オンラインビンゴサイトを作りました！

春ハッカソン7班です。僕たちの班ではオンラインで遊べるビンゴを作成しました。

既存のオンラインビンゴサービスの中には月額5000円ほどかかるものもあり、traPでも忘年会で利用するために課金したことがあります。
デジタル創作サークルがビンゴに5000円も払うなんて！ということで開発に取り組みました。

作ったものの紹介

改めて、僕たちの班では、サークルのメンバーみんなが遊べるオンラインビンゴを作りました。忘年会のような、大勢が集まる場面で遊ぶことを想定しています。

参加者は、主催者から渡されたURLを開くことで、ビンゴカードが表示されます。ビンゴカードは、ゲームの進行に合わせて自動で更新されていきます。

また、画面の右側（スマホでは下側）では、他の参加者とのチャットを楽しむこともできます。

ゲームの主催者は、「表示用画面」をプロジェクターやモニターなどに映します。「表示用画面」には、数の抽選の様子や、これまでに出た数の一覧、参加者のチャットなどが表示されます。

また、リモコン用のURLにアクセスすると、抽選の開始・終了や参加用QRコードの表示・非表示といった制御を行えます。スマートフォンでも操作しやすいように作られているので、参加者にボタンを押してもらう、といった使い方も可能です。

管理用画面では、タイトルや管理者を変更したり、各種画面のURLをコピーしたり、といった操作も行うことができます。

開発について

チーム内で使用するツールのバージョンをそろえるためにmiseを利用しました。
traPではmiseを導入する事例がちらほら見られたのでちょうどよい機会でした。
複数のツールのバージョンを簡単に統一できて便利でした。

フロントエンド

フロントエンドは講習会でも扱っているVue.jsとUIライブラリとしてNuxt UIを採用しました。
フロントエンドチームはmumumu,rurun,HokubuRailway,kurosakiの4人で開発を進めました。

コンポーネントの作成では、kurosaki君にビンゴカードや抽選された球の表示を、HokubuRailway君にチャット欄を担当してもらいました。2人ともお願いした機能をしっかりと形にしてくれて、とても助かりました。

表示画面のUIについて、深夜までチームで相談しながら作りこみました。その結果良い画面に仕上げられたと思います。

バックエンドと並行して開発を進めるためMSWを使ったモックAPIも用意しました。
WebSocketのイベントも再現し、ゲームの開始や抽選、リーチ、ビンゴ、チャットなどの動作をバックエンドの完成を待たずにフロントエンドで確認できるようにしました。

開発で難しかったのはWebSocketで送られてくる情報の扱いです。
ゲーム開始、抽選開始、抽選終了、ゲーム終了など、イベントに応じて画面のさまざまな状態を更新する必要がありました。
WebSocketで送られてくる情報はPiniaに集約し扱いやすいようにしたつもりでしたが、それでも仕様を十分に理解できていなかったこともあり試遊会の直前までバグと格闘していました。

また、ビンゴを盛り上げるための演出にも力を入れました。抽選中に数字を高速で切り替えながらドラムロールを流し、抽選結果が決まるとシンバルを鳴らす演出を追加しました。また、ゲーム開始時やビンゴ発生時のカットイン、ビンゴしたときに花火を表示する演出なども実装しています。
しかし二日間で満足のいくところまで作りこむことは難しく、まだ改善の余地があると感じています。忘年会で楽しく使えるためにもさらに改善していきたいです。

フロントエンドは直前まで修正が続きましたが、最終的に試遊会では多くの人に遊んでもらうことができました。

バックエンド

traPの標準的な技術選定に合わせて言語はGoを採用し、フレームワークとしてEcho v5を採用しました。またフロントエンドにゲームのイベントを伝えるためにWebSocketを利用しました。

バックエンドチームはhoward127とkuraoの二人で、WebSocketの接続やメッセージの配信、データベースに関連する部分はhoward127、それ以外のゲームのロジックやエンドポイントの実装はkuraoが担当しました。
実装は概ね計画通りに進行し、一日目にゲームのロジックに関わらないルーム作成のエンドポイントなどを実装し、二日目にゲームのロジックに関わるエンドポイントやWebSocket関連を一気に実装しました。
二人ともGoの経験があまり無く、一部良くなさそうなコードを書いてしまいましたが動いたので妥協することにしました。

コードのレビューにはGitHub Copilotが大活躍しました。PRのたびにコードのタイポや見落としを大量に発見してくれてこれが無かったらあと30個ぐらいバグを埋め込んでいたと思います。文明の利器に感謝。

途中でフロントエンドチームから謎の仕様変更を要求されたりWebSocketがバグったりなどトラブルは何回か発生しましたが変更されたゲームロジックの実装を後回しにしていたり、偶然手元にあったGPT-5.5 xhigh fastを働かせたりしたので事なきを得ました。

感想

mumumu

リーダーとフロントエンドを担当しました。
やりたいことが思ったより複雑で作業量も多く、特にフロントエンドは最終日にかなりてんやわんやしてしまいました。毎年恒例ですね（笑）
初日が台風でオンライン開催になってしまったのは本当に残念でしたが、準備期間に集まって案出しをしたり、設計を考えたりと、がっつり同期的にチーム開発ができて、すごく楽しかったです。
普段のWeb開発では自分たちが作ったサービスで多くの人で盛り上がっている様子を見る機会はあまりないため、ビンゴで楽しんでもらっている様子を見ることができたのがとてもよかったです。
リーダーとしては、いろいろ至らないところもあったと思いますが、チームメイトにたくさん助けてもらってなんとか形にできました。
今後は忘年会などでも使えるように、もっと遊びやすく改善していきたいです！
チームメイトと運営の皆さんに感謝です！！

kurao

バックエンドを担当しました．
自分はアプリケーション開発の経験は全くと言っていいほど無く，自分でも開発ができるのかと少し不安なところもありました．
ただ，当日のhowardさんとのペアプロ含め，先輩方のフォローもあって2日間でバックエンド力が相当ついた気がします．
めっちゃ楽しい2日間でした！フロントエンドの方も楽しそうだったので次の春墓はフロントで出てみようかな〜

rurun

フロントエンドを担当しました。
30時間という短い時間の中で、無事動くようになり、みんなに遊んでもらえてよかったです。ハッカソンは何よりも完成することが大事。やりたかったことの全部が実現したわけではないけど、7割くらいはできたかなと思っています。僕のお願いをいろいろと聞いてくださったリーダーのmumumuさんはじめ、メンバーみんなが活躍した結果だと思います。
実用に耐えるようにするにはもうちょっと調整が必要なので、今後も改善を重ね、みんなに永く遊んでもらえるようにしていきたいです。
来年はリーダーやってみたいな。もっと精進します。

HokubuRailway

主にフロントエンドを担当しました。
Vue をあまり使ったことがなかったため，やや手間取った部分もありましたが，無事動作したので結果オーライ。
チームでの開発は長いことやっていなかったので，久しぶりの経験でしたが，良い雰囲気で完走できたことは，とてもよかったと思います。
今回は準備 1 週間，開発 2 日間という短い期間でも，これだけのことができたのは，自分でも意外であり，また素晴らしい成果でもあります。
とにかく，有意義な 2 日間でした。

kurosaki

フロントエンドを担当しました。
Webに関わることをほとんどやったことがなく、ハッカソン経験も今回が初めてで右も左もわからずといった感じだったのですが、ある程度形になるものを作れたので本当に安堵の気持ちでいっぱいです。
そんな中mumumuさんは自分のレベルでもかなり頑張ればやりこなせるようなタスクを一つずつ割り当ててくださって、完全なビギナーから大きく成長できて本当にありがたかったです。
チームでの設計もどんな順序と役割分担で行えばよいかを知ることができ、実践に移せるレベルではないものの自分の身になったので貴重な経験ができてよかったと思います。
自分は動くものが作れただけでも満足してしまったのですが先輩方（主にフロントエンド）は実用に耐えうるレベルを目指していて、自分もフロントエンドに関わるなら、質に妥協しない飽くなき探求心を見習いたいなと思いました。

howard127

バックエンドの細々としたところを担当しました。
新入生のkurao君と二人でバックエンドを担当することになったのですが、kurao君がほとんどすべてのエンドポイントを実装してくれたので結果的にイベントの配信と永続化だけ書いて後ろでずっと見守っている人と化してました。
思っていたより時間が余らなかったので、当初はもっと複雑なものを作る予定だったところ、前日に機能を大幅に削る決断ができたのは英断だったと思います。
春墓は完成させれた班が一番偉い。