学園祭で謎解きゲームを作ったら死ぬかと思った話(仮)
軽い自己紹介
初めましての方は初めまして。会津大学で学部一年生をやっています。しゃけのきりみ。と申します。
「。」までを含めて私の名前となっておりますので、お見知りおきください。
現在は、Google Developer Groups on Campus AizuのOrganizerをやらせていただいています。
では、本題です。
何をした？
表題の通り、と言ってしまえばそのままですが、弊学の学園祭である「蒼翔祭」で、謎解きゲームを行い、そこで使用したデジタルシステムを１人で開発しました。
企画名は「Save the UoA」、コンセプトは「会津大学に何者かがハッキングを行った。15分以内に謎を解き切らなければ、会津大学のデータは削除されてしまう。君の手で、会津大学を救え。」でした。
技術スタック
まずは技術スタック、もとい選定の過程も含めて書いていきます。
使用したのは以下です。
- Electron + Vite
- React + Chakra UI(V2)
- Express.js
- SQLite
お気づきの通り、Googleにほとんど、いや、なんら関係がありません。許して。
まず、このシステムはクラウドサービス始めとした、インターネットへの公開物はありません。
なぜか。インターネットに公開すると弊学の某サークルに問題が流出する可能性があったからです。
弊学には、コードを書くことが三度の飯よりも好きなのではないかと思うほど技術が好きな方々が集まったサークルがあります。彼らは誰かがサービスを公開すると、すぐにCTFしてくる習性があるようで、私も１度被害に遭いました。
そんな経緯から、その穴を塞ぐ努力をするよりもローカルで完結させた方がいわゆる「タイパ」が良いと判断しました。
そんなわけで、当日は Ubuntu Server 22.04をインストールしたFujitsu Primergy TX1310 M1を会場内に設置し、運営用のWi-Fiを発射、という方法を取りました。
技術構成
今回作成したのは、主に4つです。
- サーバー(stuoa-server)
技術的にはexpress.jsを使用し、その上にsqlite3のDBと後述するPDF生成にhummusを使用しました。後ろ２つのUIが載っているのと、APIサーバーを兼ねています。 - クライアント(stuoa-client)
プレイヤーが主に使用する、出題・解答アプリケーションです。
技術的にはElectron+Vite+Reactで動いています。
運用自体はWindows PCにモニターを3枚接続しました。 - 管理UI(stuoa-adminui)
スタッフが、開始登録や成功証明書の発行に使用するためのWebページです。
React(create-react-app)で作成、stuoa-serverにビルドしたものを置きました。 - モバイルUI(stuoa-mobileui)
後述する専用のデバイスで、スムーズな受付を実現するために作成したモバイル用受付UIです。
React+Viteで作成、stuoa-serverにビルドしたものを置きました。
運営形態
Save the UoAは、クライアントとサーバーに分けられたシステムで、サーバー側にオープニング動画や謎の問題画像などを保存し、それをAPI経由でクライアントがfetchする、という形を取りました。
クライアントの画面がこんな感じです。
上の画像はスタンバイ中の画面ですが、実際は
- 右側に残り時間や正解・不正解などの情報を表示
- 左側に問題を表示
- 中央のタッチディスプレイで回答を送信
こんな感じです。
開発
まずはサーバーから
本システムの作成当初から、その場での問題変更や難易度変更などの可能性があることから、サーバー依存のアプリケーションにすることは決めていたので、サーバーから開発を始めました。
APIを書くに当たり、以下の点が必要となったのですが....
- ランダムな出題ができ、1度出た問題は二度と出ないこと
- ルームを3つ用意し、それらは別々で同時に動作できること
Discussion