非エンジニアがMCPを活用し、GoogleMaps×Notionで旅行プランを自動作成に挑戦してみた
こんばんわ。すなこです。
最近MCP（Model Context Protocol）が話題ですね。
MCPは（Claudeの要約）とのことで、今まで生成AIツールとローカルのデータって繋がりにくかったけど繋ぐ手順みたいなの作ったからみんな繋いでみてね、みたいな雰囲気。
これによって生成AIを通してツールの活用が今まで以上に楽になりそうです。
例えば、SpotifyMCPとClaude（生成AI）を連携して、「気分が上がる邦楽を選んで」と生成AIにお願いすることで、生成AIがSpotifyから曲を選曲して流してくれたり。
今回私は生成AIのClaudeとNotion,Googleマップを連携して、ClaudeにGoogleマップを通して旅行プランを計画してもらい、それをNotionにページを作成して、テーブル形式に記載してもらうという実装をおこないました！
自分は旅行が好きですが、計画が面倒くさいタイプなのでぜひここら辺を生成AIにやらせたいと思っています。
誰でも簡単に活用できる？
MCPは事前準備をこなすことで、様々なツールを連携して便利に使うことができます。
とはいっても、現状の記事などをみるとバリバリのエンジニアの人たちが難しそうな単語を書いた記事が多いイメージです。
いろんな記事を見ても、非エンジニアでAI初心者の私には、そもそも何が必要で、何を設定すればよいかわからない状態で最初は戸惑いました…
そのため、自分の経験をもとにスムーズにMCP連携をする手順をここに記載します。
（もちろんいろんなやり方がありますが、あくまでも一例として参考にしてくれれば嬉しいです）
今回参考にした記事はこちらになります。
NotionMCP
Google Maps MCP
事前準備
今回私は以下の３つを使ってMCP連携を実装しました。
①Claude
生成AIであるClaudeのデスクトップアプリ版である「Claude Desktop」をインストールが必要になります。
（Web上のClaudeだとMCPとの連携ができませんので注意してください）
後ほど解説しますが、基本的に様々なツールとのMCP連携は設定ファイル（claude_desktop_config.json）をいじります。
②Node.js
Claude DesktopでMCP連携するにはNode.jsという実行環境が必要です。
参考記事にはv18以上推奨と記載されています。
インストールした時点ではv22でしたので、初めてインストールする方は問題ないと思われます。
③VSCode(Visual Studio Code)
Claudeの設定ファイル（claude_desktop_config.json）を編集する際に使用します。
MCP設定（Claude側）
Notionのインテグレーションが作成できたら、今度はそれをClaudeに登録する作業が必要です
ここで、Claude Desktopの設定ファイル（claude_desktop_config.json）を編集することとなります。
Claude Desktopを開いて、左上のハンバーガーメニューから、「ファイル→設定」
「開発者」を選び、画面右下にある「構成を編集」をクリック
「構成を編集」をクリックすると、PC内のファイルが表示されますが、「claude_desktop_config」をクリックします。（ダブルクリックすることで、先ほどインストールしたVScodeが立ちあがります）
最初は「｛｝」だけが記載されていますが、それを削除して、下記のコードをコピペして、「ここにインテグレーションを貼り付け」を削除して、ご自身のインテグレーションシークレットを貼り付けます。
おそらく\"Bearer ntn_1234567dhgalkdjeuho\”みたいな感じになるはず。
貼り付けが完了したら、VScode上で保存（Ctrl + S）しましょう。
そしてClaude Desktopを一旦閉じて、再起動させます。
（再起動させないと、先ほどの設定ファイルの変更を読み込まないため）
再起動後に、Claudeにハンマーアイコンが表示されており、クリックしてNotionのMCPツールが表示されていれば設定成功です。
MCP設定（Notion側）
次に、Claudeと接続したいNotionのページでインテグレーションを接続します。
対象にしたいNotionページで右上の詳細ボタンを押し、「接続」から先程作成したインテグレーションを選択します。
以上でNotionとClaudeの連携が完了です！
これによってClaudeに出した指示をMCP経由でNotionに実行できるようになりました。
接続テストとしてClaudeに指示すると、しっかりNotionにデータベースを作ってくれました！
ここからはさらにGoogleMapsとMCP連携をして、GoogleMapsをもとに旅行計画を立ててもらい、それをNotionに記載してくれる仕組みをつくります。
GoogleMapsも同じ流れで設定するだけなので、ここまでできればあっという間に次は終わります。
Claude DesktopでMCPを設定
先ほどのNotionの時と同じく、接続先を増やす際は設定ファイルに書き込む必要があります。
Claude Desktopを開いて、左上のハンバーガーメニューから、「ファイル→設定→開発者」を選んで「構成を編集」をクリック
「claude_desktop_config」を同じようにクリックすると、先ほどNotionのMCP接続で書き込んだ内容が表示されると思います。
NotionとGoogleMapsを組み合わせて記載しないといけないので下記内容をそのままコピーして貼り付けてください。
※各キーを入力する箇所にNotionのインテグレーションシークレット、GoogleMaps APIキーを貼り付け
保存後、Claude Desktopを再起動してください。
ツールバーにハンマーアイコンをクリックして、Google Mapsが追加されていると、MCP接続が有効になります。
テストとして、地理座標を取得してみました！
