Safari MCP

Web 開発者向け Safari MCP サーバーのご紹介

2026年7月1日

Saron Yitbarek 著

Safari Technology Preview 247 では、Web 開発者のための Model Context Protocol サーバーである Safari MCP サーバーを導入します。これにより、Web 開発とデバッグのワークフローがより高速かつ強力になります。エージェントがコーディングプロセスにますます不可欠な存在となる中、Safari MCP サーバーは、エージェントを Safari ブラウザウィンドウに接続することで、コードがブラウザで実際にどのようにレンダリングされるかをエージェントが把握できるようにします。

MCP 互換のクライアントであれば、Safari MCP サーバーに接続できます。エージェントを Safari ブラウザウィンドウに接続することで、エージェントはユーザーが体験することをエミュレートし、DOM、ネットワークリクエスト、スクリーンショット、コンソール出力へのアクセスなど、より自律的にデバッグするために必要な情報を得られます。

これによりデバッグプロセスが高速化され、ターミナルの快適な環境から離れることなく作業できるため、ウィンドウを切り替えたりプロンプトを入力したりする手間が減ります。

ユースケース

Web 向けに構築している方なら、デバッグの「ダンス」をご存知でしょう。通常は次のような流れです。

ブラウザでサイトに問題があることに気づきます。コンソールを開いて原因を探ります。スタイルタブをクリックします。何が壊れているか確認します。コードに戻って修正します。あるいは、スクリーンショットを撮り、問題をエージェントに詳しく説明して修正を任せるかもしれません。うまく修正されればバグは解消され、次に進めます。

しかし修正されない場合、再び同じワークフローを繰り返します — ブラウザ、プロンプト、エージェント。

そしてバグを完全に修正するまで、何度も繰り返します。

使用するブラウザやツールに関係なく、デバッグのワークフローは、1つの修正を行うために多くのクリック、ツール、ウィンドウ切り替えが必要ですが、必ずしもそうである必要はありません。開発ワークフローですでにエージェントを使用している場合、Safari MCP サーバーはデバッグをより高速かつ効率的にします。

Safari MCP サーバーにより、エージェントはより多くのデバッグとトラブルシューティングを単独で行えるようになります。以下は、その支援内容のほんの一例です。

Safari での Web 開発。次回 Safari で開発する際には、アップグレードされたワークフローの恩恵を受けられます。エージェントはすでにコード作成を支援していますが、Safari でコードが実際にどのようにレンダリングされるかを確認することで、さらに多くのことを行えるようになります。

Safari との互換性向上。1つのブラウザだけでテストすると、別のブラウザでの潜在的なバグを見逃し、それらのユーザーに標準以下のエクスペリエンスを提供することになります。Safari MCP サーバーを使用すると、エージェントは Safari でサイトを開き、計算済みスタイルを検査し、レイアウトを確認し、ウィンドウを切り替えることなく期待するものと比較できます。

パフォーマンスの分析。サイトのどの部分が速度を低下させているかを確認します。Safari MCP サーバーにより、エージェントはページ上の JavaScript を評価して、ナビゲーションタイミングやリソース読み込み時間などのパフォーマンスメトリクスを表面化できるため、サイトの速度を低下させている原因を特定し、適切な修正に取り組めます。

アクセシビリティの確認。Safari MCP サーバーにより、エージェントはラベルの欠落、不適切な ARIA 属性、不十分なコントラストなど、一般的なアクセシビリティの問題をチェックできるため、ユーザーに影響を与える問題を発見できます。

任意のユーザー状態の確認。ページが正しく動作し、見た目も適切であることを確認します。エージェントはフォームの状態を確認し、セレクタを使用して要素をクエリし、特定のインタラクションを確認し、チェックアウトフローの異なる状態を表示するなど、さまざまなことを行えます。これらの手動チェックにかける時間を減らし、エージェントに任せることができます。

これらはユースケースのほんの一部です。どのように実装するにせよ、Safari MCP サーバーはエージェントがより多くのことを行い、Web 開発でしばしば必要となる行き来を減らすのに役立ちます。より簡単なワークフローは、より多くのバグ修正、より満足度の高いユーザー、より優れた製品につながります。

ツール

利用可能なツールとその機能は次のとおりです。

ツール	説明
browser_console_messages	現在または指定されたタブのバッファリングされたコンソールログを返します
browser_dialogs	ブラウザダイアログを一覧表示し、応答します（JS プロンプトの場合は承諾、却下、またはテキスト入力）
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	クリック、入力、スクロール、ホバー、keyPress などの DOM インタラクションを順次実行します
screenshot	現在のページのスクリーンショットを PNG としてキャプチャします
set_emulated_media	レスポンシブデザインテスト用に CSS メディアタイプ（例: “print”）をエミュレートします
set_viewport_size	ブラウザのビューポートサイズを CSS ピクセルで設定します
switch_tab	ハンドルで別のブラウザタブに切り替えます
wait_for_navigation	現在のページの読み込みが完了するまで待機し、最終的な URL とタイトルを返します

Safari MCP サーバーを使用すると、ブラウザで体験していることをエージェントに注意深く説明する完璧なプロンプトを作成する必要はもうありません。エージェントに自分で調べる能力を与えることができます。

使い始める方法

まず Safari Technology Preview をインストールする必要があります。インストール後、Safari 設定 > 詳細 > Web 開発者向け機能を表示 を有効にしてください。次に、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-mcp-stp としていますが、safari など、好きな名前を付けることができます。Safari MCP サーバーをインストールしたら、次のプロンプトのいずれかを試してください。

Find bugs on my site in Safari

How accessible is my site in Safari?

See how my website performs in Safari

各エージェントの動作は少し異なりますが、Safari MCP サーバーを明示的に使用するように指示する必要は通常ありません — エージェントが独自に判断します。上記のようなシンプルなプロンプトで MCP を開始するのに十分です。

Safari MCP サーバーを使用したエージェントとの会話の例を次に示します。

あなた: バグレポートが来たよ — Safari のフライトページで何かが壊れている。何が起きているか分かる？

エージェント: もちろん、見てみます。

エージェント: Safari のフライトページで2つの異なるバグを見つけました。両方修正しますか？

あなた: はい。他に Safari ユーザーに問題を引き起こしそうなものはある？

エージェント: はい、あと2つ指摘しておくべき点があります。結果表示のアニメーションが暗黙的に壊れており、API サーバーの起動ログが間違っています。両方とも対応すべきでしょうか？

始めるのに必要なのは最初のリクエストだけです。Safari MCP サーバーの助けを借りて、エージェントがそこから引き継ぐことができます。

Safari MCP サーバーは完全にローカルマシン上で実行され、独自のネットワーク呼び出しは行いません。また、Safari 内の個人情報（例: 自動入力やその他のブラウザアクティビティ）にもアクセスしません。ページコンテンツ、スクリーンショット、またはコンソールログをキャプチャする場合、そのデータは実行中のエージェントに直接送られ、Apple には送られません。その後のデータの扱いは、使用しているエージェントとモデルによって異なります。ブラウザへのアクセスを許可する他のエージェントと同様に、信頼できるものだけを使用してください。

これを構築した理由

Web 向けに構築する方法は、AI を使用する場合も使用しない場合も多数あります。AI がワークフローの一部であるならば、このツールが生産性をさらに高めるのに役立つと考えています。そうでない場合も、それで構いません。

このリソースを作成することで、エージェントがブラウザでの見た目や動作を理解できるようにすることで、Safari でのテストとデバッグをこれまで以上に簡単にしたいと考えています。

試してみたり、これが初めての MCP サーバー使用である場合は、ぜひご意見をお聞かせください。

オンラインでご連絡ください: Saron Yitbarek (BlueSky)、Jen Simmons (Bluesky / Mastodon)、Jon Davis (Bluesky / Mastodon)。問題が発生した場合は、WebKit バグレポートを提出してください。問題を報告することは本当に違いを生みます。