MCP Server Website

🚀 @just-every/mcp-screenshot-website-fast

高速かつ効率的にウェブページのスクリーンショットを撮影できます。CLIコーディングツールに最適化されています。全ページを自動的に1072x1072のチャンクに分割し、最適な処理を行います。

🚀 クイックスタート

このツールはAIビジョンワークフローに特化して構築されています。自動的な解像度制限とタイリング機能を備え、Claude Vision APIや他のAIモデルに最適な高品質のスクリーンショットを撮影できます。スクリーンショットは1072x1072ピクセル（1.15メガピクセル）に最適化され、最大の互換性を保証します。

✨ 主な機能

• 📸 Puppeteerヘッドレスブラウザを使用した高速なスクリーンショット撮影
• 🎯 自動解像度制限（最適な1.15メガピクセルのために1072x1072）によるClaude Vision最適化
• 🔲 全ページを自動的に1072x1072のタイルに分割する自動タイリング
• 🎬 設定可能な間隔で一連のスクリーンショットを撮影するスクリーンキャスト撮影
• 🔄 キャッシュを使用しないため、常に最新の内容を反映した常に新鮮なコンテンツ
• 📱 レスポンシブテスト用の設定可能なビューポート
• ⏱️ 動的コンテンツ用の待機戦略（networkidle、カスタム遅延）
• 📄 デフォルトで全ページを撮影する全ページキャプチャ
• 🎥 高品質のアニメーションWebPファイルとして保存するアニメーションWebPエクスポート
• 💉 スクリーンキャスト撮影前にカスタムJSを実行するJavaScriptインジェクション
• 📦 高速なnpmインストールのための最小限の依存関係
• 🔌 AIワークフローをシームレスに行うためのMCP統合
• 🔋 60秒間の非アクティブ状態後に自動的にブラウザをクリーンアップするリソース効率化
• 🧹 各スクリーンショット撮影後にページを閉じてメモリリークを防止するメモリ管理

📦 インストール

Claude Code

claude mcp add screenshot-website-fast -s user -- npx -y @just-every/mcp-screenshot-website-fast

VS Code

code --add-mcp '{"name":"screenshot-website-fast","command":"npx","args":["-y","@just-every/mcp-screenshot-website-fast"]}'

Cursor

cursor://anysphere.cursor-deeplink/mcp/install?name=screenshot-website-fast&config=eyJzY3JlZW5zaG90LXdlYnNpdGUtZmFzdCI6eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkBqdXN0LWV2ZXJ5L21jcC1zY3JlZW5zaG90LXdlYnNpdGUtZmFzdCJdfX0=

JetBrains IDEs

設定 → ツール → AIアシスタント → モデルコンテキストプロトコル（MCP） → 追加

「JSONとして」を選択し、以下を貼り付けます。

{"command":"npx","args":["-y","@just-every/mcp-screenshot-website-fast"]}

生のJSON（任意のMCPクライアントで動作）

{
  "mcpServers": {
    "screenshot-website-fast": {
      "command": "npx",
      "args": ["-y", "@just-every/mcp-screenshot-website-fast"]
    }
  }
}

これをクライアントのmcp.json（例：.vscode/mcp.json、~/.cursor/mcp.json、またはClaudeの場合は.mcp.json）に追加します。

前提条件

• Node.js 20.x以上
• npmまたはnpx
• Chrome/Chromium（Puppeteerによって自動的にダウンロードされます）

💻 使用例

MCPサーバーの使用方法

IDEにインストールした後、以下のツールが使用可能です。

利用可能なツール

• take_screenshot - ウェブページの高品質なスクリーンショットを撮影します。
  • パラメーター:
    • url（必須）: 撮影するHTTP/HTTPSのURL
    • width（オプション）: ビューポートの幅（ピクセル単位、最大1072、デフォルト: 1072）
    • height（オプション）: ビューポートの高さ（ピクセル単位、最大1072、デフォルト: 1072）
    • fullPage（オプション）: タイリングを伴う全ページのスクリーンショットを撮影する（デフォルト: true）
    • waitUntil（オプション）: イベントまで待機する: load、domcontentloaded、networkidle0、networkidle2（デフォルト: domcontentloaded）
    • waitFor（オプション）: 追加の待機時間（ミリ秒単位）
    • directory（オプション）: スクリーンショットを保存するディレクトリ - base64画像ではなくファイルパスを返します

基本的な使用法

take_screenshot(url="https://example.com")

高度な使用法

take_screenshot(url="https://example.com", directory="/path/to/screenshots")

directoryパラメーターを使用する場合:

• スクリーンショットはタイムスタンプ付きのPNGファイルとして保存されます。
• base64データではなくファイルパスが返されます。
• タイリングされたスクリーンショットの場合、各タイルは個別のファイルとして保存されます。
• ディレクトリが存在しない場合は自動的に作成されます。

take_screencast

一定時間にわたって一連のスクリーンショットを撮影し、スクリーンキャストを作成します。ビューポートの上部のタイル（1072x1072）のみを撮影します。

パラメーター

• url（必須）: 撮影するURL
• duration（オプション）: 総時間（秒単位、デフォルト: 10）
• interval（オプション）: スクリーンショット間の間隔（秒単位、デフォルト: 2）
• jsEvaluate（オプション）: 開始時に実行するJavaScriptコード
• waitUntil（オプション）: 待機戦略: 'load'、'domcontentloaded'、'networkidle0'、'networkidle2'
• waitForMS（オプション）: 開始前の追加の待機時間
• directory（オプション）: アニメーションWebPとしてディレクトリに保存する（1秒ごとに撮影）

基本的な使用法

take_screencast(url="https://example.com")

高度な使用法

take_screencast(url="https://example.com", duration=15, interval=3)

take_screencast(
  url="https://example.com",
  jsEvaluate="document.body.style.backgroundColor = 'red';"
)

take_screencast(url="https://example.com", directory="/path/to/output")

directoryパラメーターを使用する場合:

• 1秒間隔のアニメーションWebPが作成されます。
• 個々のフレームもPNGファイルとして保存されます。
• アニメーションはデフォルトで無限にループします。
• WebPは優れた品質を提供します:
  • フルカラーサポート（256色制限なし）
  • ウェブアニメーション用の効率的な圧縮
  • グラデーション背景やスムーズなアニメーションに最適
  • GIFよりも小さいファイルサイズで、より高い品質

📚 ドキュメント

開発時の使用方法

インストール

npm install
npm run build

スクリーンショットの撮影

# 自動タイリングを伴う全ページ（デフォルト）
npm run dev capture https://example.com -o screenshot.png

# ビューポートのみのスクリーンショット
npm run dev capture https://example.com --no-full-page -o screenshot.png

# 特定の条件を待つ
npm run dev capture https://example.com --wait-until networkidle0 --wait-for 2000 -o screenshot.png

CLIオプション

• -w, --width <pixels> - ビューポートの幅（最大1072、デフォルト: 1072）
• -h, --height <pixels> - ビューポートの高さ（最大1072、デフォルト: 1072）
• --no-full-page - 全ページのキャプチャとタイリングを無効にする
• --wait-until <event> - イベントまで待機する: load、domcontentloaded、networkidle0、networkidle2
• --wait-for <ms> - 追加の待機時間（ミリ秒単位）
• -o, --output <path> - 出力ファイルのパス（タイリングされた出力の場合は必須）

自動再起動機能

MCPサーバーはデフォルトで自動再起動機能を備えており、信頼性を向上させます。

• サーバーがクラッシュした場合に自動的に再起動します。
• 未処理の例外やPromiseの拒否を処理します。
• 指数バックオフを実装しています（1分間に最大10回の試行）。
• すべての再起動試行をログに記録して監視します。
• シャットダウン信号（SIGINT、SIGTERM）を適切に処理します。

開発/デバッグ時に自動再起動を無効にするには:

# 再起動ラッパーなしで直接実行
npm run serve:dev

アーキテクチャ

mcp-screenshot-website-fast/
├── src/
│   ├── internal/       # コアのスクリーンショット撮影ロジック
│   ├── utils/          # ロガーとユーティリティ
│   ├── index.ts        # CLIのエントリポイント
│   ├── serve.ts        # MCPサーバーのエントリポイント
│   └── serve-restart.ts # 自動再起動ラッパー

開発

# 開発モードで実行
npm run dev capture https://example.com -o screenshot.png

# 本番用にビルド
npm run build

# テストを実行
npm test

# 型チェック
npm run typecheck

# リント
npm run lint

なぜこのツールを使うのか？

AIビジョンワークフローに特化して構築されています。

1. Claude Vision APIに最適化 - 自動的に解像度を1072x1072ピクセル（1.15メガピクセル）に制限します。
2. 自動タイリング - 全ページをAI処理用の最適なチャンクに分割します。
3. 常に新鮮 - キャッシュを使用しないため、最新の内容を取得できます。
4. MCPネイティブ - AI開発ツールとの本格的な統合が可能です。
5. シンプルなAPI - スクリーンショットを撮影するためのクリーンでシンプルなインターフェースです。

コントリビュートの方法

コントリビューションは大歓迎です！以下の手順に従ってください。

1. リポジトリをフォークします。
2. 機能ブランチを作成します。
3. 新しい機能に対するテストを追加します。
4. プルリクエストを送信します。

トラブルシューティング

Puppeteerの問題

• Chrome/Chromiumがダウンロードできることを確認してください。
• ファイアウォール設定を確認してください。
• PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=trueを設定し、カスタム実行ファイルを提供してみてください。

スクリーンショットの品質

• ビューポートの寸法を調整してください。
• 適切な待機戦略を使用してください。
• サイトが認証を必要とするかどうかを確認してください。

タイムアウトエラー

• --wait-forフラグで待機時間を増やしてください。
• 異なる--wait-until戦略を使用してください。
• サイトがアクセス可能かどうかを確認してください。

📄 ライセンス

MIT