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

by

2025年7月25日

12:48 PM

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にログインして、画面が見れています！！

WebClass 開発チームの雰囲気

by

2025年5月12日

3:15 PM

WebClass 開発チームの雰囲気 はコメントを受け付けていません

開発チーム

こんにちは、福岡です。

ここ数年は、フリーランスエンジニアが開発にフルリモートで加わったり、退職したエンジニアがいたり、学生アルバイトスタッフも出入りがあったりと体制が変化していました。そうこうして忙しくしていて、しばらくこのブログはブラウザリリースのチェック記事しかだせていませんでした。

改めて学生アルバイトの募集をかけたりするなかで、改めて私達はどんなチームで、どんな雰囲気を共有できる人に来てほしいのかを整理する必要を再認識しています。

一応、こういうページでいろいろと書いていますが

我ながら文書が長い。。。

4月にはアルバイトスタッフの発案で説明回を開催して、合計14人の学生が参加してくれました。ここでは学生アルバイトスタッフが説明などもしてくれました。勉強会もしたいと声を上げてくれています。この勢いでいろいろとチャレンジしたいと思います。

2004−7年頃、WebClass を社長の平1人では開発しきれなくてアルバイトを募集し始めた頃、平があちこち営業に飛び回って一方、学生アルバイトが事務所として借りていたマンションの一室に集まって開発についてあーだこーだ言いながらいろんなことを試して開発の仕組みを整えてきました。ほとんど何も整備されていませんでしたが、無いということはむしろ何でも自分たちの手で作れるということでした。それを楽しんでいたので、何冊も本を読むのも何の苦でもなく、知るほどにすぐ試したくてわくわくしていました。

昔話ではありますが、こういう雰囲気がこのチームの文化の原点だと思っています。そこに向かっていきたいと思います。

Chrome 135

by

2025年4月14日

10:49 AM

Chrome 135 はコメントを受け付けていません

Google Chrome, ブラウザリリース

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

Chrome 135 release note

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

https://chromestatus.com/roadmap

Pickup for WebClass

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

気になる変更点

NavigateEvent sourceElementの追加

要素（リンクのクリックやフォームの送信など）によってナビゲーションが開始されると、NavigateEvent の sourceElement プロパティは開始要素を返します。

このプロパティの追加によって、ナビゲーションイベントを開始した要素がどれかを簡単に特定できるようになります。バグの原因特定などをより早くできるようになるかもしれません。

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

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

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

Firefox 137

by

2025年4月7日

12:30 PM

Firefox 137 はコメントを受け付けていません

Firefox, ブラウザリリース

Firefox 137 release note

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

Pickup for WebClass

今回のリリースでは、WebClassに影響のある変更はありませんでした

気になる変更点

Firefox NightlyでTemporal APIがデフォルトで有効になりました

これまでJavaScriptでは Date オブジェクトを使って日付や時刻を扱ってきましたが、このオブジェクトには設計上の欠陥など問題がありました。特にタイムゾーンの扱いが不十分で、ローカルタイムとUTCしかサポートされないなど、柔軟な時間操作には不向きな場面も多くありました。

次世代の日時APIである Temporal API は、

  • 柔軟で正確な日付・時間の計算機能
  • 明確で誤解の少ない構文
  • 複数のタイムゾーンやカレンダー（和暦など）のサポート

など、豊富な機能を持つ、強力なAPIです。近い将来、標準化されると思われるので、他のブラウザも含め、今後の動向に注目したいです。

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal

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

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

Firefox Release Calendar

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

Chrome 134

by

2025年3月28日

1:34 PM

Chrome 134 はコメントを受け付けていません

Google Chrome, ブラウザリリース

Google Chrome 134 の安定版が2月26日にリリースされました。

Chrome 134 release note

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

https://chromestatus.com/roadmap

Pickup for WebClass

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

気になる変更点

ダイアログに簡易非表示機能(ライトディスミス)を追加

Popover APIの便利な機能である簡易非表示機能がダイアログに追加されました。これによりダイアログ上にクリックハンドラーを設定して、複雑なロジックを組む必要がなくなりました。

dialogタグに新しく導入される closedby 属性で、ダイアログの閉じ方を制御できるようになります。

closedby 属性の使い方：

  • dialog closedby=none
    • ユーザーによるダイアログの閉鎖を完全に無効化します。
  • dialog closedby=closerequest
    • ユーザーが ESC キー等を押すとダイアログが閉じます。

  • dialog closedby=any

    ユーザーがダイアログの外側をクリックする、または ESC キー等を押すことで閉じられます。

下記URLは実装となります。

https://codepen.io/ykglllma-the-typescripter/pen/dPyqrPE

FirefoxやSafariでは検討中で、特にSafariはサポートを予定しているようです。

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

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

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