ブラウザをAIが操作する
ブラウザをAIが操作をする。そんな時代がきました。
「旅行会社のサイトを複数指定し、○月○日京都１泊２日出張するので安くて良いプランを探してほしい。」とAIにお願いすると、黙々とサイトを見回って案を上げてくれる。
これ、本当の話です。
今日はAIに実際にブラウザを操作して、目的の情報を集めてきてもらう方法を習得しましょう。
準備
アプリ版Claudeは機能追加することができます。今回、追加する機能をブラウザを思い通りに動かすツール「Playwright MCP」を追加します。
２段階の手順が必要です。
1. (Playwrightをスクリプト操作するための)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"
]
}
},
覚えよう！
エクスプローラーの一番上に表示されているこの部分↓
ここにはファイルの場所が示されているんだよ。この部分をクリックすると
青くなるけど、ここの文字
C:\Users\saraya\AppData\Local\Packages\Claude_pzs8sxrjxfjjc\LocalCache\Roaming\Claude
は、今操作しているファイルがどこにあるかの場所を示しているんだ。これをパス（Path)と呼ぶよ。
この後、「ファイルのパス」や「作業するパスは」と”パス”という言葉が出てくるので覚えておこう！
Claude Desktopを完全に再起動します。2手順必要です。
1.画面を閉じ、かつ、2.タスクトレイ中のClaudeマークを右クリックし終了します。
覚えよう！
タスクトレイというのはWindowsの画面の一番右下にある部分
この部分だよ。ここに表示しきれていないアイコンは「＾」をクリックすると表示されるよ。
黒いウニのようなマークがClaudeだね。
再度、Claudeアプリを起動します。
新しいチャットの入力欄にある「＋(プラス)」マークをクリック、コネクタ⇒Playwright がONになっていることを確認します。
下記プロンプトをコピペして、
playwright:browser_navigateでhttps://weather.yahoo.co.jp/weather/を開いて、[あなたの地方]の明日の天気を教えてほしい。
と、指示してください。
実際にブラウザが開き、天気予報を見てから教えてくれます。
ワンポイント！
Claudeが作業しているときに、パソコンがスリープやログオン画面に戻ってしまうとClaudeが動けなくなるよ。Windowsボタン→上部の検索に”電源”と入力→電源、スリープ及びばっげりー設定を選択し、
画面、スリープ、休止状態のタイムアウトの設定を確認しよう！
演習してみよう
演習
Claudeへの問いかけ方法
Claudeとチャット中に、話の流れを変えたくないけど質問したいとき、ありませんか？
たとえば、Claudeとおいしいレストランの話題で盛り上がっているときに、ふと、Claudeの出した食材の名前を知らないので知りたくなった時などです。
プロンプトでついつい「○○という食材ってなに」と聞くと、Claudeは一気に食材の話題に切り替わってしまいます。
そのような時など、特殊なプロンプトの投入方法がたくさんあります。
/btw メインの問いかけを止めないサイドクエスチョン
/btw ○○という食材ってなに
このように聞くとメインの話題の流れを変えないで、質問だけに端的に答えてくれます。
/rewind（またはESCキーを２回押す）— 変更の巻き戻し
Claudeが行った直前のファイル変更を「なかったこと」にします。よくファイルを壊してしまうClaudeだからこそ備えられている機能です。
演習してみよう
演習
Claudeにジョブメドレーを開いてもらい、画面左のメッセージをクリック、検索結果よりまだ返信していないメッセージを過去10日間内から探し、その該当するメッセージをクリックし、画面左に表示される会話内容をすべて取得し、会話内容と返信するとしたらどのような返信が良いかの案を提示してもらってください。複数の未返信メッセージがあれば、該当するすべてのメッセージについてそれらの情報をください。※登録や返信を勝手に行わないようにAIに伝えること
具体的に出力形式を指定して、どのメッセージでも同じような出力になるように調整してください。
playwright:browser_navigateでhttps://customers.job-medley.com/customers/sign_in/ を開き、
1.画面左のメッセージをクリック
2.検索結果よりまだ返信していない（メッセージ表示エリアの下に返信したマーク（上向きの矢印）が付いていない）メッセージを過去10日間のメッセージ内から探し記憶する
3.記憶したメッセージを一つずつ順番に以下の処理をする
3-1-.メッセージをクリックし、画面左に”やり取りの内容”を表示する
3-2.スクロールして最下段まで確認する。
3-3.”やり取りの内容”をすべて記憶。最下段の未返信のメッセージに対する返信の案を作成する
3-4.返信メッセージ案と”やり取りの内容”のすべての情報を出力
3-5.全ての未返信メッセージの処理するまで繰り返す
4.完了後、ブラウザを閉じる。
出力形式は次の通り
date(“未返信のメッセージを受信した日付”),name(未返信の相手の名前),returnmessage(返信メッセージ案),receivemessage[(“やり取りの内容”),・,・,・(あるだけ出力)]
を一人分のブロックとしたJSON形式で出力する
演習がうまくいったら手順を登録しよう
上手くいったプロンプトの手順を、Claudeに覚えてもらいます。
さっきの一連のブラウザ操作の手順をスキルとして保存できるように手順をまとめて
と、依頼するとスキルファイルを作成してくれます。
[スキルを保存]をクリックすると保存してくれます。
左側メニューよりカスタマイズ⇒新しいスキルと作成（またはスキル）⇒先ほど保存したスキル名⇒縦の…⇒編集とします。
「説明」欄に書いてある内容がClaudeがこのスキルを発動するキッカケとなります。
従って、「具体的な説明文が命」となります。曖昧だとClaudeがスキルを呼び出してくれません。
明示的にスキル発動させるには、プロンプト欄の「＋」をクリックし、”スキル”より選択します。
今回のまとめ
今回はClaudeCodeがブラウザを操作する環境構築と、プロンプトで実際にブラウザを操作する演習を中心に行いました。次回は、今回のプロンプトの技を元に、集めた情報を簡単なシステムを作成する演習を行います。
今回集めた簡単な情報、どのようなシステムでどのように処理したいですか？
次回作るシステムの簡単な画面展開イメージを、紙芝居（スライド）に表現してきてください。
例えばこのような感じですね。
（返信許可とすると、Claudeを起動して返信プロンプトを投入すると返信してくれる。
返信しないとすると、返信しないで終了となる。）
次回作りたいシステムを考えた時、今回の収集情報項目では不足する項目がある場合は、プロンプトを修正して収集できるようにしてきてください。