Claudeと外部ツールの連携 — MCPサーバー入門
対象: BS本部プロパ（BSG・ISG・BPM-SG）| 47名
今日の時間割
前回ふりかえり・事務連絡
10分§0.1第3回はClaude × Microsoft 365 でした
Claude for Excel / PowerPoint / Word のセットアップから、要件定義書（PowerPoint）→ 基本設計書（Excel）への変換、ExcelとMarkdownで設計書を書くトレードオフまで扱いました。
§0.2第3回ふりかえりからのリクエストと今回の対応
| リクエスト | 対応 |
|---|---|
| 外部ツール連携（MCP） | 本日のテーマ |
| 効率的なプロンプトの書き方 | 下のQ&Aで回答 |
| 運営リポジトリ自体をClaudeでどう作っているか | 下のQ&Aで回答 |
| 個人タスクでの活用事例 | 第5回で実例紹介を予定 |
| リクエスト制限への対策 | 下のQ&Aで回答 |
§0.3質問への回答
実用的なポイントは3つです。
- ゴールと制約を最初に伝える：「Xを作りたい、ただしY制約あり」のように、何のためか・何を避けたいかをセットで伝える
- 対話で詰める：一発で全部やらせず、まず叩き台を出してもらい、見て→修正、を繰り返す
- 「なぜ」を伝える：ただ「修正して」ではなく「○○な理由でこうしてほしい」と背景を含める
実際、本日の第4回資料一式（講義スライド・サンプルサイト・配布リポジトリ・事前案内Slack・TODOの更新・gitプッシュまで）は、2026-05-20 の半日のチャットセッションで作成しました。
「実際にどんなプロンプトを打ったか」をまとめた記録を公開しています。Q1の参考にもなると思います。
429 Too Many Requests が発生しました。
Anthropicは Team プランでシートごとの累積使用量制限（5時間ウィンドウ・週次）は公式に説明していますが、短時間に一斉アクセスしたときの並行処理制限は公開していません。とはいえ、第3回の現象から何らかの短期スループット制御は存在すると考えられます。
第4回のBacklog MCP操作は1リクエストの粒度が小さいので起きにくいですが、念のため：
- モデルは Sonnet 4.6 で進めてください（Opusは数倍重い）
- ハンズオン開始時、全員同時ではなく数分ずらして起票してください
- 429が出たら30秒ほど待って再実行してください
MCPとは何か
30分このパートのゴール：MCPの3ロール構造・5プリミティブ・通信方式・設定ファイルの全体像を理解する。
§1.1MCPの位置づけ
これまでの3回で、皆さんは段階的に「Claudeに触らせる範囲」を広げてきました。
| 回 | Claudeに触らせるもの |
|---|---|
| 第1回・第2回 | プロジェクト内のファイル（Claude Codeでのコード読み書き） |
| 第3回 | Microsoft 365（Excel / PowerPoint / Word のドキュメント） |
| 第4回（今回） | 業務システム・SaaS（Backlog / Slack / GitHub …） |
業務システムは無数にあり、それぞれAPIの仕様もバラバラです。これをClaudeから個別に呼び出していたら、組み合わせが爆発します。これを解決する標準プロトコルが MCP（Model Context Protocol） です。
§1.2なぜMCPか — M×N問題
MCPが解決しているのは「M×N問題」と呼ばれる組合せ爆発です。
- AIアプリ側（M個）: Claude / ChatGPT / Cursor / VS Code / …
- ツール側（N個）: Backlog / Slack / Notion / GitHub / Sentry / …
これを全部個別に連携実装すると M × N通り のコードが必要になります。MCPは「AI側もツール側もMCPに対応すれば自動的に組み合わせ可能」という標準を作ることで、これを M + N に削減します。
§1.3MCPとAPIの違い
一言でいうと、APIは「サービスごとに個別対応」、MCPは「共通の規格でまとめて対応」です。
従来のAPIは、SlackはSlack用・BacklogはBacklog用と、つなぎたいサービスの数だけ異なる実装が必要でした。MCPはAnthropicが2024年末に発案した共通規格で、「MCPに対応しているサービスなら、同じ方法でつなげる」という世界を実現します。
| 従来のAPI | MCP | |
|---|---|---|
| つなぎ方 | サービスごとに個別実装 | 共通規格で統一 |
| 新しいツールを追加するとき | また一から実装が必要 | MCPに対応していれば即つながる |
| AIの視点 | 人間が仕様書を読んで実装してあげる | AIがツールの使い方を自分で把握して実行 |
なお、各ツールとClaude Codeをつなぐ「通訳」プログラムのことを MCPサーバー と呼びます。次のパートで `.mcp.json` に登録します。
§1.5MCPの5プリミティブ
MCPには5種類の「機能単位」があります。それぞれ誰が制御するかが異なります。
| プリミティブ | 制御主体 | 役割 | Backlog MCPでの扱い |
|---|---|---|---|
| Tools | AIモデル | 外部システムへの操作を実行する（API呼び出し・書き込みなど） | ✅ 47ツールを実装 add_issue / update_issue / get_issues など |
| Resources | ホストアプリ | URIで識別したデータをコンテキストに注入する（読み取り専用） | — 未実装 データ取得もToolsで対応 |
| Prompts | ユーザー | 再利用可能なプロンプトテンプレートをスラッシュコマンドで呼び出す | — 未実装 |
| Sampling | サーバー | サーバー側からクライアント経由でLLMを呼び出す（逆方向） | — 未実装 |
| Roots | クライアント | サーバーがアクセスしてよいファイルの境界を宣言する | — 未実装 ファイル操作がないため不要 |
今日のハンズオンでは Tools のみを使います。チケットを「読む」操作（get_issue）も内部ではToolsの呼び出しです。
§1.6通信方式 — stdio と Streamable HTTP
MCP Serverと通信する方式は2種類あります。
| 方式 | 動作場所 | 認証 | 用途 |
|---|---|---|---|
| stdio（標準入出力） | ローカルPC上で起動 | OS権限 / 環境変数 | 自分のPCで動かすツール、社内システム接続 |
| Streamable HTTP | リモートサーバー | Bearer Token / OAuth | クラウドSaaSへの公開接続 |
- stdio: Claude Codeが起動時にコマンドを実行して、その標準入出力（プロセス間通信）でやりとり
- Streamable HTTP: Claude CodeがHTTPでリクエストを送って、HTTP応答 + Server-Sent Eventsで受け取る
今日のハンズオンで使う Backlog MCP Server は stdio方式 です（皆さんのPC上でNode.jsプロセスとして起動します）。
§1.7設定ファイル .mcp.json の構造
Claude CodeにMCP Serverを登録する方法は3つあり、スコープごとに保存場所が違います。
| スコープ | 保存場所 | 共有範囲 |
|---|---|---|
| local（既定） | ~/.claude.json | 自分だけ（プロジェクト別） |
| project | .mcp.json（プロジェクト直下、Git管理可） | チームと共有 |
| user | ~/.claude.json | 自分の全プロジェクト |
今日は projectスコープで .mcp.json を配布します。中身はこんな感じ：
{
"mcpServers": {
"backlog": {
"command": "npx",
"args": ["-y", "backlog-mcp-server"],
"env": {
"BACKLOG_DOMAIN": "${BACKLOG_DOMAIN}",
"BACKLOG_API_KEY": "${BACKLOG_API_KEY}"
}
}
}
}command+args: stdio方式で起動するコマンド（npx -y backlog-mcp-serverで公式のBacklog MCP Serverをダウンロードして起動）env: そのコマンドに渡す環境変数。${変数名}は実行時にOSの環境変数で置換される
§1.8セキュリティ留意点
MCP Server は Claudeに外部システムを直接触らせる 仕組みなので、何より信頼性が重要です。
| 観点 | 注意点 |
|---|---|
| 発行元の信頼性 | 公式ベンダー / GitHubスター数 / 更新頻度を確認。怪しいMCPは入れない |
| APIキーの扱い | .mcp.json に直接書かない。${VAR} で環境変数に逃がす（Git に乗せない） |
| プロンプトインジェクション | MCPで取得した外部データに「Claudeへの指示」が紛れ込んでいると勝手に動く可能性。信頼できるソースだけにつなぐ |
| 権限スコープ | APIキーには最小権限を付ける。本日は皆さん個人のAPIキーなので、自分の権限を超えた操作はできない |
.mcp.json を初めて読み込んだとき、Claude Codeは実行前に承認を求めます。「このサーバーを使ってよいか」を必ず確認してから許可してください。
§1.9利用可能なMCPサーバーの世界
- 公式ディレクトリ: Anthropic Directory で公式審査済みのMCPサーバーが一覧できる
- OSS実装: GitHub の modelcontextprotocol/servers に多数の参考実装
- 企業公式: Backlog（Nulab）、GitHub、Notion、Slack、Sentry、Stripe、Linear、Asana、HubSpotなどが公式提供
「自社の独自業務システムをClaudeにつなぎたい」場合は自分で MCP Server を実装することもできます。Claude Codeには雛形生成プラグイン（/plugin install mcp-server-dev@claude-plugins-official）もあります。
Backlog MCP接続セットアップ
15分このパートのゴール：全員のClaude CodeがBacklog MCP Serverに接続でき、/mcp コマンドで ✓ connected が表示される状態になる。
本日の事前案内Slackで以下が完了している前提で進めます。
- 配布リポジトリ claude-code-workshop-handson-04 を
git clone済み - Node.js がインストール済み（
winget install OpenJS.NodeJS.LTS）
確認コマンド：PowerShellで node --version を実行してバージョンが返ればOK。まだの方は手を挙げてください。藤井さんが巡回します。
- 1ブラウザで iftc-biz.backlog.com にログイン
- 2右上の自分のアイコンをクリック → 「個人設定」
- 3左メニューの 「API」 を開く
- 4「新しいAPIキーを発行する」 をクリック
- 5メモ用の名前を入力（例：
ai-workshop）して 「登録」 - 6発行された APIキー をコピーし、メモ帳等に控える
.mcp.json を配置配布リポジトリのルートに .mcp.json.template を置いてあります。VS Code の PowerShell ターミナルで以下を実行：
Copy-Item .mcp.json.template .mcp.json中身を確認しておきましょう（中身を理解してから使うのがMCPの安全な使い方です）：
{
"mcpServers": {
"backlog": {
"command": "npx",
"args": ["-y", "backlog-mcp-server"],
"env": {
"BACKLOG_DOMAIN": "${BACKLOG_DOMAIN}",
"BACKLOG_API_KEY": "${BACKLOG_API_KEY}"
}
}
}
}PowerShellで以下を実行します。自分のAPIキーに置き換えてください。
$env:BACKLOG_DOMAIN = "iftc-biz.backlog.com"
$env:BACKLOG_API_KEY = "（ここに自分のAPIキーを貼り付け）"次の手順でClaude Codeを起動するときは、必ずこのコマンドを実行したターミナルから起動してください。
ターミナルを閉じた場合は、再度このコマンドを実行してからClaude Codeを起動し直す必要があります。
今日のワークショップ中は、ターミナルを閉じないまま進めることをおすすめします。
Step 3 を実行したのと同じ PowerShell で、以下のコマンドを実行して Claude Code を起動します。
claude必ず Step 3 のコマンドを実行したターミナルで
claude コマンドを実行してください。（VS Code のメニューや拡張機能から起動した場合は、環境変数が設定されていないため MCP が動作しません。）
Claude Code が起動したら、チャットで以下を実行：
/mcpbacklog ✓ connected のような表示が出れば接続成功です。初回起動時は npx がパッケージをダウンロードするため、10〜30秒かかることがあります。気長に待ちましょう。
初回起動時は「このMCPサーバーを使ってよいか」の承認プロンプトが出ます。中身を読んだ上で許可してください。
failed と表示される場合のチェックポイント：
APIキー・ドメイン名にtypoがないか（特に iftc-biz.backlog.com の前後の空白）／ PowerShellで node --version を実行してNode.jsが入っているか ／ claude コマンドで起動したか（VS Codeの拡張機能から開いた場合は環境変数が引き継がれない）／ 解決しない場合は藤井さんが巡回しているので声をかけてください。
ハンズオン — チケット起票→修正→完了
30分このパートのゴール：Backlog MCPを通じて、Claude Codeから自然言語でチケットを起票し、サンプルコードのバグを修正し、チケットをクローズする一連を体験する。
§3.1配布物の確認
ハンズオン題材は2つあります。「間違い探し」のように2サイトを見比べてバグを見つけます。
| 配置 | 役割 | |
|---|---|---|
| buggy-site（バグあり） | 配布リポジトリ / buggy-site/（ローカル） | 修正対象。Claude Codeで直す |
| 正解サイト（バグなし） | Cloudflare Pages 配信 | ブラウザで開いて見比べる用 |
buggy-site には 4個のバグ が仕込まれています。難しいエラーではなく、2サイトを並べて見ればパッと見でわかる、見た目の崩れや表記の間違いです。
§3.2ハンズオン手順
- 1ブラウザのタブを2つ開く：タブA = 正解サイト、タブB = 自分のローカル
buggy-site/index.html - 2タブを行き来して見比べ、おかしいと思った点を探す
- 3自分が「直したい」と思ったバグを1つ選ぶ
例：
【菊池】マニュアルカードの本文の文字サイズが異常に大きいまた、担当者は自分にしてください。他の人のチケットを更新しないよう注意してください。
Claude Code のチャットに以下のように依頼します（プロンプト例）：
Claude Code が Backlog MCP の create_issue ツールを使って起票します。起票後、Claudeが返してくる 課題キー（例: AI_DEV-42） をメモしておきます。
AI駆動開発プロジェクト（Backlog） を開いて、自分のチケットが作成されているか確認しましょう。
Claude Code が get_issue ツールでチケット内容を読み込んで表示します。「読む」操作もToolsの呼び出しです。Backlog MCPはTools一本で読み書きを統一しています。
Claudeが HTML / CSS / JS を編集 → ブラウザでリロードして直っていることを確認します。
Backlogをブラウザでリロードして、ステータスが「完了」になっていることを確認します。これが Tools を使った "AIにシステムを動かしてもらう" 体験です。
別のバグを見つけて、Step 2〜5を繰り返してみましょう。
Claudeが何を起票するか、どう動くかを観察してみましょう（途中で確認を返してくる動作も試せます）。
Slack へ投稿してみよう！繋ぎ方は大きく3通り
5〜10分（時間が余った方向け）
MCPは便利な標準規格ですが、Claude Codeはそれ以外にもシェルコマンドや HTTP リクエストを直接実行できます。ここでは MCP を一切使わずに、天気情報を取得して、ワークショップの別プロジェクトで活躍中の Slack bot 「リマオ」（生意気な小学生男子キャラ、口癖は「〜だぜ！」）として投稿してみます。
皆さんの業務でも同じ仕組みが使えます。例えば…
- SQL / DB ― 「この SELECT 結果を CSV に出して Slack に通知して」
- AWS / クラウド ― 「AWS CLI で Lambda のデプロイ状況を確認して」
- Terraform ― 「terraform plan を実行して差分をまとめて」
- シェルスクリプト ― 「このバッチの実行ログを解析して異常があれば報告して」
§B.1Slack への繋ぎ方は大きく3通り
| 方法 | 特徴 | 向いている用途 |
|---|---|---|
| Incoming Webhook | URL に JSON を POST するだけ。認証不要で最も手軽 | 通知・アラートの一方向投稿 |
| Slack API（Bot Token） | 読み取り・返信・ファイル投稿など全機能が使える。OAuth 認証が必要 | 会話型 bot・インタラクティブな操作 |
| Slack MCP | Claude Code から Slack を MCP 経由で操作。今日学んだ方法 | AI から自然言語でチャンネル操作 |
今回は一番シンプルな Incoming Webhook を使います。
§B.2天気情報を取得して Slack に投稿
投稿先はワークショップ専用のテストチャンネルです。Claude Code のチャットに以下をそのまま貼り付けてください：
§B.3眺めてみよう
- Slack テストチャンネルに自分の投稿が届いたか確認
- Claude Code がどのツールをどの順番で実行したか（ツール呼び出しの履歴）を見てみましょう
- MCP経由の操作と直接HTTP実行の違い、どちらが向いている場面か、ペアの人と話してみてください
クロージング
5分§4.1持ち帰ってほしいポイント
.mcp.json を置くだけで、Claudeが業務システムのツールを直接呼び出せるようになる§4.2第5回（最終回・5/28）の予告
§4.3同窓会のアナウンス
全5回が終わって1か月ほど経ったら、それぞれの業務でClaudeを使ってみて感じたこと・作ったものを持ち寄って共有する場を予定しています。
- 形式：プロジェクトごとのチームで発表
- 日程・チーム編成・詳細：第5回でアナウンスします
「ワークショップが終わったら関係が途切れる」のではなく、継続して試行錯誤するコミュニティにしていきましょう。