JetBrains JunieがWebページを操作できるようにする方法

Junieとは

JunieはJetBrains IDE上で動作するAIコーディングエージェントです。
依頼すると、リポジトリ内を探索したり、時には自ら書いたコードを実行したりして、試行錯誤しながらコーディングや調査を行なってくれます。

対応しているIDEやインストール方法などは、JetBrains公式のJunie紹介ページをご覧ください。

概要

Junieは自律的に試行錯誤してコーディングを行なってくれますが、そのままだと、プロジェクト外のリソースにアクセスし、複雑な操作を行うことは不得手です。

例えば、ブラウザでWebページを開いて操作したり、Notionのページを編集したりするのは、難しいです。しかし、MCPサーバーに接続すれば、Junieができることが大きく広がり、例に挙げたようなこともできるようになります。ここでは、Webページの操作を例に挙げながら、JunieでMCPサーバーに接続する方法を説明します。

前提条件

以下がインストール済みであること。

  • Docker Desktop 4.42以降
  • PhpStorm 2025.1.3
    • Junieに対応しているJetBrains IDEなら動くはずです
  • JetBrains Junie

注意点

設定するMCPサーバーの例として、Playwrightを使用します。AIがブラウザ操作を行うためのMCPサーバーです。これは使いたいMCPサーバーによって変えていいです。

使いたいMCPサーバーによって変わる部分はわかりやすいように太字にしておきます。

設定方法

  1. Docker Desktopを開く
  2. MCP Toolkit>Catalogから「Playwright(MCPサーバー名)」で検索する

  1. 出てきたPlaywright(Windowsアイコンのもの)の右上の+をクリックする
  2. MCP Toolkit>Servers>Playwright>Overviewから一番下までスクロールし、Use this MCP Serverの下のjsonのplaywrightの部分(以下参照)をコピー

    "playwright": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "mcp/playwright"
      ]
    }

  1. PhpStormを開く
  2. Settings(歯車)>Pluginsから「JetBrains Junie」を開き、最新版にアップデートする
  3. Settings>Tools>Junie>MCP Settingsから、MCP Serversの「+」をクリック
  4. “mcpServers”の値となるオブジェクトに先ほどコピーした値をペーストしてOKしてMCP SettingsでApply(既にMCPサーバーが1つ以上設定済みの時は、オブジェクト末尾に, を入力してからペーストする)

  1. Statusが✅になったらOK

使ってみた

JunieがWebページを操作できるか、開発環境のWebClassで試してみました。

WebClassは開こうとすると以下のようなログインページが出ます。

ユーザIDとパスワードを入力してログインすると以下のような画面が表示されます。

Junieがきちんとログインして、開いたページの情報を読み取れるかどうか、試してみます。

⚠️Playwrightはコンテナ内で動いているので、localhostにアクセスする場合はhost.docker.internalとしなければいけないことに注意!

以下をJunieのチャットで送信してみました。(開発環境なので問題ありませんが、URLやログイン情報は一応黒塗りにしておきます)

あなたに試してもらいたいことがあります。
このプロジェクトの開発環境のWebServerはhost.docker.internal:███にあり、
http://host.docker.internal:███/█████ がログイン画面です。
ログインできるか試してみてくれないですか?
ユーザIDが █████ でパスワードが █████ です。ログインできたらわかったことを報告してください。

いくつか許可を求めてくるので承認していくと……(以下Junieの応答)

### ログイン結果報告

指定されたURLとログイン情報を使用してWebClassシステムへのログインを試みました。結果は以下の通りです:

#### ログイン成功

ユーザーID「 █████ 」とパスワード「 █████ 」を使用して、http://host.docker.internal:███/█████ へのログインに成功しました。

#### ログイン後の観察結果

1. **ユーザー情報**:
   - ログインユーザー名:「鈴木 先生」として表示されています
   - 未読メッセージが20件以上あります(「20+」と表示)

2. **コース情報**:
   - 「My Courses」セクションに以下のコースが表示されています:
     - 「WebClass Template Course」
     - 「ネットワーク講習会(検証)」(説明:今年初めてアカウントを取る人のための講座です)

3. **システム情報**:
   - システムタイトル:「List of Courses - WebClass」
   - 学期選択機能があり、現在「2025年春学期」が選択されています
   - 言語切り替え機能があります
   - 「Add Course」(コース追加)機能があります
   - コース検索機能があります

4. **ナビゲーション**:
   - 「Course」「Manuals」などのメニューがあります
   - 「Logout」ボタンでログアウト可能です

以上の結果から、開発環境のWebClassシステムは正常に動作しており、█████ ユーザーでログインして各種機能にアクセスできることを確認しました。

成功しました!!ばっちりWebClassにログインして、画面が見れています!!

Chrome 132

Google Chrome 132 の安定版が1月14日にリリースされました。

Chrome 132 release note

以下のリンクに主な変更点の情報が記載されています。

https://chromestatus.com/roadmap

https://developer.chrome.com/release-notes/132?hl=ja

Pickup for WebClass

今回のリリースで、WebClassの機能に影響を与える変更点はありませんでした。

気になる変更点

File System Access API

File System Access API によって、これまでネイティブアプリ上でしか行えなかったファイルを直接扱うという操作を Web アプリでも行えるようになります。

これまでは、ブラウザ上でローカルファイルを編集する場合、毎回ユーザーにファイルを選択してアップロードしてもらう必要がありました。編集完了後も「ダウンロード」扱いで別ファイルとして保存されるため、元のファイルを書き換えることができませんでした。ですが、File System Access APIによって、一度ユーザが編集したいファイルを選択すれば、そのファイルをWebアプリ上で直接開いて操作し、上書き保存できるようになります。さらに、もう一度編集したい時は「最近開いたファイル」からすぐに開くことができるので、操作が簡略化されます。

つまり、ドキュメントや画像を編集するようなWebアプリが、ペイントやメモ帳、Wordに近い使用感で使えるようになるということです。ユーザ体験を大きく変える機能なので、なかなか面白いと感じました。

現在、ブラウザごとに機能の対応状況にはばらつきがあるようです。

詳しくは以下のドキュメントをご覧ください。

https://developer.mozilla.org/ja/docs/Web/API/File_System_API#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7

今後の Chrome リリースについて

次回のリリースは2025年2月4日に予定されています。

その他ブラウザのリリースはこちらにまとめています。

Chrome 128

Google Chrome 128 の安定版が8月20日にリリースされました。

Chrome 128 release note

以下のリンクに主な変更点の情報が記載されています。

https://chromestatus.com/roadmap

https://developer.chrome.com/blog/new-in-chrome-128?hl=ja

Pickup for WebClass

今回のリリースで、WebClassの機能に影響を与える変更点はありませんでした。

気になる変更点

Bulit-in AI

大規模言語モデルであるGemini Nanoがchromeに組み込まれ、ローカルで実行することできるようになりました。(大規模言語モデル:膨大なデータを基に、文章の意味や文脈を理解して適切な文章を生成できるAI技術。たとえば、ChatGPTなど)

これによって、サーバーとの通信なしでAIを動かすことができるので、プライバシー性が高い情報を外に漏らさずにAIの力を借りることができます。また、多くのAIサービスではAPIを使用すると料金が発生しますが、そのコストも無くなります。

ローカルで利用できるLLMは今までもありましたが、どれもユーザがデバイスに合わせた環境構築をする必要がありました。しかし、ブラウザに組み込まれるということは、それが不要になります。開発者が気軽にAI機能を提供できる時代が近づいてきていると感じました。

まだ実験的な機能なので設定の有効化が必要ですが、stable版でも試すことができます。

使い方などは以下の公式ドキュメントをご参照ください。

https://docs.google.com/document/d/1VG8HIyz361zGduWgNG7R_R8Xkv0OOJ8b5C9QKeCjU0c/edit

今後の Chrome リリースについて

次回のリリースは2024年9月17日に予定されています。

その他ブラウザのリリースはこちらにまとめています。

Chrome 124

Google Chrome 124 の安定版が4月16日にリリースされました。

Chrome 124 release note

以下のリンクに主な変更点の情報が記載されています。

https://chromestatus.com/roadmap

https://developer.chrome.com/release-notes/124?hl=en

Pickup for WebClass

今回のリリースで、WebClassの機能に影響を与える変更点はありませんでした。

気になる変更点

WebGPU: ServiceWorker and SharedWorker support

WebGPU のウェブワーカーのサポートが強化され、ServiceWorkerとSharedWorkerの両方をサポートするようになりました。

Service Worker は、WebGPU のオフライン機能とバックグラウンド処理を有効にします。これにより、ユーザーがページを操作していない間も、リソースをキャッシュに保存して計算を実行できる用になります。また、SharedWorkerによって、複数のタブで WebGPU のリソースを共有できるようになりました。

WebGPUの利点は低レベルであるがゆえの性能の高さですが、今回の変更はWebGPUをさらに自由にするものだと感じています。個人的に注目している技術なので、今後の発展も楽しみです。

詳細は以下のリンクをご参照ください。

https://developer.chrome.com/blog/new-in-webgpu-124?hl=en&ref=dailydev#service_workers_and_shared_workers_support

今後の Chrome リリースについて

次回のリリースは2024年5月14日に予定されています。

その他ブラウザのリリースはこちらにまとめています。