Claude#Claude DestkopとMCP連携してみよう_Part02_playwright

この記事のシリーズはClaude DesktopとMCPの連携展開になります。第1話はClaude Desktop のインストール・File SystemのConnector追加を説明します。

さ、FAを楽しもう!

前書き

いつも私の技術ブログとYouTubeチャンネルをご覧いただき、心より感謝申し上げます。また、いまFullさん(full@桜 八重 (@fulhause) / X)と共に毎週水曜日の夜にお届けしている「高橋クリス」ラジオ番組を運営しています。

技術は独り占めせず、届けるもの

私たちは工場の生産技術や制御に関する技術情報を、ブログや動画などで無料公開しています。「知識は誰でもアクセスできるべき」という信念のもと、現場で役立つ具体的なノウハウやトラブル事例などを発信してきました。すべて無料で続けているのは、「知らなかったせいで困る人」を少しでも減らしたいからです。

また、もしあなたの現場で…

  • 「このPLCとデバイスの組み合わせ、ちゃんと動くのかな?」
  • 「EtherCAT通信でうまくいかない部分を検証してほしい」
  • 「新しいリモートI/Oを試したいけど社内に検証環境がない」

など、困っている構成や試してみたいアイデアがあれば、ぜひお知らせください。機器の貸出や構成の共有が可能であれば、検証し、記事や動画で発信します(ご希望に応じて匿名対応も可能です)。

支援のかたち

現在、私達の活動はほぼ無償で続けており、記事や動画の制作には、時間と検証環境の整備が必要です。この活動を継続的にコンテンツを提供するためには、皆様の温かいご支援が大変重要です。

メンバーシップ(ラジオの応援)

Fullさんとのラジオをより充実させるための支援プランです。

https://note.com/fulhause/membership/join

Amazonギフトリスト

コンテンツ制作に必要な機材・書籍をリストにしています。

https://www.amazon.co.jp/hz/wishlist/ls/H7W3RRD7C5QG?ref_=wl_share

Patreon(ブログ・動画活動への応援)

月額での小さなご支援が、記事の執筆・検証環境の充実につながります。

https://www.patreon.com/user?u=84249391

Paypal

小さな支援が大きな力になります。

https://paypal.me/soup01threes?country.x=JP&locale.x=ja_JP

知ってたら助かること、届けたいだけです

あなたの応援が、知識の共有をもっと自由で持続可能なものにしてくれます。これからもどうぞよろしくお願いします。

soup01threes*gmail.com

https://x.com/3threes2

技術はひとりじゃもったいない。

Reference Link

http://soup01.com/ja/category/ai/

playwright?

現代のウェブ自動化ツールPlaywrightは、Microsoftが開発したオープンソースのブラウザ自動化フレームワークです。ウェブアプリケーションのテスト自動化や、ブラウザ操作が必要なタスクの自動化を実現するツールとして、開発者コミュニティで急速に普及しています。

何ができる?

Playwrightを使うと、プログラムからウェブブラウザを制御できます。具体的には、人間がブラウザで行うあらゆる操作をコードで記述し、自動実行することが可能です。ボタンのクリック、フォームへの入力、ページ間の移動、スクリーンショットの取得など、ウェブブラウジングに関わるほぼすべての操作を自動化できます。

主な特徴

Playwrightの最大の強みは、クロスブラウザ対応です。

Chromium、Firefox、WebKitという主要なブラウザエンジンをすべてサポートしており、単一のコードベースで複数のブラウザでのテストを実行できます。これにより、異なるブラウザでの動作確認を効率的に行えます。

Claude DesktopとPlaywright MCP?

Claude DesktopにPlaywright MCPを統合することで、Claudeがウェブブラウザにアクセスしてページの内容を取得したり、操作を実行したりできるようになります。これにより、ユーザーが「このウェブページの内容を要約して」「このフォームに情報を入力して」といった依頼をした際に、Claudeが実際にブラウザを操作して対応できるようになるのです。

Playwrightは、単なる自動化ツールを超えて、AIアシスタントとウェブの世界を繋ぐ架け橋として利用可能です。

Implementation

Install Node.js

下記のサイトからNode.jsを自分のPCにインストールしてください。

https://nodejs.org/ja

Edit Config File

今度はClaude Desktopの左にある3本線クリック→File→Settingします。

Settings→Developerを開きます。

下図のEdit Configをクリックします。

File Explorerが自動的に立ち上がり、その中にあるclaude_destop_config.jsonを開きます。

このようなJson Fileを開きます。

以下の設定を追加します。

{
  “mcpServers”: {
    “playwright”: {
      “command”: “npx”,
      “args”: [“-y”, “@playwright/mcp@latest”]
    }
  }
}

結果

Claude Desktop→Web Search→Playwrightが追加されたことが確認できました。

次はPlaywrightを使って、Browserに特定のサイトを開きます。

Done!

Delete

最後はclaude_destop_config.jsonを下記のように編集し、Claude Desktopを再起動すればFileSystem Connectorが削除されます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする