0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

2年前に頑張って作った大会集計システム、今ならGeminiで5分で終わる話

Posted at

3年前に頑張って作った大会集計システム、今ならGeminiで5分で終わる話

導入

これは「エイプリルナイツ アドベントカレンダー2025」の5日目の記事です。

3年前、私はこんな記事を書きました。

NodeCG、GAS、スプレッドシートのQuery関数、importrange関数...。当時は「これで爆速だ!」と胸を張っていました。

しかし2025年の今、同じことをやろうとしたらどうなったと思いますか?

Geminiに画像を投げて「集計して」で終わりました。

嘘ではありません。本当に終わりました。しかもWebUIの集計結果ダッシュボードまで作ってくれました。

AFTER 6 LEAGUEとは

今回集計したのはAFTER 6 LEAGUEという企業対抗のApexLegendsリーグです。仕事終わりの18時以降に試合するので「AFTER 6」という名前になっています。

エイプリルナイツは過去に運営にも関わっておりましたが、今シーズンは出場(予選1位通過で本戦出場!)しています。

個人視点配信を社内向けにしていたため、マッチの合間にリザルトをスクショして集計できそうと思ったのがきっかけです。

3年前の苦労を振り返る

2022年当時、私が何をやっていたかというと...

アーキテクチャはこんな感じでした

  • ApexAPIからGASでデータ取得
  • スプレッドシートでQuery関数とimportrangeを駆使して集計
  • NodeCGでHTML/CSS/JSを書いて配信画面を描画
  • OBSとvMixで配信に乗せる

正直、これでも当時は革命的でした。手入力で読み上げ→転記していた時代と比べたら雲泥の差です。

しかし今見返すと、Query関数のネストとか、GASのfetchとか、NodeCGのセットアップとか...。「なんでこんなに頑張っていたんだろう」という気持ちになります。

2025年、Geminiに投げたら秒で終わった

やったこと

  1. リザルト画面のスクショをGeminiに投げる
  2. 「集計したい。書き起こして」と言う
  3. ルールブックのPDFも渡して「これをもとに集計して」と言う
  4. 「canvasで見れるようにして」と言う

以上です。

本当にこれだけです。

Gemini3の出力

Geminiは画像からチーム名、順位、キル数を読み取って、ルールブックのポイント計算式に従って総合ポイントを算出してくれました。
image (1).png
image (2).png

しかも「canvasで見れるようにして」と言ったら、HTML/CSS/JSでダッシュボードまで作ってくれます。タブ切り替えで各マッチの詳細も見れる仕様です。
image (3).png
image (4).png

3年前の私、Query関数と格闘していた時間は何だったのでしょうか...。
これはReactで出力されたので後でバニラのHTML/JS/CSSに変換しました。

Googleサイト埋め込みが地味に便利

ここからが今回の本題その2です。

Geminiのcanvasで作ったHTML/CSS/JSは、そのままGoogleサイトに埋め込めます。これがめちゃくちゃ便利です。
image.png

何がいいか

  • 無料でホスティング:サーバーを立てる必要がありません
  • 共有が楽:URLを渡すだけです。組織内公開が簡単、もちろんインターネット公開も可能。
  • 更新も楽:canvasで修正→埋め込みコード更新で終わりです

NodeCGは確かに高機能ですが、セットアップの手間があります。リアルタイム配信用ではなく「結果を公開したいだけ」ならGoogleサイトで十分です。

埋め込み方

  1. Geminiのcanvasで作ったコードをコピー
  2. Googleサイトで「埋め込み」→「埋め込みコード」を選択
    image.png
  3. HTMLを貼り付け
    image.png

これだけで、いい感じのデザインのダッシュボードが公開できます。

これは今回のようなダッシュボードだけでなく、Geminiで生成したスライドなど、普通なら公開にひと手間必要なものを社内向けに公開するのには便利なテクニックだと思います!

技術者として複雑な気持ち

正直に言うと、ちょっと複雑な気持ちもあります。

3年前、あのシステムを作るのにどれだけ時間をかけたか。Query関数の仕様を調べて、NodeCGのドキュメントを読んで、CSSアニメーションを調整して...。

それが今や「画像投げて、集計して、ダッシュボード作って」の3ステップです。

もちろん実際の配信では数字の正確性を丁寧に確認したり、ゲーム内のチーム名を社名に変換したりする必要があるのでもう少し手順は必要ですが、Apexの公式APIの使えないコミュニティ大会では画像から集計作業ができるようになったのはとても便利だと思います。

まとめ

  • 2022年:GAS + NodeCG + 複雑なスプシ関数で「爆速」を実現
  • 2025年:Geminiに画像を投げて「集計して」で本当の爆速を実現
  • Googleサイト + Gemini canvasの組み合わせで、サーバーレスでダッシュボード公開が可能に
  • Gemini3Proのデザインスキル高すぎ
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?