はじめに

結局のところ、Claude CodeCodexなどのAI機能を使う際のポイントは、以下の3つに収まる。

  1. 何ができるかを把握すること。機能として何ができるかを理解し、どのような能力を持った道具であるかを認識する。
  2. 自分のユースケースを理解すること。自分が普段行っている業務や日常の所作、やりたいと思っているが今はできていないことに関して、ワークフローを整理し、目的を言語化し、手順を書き下す。自分のユースケースをもっともよく把握しているのは自分自身である。
  3. できることとユースケースのギャップを埋めるエンジニアリングをすること。現段階の性能では、AI単独の機能だけで2のユースケースに対応するのは難しい。理想と現実の間のギャップを埋めるために、エンジニアリングを実行する。 難易度は 3 > 2 > 1 の順である。

2でユースケースを把握した際、ブラウザベースのツールがボトルネックになることがあった。APIベースの操作ができれば最も楽だ(cf: Anti-GUI:Claude Codeで始めるAPIファーストな家計管理)が、自分の場合は代替がなかったので避けては通れなかった。

業務上はどうしても外せないブラウザベースのツールを、AIで取り扱う際の手段を検討した記録をメモしておく。「できることとユースケースのギャップを埋めるエンジニアリング」の一例である。

手段1 : AIにブラウザを操作させる

まず一番初めにやってみたのがAIによるブラウザ操作である。Claude Codeで以下のようなツールを呼び出し、ブラウザを操作させる手段だ。

ツール群:

難しいポイント

  • iframeの中で複雑な描画を行うような難易度の高いサイトでは、操作をよく間違える
    • 逆に、阿部寛の公式サイトのようなStaticなサイトであれば簡単なのだろう
  • 認証がかかっている場合には面倒
    • agent-browser--auto-connectオプションで認証しているタブを引き継いで操作できる
  • そもそも操作が遅い
    • DOMを見たり、スクリーンショットベースをとって判断して…を繰り返しているため
    • 一括操作系には向かない
  • 決定的ではない
    • 同じ操作であっても、AIの機嫌によりできる・できないが異なる(場合がある)

ブラウザ操作は1回きりのユースケースには向いているが、定型的な操作を高速に処理したい場合は向いていないと感じている。

cf : AIによるブラウザ操作の自動化でオレオレBIを丸裸にする

手段2 : 内部APIを叩くCLIを作る

AIによるブラウザ操作を補う手段として考えたのが、内部APIを直接叩くことだ。きっかけは手段1を実行中のCodexに「もっと早く操作を実施してください」と指示したところ、Codexが内部APIを叩く手段を提案してきたことだった。

注意:利用規約によっては、内部APIを直接叩くことは違反となる可能性がある。また、内部APIは性質上予告なく変更されることがある。利用は自己責任で行ってください。

やり方は簡単で、ブラウザ開発者ツールのネットワークタブの内容を解析するだけだ。

  • リクエストURLはどこか?
  • リクエストパラメータは何か?
  • リクエスト認証ヘッダはついているか?ついてるとしたら、その認証情報はどこから取るのか?
    • 自分で与えてもいいし、AIにブラウザ操作をさせて認証を抽出する手段もある
  • レスポンスの形式は?

APIをラップし、CLIを作ることで、以下のようなメリットを得ることができる。

  • 決定的な操作を行うことができる。繰り返し行う操作でも、結果がブレない。
  • 高速に操作できる。時間をかけずに大量の処理ができる

おわりに

一番いいのは

  • ワークフロー自体を再考して、ブラウザ依存のツールを消す
  • APIを提供しているツールに乗り換える の2択ではある。