自然言語でUIを自動化できる革新的ライブラリ「Midscene.js」とは？

ライブラリ概要

Midscene.js は、自然言語によるブラウザUI自動化を可能にするオープンソースJavaScriptライブラリです。GPT‑4o や Qwen2.5‑VL などのAIモデルを活用し、以下の3つのAPIメソッドでUI操作やデータ抽出・検証が行えます：

• .aiAction（操作）
• .aiQuery（情報抽出）
• .aiAssert（断言）

Chrome拡張版もあり、ノーコードでの操作も可能です。

---

どんな人が向いている？

対象ユーザー	やりたいこと
開発者・テストエンジニア	UIテストを自然言語で記述したい
ノンコーディングで自動化希望者	プログラミングなしに自動操作や検証を試したい
データエンジニア・アナリスト	Web UI から商品情報や価格データを抽出したい
CI/CD やQA担当	テスト自動化と可視化レポートを統合して使いたい

---

どんなことができるのか、どう使うのか応用

🔹 UI操作（自然言語で）

await mid.aiAction('検索ボックスに「猫」と入力してEnterを押す');

🔹 情報抽出

const products = await mid.aiQuery(
  '{title: string, price: number}[]',
  '商品一覧からタイトルと価格を抽出'
);

🔹 UI検証（断言）

await mid.aiAssert('ログインボタンが表示されている');

🔹 リプレイ・レポート機能あり

AIによる実行内容のログが視覚化され、再生やステップ確認も可能です。

---

置き換え可能なサービスとその比較

ツール／サービス	特徴	Midscene.js の優位点
Selenium / Playwright	詳細操作が可能だがコード記述が煩雑	自然言語で記述可能、スクリプトの保守性が高い
Cypress	モダンなE2EツールだがJSベースで記述が必要	モデルにより変化耐性があり、非技術者にも使いやすい
RPAツール（UiPathなど）	GUIベースでノーコードだが商用・重量級な傾向	オープンソースかつWeb環境に特化、導入が軽量
LLM連携Chrome拡張	簡易操作は可能だが再現性や構造化出力が弱い	JSON抽出、断言、可視化など開発向けの高度な機能を備える

---

組み込み方法、インストール方法、ローカルでの実行方法について

🔧 Chrome拡張（ノーコード体験）

1. Chromeウェブストアで「Midscene.js」拡張をインストール
2. OpenAI APIキーなどの環境変数を拡張設定で入力
3. 任意のWebページ上で自然言語で操作指示を実行

🧠 JavaScript SDK 利用

npm install @midscene/web

import { Midscene } from '@midscene/web';

const mid = new Midscene({ apiKey: process.env.OPENAI_API_KEY });

await mid.aiAction('ログインボタンをクリック');

🧪 CLI版の利用

npm install @midscene/cli
midscene run ./test.yaml

🛠 ローカル実行の注意点

• Node.js（v18以上）推奨
• モデル指定（OpenAI, UI-TARS, Qwen2.5-VL）
• 環境変数：OPENAI_API_KEY, MIDSCENE_MODEL_NAME などを設定

---

8: リンク（Github、npm.js）

• 🌐 公式サイト: https://midscenejs.com
• 📦 npmパッケージ:
  • https://www.npmjs.com/package/@midscene/web
  • https://www.npmjs.com/package/@midscene/cli
• 🐙 GitHub:
  • https://github.com/web-infra-dev/midscene
  • https://github.com/kehao95/midscene-mcp

---

9: 最後に

Midscene.js は「自然言語 × UI自動化 × 構造化抽出」を1つにまとめた、次世代のWeb自動化ライブラリです。AIによる解釈と柔軟な出力制御が特徴で、開発者はもちろん、ノンエンジニアでも導入可能です。

テスト、データ抽出、自動操作のすべてを自然言語で試せるこの体験、ぜひ一度触れてみてください。