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

Web開発者向けSafari MCPサーバーの紹介 2026年7月1日 by Saron Yitbarek Safari Technology Preview 247で、Safari MCPサーバーを導入します。これはWeb開発者向けのモデルコンテキストプロトコルサーバーで、Web開発とデバッグのワークフローをより高速かつ強力にします。エージェントがコーディングプロセスにますます不可欠になっていることは承知していますが、Safari MCPサーバーは、エージェントがSafariブラウザウィンドウに接続することで、コードがブラウザで実際にどのようにレンダリングされるかを知る能力をエージェントに与えます。MCP互換のクライアントであれば、Safari MCPサーバーに接続できます。エージェントをSafariブラウザウィンドウに接続することで、エージェントはユーザーが体験することをエミュレートでき、DOM、ネットワークリクエスト、スクリーンショット、コンソール出力へのアクセスなど、より自律的にデバッグするために必要な情報を提供します。これにより、デバッグプロセスがスピードアップし、ターミナルの快適な環境にとどまることができるため、デバッグのためにウィンドウを切り替えたりプロンプトを入力したりする手間が少なくなります。 ユースケース Web向けに開発しているなら、デバッグのダンスを知っているはずです。通常は次のようなものです。 ブラウザでサイトに問題があることに気づきます。 それを突き止めるためにコンソールを開きます。 スタイルタブをクリックします。 何が壊れているかを確認します。 コードに戻って修正します。 または、スクリーンショットを撮り、問題の詳細をエージェントに伝え、修正を任せることもできます。 うまくいけば、それは正しく修正され、バグが修正され、先に進むことができます。 しかし、修正されない場合は、ワークフローを再度実行します — ブラウザ。プロンプト。エージェント。そして何度も何度も、バグを撲滅するまで繰り返します。 ブラウザや使用するツールに関係なく、デバッグワークフローは単一の修正を行うために多くのクリック、ツール、ウィンドウの切り替えを必要としますが、そうである必要はありません。 すでに開発ワークフローでエージェントを使用している場合、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 ブラウザダイアログ（JavaScriptプロンプトの承諾、キャンセル、またはテキスト入力）を一覧表示し、応答します 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 ブラウザのビューポートサイズを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サーバーをインストールしたら、次のプロンプトのいずれかを試してください。 私のサイトでSafariでのバグを見つけてください 私のサイトはSafariでどの程度アクセシブルですか？ 私のウェブサイトがSafariでどのようにパフォーマンスを発揮するか見てください 各エージェントは少しずつ動作が異なりますが、Safari MCPサーバーを使用するように明示的に指示する必要はありません。エージェントは自分で判断します。上記のような簡単なプロンプトでMCPを開始するのに十分です。 Safari MCPサーバーを使用するエージェントとの会話は次のようになる可能性があります。 あなた：バグレポートがあります。フライトページでSafariで何かが壊れています。何が起こっているのか調べてもらえますか？ エージェント：はい、確認させてください。 エージェント：Safariのフライトページで2つの異なるバグを見つけました。両方修正しますか？ あなた：はい。Safariユーザーに問題を引き起こす可能性のある他のことはありますか？ エージェント：はい、さらに2つの注意すべき点があります。結果によると、アニメーションがサイレントに壊れており、APIサーバーの起動ログが間違っています。両方とも対処すべきですか？ 開始するには最初の要求だけで十分であり、Safari MCPサーバーの助けを借りて、エージェントはそこから進めることができます。 Safari MCPサーバーは完全にローカルマシンで実行され、独自のネットワーク呼び出しは行いません。また、Safariの個人情報（例：自動入力やその他のブラウザアクティビティ）にアクセスすることもありません。ページコンテンツ、スクリーンショット、またはコンソールログをキャプチャすると、そのデータは実行中のエージェントに直接送信されます。Appleには送信されません。そこからそのデータがどうなるかは、使用しているエージェントとモデルによって異なります。ブラウザへのアクセスを許可するエージェントと同様に、信頼できるものだけを使用してください。 なぜこれを作ったのか AIの有無にかかわらず、Webを構築する方法はたくさんあります。AIがワークフローの一部である場合、