ブラウザをAIが操作する
ブラウザをAIが操作をする。そんな時代がきました。
「旅行会社のサイトを複数指定し、○月○日京都１泊２日出張するので安くて良いプランを探してほしい。」とAIにお願いすると、黙々とサイトを見回って案を上げてくれる。
これ、本当の話です。
今日はAIに実際にブラウザを操作して、目的の情報を集めてきてもらう方法を習得しましょう。
準備
アプリ版Claudeは機能追加することができます。今回、追加する機能をブラウザを思い通りに動かすツール「Playwright MCP」を追加します。
２段階の手順が必要です。
1. Node.jsをインストールする
Node.jsとは、Webアプリを動かす仕組みを持つ総合環境です。この環境上でPlaywright MCPが動作します。また、Node.jsはネットにつながなくても自分のパソコンだけでWebシステムを動かすことができる機能も持っています。
Node.jsのページを開きます。
下にスクロールすると、Windowsインストーラー(.msi) のボタンがあるのでクリックしダウンロードしてください。
ダウンロード後、インストールを開始します。
※インストールできない場合は、「スタンドアローンのバイナリー(.zip)」をダウンロードし、Cドライブに「nodes」フォルダを作成し、その中にnode.exeが入るようにzipを解凍してください。（すべて展開をすると「zip名フォルダ」の中にnode.exeが入ります。その後、エクスプローラーを開き左側のPCを右クリック、メニューのプロパティを選択し、設定画面より「システムの詳細設定」（画面中央少し下にあります）をクリック、システムのプロパティ画面の環境変数ボタンクリック、下段のシステム環境変数のリスト中のPathを選択後「編集」、環境変数名の編集画面の新規をクリックし、入力エリアに「C:\nodes」と記入し、OK⇒OK⇒OKと開いてきたWindowをOKを押し閉じてください。
インストールできたか確認します。
Windowsボタン＋Rキーを押します。名前欄に「cmd」と入力し、OKボタンクリックします。
黒い画面が表示されます。
>の後ろに「node -v」と入力しエンターを押すと「v99.99.9」のようなバージョン表記が表示されれば完了です。
2. Playwright MCPを追加する
Claude Desktopアプリを起動します。
画面左下アカウント名クリックし、設定 → 開発者 → 設定を編集
エクスプローラーが開きます。「claude_desktop_config.json」ファイルを開きます。
先頭の「{」の次の行に、以下をコピーペーストします。
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"-y",
"@playwright/mcp@latest"
]
}
},Claude Desktopを完全に再起動します。2手順あります。
1.画面を閉じ、かつ、2.タスクトレイ中のClaudeマークを右クリックし終了します。
再度、Claudeアプリを起動します。
新しいチャットの入力欄にある「＋(プラス)」マークをクリック、コネクタ⇒Playwright がONになっていることを確認します。
下記プロンプトをコピペして、
playwright:browser_navigateでhttps://weather.yahoo.co.jp/weather/を開いて、明日の天気を教えてほしい。
と、指示してください。
実際にブラウザが開き、天気予報を見てから教えてくれます。
演習してみよう
演習
Claudeへの問いかけ方法
Claudeとチャット中に、話の流れを変えたくないけど質問したいとき、ありませんか？
たとえば、Claudeとおいしいレストランの話題で盛り上がっているときに、ふと、Claudeの出した食材の名前を知らないので知りたくなった時などです。
プロンプトでついつい「○○という食材ってなに」と聞くと、Claudeは一気に食材の話題に切り替わってしまいます。
そのような時など、特殊なプロンプトの投入方法がたくさんあります。
/btw メインの問いかけを止めないサイドクエスチョン
/btw ○○という食材ってなに
このように聞くとメインの話題の流れを変えないで、質問だけに端的に答えてくれます。
/rewind（またはESCキーを２回押す）— 変更の巻き戻し
Claudeが行った直前のファイル変更を「なかったこと」にします。よくファイルを壊してしまうClaudeだからこそ備えられている機能です。
演習してみよう
演習
Claudeにジョブメドレーを開いてもらい、画面左のメッセージをクリック、検索結果よりまだ返信していないメッセージを過去10日間内から探し、その該当するメッセージをクリックし、画面左に表示される会話内容をすべて取得し、会話内容と返信するとしたらどのような返信が良いかの案を提示してもらってください。複数の未返信メッセージがあれば、該当するすべてのメッセージについてそれらの情報をください。
具体的に出力形式を指定して、どのメッセージでも同じような出力になるように調整してください。
演習がうまくいったら手順を登録しよう
上手くいったプロンプトの手順を、Claudeに覚えてもらいます。
さっきの一連のブラウザ操作の手順をスキルとして保存できるように手順をまとめて
と、依頼するとスキルファイルを作成してくれます。
[スキルを保存]をクリックすると保存してくれます。
左側メニューよりカスタマイズ⇒新しいスキルと作成⇒先ほど保存したスキル⇒縦の…⇒編集とします。
「説明」欄に書いてある内容がClaudeがこのスキルを発動するキッカケとなります。
従って、「具体的な説明文が命」となります。曖昧だとClaudeがスキルを呼び出してくれません。
明示的にスキル発動させるには、プロンプト欄の「＋」をクリックし、スキルより選択します。