2026年9月28日 / 最終更新日 : 2026年10月5日ふじながただしコラム

Claude Codeでゲームウィジェットを作ってみた｜ブログ全5,000ページに設置するまでの全記録

テックジムのコラム記事の下に、ブラウザでそのまま遊べるミニゲームを付けました。Pythonのバグ探し、アルゴリズム迷路、漢字の間違い探しなど5種類です。

ゲームの元になるHTMLはこちらで用意し、全ページへの設置、不具合の修正、配色、効果音、ゲームの入れ替えまでを、AIコーディングツールのClaude Codeに任せました。こちらがしたのは「全ページのCTAバナーの下に貼って」「カラフルにして」「音をつけて」と日本語で頼むことだけです。

ただ、実際にやってみると「言われたとおりに貼る」だけでは済まない場面が何度もありました。この記事では、依頼してから約5,000ページに設置するまでに何が起きて、Claude Codeがどう判断したのかを順番に紹介します。

この記事でわかること

Claude Codeに「全ページに貼って」と頼んだら、まず何を調べたか
記事を1本も書き換えずに、約5,000ページへ設置した方法
貼る前に見つかった4つの不具合
音声ファイルを使わずに効果音を付ける方法
Python基礎コースの「間違い探し」をブラウザ版にしたときの落とし穴

作ったもの：5つのミニゲーム

完成したのは「プログラミングは楽しんだ者が勝ち！」というゲームパックです。メニューから5つのゲームを選べます。

バグ探し：間違ったPythonコードを見て、原因を選ぶ
適性診断：プログラミングで役立つ考え方を知るクイズ
アルゴリズム迷路：矢印の命令でロボットをゴールへ動かす
AI仕事ゲーム：AIに任せること、人間が確かめることを選ぶ
間違い探し：並んだ漢字の中から1つだけ違う字を探す

遊び方と、それぞれのゲームで学べることはプログラミングは楽しんだ者が勝ち！5つのミニゲームの遊び方と学べることで解説しています。この記事の下にもゲームがあるので、ぜひ遊んでみてください。

「全ページに貼って」と頼んだら、まず調べ始めた

最初の依頼は「ゲームのHTMLを、全ページのCTAバナーの下に貼ってください」でした。

普通に考えれば、記事の本文に1本ずつHTMLを書き足していく作業です。ところがClaude Codeは、書き足す前にCTAバナーが本文のどこにあるのかを確かめに行きました。

結果は意外なものでした。約4,950本の投稿のうち、本文にバナーが書かれていたのは14本だけ。固定ページにいたっては0本です。それなのに、実際のページにはどれもバナーが表示されています。

つまりバナーは、記事の本文ではなく、ページを表示する瞬間にサーバー側のプログラムが自動で差し込んでいたのです。

この場合、本文の最後にゲームを書き足しても、表示は「ゲーム → バナー」の順になり、「バナーの下」にはなりません。しかも約5,000本の記事を書き換えることになります。Claude Codeはここで作業を止め、「この方法では指定の位置に置けない」と報告してきました。

記事を1本も書き換えずに、約5,000ページへ設置

バナーを差し込んでいるサーバー側のプログラムは、Claude Codeが使えるWordPressのREST APIからは触れません。そこで選んだのが、ウィジェットとJavaScriptを組み合わせる方法です。

ゲーム本体を、全ページに出るフッターのウィジェットとして読み込む（最初は隠しておく）
ページが表示されたら、小さなスクリプトでゲームをCTAバナーの直下へ移動する

移動させる部分のコードは、これだけです。

var banners = document.querySelectorAll(".cta-banner");
if (banners.length) {
  var last = banners[banners.length - 1];
  last.parentNode.insertBefore(pack, last.nextSibling);
}

この方法なら、書き込みはウィジェット1つを追加する1回だけです。記事の本文は1本も触らないので、やめたくなったらウィジェットを消せば全ページから一度に消えます。

「追加しました」の応答をうのみにしなかった

ここで1つ、つまずきがありました。APIでウィジェットを追加すると「フッターに追加しました」という応答が返ってきたのに、実際のページにゲームが出てこなかったのです。

Claude Codeが確認すると、ウィジェットはフッターではなく「使用停止中」の欄に入っていました。フッターに移し直し、本番のページでゲームがバナーの直下に1つだけ出ることを確かめて、ようやく完了です。

AIに作業を任せるときほど、「完了しました」ではなく実際の画面で確かめることが大事だと実感した場面でした。

貼る前に見つかった4つの不具合

もう1つ助かったのは、Claude Codeが貼る前にゲームのコードを読んで、不具合を指摘してくれたことです。

迷路が解けない：画面は横一列のマスなのに、正解の手順に「↓」が入っていた
正解がすべて1番目：バグ探しの5問とも、正解が1番上の選択肢だった
連打すると正解数が増える：次の問題に切り替わるまでの0.9秒間、ボタンが押せたままだった
成功すると「もう一度」が出ない：迷路は失敗したときしかやり直せなかった

どれも、ざっと見て動けば気づかないものです。迷路は3行×5列のマス目に作り直し、ロボットが1マスずつ動いて壁にぶつかると失敗になる仕組みにしました。

直したあとは、ブラウザ上でボタンを自動で押すテストを実行し、「連打しても5問中5問正解のまま」「正しい手順でゴールできる」ことを確かめています。

カラフルにして、効果音も付けた

次の依頼は「全体的にカラフルに」と「音をつけて」でした。

配色は、ゲームごとにテーマ色を決めました。バグ探しはピンク、迷路は水色、間違い探しはオレンジといった具合です。選んだゲームの色が、枠・ボタン・見出しまで行き渡ります。

効果音は、音声ファイルを1つも使わずに付けています。ブラウザに標準で入っているWeb Audio APIで、その場で音を作って鳴らしています。

function tone(freq, start, dur, type, vol) {
  var c = audio();                  // AudioContext を1つだけ作って使い回す
  var t = c.currentTime + start;
  var o = c.createOscillator();     // 音の元（波形）
  var g = c.createGain();           // 音量
  o.type = type;                    // "sine" "square" など
  o.frequency.setValueAtTime(freq, t);
  g.gain.setValueAtTime(0.0001, t);
  g.gain.exponentialRampToValueAtTime(vol, t + 0.01);
  g.gain.exponentialRampToValueAtTime(0.0001, t + dur);
  o.connect(g);
  g.connect(c.destination);
  o.start(t);
  o.stop(t + dur + 0.05);
}

// 正解の「ピンポン」は、2つの音を少しずらして鳴らすだけ
tone(988, 0, 0.14, "sine", 0.2);
tone(1319, 0.14, 0.3, "sine", 0.2);

音声ファイルを読み込まないので、ページが重くなりません。音が鳴るのは読者がボタンを押したときだけで、ページを開いただけで急に鳴ることはありません。

「最初から音ありにするか、音なしにするか」は、Claude Codeが選択肢を示し、人間が「音あり」に決めました。そのかわり右上に🔊ボタンを付け、職場や電車の中でもすぐに消せるようにしています。

Python基礎コースの「間違い探し」をブラウザ版に

最後に、5番目のゲームを入れ替えました。テックジムのPython基礎コース2章で、受講生が実際に作る「違う漢字を探せ！」です。

コースではPythonで作り、黒い画面（ターミナル）に文字で盤面を表示します。これをブラウザで遊べるようにしたサンプルを渡し、ゲームパックに組み込んでもらいました。ゲームの下にある「このゲームをPythonで作ると？」を開くと、コースで書くPythonのコードをそのまま見られます。

残り時間が「戻っているように見えて戻らない」

このサンプルにも、ぱっと見ではわからない不具合がありました。レベルが上がると残り時間を戻す処理があるのに、0.1秒後には元の計算で上書きされていたのです。実際は、全レベルを通して20秒しかありませんでした。

// 修正前：タイマーは最初の開始時刻から数え続ける
timeLeft = Math.max(0, 20 - elapsed);

// レベルが上がったときに残り時間を戻しているが……
timeLeft = Math.min(20, 12 + level * 1.5);
// 0.1秒後に上の行で上書きされ、元に戻ってしまう

レベルが上がるたびに、開始時刻から測り直すように直しています。

// 修正後：レベルが上がるたびに、開始時刻ごと測り直す
function startTimer(limit) {
  stopKanji();
  var startTime = Date.now();
  kanjiTimer = setInterval(function () {
    timeLeft = Math.max(0, limit - (Date.now() - startTime) / 1000);
    // ……
  }, 100);
}

ほかにも、別のゲームに切り替えても裏でタイマーが動き続ける点、既存のゲームと部品の名前がぶつかる点を直しました。