環境構築と ApiServer 設定

Mbbrowser での Playwright 連携は 3 つの言語をサポートしています。チームの開発環境に合わせて最適なものを選択してください。

---

言語の選択

• JavaScript (Node.js): Puppeteer と文法が近く、フロントエンド開発者に推奨されます。
• Python: データ分析やスクレイピングの開発者に最適。候鳥が仮想環境を自動管理します。
• Java: エンタープライズ向けプロジェクトなど、既存の Java 資産を活かせる安定した環境です。

---

1. JavaScript / TypeScript 環境

Node.js のインストール

Node.js 公式サイト から LTS バージョン をダウンロードしてインストールしてください。

Playwright のインストール

# プロジェクト作成
mkdir mb-playwright && cd mb-playwright
npm init -y

# Playwright のインストール
# (ブラウザのダウンロードをスキップして、Mbbrowser のものを使用するように設定)
set PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1
npm install playwright axios

---

2. Python 環境

Python のインストール

Python 公式サイト から 3.8 以上 をインストールしてください。

候鳥の仮想環境について

IMPORTANT

Mbbrowser はインストールディレクトリ内の python\Playwright\ に、独立した Python 仮想環境を内蔵しています。 クライアントの「自動化スクリプトマネージャー」から実行する場合、この環境が自動的に適用されます。

外部からデバッグする場合は、以下をインストールします：

pip install playwright requests

---

3. Java 環境

JDK のインストール

JDK 11 または 17 をインストールしてください。

JAR ファイルの参照

Mbbrowser のインストールディレクトリ内にある lib\ フォルダに、Playwright Java 用の JAR ファイル（playwright-*.jar など）が同梱されています。これらをプロジェクトのビルドパスに追加してください。

---

4. ApiServer の起動（全言語共通）

認証情報の取得

1. クライアントにログインし、個人センター -> API 設定 へ。
2. APP_ID と APP_KEY をコピーします。

サーバーの実行

管理者権限のターミナルで、インストールディレクトリから以下を実行します：

apiserver.exe --port=8186 --app_id=あなたのID --app_key=あなたのKEY --hide=off

---

5. CDＰ 接続情報の理解

/api/v1/browser/start を呼び出すと、以下の構造のデータが返されます：

{
  "code": 0,
  "data": {
    "ws": "ws://127.0.0.1:9222/devtools/browser/..."
  }
}

Playwright では、この data.ws フィールド（WebSocket アドレス）を接続先として使用します。

---

TIP

準備が整いましたか？次の章 クイックスタート：環境をコードで制御する では、全言語対応のサンプルスクリプトを紹介します。