Vol. 01
2026.05.18
2026.04.15 ZENN // TECH

Gemma 4にリポジトリを食わせたら熱血実況が始まった話。

ORIGIN: ZENN.DEV READ ORIGINAL

はじめに

GitHubの公開リポジトリURLを入れるだけで、コード解析 → ステータス化 → 実況付きバトルまでしてくれるWebアプリを作った話です。

と、いうのも。
Gemma 4がリリースされて常にどうにかして遊びたいなと思っていた、なんかトークン数多いらしいし。

「あーリポジトリのコードを丸ごと食わせたら面白いのでは？」

そう思って気づいたら、GitHubリポジトリ同士をバトルさせるツールができていた。不思議だ…。

できたもの

REPO BATTLE — GitHubのパブリックリポジトリ同士を、ローカルLLMが実況しながらバトルさせるWebツール。

ちなみにこんな実況が出てくる。

「Show me your dedication！！これが、真のプロの開発者の証だァ！！！」

…誰も頼んでいないのに。

なぜ作ったか

Gemma 4の256Kコンテキストを試したかった。ぶっちゃけそれだけである。

ちなみに手元の環境はRTX 3070（VRAM 8GB）。256K対応モデルを使おうと思い立ったものの、スペック的に128K程度しか活かせていない。
なお、Gemini御本家の1Mトークンからは目を背けている。

それでもローカルで128Kのコンテキストにコードを丸ごと食わせてバトルさせるのは、普通に楽しかった…。
なんというかあまりにもLLMらしい実況が、ある意味で堪らない。

技術スタック

項目 採用技術
フロントエンド React 19 + Vite 6 + TypeScript
スタイリング Tailwind CSS v4
ホスティング Cloudflare Pages（完全無料）
リポジトリ情報取得 GitHub REST API
LLM OpenAI互換エンドポイント（Ollama推奨）
状態管理・シェア URLパラメータ + localStorage

Cloudflare Pageを利用していてサーバーレス。無料（ドメイン代はかかる）

アーキテクチャ

バトルは2フェーズで動くようにした。

Phase 1 — コード解析

GitHub APIで対象リポジトリの実際のコードを取得し、Gemma 4に食わせる。READMEからエントリーポイント、設定ファイルまで丸ごと（語弊）読ませて、RPGっぽいステータス（HP/ATK/DEF/SPD/LUCK）をJSON形式で出力させる。

> PHASE 1 — コード解析中: torvalds/linux
Gemma 4がコードを読み込んでステータスを判定しています...

Phase 2 — バトル実況

Phase 1の解析結果を元に、3ラウンドのバトル実況を生成する。

  • Round 1: 設計の美しさ
  • Round 2: 拡張性
  • Round 3: 保守のしやすさ

実際の実況がこれ

hal508986-crypto/Feather vs hal508986-crypto/TypePlot の一戦より。

「（ブザーが鳴り響き、観客席から怒号と歓声が上がる！）さあ、我々が今から目撃するのは、コードという名のリングで繰り広げられる、最新の技術と設計思想がぶつかり合う壮絶な一戦だぁーッ！」

「TypePlotよ、お前は天才だ！だが、その才能が暴走寸前だ！次からは、完璧なシステムをいきなり作ろうとする前に、結合度を下げることを最優先に考えてくれ！」

「Show me your dedication！！これが、真のプロの開発者の証だァ！！！」

熱血実況してってプロンプトチューニングしてるとはいえ、ここまでやれとは誰も頼んでいない。

ランクシステム

スター数とコミット数でランクが決まる。

ランク 目安 枠色
SS スター50,000以上 紫
A スター5,000以上 金
B スター100以上 or アクティブ個人開発 緑
C それ以外 グレー

torvalds/linux はSS Lv.124。自分のリポジトリはほぼCランク。格差社会がここにもある。

技術的なポイント

ローカルLLM × Cloudflare Pages

HTTPSのCloudflare PagesからHTTPのlocalhost（Ollama）に叩くのでMixed Contentの問題が発生する。

ブロックの種類と対処

ブロック 原因 対処
Mixed Content HTTPS サイトから HTTP へのリクエストをブラウザがブロック Chrome フラグで localhost を例外に
CORS Ollama がデフォルトで外部オリジンからのリクエストを拒否 OLLAMA_ORIGINS 環境変数を設定

Step 1 — Ollama に CORS を許可させる（Windows）

Ollama は Windows サービスとして動いているため、タスクトレイから再起動しても環境変数が反映されません。
PowerShell（管理者として実行）で以下を順番に実行してください：

# サービスを停止し、残存プロセスも強制終了
net stop ollama
Get-Process -Name "ollama*" -ErrorAction SilentlyContinue | Stop-Process -Force

# CORS を許可して直接起動
$env:OLLAMA_ORIGINS = "*"
ollama serve

⚠️ このウィンドウは 閉じないでください。閉じると Ollama も止まります。

Step 2 — Chrome で localhost の HTTP を許可する

アドレスバーに以下を貼って Enter：

chrome://flags/#unsafely-treat-insecure-origin-as-secure

「Insecure origins treated as secure」の入力欄に以下を追加 → Relaunch：

http://localhost:11434

⚠️ chrome://flags/#allow-insecure-localhost では このケースは解決しません。
必ず #unsafely-treat-insecure-origin-as-secure の方を使ってください。

GitHub APIのレートリミット

1バトルで約15〜20回GitHub APIを叩く。未認証だと60 req/時間なので2〜3戦で詰まる。Personal Access Tokenを設定すれば5,000 req/時間になる。

バトル結果のURL共有

/battle?a=torvalds/linux&b=yourname/your-repo

URLパラメータだけで状態管理しているので、サーバーなしでシェアが成立する。受け取った人がb=を自分のリポジトリに書き換えて参戦できる。

おすすめモデル

Ollamaで動かす場合のおすすめ。

# RTX 3070（VRAM 8GB）環境ではこれ
ollama run gemma4:e4b

# 軽量版
ollama run gemma4:e2b

E2Bでも実況はそれなりに熱い。E4Bになると「BGM：激しいロック調のBGMが流れ始める」みたいな演出指定まで自分でやり始める。マジで誰もそんなこと頼んでない。

完全無料・完全ローカルの意義

クラウドAPIの無料枠にも限度がある。それにコードをパブリックなAIに食わせることを避けたい人もいる。

ローカルLLMで動くので、一応LLM学習には使われないはずだ。そらそう。

遊び方

  1. Ollamaをインストールしてollama run gemma4:e4b
  2. GitHub Personal Access Tokenを発行（public_repoスコープだけでOK）
  3. REPO BATTLE を開く → エンドポイントとTokenを設定
  4. デッキにリポジトリを追加してバトル開始

…一応同一ネットワーク内ならスマホからでも遊べる。が、PC専用と割り切ってほしくはある。

おわりに

「Gemma 4の長大コンテキストで遊びたい」という動機だけで作り始めたら、気づいたらコードレビューツールとしても機能するものができていた。

バトル相手に torvalds/linux を指定すると「30年の歴史を持つ重鎮」として扱われる。自分の個人開発リポジトリは大体Cランクで「WIP」タグがつく。正しい。

リポジトリのURLがあれば誰でも参戦できるので、ぜひ自分のリポジトリで試してみてほしい。

→ REPO BATTLE
→ GitHub
※くそ正直にSPEC.mdやSTATE.mdもそのまま上げました。俺みたいな個人開発してる人に届いたら嬉しい。

BACK TO WRITING