20260617_AIの可能性を広めよう_MCP入門

AIの可能性を広めよう MCP入門 2026/6/17 @DXDojo #22 Shinnosuke Oka / 33

この発表のゴール MCPとは何かを知ろう • MCPを使ったら何がうれしくなるの？ • MCPを使うにはどうすればいいの？ MCPの仕組みを知ろう • AIとMCPはどうやって連携しているの？ これらに 回答 できるよう になる MCPの裏の顔を知ろう • MCP、便利だけど危ないんじゃない？ • 気を付けることはないの？ 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 2 / 33

タイムテーブル 5 min Networking & Ice-break 10 min Introduction MCPって何？ 20 min Hands-on pt.1 MCPを使ってみよう 20 min Hands-on pt.2 MCPの仕組みを知ろう 5 min Wrap-up: MCP利用上の注意 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 3 / 33

自己紹介 Shinnosuke Oka (eXpresser) 独立系の受託開発会社に所属 Azureクラウドエンジニア …と言いつつWebならなんでもやる 趣味：鉄道撮影・架空鉄道 鉄道趣味＋自己啓発のため、 路線図を作るWebアプリを 開発・公開中 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 4 / 33

Introduction: MCPって何？ 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 5 / 33

MCPがないと・・・？ カレーライスの作り方を教えて 一般的な質問には回答できる 材料～～～、作り方～～～、… 有給をとる時のルールは？ 有給休暇の取得は、所属会社や組織 の規定によって異なります。一般的 には… 今日の大阪の天気は？ リアルタイム情報は答えられません 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 社内データ (あなた専用の情報) の回答はできない 最新のリアルタイム情報の 回答はできない 6 / 33

MCPがあると・・・！ カレーライスの作り方を教えて AIが道具 (Tool) を自ら使いこなし、 追加情報の取得や登録などを行う 材料～～～、作り方～～～、… 有給をとる時のルールは？ 社員名簿データベース あなたの勤続年数ですと、～日取得 できます。有給申請は社内ポータル サイトから申請ください。 社内規約文書 今日の大阪の天気は？ 時計 6月16日 今夜の大阪の天気は… 2026/06/17 お天気サイト DX Dojo #22 (C) Shinnosuke Oka 7 / 33

MCP (Model Context Protocol) = Tool Calling を標準化したもの カレーライスの作り方を教えて 各Toolの 一覧、用途、呼び出し方 を ある「作法」に則って標準化 材料～～～、作り方～～～、… 有給をとる時のルールは？ 社員名簿データベース あなたの勤続年数ですと、～日取得 できます。有給申請は社内ポータル サイトから申請ください。 社内規約文書 今日の大阪の天気は？ 時計 6月16日 今夜の大阪の天気は… 2026/06/17 お天気サイト DX Dojo #22 (C) Shinnosuke Oka 8 / 33

MCPってなに？ ChatGPT Claude GitHub Copilot MCPという「共通言語」を使うことで、 あらゆるAIに対応したツールを 開発・公開できる！ MCP サーバー Google Services MCP サーバー Mail Service MCP サーバー Discord MCP サーバー Slack … … こっち側を MCPクライアント という 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 9 / 33

Hands-on pt.1: MCPを使ってみよう 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 10 / 33

ハンズオン1: MCP を使ってみよう Claude Desktop で実際に公開されている MCPサーバーを動かしてみましょう！ Draw.io フローチャート等を作図できる高機能作図ツール 1. 2. 3. 4. Node.js (npx) がインストールされているか確認する Claude Desktop の設定ファイルを編集する Claude Desktop を完全に再起動する Draw.io で簡単な組織図を書いてみる 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 11 / 33

ハンズオン1: MCP を使ってみよう (1) インストール方法はいくつかありますが、 公式サイトからインストールする 最もシンプルな方法を使います • Node.jsのインストール • https://nodejs.org/ja/download にアクセス • OSを選択し、インストーラをダウンロードし、実行 • ターミナルを開き、npx コマンドが実行できるか確認 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 12 / 33

• https://nodejs.org/ja/download

ハンズオン1: MCP を使ってみよう (2) • Claude Desktop を起動する • Windows: 左上の「 」アイコン→「ファイル」→「設定」 Mac OS:「Claude」→「設定」を押下 • 設定ウィンドウ左側の「デスクトップアプリ」→「開発者」を 選択 • 「ローカルMCPサーバー」の 「設定を編集」を押下 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 13 / 33

ハンズオン1: MCP を 使ってみよう (3) • claude_desktop_config.json を テキストエディタで開く • 右記の通り、mcpServers 設定を 追加する “mcpServers”がすでに存在する場合は “drawio”エントリから追加してください。 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 14 / 33

ハンズオン1: MCP を使ってみよう (4) • Claude Desktop に戻り、 ハンバーガーメニュー→「ファイル」→「終了」を押下する 単に「×」をすると、裏で起動している状態になっている 確実に再起動するため、「終了」を使うこと • Claude Desktop を再起動し、設定→開発者より、 ローカルMCPサーバーに「drawio」が追加されていることを 確認する 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 15 / 33

ハンズオン1: MCP を使ってみよう (5) • 以下のプロンプトでAIにリクエストする 簡単な組織図サンプルを draw.io で作成してください。 • 途中、権限を求められる場合があるので、許可する • 成功すると、ブラウザが起動し、組織図が出てくる 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 16 / 33

成功例 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 17 / 33

主なMCPサーバー Google Drive Gmail Figma Slack Salesforce MCPサーバーを公開しているサービスはかなり多い 「サービス名 MCP」で検索すると意外と出てくる 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 18 / 33

• https://developers.google.com/workspace/drive/api/guides/branding?hl=ja
• https://developers.google.com/workspace/gmail/api/guides/configure-mcp-server?hl=ja
• https://github.com/GLips/Figma-Context-MCP
• https://dev.classmethod.jp/articles/slack-mcp-what-can-do/
• https://help.salesforce.com/s/articleView?id=platform.hosted_mcp_servers.htm&type=5

Hands-on pt.2: MCPの仕組みを知ろう 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 19 / 33

ハンズオン2: MCPの仕組みを知ろう サンプルアプリ：全店舗の売り上げデータの統合・分析ツール を使って、MCPの仕組みを理解しましょう 20260601_梅田店.csv 商品名 単価 売上数量 売上金額 Aランチ 1,000 40 40,000 Bランチ 1,200 20 24,000 Cランチ 1,500 30 45,000 … 20260601_なんば店.csv 商品名 単価 売上数量 売上金額 Aランチ 1,000 30 40,000 Bランチ 1,200 25 30,000 Cランチ 1,500 40 60,000 2026/06/17 … DX Dojo #22 (C) Shinnosuke Oka 20 / 33

ハンズオン2: MCPの仕組みを知ろう (1) 実行方法 Pattern A 実行方法 Pattern B • 中級者向け (コマンドが叩けるレベル) • 初学者向け (or環境を汚したくない方) • サンプルコードをDLして Node.js をPC上で実行 • 登壇者が用意した 公開MCPサーバーを活用 （期間限定） • README.md に手順記載 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 21 / 33

• https://github.com/eXpresser-UXM/20260617-dx-dojo-mcp-server-sample

Pattern A: サンプルコードをDL活用 • サンプルコード: https://github.com/eXpresser-UXM/20260617-dx-dojomcp-server-sample • README.md の内容を追っていきます。 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 22 / 33

• https://github.com/eXpresser-UXM/20260617-dx-dojo-mcp-server-sample

Pattern B: 公開MCPサーバーを活用 • claude_desktop_config.json を テキストエディタで開く • 右記の通り、mcpServers 設定を 追加する 2026/06/17 “dx-dojo-sample-mcp” エントリから追 DX Dojo #22 (C)加してください。 Shinnosuke Oka 23 / 33

成功例（分析） 先月の全店舗の売り上げを分析してください。 特に曜日ごとの売上傾向が知りたいです。 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 24 / 33

成功例（登録） 今日の売上を登録したい 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 25 / 33

MCPサーバーの仕組み (1) MCPサーバーは事前に 自分がどんな機能を持っているか 伝える MCPサーバー こんな機能 (Tool) を持ってるよ！ 店舗一覧取得 : 運営している店名をすべて取得 メニュー一覧取得 : 販売中のメニューをすべて取得 売上データ取得 : 店名、期間を指定して売上を取得 売上データ登録 : 店名を指定して1日分の売上を登録 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 了解！ MCPクライアント 26 / 33

MCPサーバーの仕組み (2) ユーザーの要望を実現するため、MCPサーバーの どの機能をどの順番で 呼び出すべきか考え 、 自動で実行 する 先月の売上データを 分析して！ 店舗一覧取得で どんなお店があるか確認しよう！ メニュー一覧取得で どんなメニューがあるか確認しよう！ MCPクライアント 2026/06/17 売上取得で 2025/5/1/～5/31の売上を 店舗ごとに取得しよう！ DX Dojo #22 (C) Shinnosuke Oka 27 / 33

Wrap-up: MCP利用上の注意 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 28 / 33

MCPを使う上での注意 (Security) 例2) 悪意のあるプロンプトの実行リスク (=間接的プロンプトインジェクション) 例1) 悪意のあるMCPの実行リスク 外部の悪意ある データを取得 MCP呼出 BAD MCP Server GOOD MCP Server 不正プログラム 混入 GOOD MCP Server 機密情報の 流出 ✓ 信頼できる企業の公式MCPのみを導入 ✓ 機密データを扱う際に 外部送信MCPの利用を制限する そのMCP、本当に今使っていいの？ という判断を怠らないこと 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 29 / 33

MCPを使う上での注意 (Performance) 使うMCPサーバーが多くなると？ 大量のツールをAIに読み込ませるとAIの推論低下につながる 入力トークン爆増による利用コスト増につながる タスクごとに使うMCPサーバーを限定する (VSCode等は設定あり) 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 30 / 33

まとめ MCPの本質 = AIに「手足」を授ける • MCPを与えることで、社内情報や最新情報を取得できる • Claude Desktop で draw.io MCP サーバーの動かし方を理解 MCPの仕組み = AIによる「自律的なツールの実行」 • MCPサーバーは「何ができるか」をAIに提供する • ユーザーからの要望実現のため、AIが考え、自動で実行 MCPの運用: 最大のリスクヘッジは「人間」 • 便利さの裏で「知らん間になんかされた！」となるMCPの怖さ • そのMCP、本当に今使っていいの？ という判断を怠らないこと 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 31 / 33

最後に • ハンズオンで実施した内容は必要に応じて Clean-up ✓claude_desktop_config.json の mcpServers 設定を戻す ✓サンプルコードの削除 ✓Node.js のアンインストール ✓Claude Desktop のアンインストール • 宣伝 WebでSVGの図を書きたいといったニーズがあればぜひお声掛けください！ 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 32 / 33

Thank You! 2026/06/17 DX Dojo #22 (C) Shinnosuke Oka 33 / 33