LightSheet
【腐食杯】爆速で大会システムを構築！〜AIってすっげえな〜
TECH BLOG 2026/3/11 あいぬるんと

【腐食杯】爆速で大会システムを構築！〜AIってすっげえな〜

#腐食杯 #テックログ #AI #非公式大会
SHARE

こんにちは。LightSheet代表のあいぬるんとです。

腐食杯のウラ側大公開シリーズの第4弾、「腐食杯システム開発のウラ側」 をお届けします。

1. 前提：大会に独自システムを導入する理由

　まず、大会における独自システム開発の理由について、僕なりの見解をお伝えしたいと思います。

　腐食杯における「システム」とはなんでしょうか？それは、運営を円滑に進めるための土台です。例えば集計であれば、人間が手書きで計算をすれば、作業は完了できます。でもそれでは、計算ミスが起こるかもしれない。情報を伝達するのがとても遅い。そこで、システムが登場するわけです。

　では、既存のツールを利用すればいい！となります。実際、腐食杯では集計の計算にはGoogleスプレッドシートを利用しています。しかし問題があります。Googleスプレッドシートで計算した集計データを、配信ソフトに転記することができません。そこで独自システムの登場というわけです。独自システムを導入するメリットはこんな感じ。

  • 「専用設計」にできるので、求められる操作に最短距離で対応できる

  • 「自分で作る」ので、無料で運用できる

対して、デメリットは

  • 求められるスキルが段違い

  • サーバー代金とかはどうやってもかかる

  • 開発コストの関係から、デバッグが間に合わずにバグが当日出る可能性がある

などです。

2. 前提：プログラミングにAIを使おう

　先ほど、独自開発のデメリットに「求められるスキルが高い」ことを書きました。しかしここ数年で急速に発達した生成AIによって、「求められるスキル量」が大幅に少なくなりました。生成AIはプログラミングと非常に相性がいいと言われています。OpenAIやGoogle、anthropicなどの巨大企業が数ヶ月スパンで新型を登場させ、性能競争を繰り広げているのです。

　皆さんがChatGPTなどを利用するように、プログラミング専用ソフトにChatGPTゾーンみたいなものがあって、そこでAIとやり取りをするだけで、AIが勝手にコードを書いてくれるようになっているのです。

　この開発タスクにおいて、僕は「司令官」のような役目をしていました。AIに対して、「この設計書に沿って、この機能を実装してください」と指示を出しているようなイメージです。これをバイブコーディングといいます。

　腐食杯では、「Antigravity(Google開発)」と「Codex(OpenAI開発)」というツールを利用して開発しました。

3. 腐食杯のシステム一覧

腐食杯では、以下のサービスを開発しました。

  • 公式サイト

  • 裏方用システム

それぞれ、以下の機能があります。

【公式サイト】

  • 情報発信

  • 選手一覧

  • ルール

  • 規約

  • エントリーへのリンク

  • 選手リザルト確認

【裏方用システム】

  • Googleスプレッドシート→OBS連携

  • 運営間ショートカット

  • 公式サイト選手リザルト確認仲介

ここからは、各サービスの詳細をご紹介します。

4. 公式サイト

公式サイトの技術スタックは以下の通りです。

  • フレームワーク…Astro

  • 外部公開…CloudFlare Pages

https://maengzombiecup.lightsheet.jp 

今回紹介するシステムの中では唯一、視聴者・選手の皆さんも実際に利用します。

制作にあたっては、AIプログラミングを利用しますから、「どうやってコードを書くか」ではなく「どうやってAIに指示するか」が重視されます。今回は、事前にこの大会の基調デザインが確定していました。

これです。

この画像をAIに読み込ませ、

  1. LightSheetという団体について

  2. 腐食杯の企画について

  3. デザインについて

以上の3点を説明した上で、「大会専用ホームページをつくるため、デザインのモックアップを作ってください」とAIにお願いしました。

その上で、必要な機能を整理し、「この機能を実装してください」と指示を出して実装を進めたイメージです。

5. 腐食杯専用システム

a. OBS反映

この機能は、集計した情報を配信で紹介するために配信ソフトの中に流し込むためのものです。

【技術スタック】

  • API…Node.js(その他と共通)

  • Frontend… Vite+React

  • 外部公開…CloudFlare Tunnel

Googleスプシ

↓

GAS(Googleスプレッドシートの機能をプログラミングで拡張できるサービス)

↓(API POSTでjsonを送信)

API(独自開発)

↓(websocketでjsonを送信)

ダッシュボード

↓(websocketでOBS Studioを操作)

OBS Studio

このような処理になっています。

なぜこの方法を利用した？

LightSheetでは、この方法以外にも

  1. Excel VBAから.txtにテキストを書き出し、OBSからテキストファイルを読みに行く方法(半自動)

  2. GoogleスプシからPythonサーバーに情報を送信、テキストのみの画像を合成してDiscordに送信、OBSから読み込み(手動)

  3. Googleスプシのシートを作り込み、テキスト+グリーンバックの状態にする。それをOBSからウィンドウキャプチャする(自動)

などの方法を利用し、集計情報をOBS Studioへ流し込むノウハウを複数持っています。

しかし、

  1. OBS Studioは数十〜数百の.txtを読み込みに行くと、フリーズが発生する場合がある(OBSは1秒ごとに.txt再度読み込み処理が走ります)

  2. 単純に手順がとても多く、準備完了まで時間がかかる

  3. ウィンドウキャプチャ+クロマキーを利用する関係で、低画質かつ高負荷になる。(なお実装が一番簡単である)

などの欠点がありました。今回のシステムは、

  1. OBS Studioのソフト自体がテキストデータを持つため、再度読み込み処理が走らない

  2. 全自動を実現しているため、”OBSに読み込み”という手順をオペレーターが意識しなくて良い

  3. Websocketでテキストデータを流し込んでいるだけのため、実質的に「人間がOBSのテキストソースの中身を書き換える」ことと負荷が変わらない

という、3つそれぞれの欠点を克服した方法になっているのです。

ちなみに、1はLinkUp杯1stとMido杯2nd、2はクラン対抗戦、3はLightSheet杯Premiumで実際に大会で使用しています。

今回、このシステムを採用してみて感じたことは、

  • 圧倒的な安定性

  • 「Windows PCからアクセス」「インターネットに接続」さえ満たせば、環境によるエラーがほぼ起こらない

  • GoogleスプシからAPIに送信するところで、システム側が処理に時間をかけるため、タイムロスになっている

の3点でした。これまで考案・実行してきた構成の中で、今回の構成が一番うまく動きました。

ちなみに、このシステムは腐食杯専用設計ですが、現在汎用化に向けて開発を進めています。

もしこのシステムにご興味がある方は、お気軽に公式Xや個別お問い合わせより、ご連絡をお待ちしております！

b. 公式サイト反映

今回のシステムの目玉とも言える、公式サイト反映システムです。

【技術スタック】

  • API…Node.js(その他と共通)

  • Frontend… 公式サイト

  • 外部公開…CloudFlare Tunnel

処理は、

  1. Googleスプレッドシートから、API側の情報を更新する

  2. 公式サイトにアクセスした端末に情報を渡す

の2種類です。

【API側情報更新】

Googleスプシ

↓

GASでjson生成

↓

GASがAPIに情報をPOST

↓

APIが情報保持

【公式サイト】

ユーザがページにアクセス

↓

APIから.jsonをGET

↓

解釈して表示

のようになっています。負荷を低減するために、APIは差分更新して、古いデータを捨てるように設計。

そして、配信終了後はAPIサーバーを閉鎖するため、Googleスプレッドシート上で生成した.jsonを公式サイト配信サーバーにハードコードすることで、データの永続化を行いました。

c. 運営ショートカット

本大会は、撮影スタジオで作業をするスタッフと、自宅からオンラインで参加するスタッフの2種類が存在していました。両方式の運営スタッフ間が迅速に連携できるように、ショートカットシステムを構築しました。

この中の任意のボタンを押下すると、同時にこのページにアクセスしているオペレーター全員の同じボタンがハイライト表示されます。これによって、オペレーター全員が最新の情報を常に受け取ることが可能な上、撮影スタジオ内のスタッフが発話する必要がなくなり、演者のマイクにオペレーターの声が混入することを未然に防ぐことができます。

まとめ

さて、この記事では、腐食杯を裏から支えた独自システムについてご紹介しました。

Googleスプレッドシートは「スコール」さんが制作しましたので、併せてそちらもご確認いただければと思います。

僕は全くと言っていいほどプログラミングはできないのですが、AIを活用したバイブコーディングを利用することで、大会運営を根本から皆的にする独自ツールを開発することができました。

今後は、

  • 独自システムの汎用化

  • SNS上で散見された、「映像伝送」問題に対処するための、独自の映像伝送システム

などといった取り組みで、LightSheetの大会運営を根本から快適にしてまいります。

今回、紹介したシステムを利用されたい方は、ぜひ公式ホームページよりお問い合わせください！

ご連絡お待ちしております！

【あなたも縁の下の力持ちになりませんか？】

LightSheetでは、大会運営を下から支えるシステム開発メンバーを募集しています。

興味がある方は、ぜひ公式サイトよりLightSheetにご参加ください！