Safariのスクリーンショット

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

特徴

• 特定のサイズでウィンドウのスクリーンショットをキャプチャする

• さまざまなズームレベルのサポート

• ページ読み込みの待機時間を設定可能

• 捕獲後のクリーンアップ

• ネイティブmacOSのスクリーンショット品質

使用法

要件

• macOS

• サファリ

• Node.js >= 14.0.0

• ターミナルにはアクセシビリティ権限が必要です（システム環境設定→セキュリティとプライバシー→プライバシー→アクセシビリティ）

インストール

オプション

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

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

• デスクトップ: 1920×1080 (フルHD)

• ノートパソコン: 1366×768

• タブレット横向き: 1024×768

• タブレット縦向き: 768×1024

• モバイル ラージ: 428×926 (iPhone 12 Pro Max)

• モバイルミディアム: 390×844 (iPhone 12 Pro)

• モバイル小: 375×667 (iPhone SE)

仕組み

1. 指定されたウィンドウサイズでSafariを開きます

2. URLを読み込み、ページの読み込みを待ちます

3. 指定された場合はズームレベルを適用します

4. ネイティブmacOSスクリーンキャプチャを使用してピクセルパーフェクトな結果を実現

5. スクリーンショットが正常にキャプチャされたことを確認します

6. Safariウィンドウをクリーンアップします

権限

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

1. システム環境設定 > セキュリティとプライバシー > プライバシー > アクセシビリティを開く

2. 許可されたアプリのリストにターミナル（またはIDE）を追加します

カーソルの使用

カーソルで設定

1. オープンカーソル

2. 設定に移動し、「MCPサーバーを追加」

3. 構成ダイアログで:

   • 名前: safari-screenshot

   • タイプ: command

   • コマンド: npx -y @rogerheykoop/mcp-safari-screenshot

   またはローカル開発の場合:

   • コマンド: npx -y /path/to/mcp-safari-screenshot/server.js

コマンド例

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

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

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

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

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

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

• デバイス名（例：「iPhone」、「iPad」、「デスクトップ」）

• サイズ（例：「1024x768」）

• ズームレベル（例：「50% ズーム」、「2 倍ズーム」）

• 待ち時間（例：「5秒お待ちください」）

ワークフローの例

1. レスポンシブテスト

   Take screenshots of apple.com on iPhone, iPad, and desktop

2. ズームテスト

   Capture github.com at 75% zoom and 125% zoom

3. カスタムサイズ

   Screenshot example.com at 1440x900

ヒント

• スクリーンショットはデフォルトでscreenshotsディレクトリに保存されます

• デバイス名は適切な寸法を自動的に設定します

• サーバーはSafariウィンドウのクリーンアップを処理します

• 読み込みが遅いページには「X秒待つ」を使用してください

トラブルシューティング

問題が発生した場合:

1. ターミナルにアクセシビリティ権限があるか確認する

2. Safariがプライベートブラウジングモードになっていないことを確認する

3. 作業ディレクトリが書き込み可能であることを確認する

4. カーソルのコンソールでエラーメッセージを確認してください

ライセンス

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

ローカルテスト

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

予想される応答:

1. Discoverは機能を返します

2. 実行すると次のようになります:

   • 進行状況をstderrに記録する

   • 結果のJSONを標準出力に返す

   • スクリーンショットを./screenshots/に保存します