# 第4回資料作成セッション — プロンプト & 回答ダイジェスト > 日付: 2026-05-20（1セッション） > ゴール: 第4回ワークショップ（MCPサーバー入門・5/21開催）の資料一式と配布リポジトリの整備 > 公開意図: 「Claude Code にどんなプロンプトを打っているか」を参加者と共有するための実例 ## 全体フロー ざっくり3段階で進みました： 1. **壁打ち**で構成と方針を固める（前半） 2. **実装**として lecture / buggy-site / 配布リポを作る（中盤） 3. **後始末**として事前案内・TODO更新・gitプッシュ（後半） --- ## ターンごとの記録 ### #1 セッション開始 — テーマ提示 **🧑 私（菊池）:** > これから第4回の資料を作成するので、壁打ちに付き合ってほしいです。まず第4回では、クロードと外部ツールの連携というテーマで、MCPサーバーを中心とした学習をしたいと思っています。前半は座学で、後半は実際にバックログのMCPサーバーとつなぐハンズオンというか演習をやりたいと思っています。 **🤖 Claude（ダイジェスト）:** TODO.md / timeline / 5/19議事録 / 第3回 lecture.md を読んで既存合意を把握。 **叩き台**として90分の時間配分案・座学Part 1の章立て・ハンズオン設計の3案（A/B/C）を提示。 詰めたい論点として「全員分のチケット設計」「座学の射程」「サンプルコード題材」「MCP設定の詰まり対策」「第5回への接続」の5つを挙げ、優先順位を提案。 --- ### #2 方針決定 — 5つの論点に回答 **🧑 私:** > 1. B案の自分でチケットを記表するところから始めるのがいいと思います。バックログのアカウント自体は一つなのですが… > 2. 一旦深めでお願いします。…基本情報技術者試験程度の知識は持っていると仮定してください。 > 3. HTMLが崩れたりおかしくなっているというような内容で良いと思います。 > 4. できるだけ接続手順はシンプルで、事前にテンプレート化できるなら…BacklogのAPIキーはTeamsやSlackで送る想定。それとも個人キーを各自で発行した方が良いでしょうか。相談させてください。 > 5. 同窓会のアナウンスも入れてください。 **🤖 Claude:** APIキー方式について判断材料を表化（A: 各自個人キー / B: 運営共有キー）。教材的・監査的に **A推奨** とした上で、社内ルール確認が必要なら古賀さんに相談する必要性も指摘。AskUserQuestion で確定。 --- ### #3 APIキー方針確定 **🧑 私（質問選択肢に対して）:** > APIキーは各自でログインして発行する形式にします。ただ、バックログのチームとしては全員同じチームに所属します。 **🤖 Claude:** チーム共有を前提に「全員が起票する時の競合対策」として **チケットタイトル先頭に氏名を入れる規約** を提案。 --- ### #4 実装着手指示 **🧑 私:** > パート4はなしで大丈夫です。講義資料の作成をHTMLでお願いします。またハンズオン用のサンプルHTMLも作成してください。 **🤖 Claude:** WebFetch / WebSearch で MCP公式ドキュメント・Claude Code MCP公式・Backlog MCP公式を並列調査。 session-04 ディレクトリを作成して **lecture.md → buggy-site/(HTML/CSS/JS) → .mcp.json.template → lecture.html (skill経由)** の順に作成。当初はバグ8個を仕込んだ。 --- ### #5 動作確認指示 **🧑 私:** > 中身を確認したいので、HTMLをブラウザで開いてください。 **🤖 Claude:** `Start-Process` で lecture.html を既定ブラウザで開く。 --- ### #6 重要な技術質問 **🧑 私:** > MCPサーバーの実態は何なんですか？本物のサーバーなのか、それともソースコードですか？…できればNode.jsを使いたくないので、これなしでいけるかどうかも調査してください。 **🤖 Claude:** **「stdio版MCPは常駐サーバーではなく、Claude Codeが起動する子プロセス」** と整理。 Node.jsなしで動かす選択肢（Docker / リモートHTTP / Goバイナリ等）を調査して比較表で提示。 調査の結果 **`npx backlog-mcp-server` 一発で動く** ことを発見、設計を大きく簡素化できると報告。 --- ### #7 ローカル動作の要望 **🧑 私:** > HTTPのソースコードは手元にある状態じゃないと、Claude Codeで修正ができないので、リモートでホストではなく、ローカルに欲しいです。ただ、できるだけセットアップの量が少なくなるようにはしたいです。 **🤖 Claude:** 「buggy-site（修正対象）」と「Backlog MCPサーバー」は別物だと整理した上で、**A案（Node.js winget + npx）** で決定。 lecture.md / lecture.html / .mcp.json.template の3ファイルを `git clone+build` 方式から `npx` 方式に書き換え。 --- ### #8 バグ数の見直し要望 **🧑 私:** > バグが8個は多すぎるので4個ぐらいに減らしてください。またバグの内容もサイトを見ればすぐにわかるような内容が好ましいです。相談させてください。 **🤖 Claude:** 現状8個を「パッと見でわかる度」で仕分け、残す2個＋新規候補8個を表示。「視覚／文字／アイコン／数字」と気付き経路を分散させた **オススメ4個** を提示。 --- ### #9 微調整 **🧑 私:** > おすすめされたやつでいいのですが、フッターの年が2025だとわかりにくいので、もっとめちゃめちゃ昔にしてください。 **🤖 Claude:** **1985年（Macintosh発売年）** に変更。実装で 8→4個に整理（不要バグを正常化）。 --- ### #10 さらなる改善要望 **🧑 私:** > ロゴが斜めになっていても、こういうデザインなのかと思って、バグだと思わないかもしれません。マニュアルの文字サイズが非常に大きいみたいなバグの方がいいと思います。画面右上のAIロボットは何ですか。お問い合わせのアイコンが本になっているのもバグだと気づきにくい… **🤖 Claude:** AIロボット画像が外部CDN（placehold.co）のプレースホルダーであることを説明。3案（SVG化／絵文字／削除）を提示。お問い合わせアイコンも6候補（🐧🍕🦖🛸🐙🍣）を提示。 ロゴ歪み → **マニュアル文字巨大化** に置き換え。 --- ### #11 視覚化アイデア **🧑 私:** > 画像はなしでいいです / 🍣 寿司 **🤖 Claude:** プレースホルダー画像を削除。お問い合わせアイコンを🍣に変更。bugs最終確定。 --- ### #12 大きな設計変更 **🧑 私:** > 正解のサイトは Cloudflare Pages でホストしておきましょう。間違い探しみたいに見比べてバグに気づく感じで。 **🤖 Claude:** **「2サイト見比べ」設計** に大幅変更。`correct-site/` を新規作成（buggy-site をベースにバグ4個を正常化）。lecture.md/lecture.html の Part 3 を「2タブで見比べる」ハンズオン手順に書き換え。 --- ### #13 配布リポ作成指示 **🧑 私:** > デプロイしました。ハンズオン用のリポジトリを作成してください **🤖 Claude:** 既存配布リポ `Tsubasa-Kikuchi98/claude-code-workshop-handson` の `session-04-mcp` ブランチとして作成（このターンでは既存リポにブランチを切る方針）。clone → ブランチ作成 → 旧ファイル削除 → 新ファイル配置 → README更新 → commit。push 前に確認。 --- ### #14 設計変更 — 別リポへ **🧑 私:** > やっぱり第4回のリポジトリは第２回と別のリポジトリにしてください **🤖 Claude:** `gh repo create` で新規Publicリポ `claude-code-workshop-handson-04` を作成。新リポにinitial commit & push。古い `session-04-mcp` ブランチは（確認後）リモートから削除。lecture.md/lecture.html の参照URLを新リポに統一。 --- ### #15 連続タスク **🧑 私:** > 上二つをやってください（事前案内Slack文面 + TODO.md更新） **🤖 Claude:** 第1回事前案内（4/20）の文体を参考に、CLAUDE.md の「AIっぽさを避ける」指針に沿った Slack 草案を作成。TODO.md は完了タスクをアーカイブに移し、新規タスク（Slack投稿・当日リハ）を今週欄に追加。 --- ### #16 git push **🧑 私:** > gitにプッシュしてください **🤖 Claude:** `git status` / `.gitignore` / `settings.local.json` の diff を確認し、 `site/` `tmp/` を除外して明示的にファイルをstage。1コミット（`cccf660 feat: 第4回ハンズオン素材一式を追加`）にまとめて origin/main にpush。12ファイル変更、2,522行追加。 --- ## このセッションから読み取れる「壁打ちのコツ」 1. **最初は粗くてOK** — #1のように「テーマと前提（90分・座学+ハンズオン）」だけ伝えれば、Claude側から論点リストが出てきて、そこから絞り込める 2. **判断は選択肢を出してもらうと早い** — Claude側に2〜4案を整理させて選ぶ方が、ゼロから自分で考えるより速い 3. **「これは何？」という素朴な質問が設計を大きく変える** — #6（MCPサーバーの実態）の質問で `git clone+build` → `npx一発` という大幅簡素化に繋がった 4. **見た目の確認が後出しの軌道修正を生む** — #5でブラウザで開いて、#10で「ロゴ歪みは気付きにくい」「AIロボットは何？」と細部の改善が入った 5. **設計の大幅変更も気軽に依頼できる** — #12「正解サイトをCloudflare Pagesで」、#14「やっぱり別リポで」のような後出しでも、影響範囲を整理してまとめて反映できる 6. **後始末まで含めて任せられる** — #16のpushまで、ファイル指定・除外指定・コミットメッセージまで自動でやる --- ## 関連リソース - 配布リポジトリ（第4回ハンズオン用）: - 講義資料: