Claude Code MCP Serena完全ガイド：セットアップから活用まで

Claude CodeでSerena MCPサーバーを活用する方法を詳しく解説します。Serenaは強力なブラウザ自動化ツールで、Claude Codeと組み合わせることで開発効率が大幅に向上します。

Serena MCPとは

Serenaの概要

Serena MCPは、ブラウザ自動化とWebスクレイピングを可能にするMCPサーバーです。Playwrightベースで構築されており、Claude Codeから自然言語でブラウザを操作できます。

主な特徴

自然言語でのブラウザ操作
スクリーンショット取得
フォーム入力の自動化
E2Eテストの生成
Webスクレイピング

Serenaでできること

1. ブラウザ自動化

ページの自動遷移
ボタンクリック
フォーム入力
スクロール操作

2. テスト自動化

ユーザーフローのテスト
ビジュアルリグレッションテスト
パフォーマンス計測

3. データ収集

Webスクレイピング
競合サイト分析
価格監視

Serena MCPのインストール

前提条件

# Node.jsのバージョン確認（18以上が必要）
node --version

# npmの確認
npm --version

インストール手順

1. Serenaのインストール

# グローバルインストール
npm install -g @executeautomation/mcp-serena

# または、npxで使用
npx @executeautomation/mcp-serena

2. ブラウザのインストール

# Playwrightブラウザのインストール
npx playwright install chromium

Claude CodeでのSerena設定

基本設定

設定ファイルの場所

# macOS/Linux
~/.config/claude-code/mcp.json

# Windows
%APPDATA%\claude-code\mcp.json

基本設定

{
  "mcpServers": {
    "serena": {
      "command": "npx",
      "args": [
        "-y",
        "@executeautomation/mcp-serena"
      ]
    }
  }
}

高度な設定

ブラウザの指定

{
  "mcpServers": {
    "serena": {
      "command": "npx",
      "args": [
        "-y",
        "@executeautomation/mcp-serena"
      ],
      "env": {
        "BROWSER": "chromium",
        "HEADLESS": "false"
      }
    }
  }
}

環境変数の説明

BROWSER: 使用ブラウザ (chromium/firefox/webkit) - デフォルト: chromium
HEADLESS: ヘッドレスモード (true/false) - デフォルト: true
SLOW_MO: 操作の遅延（ms） - デフォルト: 0
TIMEOUT: タイムアウト（ms） - デフォルト: 30000

Serenaの基本的な使い方

ページへのアクセス

プロンプト例

「https://example.com にアクセスして
 スクリーンショットを撮ってください」

Serenaの動作

ブラウザを起動
指定URLにアクセス
ページ読み込み完了を待機
スクリーンショット取得

要素の操作

クリック操作

「ログインページで
 メールアドレスに "test@example.com" を入力し、
 パスワードに "password123" を入力して
 ログインボタンをクリックしてください」

フォーム入力

「お問い合わせフォームに以下の情報を入力：
 - 名前: 山田太郎
 - メール: yamada@example.com
 - メッセージ: テストメッセージ
 その後、送信ボタンをクリック」

スクレイピング

データ抽出

「https://example.com/products から
 すべての商品名と価格を取得してください」

テーブルデータの取得

「ページ内のテーブルデータを
 CSV形式で取得してください」

実践的な活用例

例1: E2Eテストの自動生成

プロンプト

「以下のユーザーフローのE2Eテストを作成：
1. トップページにアクセス
2. ログインフォームに入力
3. ダッシュボードが表示されることを確認
4. 設定ページに遷移
5. プロフィール更新
6. 保存成功メッセージを確認」

例2: 競合サイト分析

プロンプト

「以下の競合サイトから価格情報を収集：
https://competitor1.com/pricing
https://competitor2.com/pricing
https://competitor3.com/pricing

各プランの名前と価格をまとめてください」

Serenaの実行内容

各サイトに順次アクセス
価格情報を抽出
データを構造化
比較表を生成

例3: スクリーンショット自動取得

プロンプト

「https://example.com の以下のページの
 スクリーンショットを取得：
 - トップページ
 - 商品一覧ページ
 - 会社概要ページ

モバイルとデスクトップの両方で撮影」

トラブルシューティング

問題1: Serenaが起動しない

原因と対処

# Playwrightのインストール確認
npx playwright --version

# ブラウザの再インストール
npx playwright install --force chromium

# Serenaの動作確認
npx @executeautomation/mcp-serena --test

問題2: タイムアウトエラー

設定の調整

{
  "mcpServers": {
    "serena": {
      "command": "npx",
      "args": ["-y", "@executeautomation/mcp-serena"],
      "env": {
        "TIMEOUT": "60000",
        "SLOW_MO": "100"
      }
    }
  }
}

問題3: 要素が見つからない

デバッグ方法

「ヘッドレスモードを無効にして
 https://example.com にアクセスし、
 "ログイン"ボタンの要素を確認してください」

問題4: メモリ不足

対処法

{
  "mcpServers": {
    "serena": {
      "env": {
        "NODE_OPTIONS": "--max-old-space-size=4096"
      }
    }
  }
}

セキュリティのベストプラクティス

認証情報の管理

✅ 推奨される方法

{
  "mcpServers": {
    "serena": {
      "env": {
        "TEST_EMAIL": "${env:TEST_EMAIL}",
        "TEST_PASSWORD": "${env:TEST_PASSWORD}"
      }
    }
  }
}

まとめ

Serena MCPは、Claude Codeでブラウザ自動化を実現する強力なツールです。

主な利点

自然言語でのブラウザ操作
E2Eテストの自動生成
Webスクレイピングの効率化
ビジュアルテストの実現

活用のコツ

まずは簡単な操作から試す
ヘッドレスモードで効率化
認証情報は環境変数で管理
タイムアウトを適切に設定

次のステップ

基本操作に慣れる
E2Eテストを自動生成
データ収集に活用
CI/CDに統合

Serena MCPを活用して、ブラウザ自動化を効率化しましょう。

Serena MCPとは

Serenaの概要

Serenaでできること

Serena MCPのインストール

前提条件

インストール手順

Claude CodeでのSerena設定

基本設定

高度な設定

Serenaの基本的な使い方

ページへのアクセス

要素の操作

スクレイピング

実践的な活用例

例1: E2Eテストの自動生成

例2: 競合サイト分析

例3: スクリーンショット自動取得

トラブルシューティング

問題1: Serenaが起動しない

問題2: タイムアウトエラー

問題3: 要素が見つからない

問題4: メモリ不足

セキュリティのベストプラクティス

認証情報の管理

まとめ

Related Articles