ライブ配信用リアクションシステムの開発
配信によって全校に行事の熱量を届ける取り組みを続ける中で、「一方通行の映像」では盛り上がりが限られるという課題が浮かび上がった。特に教室で視聴している生徒たちのリアクションが会場に届かないことが、配信と会場の温度差を生んでいると感じた。
この課題に対する解決策として、視聴者である生徒がタブレットからリアクションを送信し、それをリアルタイムに会場のモニターへ表示する仕組みを構築した。仕組みの中核には、iPadから簡単に絵文字リアクションを送れるWebページと、それを集計・表示する仕組みがある。
システム構成
入力（リアクション送信）
- 生徒はiPadからリアクションページにアクセス
Googleフォームをカスタマイズし、1タップで即時送信可能なUIを実装- 現在はWebSocketで実装
集計・データ処理
Googleフォームの送信内容はGoogleスプレッドシートにリアルタイムで蓄積Google Apps Script（GAS）を用いて、スプレッドシートのデータをJSON形式で公開- WebSocket通信に置き換えて軽量化
出力（リアクション表示）
表示用Webページで、JSONデータをfetchして5秒ごとに新規リアクションを取得- WebSocketで受信次第描画
- 絵文字をアニメーションとして画面下から上にランダムな位置・速度で流す
表示合成
- OBSに表示用Webページを読み込み、カスタムCSSで背景を透過
- Zoomのマルチビュー映像とリアクション表示を合成し、会場モニターに出力
導入結果
3時間のオープニングとエンディングの中で、800人の生徒から総計51万件のリアクションが送られた。
導入にあたっては、使用する絵文字の選定や、いたずら対策も含めてUIとシステムの設計に配慮した。また、実施後アンケートなどを通じて得られたフィードバックから、今後はコメント機能の導入や、各教室への表示反映、行事ごとの応用（体育祭での応援ボタンなど）といった改善・発展の可能性も見えてきた。
リアクションの多さはそのまま生徒の熱量を可視化する指標となり、行事の盛り上がりを共有するための強力なツールになると感じた。特に、全校生徒が関わる文化祭での本格導入を通じて、企画・制作・運用のすべてを自分たちの手で行ったことは、技術面でも企画運営面でも大きな学びとなった経験である。今後さらに規模の大きな配信にも対応できるよう、WebSocketの活用やGPU負荷の最適化といった技術面での改善も視野に入れている。
デモ
以下のボタンから実際の挙動を試すことができます。現在は自宅に立てたWebSocetサーバーを経由して通信しています。
送信側
受信側
おまけ
別組織(情報処理部)では文化祭のOPムービー制作を担当した。ここまでで紹介したリアクションシステムを題材にして、部の後輩と共同でCGを多用した映像制作をした。
