MCP Safari Screenshot

🚀 Safari スクリーンショットツール

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

✨ 主な機能

• 特定のサイズのウィンドウのスクリーンショットをキャプチャします。
• 異なるズームレベルをサポートします。
• ページの読み込み待機時間を設定可能です。
• キャプチャ後のクリーンアップが行われます。
• ネイティブの macOS スクリーンショット品質を備えています。

📦 インストール

npm install safari-screenshot

💻 使用例

基本的な使用法

import { takeScreenshot } from './screenshot.js';

// 基本ウィンドウのスクリーンショット
await takeScreenshot({
	url: 'https://www.apple.com',
	outputPath: './screenshot.png',
	width: 1024, // オプション：ウィンドウの幅（デフォルト：1024）
	height: 768, // オプション：ウィンドウの高さ（デフォルト：768）
	waitTime: 3, // オプション：読み込みを待つ時間（デフォルト：3 秒）
	zoomLevel: 1, // オプション：ページのズームレベル（デフォルト：1）
});

// レスポンシブデザインのテスト
await takeScreenshot({
	url: 'https://www.apple.com',
	outputPath: './mobile.png',
	width: 375, // iPhone SE の幅
	height: 667, // iPhone SE の高さ
	zoomLevel: 1,
});

// 高解像度キャプチャ
await takeScreenshot({
	url: 'https://www.apple.com',
	outputPath: './desktop-hd.png',
	width: 1920, // フルHDの幅
	height: 1080, // フルHDの高さ
	waitTime: 5, // HDコンテンツをキャプチャするために長く待つ
	zoomLevel: 0.8, // 少し縮小
});

高度な使用法

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

• デスクトップ: 1920×1080 (フルHD)
• ノートパソコン: 1366×768
• タブレット: 1024×768
• スマートフォン: 375×667

📚 ドキュメント

必要条件

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

オプション

動作原理

1. 機能の発見

   • MCP サーバーは Cursor エージェントにその機能を報告します。
   • サポートされているツールとパラメータを返します。

2. スクリーンショットの実行

   • take_screenshot タイプのリクエストを受け取ると、MCP サーバーは以下の手順を実行します：
     • Safari を開き、必要な設定を行います。
     • seleniumWebDriver を使用して Safari ブラウザを制御します。
     • ページの読み込みを待ちます（設定可能）。
     • スクリーンショットをキャプチャし、指定された場所に保存します。

サンプル

1. 発見のテスト

   echo '{"type":"discover"}' | npx -y ./server.js
   

   期待される応答：

   {
     "type": "capabilities",
     "tools": [
       {
         "name": "take_screenshot",
         "parameters": ["url", "outputPath", "waitTime", "zoomLevel"]
       }
     ]
   }
   

2. スクリーンショットの実行

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

   期待される結果：

   • スクリーンショットは ./screenshots/ ディレクトリに保存されます。
   • requestId を通じて結果が返されます。

トラブルシューティング

問題が発生した場合は、以下のことを確認してください：

1. ターミナルにアクセシビリティ権限があることを確認します。
2. Safari がプライバシーブラウジングモードではないことを確認します。
3. 作業ディレクトリに書き込み権限があることを確認します。
4. Cursor コンソールのエラーメッセージを確認します。

ローカルテスト

MCP 実装を直接テストすることができます：

# 発見のテスト
echo '{"type":"discover"}' | npx -y ./server.js

# スクリーンショットのテスト
echo '{"type":"execute","tool":"take_screenshot","input":"Take a screenshot of https://apple.com","requestId":"123"}' | npx -y ./server.js

期待される応答：

1. 発見は機能を返します。
2. 実行は以下のことを行います：
   • 進捗ログを stderr に記録します。
   • 結果の JSON を stdout に返します。
   • スクリーンショットを ./screenshots/ に保存します。

📄 ライセンス

MIT