Screenshotmcp

Screenshot MCP

全ページ、要素、デバイスサイズに対応した、Web サイトのスクリーンショットを撮影する Model Context Protocol（MCP）サーバーです。

機能

• 自動スクロールによる全ページのスクリーンショット撮影
• CSS セレクターを使った特定要素のスクリーンショット撮影
• 複数のデバイスプリセット（モバイル、タブレット、デスクトップ）
• カスタムビューポート設定
• 高度な待機条件（CSS セレクター、ネットワークアイドル、カスタム遅延）
• 安全な操作のためのエラー処理と検証
• リソース枯渇を防ぐレート制限

インストール

1. このプロジェクトをクローンまたはダウンロードします
2. ディレクトリに移動します：cd /path/to/ScreenshotMCP
3. .env.example を .env に名前変更します
4. 依存関係をインストールします：npm install
5. サーバーを起動します：npm start

Claude Code での使用

開発ワークフローの一環としてスクリーンショットを撮影するには、Claude Code CLI または Claude Desktop から Screenshot MCP を直接使用できます。

Claude Code CLI の場合： ~/.config/claude/mcp_servers.json に追加します：

{
  "screenshot-full-page-mcp": {
    "command": "node",
    "args": ["/path/to/screenshot-full-page-mcp/index.js"]
  }
}

または

claude mcp add screenshot-full-page-mcp node ./index.js

Claude Desktop の場合： claude_desktop_config.json に追加します：

{
  "mcpServers": {
    "screenshot-full-page-mcp": {
      "command": "node",
      "args": ["/path/to/screenshot-full-page-mcp/index.js"]
    }
  }
}

Cursor での使用

開発ワークフローの一環としてスクリーンショットを撮影するには、Cursor IDE から Screenshot MCP を直接使用できます。

1. Cursor を開きます。

2. 設定 > MCP Servers に移動します。

3. Screenshot MCP の新しい MCP サーバーエントリを追加します：

   {
     "mcpServers": {
       "screenshot-full-page-mcp": {
         "command": "node",
         "args": ["/path/to/screenshot-full-page-mcp/index.js"]
       }
     }
   }
   

4. 設定を保存します。

使用方法

設定が完了したら、Claude Code で自然言語のコマンドを使用できます：

基本的なスクリーンショット

"Take a screenshot of https://example.com"

モバイルのスクリーンショット

"Capture a mobile screenshot of https://myapp.com"

カスタムビューポート

"Screenshot https://myapp.com at 1024x768 resolution"

要素の表示を待機

"Take a screenshot of https://example.com after the loading spinner disappears"

要素のスクリーンショット

"Capture just the navigation bar from https://example.com"

利用可能なツール

capture_screenshot

高度な設定オプションを使用して、全ページのスクリーンショットを撮影します。

パラメーター：

• url（必須）：スクリーンショットを撮影するWebページのURL
• viewport：ビューポート設定
  • preset：デバイスプリセット（mobile、tablet、desktop）
  • width：カスタム幅（ピクセル単位、100-5000）
  • height：カスタム高さ（ピクセル単位、100-5000）
  • deviceScaleFactor：スケール係数（0.1-3）
  • isMobile：モバイルデバイスのエミュレーション
  • hasTouch：タッチ操作のエミュレーション
• waitFor：待機条件
  • type：selector、function、timeout、または networkidle
  • value：CSS セレクター、関数、またはタイムアウト値
  • timeout：待機タイムアウト（ミリ秒単位）
• delay：スクリーンショット撮影前の追加遅延
• waitUntil：ナビゲーション完了条件

capture_element

ページ上の特定の要素のスクリーンショットを撮影します。

パラメーター：

• url（必須）：WebページのURL
• selector（必須）：対象要素の CSS セレクター
• viewport：ビューポート設定（上記と同じ）

list_device_presets

利用可能なすべてのデバイスプリセットとその設定を一覧表示します。

デバイスプリセット

プリセット	幅	高さ	スケール	モバイル	タッチ
mobile	375px	667px	2x	はい	はい
tablet	768px	1024px	2x	はい	はい
desktop	1920px	1080px	1x	いいえ	いいえ

設定

環境変数は .env ファイルで設定できます：

# Browser Configuration
BROWSER_HEADLESS=true
BROWSER_TIMEOUT=30000
MAX_CONCURRENT_SCREENSHOTS=5

# Screenshot Defaults
DEFAULT_VIEWPORT_WIDTH=1920
DEFAULT_VIEWPORT_HEIGHT=1080
DEFAULT_WAIT_TIMEOUT=10000

# Security
RATE_LIMIT_REQUESTS=100
RATE_LIMIT_WINDOW=60000

# Debug
DEBUG=false
LOG_LEVEL=info

セキュリティ機能

• URL 検証（HTTP/HTTPS のみ）
• CSS セレクターのサニタイズ
• 同時リクエストのレート制限
• サンドボックス化されたブラウザー実行
• 入力検証とエラー処理

システム要件

• Node.js 18+
• Chrome/Chromium ブラウザー（Puppeteer とともに自動インストール）
• 最低 2GB の RAM
• 500MB のディスク容量

トラブルシューティング

よくある問題

1. ブラウザーの起動に失敗する場合：

   • システムリソースが十分にあることを確認してください
   • Chrome/Chromium が正しくインストールされているか確認してください
   • デバッグには BROWSER_HEADLESS=false を設定してみてください

2. スクリーンショットがタイムアウトする場合：

   • .env の BROWSER_TIMEOUT を増やしてください
   • 対象の Web サイトが正しく読み込まれるか確認してください
   • 適切な waitUntil 条件を使用してください

3. メモリの問題：

   • MAX_CONCURRENT_SCREENSHOTS を減らしてください
   • MCP サーバーを定期的に再起動してください
   • システムのメモリ使用量を監視してください

デバッグモード

詳細なログを記録するには、.env ファイルで DEBUG=true を設定して、デバッグモードを有効にしてください。

貢献

1. リポジトリをフォークします
2. 機能ブランチを作成します
3. 変更を加えます
4. 該当する場合はテストを追加します
5. プルリクエストを送信します

ライセンス

MIT ライセンスです。詳細は LICENSE ファイルをご覧ください。

サポート

問題や質問については、以下をご利用ください。

• GitHub で issue を作成する
• トラブルシューティングのセクションを確認する
• MCP のドキュメントを参照する