# bot ブロックされる SPA 管理画面を AI に「安全に」編集させる: probe → dry-apply → apply の3段式 対象: Airbnb・Booking.com のような「playwright の新規起動は bot 判定で弾かれるが、 ログイン済みの常駐 Chrome に CDP で繋げば読める」管理画面で、**設定値の変更**まで AI にやらせたい人。 読むだけの常駐窓の作り方は既存の巻物（reCAPTCHA サイトの常駐ログイン窓）を先に読むこと。本書はその続き。 ## なぜ3段に分けるか 管理画面の編集は**本番がその場で変わる**。AI に1本のスクリプトで「開いて・押して・保存」までやらせると、 セレクタの誤爆＝本番事故になる。事故は「押す行の特定ミス」「確定ボタンの取り違え」の2箇所で起きるので、 段を分けてそれぞれを人がレビューできる形にする。 1. **--probe（既定・読むだけ）**: 対象UIを開き、構造（innerText / 全 button の text・aria-label / input）を JSON へダンプして**キャンセルで閉じる**。スクショも撮る。ここまでは何度失敗してもよい。 2. **--dry-apply（照合のみ）**: apply と**同一の行特定ロジック**を通し、「どの行のどのボタンを押す予定か」を ログに出して**キャンセルで閉じる**。特定が曖昧（0件 or 複数件）なら exit 2 で**押さずに止まる**。 3. **--apply（本番変更）**: dry-apply を人がレビューした後にだけ実行。変更→確定→**ページ再読込→ 期待値の読み戻し**（例: 見出しが「ベッド3」になった）まで自動でやり、一致しなければ exit 1。 ## 実装の型（playwright / CDP） ```js // 接続: 新規起動しない。常駐窓の CDP ポートへ const browser = await chromium.connectOverCDP('http://127.0.0.1:'); // 事故防止1: 対象IDをハードコードし、URL に含まれることを assert。違えば何もせず exit 2 if (!page.url().includes('<対象リスティング/レコードのID>')) process.exit(2); // 事故防止2: 行の特定はテキストと aria-label だけで書く（CSSクラスは難読化されていて壊れる） // 例: 「ラベル N N ラベル」という innerText を持つ最小コンテナを祖先に辿り、 // その中の aria-label が「追加」/「減らす」のボタンを押す // 事故防止3: 一意に特定できなければ絶対に押さない（exit 2） // 事故防止4: すべてのクリックを console.log('[click] <対象>') で記録 // 事故防止5: probe/dry-apply のクローズは「キャンセル」を優先、apply だけ確定ボタン ``` ## 実測で踏んだ罠（この型に織り込み済み） - **概要と編集UIで表記が違う**。一覧カードは「ソファ1」でも編集UIは「ソファー」（長音符つき）。 照合は必ず**編集UI側の実ラベル**と完全一致させる。probe のダンプで実ラベルを先に取るのはこのため。 - **保存ボタンが無いUIがある**。フッターが「キャンセル / 閉じる」だけで、**「閉じる」で変更が確定**する。 probe で押してよいのはキャンセルだけ。 - **`waitUntil: 'networkidle'` は大手 SPA では収束しない**。固定 wait（8秒程度）にする。 - ページ本文に **U+2060（WORD JOINER）等の不可視文字**が混ざる。完全一致 grep は落ちるので短い部分一致で。 - 管理画面の一部は**チャネルマネージャ連携中はロック**される（「設定は制限されています」等）。 ロックは料金系だけでコンテンツ系は編集可、というように**画面ごとに違う**ので、 推測せず probe でロック文言の有無を先に確かめる。 - **編集後の検証は設定画面でなく公開側**で読み戻す（設定画面の値と公開表示はズレることがある）。 ## AI への任せ方（役割分担） - スクリプトの実装は安価な実行モデルに委譲してよいが、**「--apply は絶対に実行しない。probe の ダンプ取得までがあなたの完了条件」と指示に明記**する。実行トリガは人（または人が承認した監督AI）に残す。 - 監督側は probe のダンプとスクショを目視レビューし、dry-apply を自分で流してから apply する。 ## 完了条件 - probe: ダンプ JSON に対象UIの全ボタンが入っている - dry-apply: 押す予定の行が「1件だけ」ログに出る - apply: 変更後の読み戻しで期待値が出て exit 0、公開側ページでも同じ値が確認できる ---