botブロックされるSPA管理画面をAIに安全に編集させる(probe→dry-apply→applyの3段式)
常駐ログイン窓+CDPで読める管理画面の「編集」を事故なくAIに任せる型。行特定が曖昧なら押さない・確定とキャンセルの分離・編集UIと概要の表記差・公開側での読み戻しまで、実測の罠込み。
約1.6万トークンの節約 (API料金換算で約23円分)。 要件定義・技術調査・試行錯誤ぶんのトークンがまるごと不要になります。※ 出品者申告とレビューに基づく推定値。モデル・タスク内容により変動します。
この巻物について
「botブロックされるSPA管理画面をAIに安全に編集させる(probe→dry-apply→applyの3段式)」は、データ収集カテゴリのAI指示書(MDファイル)です。常駐ログイン窓+CDPで読める管理画面の「編集」を事故なくAIに任せる型。行特定が曖昧なら押さない・確定とキャンセルの分離・編集UIと概要の表記差・公開側での読み戻しまで、実測の罠込み。この巻物をAIに読み込ませると、ゼロから設計・調査する場合に比べて 約1.6万トークン(API料金換算で約23円)・86%のトークンを節約できます。
- カテゴリ
- データ収集
- 対応AI
- claude-code、cursor、codex-cli
- ライセンス
- 商用利用可 (再販不可)
- 価格
- 無料
- ゼロから開発時
- 約1.8万トークン
- この巻物使用時
- 約2,500トークン
- 節約量
- 約1.6万トークン (約23円)
- 更新日
- 2026-09-10
使い方 (AIに渡す3つの方法)
いちばん簡単なのはワンライナー。Claude Code のターミナルに貼るだけです。
claude "https://makimono-md.vercel.app/api/v1/files/bot-spa-ai-probe-dry-apply-apply-3/raw を読み込んで、この指示書どおりに実装して"
中身
bot ブロックされる SPA 管理画面を AI に「安全に」編集させる: probe → dry-apply → apply の3段式
対象: Airbnb・Booking.com のような「playwright の新規起動は bot 判定で弾かれるが、 ログイン済みの常駐 Chrome に CDP で繋げば読める」管理画面で、設定値の変更まで AI にやらせたい人。 読むだけの常駐窓の作り方は既存の巻物(reCAPTCHA サイトの常駐ログイン窓)を先に読むこと。本書はその続き。
なぜ3段に分けるか
管理画面の編集は本番がその場で変わる。AI に1本のスクリプトで「開いて・押して・保存」までやらせると、 セレクタの誤爆=本番事故になる。事故は「押す行の特定ミス」「確定ボタンの取り違え」の2箇所で起きるので、 段を分けてそれぞれを人がレビューできる形にする。
- --probe(既定・読むだけ): 対象UIを開き、構造(innerText / 全 button の text・aria-label / input)を JSON へダンプしてキャンセルで閉じる。スクショも撮る。ここまでは何度失敗してもよい。
- --dry-apply(照合のみ): apply と同一の行特定ロジックを通し、「どの行のどのボタンを押す予定か」を ログに出してキャンセルで閉じる。特定が曖昧(0件 or 複数件)なら exit 2 で押さずに止まる。
- --apply(本番変更): dry-apply を人がレビューした後にだけ実行。変更→確定→ページ再読込→ 期待値の読み戻し(例: 見出しが「ベッド3」になった)まで自動でやり、一致しなければ exit 1。
実装の型(playwright / CDP)
// 接続: 新規起動しない。常駐窓の CDP ポートへ
const browser = await chromium.connectOverCDP('http://127.0.0.1:<PORT>');
// 事故防止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、公開側ページでも同じ値が確認できる
よくある質問
+「botブロックされるSPA管理画面をAIに安全に編集させる(probe→dry-apply→applyの3段式)」とは何ですか?
常駐ログイン窓+CDPで読める管理画面の「編集」を事故なくAIに任せる型。行特定が曖昧なら押さない・確定とキャンセルの分離・編集UIと概要の表記差・公開側での読み戻しまで、実測の罠込み。
+どれくらいトークン(費用)を節約できますか?
ゼロから開発すると約1.8万トークンかかりますが、この巻物を使えば約2,500トークンで済みます。差し引き約1.6万トークン(API料金換算で約23円)・86%の節約です。
+どうやって使いますか?
無料です。MDファイルを Claude Code などのAIに読み込ませるだけ。ワンライナーをターミナルに貼れば実装が始まります。要件定義や技術調査を省いて実装だけにトークンを使えます。
+どのAIツールに対応していますか?
claude-code、cursor、codex-cli に対応しています。
+商用利用できますか?
ライセンスは「商用利用可 (再販不可)」です。
🤝 自分でAIを動かすのは、まだ不安…という方へ
この巻物の内容を、AIを使うプロに丸ごと任せることもできます。姉妹サービスAI代行堂なら「LINEで頼むだけで、仕事が完成」。
関連する巻物
定期スクレイピング→Googleスプレッドシート自動集計MD
競合価格・在庫・ランキングなどを毎日自動取得してスプレッドシートに蓄積するバッチを AI に作らせる指示書。robots.txt 尊重・レート制限・差分検知のベストプラクティス込み。
Androidアプリの通知をローカルPCへ取り込む(公式API非対応のチャット向け)
公式APIが無いチャットサービスの投稿を、Android通知経由で手元PCに集める指示書。着手前に『その通知が本当に発生するか』をADBの通知履歴で検証する手順、fail-closedなallowlist設計、個人名を残さない診断ログ、LLM要約の壊れ方と対策までを含む。
外部サイトの「異常」を報告する前に計測器を対照群で検定する
自社の掲載が検索に出ない・売切表示になる等を疑ったとき、対照群をツールに実装して測定不能をexit 2で止める手順。UA未設定で空ページを掴む罠、分母が列挙可能かの見方、履歴のない画面で「いつ落ちたか」を測らない原則つき。
この巻物、誰かのトークンも救えます
𝕏 で節約レシートをシェア