browser-automation

AI ウェブインターフェースのブラウザー自動化

ブラウザー自動化を通じて、ChatGPT Plus と Gemini Advanced のサブスクリプションを利用できます。API の費用はかかりません。毎月のサブスクリプションだけで利用できます。

---

仕組み

┌─────────────────────────────────────────────────────────────────┐
│                    BROWSER AUTOMATION FLOW                       │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│  Your Prompt ──► Playwright MCP ──► Browser Instance            │
│                                           │                      │
│                              ┌────────────┴────────────┐        │
│                              ▼                         ▼        │
│                      ┌─────────────┐           ┌─────────────┐  │
│                      │  ChatGPT    │           │   Gemini    │  │
│                      │  chat.openai│           │   gemini.   │  │
│                      │  .com       │           │   google.com│  │
│                      └──────┬──────┘           └──────┬──────┘  │
│                             │                         │         │
│                             ▼                         ▼         │
│                      Response captured & returned to you        │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

---

前提条件

1. Playwright MCP が有効になっていること

Playwright MCP が設定済みであることを確認してください。動作を確認するには、次のようにします。

Use browser_snapshot to check if browser is available

2. ログインセッション

ブラウザー自動化では保存済みのセッションを使用します。一度ログインする必要があります。

初回の設定：

1. ChatGPT/Gemini に移動します
2. 認証情報を使ってログインします
3. セッションは次回以降のために保存されます

---

ChatGPT の自動化

ステップごとのワークフロー

ステップ 1：ChatGPT に移動

browser_navigate → https://chat.openai.com

ステップ 2：ログイン済みか確認

browser_snapshot → Look for chat input or login button

ステップ 3：ログインしていない場合は認証

browser_click → "Log in" button
browser_type → Enter email
browser_click → Continue
browser_type → Enter password
browser_click → Log in

ステップ 4：新しいチャットを開始

browser_click → "New chat" button (or navigate to chat.openai.com)

ステップ 5：プロンプトを入力

browser_type → Your prompt text in the message input

ステップ 6：送信して待機

browser_click → Send button
browser_wait_for → Wait for response to complete

ステップ 7：応答を取得

browser_snapshot → Get the response text

例：ChatGPT での文章作成タスク

I will now use browser automation to get ChatGPT's response:

1. browser_navigate to https://chat.openai.com
2. browser_snapshot to see current state
3. browser_type to enter prompt in textarea
4. browser_click to send
5. browser_wait_for response
6. browser_snapshot to capture output

---

Gemini の自動化

ステップごとのワークフロー

ステップ 1：Gemini に移動

browser_navigate → https://gemini.google.com

ステップ 2：ログイン済みか確認

browser_snapshot → Look for chat input

ステップ 3：プロンプトを入力

browser_type → Your prompt in the input area

ステップ 4：送信

browser_press_key → Enter (or click send button)

ステップ 5：待機して取得

browser_wait_for → Response generation
browser_snapshot → Get response

---

実用的なコマンド

Claude Code セッションの場合

ブラウザー自動化を使ってほしい場合は、次のように伝えてください。

"Use browser automation to ask ChatGPT: [your prompt]"
"Get Gemini's take on: [your prompt]"
"Compare browser outputs for: [your prompt]"

その後、次の手順を実行します。

1. Playwright MCP ツールを使用します
2. 適切なサイトに移動します
3. プロンプトを入力します
4. 応答を取得して返します

---

認証の処理

セッションの保持

ブラウザー自動化は、セッションを保持すると最もよく動作します。

# The Playwright MCP maintains browser state
# Once logged in, sessions typically persist

セッションの有効期限が切れた場合

ログイン画面が表示された場合：

1. ChatGPT：「Log in」ボタンを探してクリックします
2. Gemini：「Sign in」ボタンを探してクリックします
3. 認証フローを完了します
4. 自動化を再開します

2 要素認証

2FA が必要な場合：

1. 自動化は 2FA 画面で一時停止します
2. 手動で 2FA を完了します
3. 自動化が続行されます

---

制限事項

ブラウザー自動化に関する注意点

制限事項	回避策
API より低速	一括処理ではなく、比較に使用してください
UI の変更で動作しなくなることがある	問題を報告してください。対応します
アクティブなセッションが必要	ブラウザーを開いたままにしてください
レート制限は引き続き適用されます	リクエストを過剰に送信しないでください
CAPTCHA が表示される可能性がある	手動での対応が必要な場合があります

ブラウザー自動化を使用しない場合

• コンテンツの一括生成（代わりに GLM-4.7 API を使用してください）
• 時間が重要なタスク（API のほうが高速です）
• 完全自動化されたパイプライン（API のほうが信頼性が高いです）

ブラウザー自動化を使用する場合

• 文章のスタイルを比較するとき
• Plus/Advanced でのみ利用できる機能を使うとき
• 最新のモデルバージョンをテストするとき
• API がダウンしているとき

---

比較ワークフロー

複数のソースから同じプロンプトで回答を取得

Step 1: Write with Claude (default, in this conversation)
Step 2: browser_navigate to ChatGPT, get response
Step 3: browser_navigate to Gemini, get response
Step 4: Compare all three side-by-side

リクエストの例

"Compare how you, ChatGPT, and Gemini would write a tweet about
the cardiovascular benefits of SGLT2 inhibitors"

次の手順を実行します。

1. 私のバージョン（Claude）を作成します
2. ブラウザー自動化を使って ChatGPT のバージョンを取得します
3. ブラウザー自動化を使って Gemini のバージョンを取得します
4. 比較できるよう、3 つすべてを提示します

---

トラブルシューティング

ブラウザーが応答しない

browser_close → Close current browser
Then start fresh with browser_navigate

間違ったページが読み込まれた

browser_snapshot → Check current state
browser_navigate → Go to correct URL

要素が見つからない

browser_snapshot → Get fresh page state
Look for correct element reference
Retry with updated reference

セッションからログアウトされた

browser_navigate → Go to login page
Complete login flow
Resume automation

---

Multi-Model Writer との連携

このスキルは multi-model-writer と連携します。

API Models:
- /write-glm → Z.AI API
- /write-gpt → OpenAI API
- /write-gemini → Google AI Studio API

Browser Models:
- /browser-chatgpt → ChatGPT Plus web
- /browser-gemini → Gemini Advanced web

速度と信頼性を重視する場合は API を使用してください。 サブスクリプション限定の機能を使う場合や比較する場合は、ブラウザーを使用してください。

---

セッションの例

User: "Use browser to compare how ChatGPT writes about statins"

Claude: I'll get ChatGPT's perspective using browser automation.

[Uses browser_navigate to https://chat.openai.com]
[Uses browser_snapshot to verify page state]
[Uses browser_type to enter: "Write a patient-friendly explanation of how statins work"]
[Uses browser_click to send]
[Uses browser_wait_for to wait for response]
[Uses browser_snapshot to capture response]

Here's what ChatGPT wrote:
[Response text]

Compared to my approach:
[Claude's version]

Key differences:
- ChatGPT emphasized X while I focused on Y
- Tone: ChatGPT more conversational, mine more clinical
- Length: Similar word count

---

ブラウザー自動化を使うと、有料サブスクリプションにプログラムからアクセスでき、利用可能な API ベースのモデルを補完できます。