Claudeのスクレイピング用MCPのセットアップ

以下に、Puppeteer MCP ServerをClaude Desktopに追加して利用する方法を詳しく解説します。

動画での解説は以下。

手順 1: Puppeteer MCP Serverのインストール

Puppeteer MCP Serverを動作させるには、以下の方法でインストールします。

Puppeteer MCP Serverはnpxを使用するため、事前にNode.jsとnpmがインストールされている必要があります。

以下のコマンドでインストール済みか確認してください

node -v
npm -v

インストールされていない場合は、Node.js公式サイトからインストールしてください。

ターミナルを開き、以下のコマンドを実行してPuppeteer MCP Serverを起動します

npx -y @modelcontextprotocol/server-puppeteer

これでサーバーが起動します。

Puppeteer MCP ServerをClaude Desktopの設定に追加します。

Claude Desktopの設定ファイルは以下の場所にあります

設定ファイルをテキストエディタ（例: VS Code, Nano）で開きます。

以下の内容をJSONファイルに追加します：

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

JSONファイルの構文エラーがないことを確認し、保存します。

Puppeteer MCP Serverが正しく動作しているか確認するために、以下の操作を試してみます。

Claude Desktopのチャット欄に以下のプロンプトを入力します：

指定されたURLにアクセスしてください。URL: https://example.com

ページ全体のスクリーンショットを撮影するには、以下のプロンプトを使用します：

このURLにアクセスしてスクリーンショットを撮影してください。名前はexample_screenshotで保存。URL: https://example.com

ブラウザコンソールでJavaScriptを実行するには、以下を入力します：

このページで次のJavaScriptを実行してください: alert('Hello, Puppeteer!');

Node.jsやnpmが正しくインストールされていない場合があります。

Node.jsとnpmのインストール状況を確認し、最新バージョンを使用してください。

権限エラーが発生する場合以下のコマンドを試してください

sudo npx -y @modelcontextprotocol/server-puppeteer

サーバーのログを確認します。ターミナルで以下を実行するとログが見られます：

npx @modelcontextprotocol/inspector uvx mcp-server-puppeteer

以上の手順を実行すれば、Puppeteer MCP ServerをClaude Desktopで利用できるようになります。Webページの操作やスクリーンショット撮影、JavaScript実行などが簡単に行えるはずです。問題があれば詳細をお知らせください！