概要

• Safari Technology Preview 247 で新機能「Safari MCP server」公開
• エージェントとSafariブラウザ を連携し、ウェブ開発・デバッグ効率化
• DOMやネットワーク、スクリーンショット等への 自動アクセス を実現
• ターミナルからの操作で ウィンドウ切替や手動デバッグを削減
• 導入方法・ツール一覧・セキュリティ注意点 も解説

Safari MCP serverとは

• Safari MCP server は、Model Context Protocol(MCP)対応のサーバーソフト
• ウェブ開発者向け にSafariブラウザとエージェント（AIや自動化ツール）を連携
• エージェントが Safariウィンドウの状態を直接把握 し、レンダリングやバグを自動的に検証
• DOM、ネットワークリクエスト、スクリーンショット、コンソール出力 などの情報取得が可能
• ターミナル上での操作 のみでデバッグ可能、ウィンドウ切替・手動プロンプトの手間を削減

主なユースケース

• Safari向けウェブ開発 の効率化
  • エージェントが実際のSafari描画を自動チェック
• Safari互換性の改善
  • 他ブラウザでは見逃しがちなバグもSafariで自動検証
• パフォーマンス分析
  • JavaScript実行やリソースロード時間などの測定
• アクセシビリティチェック
  • ラベル欠如、ARIA属性不備、コントラスト不足などの自動検出
• ユーザー状態の検証
  • フォームの状態、要素の存在、インタラクションの確認

利用可能なツール一覧

• browser_console_messages ：コンソールログの取得
• browser_dialogs ：ダイアログの一覧・操作（承認/却下/テキスト入力）
• close_tab ：指定タブのクローズ
• create_tab ：新規タブ作成（URL指定可）
• evaluate_javascript ：ページ上でのJavaScript実行・結果取得
• get_network_request ：単一ネットワークリクエストの詳細取得
• get_page_content ：ページ内容の抽出（Markdown/HTML/JSON等）
• list_network_requests ：ネットワークリクエスト一覧（URL/メソッド/ステータス/タイミング）
• list_tabs ：全タブの一覧（ハンドル/URL）
• navigate_to_url ：指定URLへの遷移・ページ内容取得
• page_info ：現在ページの情報（URL/タイトル/ロード状態）
• page_interactions ：DOM操作一括実行（クリック/入力/スクロール/ホバー/キー入力等）
• screenshot ：ページ全体のPNGスクリーンショット取得
• set_emulated_media ：CSSメディアタイプのエミュレート（例：print）
• set_viewport_size ：ビューポートサイズの指定
• switch_tab ：指定タブへの切替
• wait_for_navigation ：ページロード完了待ち（最終URL/タイトル取得）

導入方法・セットアップ手順

• Safari Technology Preview のインストール
• Safari設定 > 詳細 > ウェブ開発者向け機能表示 の有効化
• Safari設定 > 開発 > リモートオートメーションと外部エージェント有効化
• Claudeの場合
  • ターミナルで claude mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp
• Codexの場合
  • ターミナルで codex mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp
• その他エージェントの場合
  • mcp.jsonやconfig.jsonに下記を追記

    "safari-mcp-stp": {
      "command": "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver",
      "args": ["--mcp"]
    }
    

• サーバー名は任意で変更可能（例：safari）

実用例・対話フロー

• 例：「Safariで自分のサイトのバグを見つけて」
• 例：「Safariでサイトのアクセシビリティをチェック」
• 例：「Safariでサイトのパフォーマンスを確認」
• エージェントが自動でSafari MCP serverを認識し、適切な操作を実行
• 初回リクエストのみで、以降はエージェントが自律的にデバッグ・解析

セキュリティ・プライバシー

• Safari MCP serverは ローカルマシン上のみで動作
• ネットワーク通信や個人情報へのアクセスなし
• 取得したデータ（ページ内容・スクリーンショット・ログ等）は 実行中のエージェントへ直接送信
• その後のデータ取扱いは 利用するエージェントやモデル依存
• 信頼できるエージェントのみ利用推奨

開発背景・フィードバック

• AIを活用したウェブ開発の生産性向上 を目的に開発
• AIを使わないワークフローでも Safariのテスト・デバッグ効率化 に貢献
• フィードバックやバグ報告は WebKitバグレポート で受付
• 開発者連絡先： Saron Yitbarek (BlueSky)、Jen Simmons (Bluesky/Mastodon)、Jon Davis (Bluesky/Mastodon)

まとめ

• Safari MCP server 導入で デバッグ効率・品質向上
• ターミナルからの自動化・省力化 で、開発者とユーザー双方の満足度向上
• 今後のウェブ開発における新たなワークフロー として注目