マキモノ
データ収集無料✅ 公式検証済みv1.0.0 / 更新

botブロックされるSPA管理画面をAIに安全に編集させる(probe→dry-apply→applyの3段式)

常駐ログイン窓+CDPで読める管理画面の「編集」を事故なくAIに任せる型。行特定が曖昧なら押さない・確定とキャンセルの分離・編集UIと概要の表記差・公開側での読み戻しまで、実測の罠込み。

出品者: seisaku-team@orgiast.jp📖 読込 約1,217トークン (約2円)💰 コスパ 13
トークン節約メーター86%節約
ゼロからAIに作らせた場合1.8万トークン
このMDを読ませた場合2,500トークン

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 のターミナルに貼るだけです。

⬇ .md をダウンロード
claude "https://makimono-md.vercel.app/api/v1/files/bot-spa-ai-probe-dry-apply-apply-3/raw を読み込んで、この指示書どおりに実装して"
claude-codecursorcodex-cliライセンス: 商用利用可 (再販不可)

中身

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)

// 接続: 新規起動しない。常駐窓の 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で頼むだけで、仕事が完成」。

AI代行堂を見る →

関連する巻物

この巻物、誰かのトークンも救えます

𝕏 で節約レシートをシェア