---
title: 20260617_AIの可能性を広めよう_MCP入門
tags:  #mcp #ai #toolcalling #handson #security  
author: [eXpresser](https://www.docswell.com/user/eXpresser-UXM)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/4EZL849M73.jpg?width=480
description: https://dxdojo.connpass.com/event/396167  この発表では、まずMCPが何かを説明し、AIと連携してツールを呼び出す仕組みを示します。その後、Claude Desktopを使ってMCPサーバーを設定し、draw.ioで組織図を作成するハンズオンと、売上データを統合・分析するサンプルアプリでMCPの動作を体験します。最後に、悪意あるプロンプトやサーバーからの情報漏洩を防ぐためのセキュリティ対策を具体的に提示します。
published: June 17, 26
canonical: https://www.docswell.com/s/eXpresser-UXM/Z9NMD7-20260617-MCP
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/4EZL849M73.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/Y76WP3K57V.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/G75MKLPG74.jpg)

タイムテーブル
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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/9J29WL6DER.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/DEY4LQ9MJM.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/VJNY4KL378.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/YE9PQV4PJ3.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/GE8DGPQXED.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/LELMG1XN7R.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/4JMYQWLQJW.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/PJR98YKK79.jpg)

ハンズオン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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/PEXQ8GL5JX.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/3EK9K4LRED.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/L73WZL3G75.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/87DKRN4NJG.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/VJPKW5MNE8.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/2EVV8P9YEQ.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/57GL5PZWEL.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/4EQYZ2LQJP.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/KJ4W3LDY71.jpg)

ハンズオン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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/LE1Y1LZN7G.jpg)

ハンズオン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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/GEWG8V6MJ2.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/47ZL84YMJ3.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/YJ6WP3D5JV.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/GJ5MKL3GJ4.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/LE3WZL6PE5.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/8EDKRNV37G.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/V7PKW5VPJ8.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/2JVV8PZVJQ.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/5EGL5P41JL.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/4JQYZ2GN7P.jpg)

まとめ
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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/K74W3L53E1.jpg)

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


# Page. 33

![Page Image](https://bcdn.docswell.com/page/LJ1Y1LWZEG.jpg)

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