腐食杯システム制作

2月7日に開催された腐食杯。ゲームルールが新しくなったことはもちろん、バックエンドで動作するシステムにも大幅なアップデートを施し、過去の非公式大会コンテンツには存在していないシステムの導入に成功しました。

公式サイト制作
大会進行状況をリアルタイムでHPに掲載するシステム
集計システムと配信ソフトの連携システム

の制作を行いました。 Antigravityによるバイブコーディングを活用し、非常に高速なシステム構築を実現しました。

1. 公式サイト制作

既存のプロセカ非公式大会には見られない、公式HPを制作しました。これにより、大会関連情報を1つの場所に集約することができ、アクセスするだけで最新情報を入手できる情報のハブとしての価値を提供。開発にはAstro+CoudFlare Pagesを利用し、サーバーレスかつ安全な外部公開を実現しました。公式HP

同公式サイトでは、

出演者情報
大会ルール
大会規約
選手・主催の成績(後述)

を掲載しています。

2. リアルタイムHP掲載システム

リアルタイムHP掲載システムは、選手および主催のリザルトを、本番中にリアルタイムで公式HPに掲載するために開発されたシステムです。 3.に掲載している集計配信連携システム、4.運営ショートカットと併せて、一つのサーバーを経由して動作しました。

【技術スタック】

VPS…XServer Free
仮想化基盤…Docker-compose
API…Node.js
フロントエンド…Vite+React
外部公開…CloudFlare Tunnel

システム内容

リアルタイムHP掲載システムでは、

集計情報を記録するGoogleスプレッドシート上で、GASを利用して公式サイト送信用の.jsonを合成・保存する
保存した.jsonを、GASを利用しAPIへPOSTする
システムが.jsonを受け取る
公式サイトを利用した視聴者・選手からのGETリクエストに対し、受け取ったjsonファイルを返送する
公式サイトが.jsonを利用してリザルトを表示する

という流れで情報が表示されます。リザルトスクショ1 リザルトスクショ2

3. 集計配信連携システム

集計配信連携システムでは、Googleスプレッドシートにて保持しているデータを、配信システムへ流し込むためのシステムです。

GASを利用し、公式サイト用とは別の、OBS Studio反映専用の.jsonを生成
GASを利用し、APIへ.jsonをPOSTする
OBS Studioを起動しているPCにて、連携ダッシュボードをブラウザからアクセスし、OBS StudioをWebSocket通信を確立させておく
連携ダッシュボードが、WebSocket経由でAPIから.jsonを受け取り、差分更新する形でOBS Stidoに情報を上書きする

4. 運営間ショートカットシステム

本大会は、撮影スタジオで作業をするスタッフと、自宅からオンラインで参加するスタッフの2種類が存在していました。両方式の運営スタッフ間が迅速に連携できるように、ショートカットシステムを構築しました。この中の任意のボタンを押下すると、同時にこのページにアクセスしているオペレーター全員の同じボタンがハイライト表示されます。これによって、オペレーター全員が最新の情報を常に受け取ることが可能な上、撮影スタジオ内のスタッフが発話する必要がなくなり、演者のマイクにオペレーターの声が混入することを未然に防ぐことができます。