クラスの席替えをオンラインゲームのように - Seat Stealer

背景

• 高校生の頃、面倒で退屈な席替えをもっと楽しくできないかと思って始めたサイドプロジェクト
• 生徒が自分の端末から直接参加し、希望する席を奪い合う企画
• 当時は生徒リストもハードコーディングされ、コードも完全にスパゲッティ状態だったが、それでもそれらしい成果物ができていた
• 担任の先生に許可をもらって初めて実演した日のことは忘れられない。反応は非常に熱く、プロジェクトは1年を通して使われることになった

リビルド

• 卒業後、学校から連絡が来た。このプログラムを今のクラスに合わせて修正してほしいという依頼だった。
• しかしコードはあまりにも複雑に絡み合っており、生徒リストと座席配置がハードコーディングされていたため、保守可能なプロジェクトにするべくリビルドを決意した
• 構成
  • バックエンド: 生徒データはすべてクライアント側で処理するため、バックエンドはデータを渡すだけの一種の「ゲームサーバー」として機能する
    • Node.JS
    • Socket.IO
  • フロントエンド - 管理者: 生徒データをすべて管理し、ゲームの進行全体を統括する。この画面はTVに映し出される環境を前提に設計した
    • SvelteKit
    • Socket.IO
  • フロントエンド - 生徒: バックエンドを経由して管理者と接続し、データをやり取りする
    • SvelteKit
    • Socket.IO
• 席配置と生徒リストを簡単に修正できるよう、使いやすいUIのエディタを導入した

シナリオ

1. 管理者ページで「オンライン席替え」を開始し、生徒データファイルをアップロードすると、新しい「ルーム」が作成され、生徒が接続できるQRコードが表示される
2. 生徒はそれぞれの端末でQRコードをスキャンしてゲームに接続。管理者ページでは生徒の接続状況の確認と管理が可能
3. 管理者ページでゲームを開始すると、生徒ページに「席選択」画面が表示される。希望する席に投票すると、その内容が管理者ページに記録される
4. すべての生徒が投票を完了すると、管理者ページで結果を表示する
5. 投票した席が重なった生徒同士で、その場で簡単なゲームを行う
   • じゃんけん、サイコロ、ミニゲームなど。先生の裁量に任される
6. ゲームに勝利した生徒がその席を獲得する
7. すべての生徒の席が決まるまで繰り返す

所感

• 生徒データが収集・活用されないことを透明に示すため、プロジェクトをオープンソース化した
• 学校で実行されることを前提としているため、さまざまな例外状況にすべて対応できるよう設計するのが最も難しかった
  • 生徒がゲームの途中で切断された場合は再接続を試み、失敗しても再ログイン時に続きから進められる
  • 生徒が欠席している場合でも、参加しなくてもゲームを進行できる
  • 生徒が遅刻した場合でも、ゲーム途中で接続して進行できる
  • 他の生徒になりすます場合は、強制退出させることができる
• さまざまな学級でも使えるよう、わかりやすい利用マニュアルを作成してYouTubeに掲載した
  • https://youtu.be/C4ezwIrIfjc
• まだ休暇シーズンでプロジェクトの結果を見られていないため、これまで一度も待ち遠しいと思ったことのなかった春学期を楽しみにするきっかけになった
• 周りに教師の方がいれば、ぜひ共有していただけるとうれしいです。ありがとうございます。

[seoulrain]

Chromeでは、生徒名を追加してもカウントが増えませんね。

[2147483647]

全員の名前を書くのが面倒なこともあるので、番号だけに変更できるといいですね

[joon14]

かわいいですね（笑）
細かな修正ポイントは見受けられますが、周りの先生にも共有してみます

[geeksk553]

面白いアイデアですね！