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

CLIコーディングツール向けに最適化された、高速で効率的なウェブページスクリーンショットキャプチャツールです。フルページを自動的に1072x1072のチャンクにタイル分割し、最適な処理を実現します。

概要

AIビジョンワークフロー専用に構築されたこのツールは、Claude Vision APIやその他のAIモデルによる処理に最適な、自動解像度制限とタイル分割機能を備えた高品質なスクリーンショットをキャプチャします。互換性を最大化するため、スクリーンショットは1072x1072ピクセル（1.15メガピクセル）に完璧にサイズ調整されます。

Related MCP server: ScreenshotOne MCP Server

特徴

• 📸 高速スクリーンショットキャプチャ - Puppeteerヘッドレスブラウザを使用

• 🎯 Claude Vision最適化 - 自動解像度制限（最適な1.15メガピクセルを実現する1072x1072）

• 🔲 自動タイル分割 - フルページを自動的に1072x1072のタイルに分割

• 🎬 スクリーンキャストキャプチャ - 設定可能な間隔で一連のスクリーンショットを記録

• 🔄 常に最新のコンテンツ - キャッシュを使用しないため、常に最新のスクリーンショットを取得

• 📱 設定可能なビューポート - レスポンシブテストに対応

• ⏱️ 待機戦略 - 動的コンテンツに対応（networkidle、カスタム遅延）

• 📄 フルページキャプチャ - デフォルトでページ全体をキャプチャ

• 🎥 アニメーションWebPエクスポート - スクリーンキャストを高画質なアニメーションWebPファイルとして保存

• 💉 JavaScriptインジェクション - スクリーンキャストキャプチャ前にカスタムJSを実行

• 📦 最小限の依存関係 - 高速なnpmインストール

• 🔌 MCP統合 - シームレスなAIワークフローを実現

• 🪟 Windows対応ランチャー - npmインストールされた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 Assistant → Model Context Protocol (MCP) → 追加

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

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

Raw 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画像の代わりにファイルパスを返します

• capture_selector - CSSセレクタに一致する特定のDOM要素のスクリーンショットをキャプチャします

  • パラメータ:

    • url (必須): キャプチャするHTTP/HTTPS URL

    • selector (必須): キャプチャする要素のCSSセレクタ

    • width (任意): ビューポートの幅（ピクセル単位、最大1072、デフォルト: 1072）

    • height (任意): ビューポートの高さ（ピクセル単位、最大1072、デフォルト: 1072）

    • waitUntil (任意): 待機イベント: load, domcontentloaded, networkidle0, networkidle2（デフォルト: domcontentloaded）

    • waitForMS (任意): 追加の待機時間（ミリ秒単位）

    • selectorTimeoutMS (任意): セレクタが表示されるまで待機する時間（デフォルト: 5000）

使用例

デフォルトの使用方法（base64画像を返します）:

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

ディレクトリに保存（ファイルパスを返します）:

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

特定の要素をキャプチャ:

capture_selector(url="https://example.com", selector="#main")

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

• スクリーンショットはタイムスタンプ付きのPNGファイルとして保存されます

• base64データの代わりにファイルパスが返されます

• タイル分割されたスクリーンショットの場合、各タイルは個別のファイルとして保存されます

• ディレクトリが存在しない場合は自動的に作成されます

take_screencast

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

パラメータ

• url (必須): キャプチャするURL

• duration (任意): 合計時間（秒単位、デフォルト: 10）

• interval (任意): スクリーンショット間の間隔（秒単位、デフォルト: 2）

• jsEvaluate (任意): 開始時に実行するJavaScriptコード

• waitUntil (任意): 待機戦略: 'load', 'domcontentloaded', 'networkidle0', 'networkidle2'

• waitForMS (任意): 開始前の追加待機時間

• directory (任意): アニメーションWebPとしてディレクトリに保存（1秒ごとにキャプチャ）

使用例

基本的なスクリーンキャスト（10秒間で5フレーム）:

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

カスタムタイミング:

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

JavaScript実行を伴う場合:

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

アニメーションWebPとして保存:

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

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

• 1秒間隔でアニメーションWebPが作成されます

• 個々のフレームもPNGファイルとして保存されます

• アニメーションはデフォルトで無限ループします

• WebPは優れた品質を提供します:

  • フルカラーサポート（256色の制限なし）

  • ウェブアニメーション向けの効率的な圧縮

  • グラデーション背景や滑らかなアニメーションに最適

  • GIFと比較して高品質かつ小さなファイルサイズ

開発での使用

インストール

npm install
npm run build

スクリーンショットのキャプチャ

# Full page with automatic tiling (default)
npm run dev capture https://example.com -o screenshot.png

# Viewport-only screenshot  
npm run dev capture https://example.com --no-full-page -o screenshot.png

# Wait for specific conditions
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）を適切に処理

自動再起動なしで開発/デバッグを行う場合:

# Run directly without restart wrapper
npm run serve:dev

アーキテクチャ

mcp-screenshot-website-fast/
├── src/
│   ├── internal/       # Core screenshot capture logic
│   ├── utils/          # Logger and utilities
│   ├── index.ts        # CLI entry point
│   ├── serve.ts        # MCP server entry point
│   └── serve-restart.ts # Auto-restart wrapper

開発

# Run in development mode
npm run dev capture https://example.com -o screenshot.png

# Build for production
npm run build

# Run tests
npm test

# Type checking
npm run typecheck

# Linting
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