Safariのスクリーンショット

macOS 上の Safari を使用してスクリーンショットをキャプチャするための Node.js MCP サーバー。

特徴

特定のサイズでウィンドウのスクリーンショットをキャプチャする
さまざまなズームレベルのサポート
ページ読み込みの待機時間を設定可能
捕獲後のクリーンアップ
ネイティブmacOSのスクリーンショット品質

Related MCP server: MCP iOS Simulator Screenshot

使用法

import { takeScreenshot } from './screenshot.js'; // Basic window screenshot await takeScreenshot({ url: 'https://www.apple.com', outputPath: './screenshot.png', width: 1024, // Optional: window width (default: 1024) height: 768, // Optional: window height (default: 768) waitTime: 3, // Optional: seconds to wait for load (default: 3) zoomLevel: 1, // Optional: page zoom level (default: 1) }); // Responsive design testing await takeScreenshot({ url: 'https://www.apple.com', outputPath: './mobile.png', width: 375, // iPhone SE width height: 667, // iPhone SE height zoomLevel: 1, }); // High-resolution capture await takeScreenshot({ url: 'https://www.apple.com', outputPath: './desktop-hd.png', width: 1920, // Full HD width height: 1080, // Full HD height waitTime: 5, // Wait longer for HD content zoomLevel: 0.8, // Zoom out slightly });

要件

macOS
サファリ
Node.js >= 14.0.0
ターミナルにはアクセシビリティ権限が必要です（システム環境設定→セキュリティとプライバシー→プライバシー→アクセシビリティ）

インストール

npm install safari-screenshot

オプション

オプション	タイプ	デフォルト	説明
URL	弦	必須	キャプチャするURL
出力パス	弦	自動車	スクリーンショットを保存する場所（デフォルト: ./screenshots/[hostname]-[timestamp].png）
幅	番号	1024	ウィンドウの幅（ピクセル単位）
身長	番号	768	ウィンドウの高さ（ピクセル単位）
待機時間	番号	3	ページの読み込みを待つ秒数
ズームレベル	番号	1	ページのズームレベル（1 = 100%）

一般的なビューポートサイズ

モジュールは、次の一般的なビューポートサイズでテストされています。

デスクトップ: 1920×1080 (フルHD)
ノートパソコン: 1366×768
タブレット横向き: 1024×768
タブレット縦向き: 768×1024
モバイルラージ: 428×926 (iPhone 12 Pro Max)
モバイルミディアム: 390×844 (iPhone 12 Pro)
モバイル小: 375×667 (iPhone SE)

仕組み

指定されたウィンドウサイズでSafariを開きます
URLを読み込み、ページの読み込みを待ちます
指定された場合はズームレベルを適用します
ネイティブmacOSスクリーンキャプチャを使用してピクセルパーフェクトな結果を実現
スクリーンショットが正常にキャプチャされたことを確認します
Safariウィンドウをクリーンアップします

権限

このパッケージが動作するにはシステムイベント権限が必要です:

システム環境設定 > セキュリティとプライバシー > プライバシー > アクセシビリティを開く
許可されたアプリのリストにターミナル（またはIDE）を追加します

カーソルの使用

カーソルで設定

オープンカーソル
設定に移動し、「MCPサーバーを追加」
構成ダイアログで:
- 名前: safari-screenshot
- タイプ: command
- コマンド: npx -y @rogerheykoop/mcp-safari-screenshot
またはローカル開発の場合:
- コマンド: npx -y /path/to/mcp-safari-screenshot/server.js

コマンド例

Cursor でサーバーに接続した後、次のコマンドを使用できます。

Take a screenshot of https://apple.com at desktop size

回答: 1920×1080でキャプチャします

Capture https://apple.com on iPhone 12 Pro

回答: 390×844でキャプチャします

Screenshot github.com at 50% zoom

応答:zoomLevel:0.5 でキャプチャします

サポートされているパラメータ

MCP サーバーは次の概念を理解します。

デバイス名（例：「iPhone」、「iPad」、「デスクトップ」）
サイズ（例：「1024x768」）
ズームレベル（例：「50% ズーム」、「2 倍ズーム」）
待ち時間（例：「5秒お待ちください」）

ワークフローの例

レスポンシブテスト
Take screenshots of apple.com on iPhone, iPad, and desktop
ズームテスト
Capture github.com at 75% zoom and 125% zoom
カスタムサイズ
Screenshot example.com at 1440x900

ヒント

スクリーンショットはデフォルトでscreenshotsディレクトリに保存されます
デバイス名は適切な寸法を自動的に設定します
サーバーはSafariウィンドウのクリーンアップを処理します
読み込みが遅いページには「X秒待つ」を使用してください

トラブルシューティング

問題が発生した場合:

ターミナルにアクセシビリティ権限があるか確認する
Safariがプライベートブラウジングモードになっていないことを確認する
作業ディレクトリが書き込み可能であることを確認する
カーソルのコンソールでエラーメッセージを確認してください

ライセンス

マサチューセッツ工科大学

ローカルテスト

MCP 実装を直接テストできます。

# Test discovery echo '{"type":"discover"}' | npx -y ./server.js # Test screenshot echo '{"type":"execute","tool":"take_screenshot","input":"Take a screenshot of https://apple.com","requestId":"123"}' | npx -y ./server.js

予想される応答: