やってみる：ブラウザをつなげる
練習として、ブラウザを操作できる（）を追加します。
手順
Claude Codeを終了した状態（黒い画面に戻っている状態）で、次のコマンドを打ちます。
claude mcp add playwright -- npx -y @playwright/mcp@latest
起動中のときは、先に /exit で終了してください。
うまくいくと
Added stdio MCP server playwright のような1行が出ます。
Claude Code講座 ／ 第3章 作る・つなげる・続ける
【演習】実際に1つ、つなげてみる
ブラウザを操作できるMCPを追加し、実際にWebサイトを読ませます。
このレッスンが終わると、MCPを自分で追加して、つながったかどうかを確認できるようになります。
やってみる：つながったか確認する
claude mcp list
うまくいくと
playwright: ... ✔ Connected と表示されます。
詰まったら
✘ Failed to connect と出た場合 … 初回はダウンロードに時間がかかります。
1〜2分ほど待ってから、もう一度 claude mcp list を打ってください。
npx: command not found と出た場合 … というソフトが入っていません。
その場で担当がご案内しますので、手を止めてお知らせください。
それでも ✘ のままの場合 … 会社のネットワークが外部との通信を止めている
可能性があります。この場合は担当が別の方法をご案内します。
やってみる：実際に使ってみる
つながったら、claude で起動して話しかけます。
playwrightを使って https://empac.co.jp を開いて、
どんな会社か3行で教えて。ページのタイトルも教えて
うまくいくと
ブラウザが自動で開き、サイトを読み取って、会社の説明とページタイトルが返ってきます。 ブラウザは自動で閉じます。
下のボタンで、実際の動きに近いやり取りが見られます（体験版・本物のブラウザは開きません）。
$ playwrightを使って https://empac.co.jp を開いて、どんな会社か3行で教えて
ブラウザを開いて確認しました。
ページタイトル：「株式会社EmpaC｜企業向けSNSマーケティング」
・企業や団体向けに、SNSマーケティングを提供している会社です
・戦略づくりから撮影・編集・日々の運用まで、一通り自社で行っています
・東京都品川区にあり、2021年に設立されています
ほかに確認したいページがあれば教えてください。
やってみる：手作業を1つ置き換える
つなげただけでは意味がありません。実際の手作業を1つやらせてみます。
playwrightを使って、次の3つのサイトを順番に開いて、
それぞれのトップページで一番大きく書かれているキャッチコピーを表にして
（見たいサイトのURLを3つ書く）
お題の例
- 競合3社のサイトを開いて、打ち出し方を比べる
- 自社サイトの全ページを開いて、リンク切れがないか確かめる
- 気になる会社の採用ページを開いて、募集職種を一覧にする
やらせない方がいいこと
ログインが必要なページ、会員向けのページは開かせないでください。 ワードを渡すことになり、事故のもとです。公開されているページだけにします。