ARURU Learning Hub

AruruCode

WebマーケターのためのClaude Code学習サイト

Workshop

Claude CodeでMCPを使う Google Map編

Claude CodeでMCPを使うアイキャッチ画像

MCPは、Claude Codeに外部ツールをつないで、人間の言葉で使えるようにする仕組みです。Google Maps MCPを使うと、「渋谷のカフェを探して」のように頼むだけで、地図の情報をClaude Codeから取得できるようになります。

ワークショップをはじめる フォルダ作成の記事を見る
1. はじめに確認する 2. Google Maps MCPを設定する 3. Claude Codeで接続確認する 4. 最初の検索を試す 5. できたか確認する

Step 1

はじめに確認する

この回では、Google Mapsそのものを深く学ぶのではなく、MCPをつないで、Claude Codeから外部ツールを使う感覚をつかむことが目的です。

この回の作業フォルダ

ワークショップごとにプロジェクトディレクトリを分ける練習も兼ねて、この回では最初に C:\aruru-code の中へ mcp-google-maps を作って始めます。

Windows: C:\aruru-code\mcp-google-maps

Mac: ~/aruru-code/mcp-google-maps

この回でやること

プロジェクトディレクトリを作る、claude mcp add で追加する、接続確認をする、検索を試す、の4つです。

この回で使う題材

Google Maps のMCPエンドポイントを使って、場所探しをClaude Codeに頼む流れを体験します。

まず押さえること

MCPは、Claude Codeが外部の情報源や機能に触れるためのつなぎ口です。今回はその最小体験を作ります。

Step 2

Google Maps MCPを設定する

この回では、コマンドラインから Google Maps のMCPサーバーを追加します。まずは通常の追加方法を見て、そのあと Windows で動かす場合のコマンドも確認します。

手順 1

まずはコマンドラインで Google Maps のMCPサーバーを追加します。

Command 
claude mcp add google-maps-platform-code-assist -- npx -y @googlemaps/code-assist-mcp@latest

Windows の場合

Windowsでは、npx コマンドが正しく動作するように cmd /c ラッパーを使います。

Windows 
claude mcp add google-maps-platform-code-assist -- cmd /c "npx -y @googlemaps/code-assist-mcp@latest"

MCP名の google-maps-platform-code-assist は、Claude Code上で見える名前です。

手順 2

次に、プロジェクトの .mcp.json を開いて設定を手動で追加します。

Windows 
C:\aruru-code\mcp-google-maps\.mcp.json
Mac 
~/aruru-code/mcp-google-maps/.mcp.json
.mcp.json 
"mcpServers": {
  "google-maps-platform-code-assist": {
    "command": "npx",
    "args": [
      "-y", "@googlemaps/code-assist-mcp@latest"
    ]
  }
}

手順 3

コマンドでインストールして、.mcp.json に必要な設定を手動で入れたら、次の接続確認へ進みます。

Step 3

Claude Codeで接続確認する

.mcp.json を置いたら、Claude CodeでMCP一覧を見て、Google Maps が認識されているかを確認します。

確認方法

/mcp

一覧の中に google-maps-platform-code-assist が見えていれば、まずは接続設定が読まれています。認証が必要な場合は、この画面から進めます。

ここで見たい状態

「MCPが追加されている」「Claude Codeからその名前が見えている」の2つが確認できればOKです。最初は完璧な理解より、コマンド一発で追加できて、必要なら /mcp から認証や確認ができることを体感するのが大事です。

こんな確認画面が出たら？

Claude Codeで新しいMCPサーバーを使うか確認する画面

New MCP server found in .mcp.json: google-maps-platform-code-assist という画面は、新しく追加したMCPサーバーをこのプロジェクトで使ってよいか確認している状態です。

1. Use this and all future MCP servers in this project

このプロジェクトでは、今後追加されるMCPもまとめて許可する、という意味です。このフォルダをMCP練習用に使うなら便利です。

2. Use this MCP server

今回追加した google-maps だけを許可する、という意味です。今回のワークでは、まずこれを選べば大丈夫です。

3. Continue without using this MCP server

このMCPを使わずに続ける、という意味です。今回はGoogle Maps MCPを使いたいので選ばなくてOKです。

Step 4

最初の検索を試す

つながったら、実際に場所探しをひとつ試して、MCP経由で情報が取れる感覚をつかみます。

最初の依頼例

Prompt 
渋谷駅近くのカフェを3件探して、それぞれの特徴を短くまとめてください。

結果が返ってきたら、MCP経由で外部の地図情報を扱えた、という最初の成功体験になります。

Step 5

できたか確認する

最後に、この回でできるようになったことを短く確認しておきましょう。

01

C:\aruru-code または ~/aruru-code の中に、この回のプロジェクトディレクトリを作れた

02

claude mcp add で Google Maps MCP を追加できた

03

/mcp で MCP が認識されていることを確認できた

04

人間の言葉で外部ツールを動かす感覚を体験できた

今回の作業まとめ

今回は、ワークショップ用のプロジェクトディレクトリを作り、claude mcp add で Google Maps MCP を追加して、接続確認と最初の検索まで試しました。つまり、「作業場所を作る → コマンド一発でMCPを追加する → Claude Codeから外部ツールを使う」という基本の流れを、一度通して確認した形です。

次へ

次は、プロジェクトの中にどんなファイルや設定を置くと分かりやすいかも合わせて見ると、MCPを使う作業がさらに整理しやすくなります。

次の記事へ進む
上に戻る