JA EN
shiichan

AI エージェントがページ構造を丸ごと読める！Browser Run にアクセシビリティツリー専用エンドポイント登場！

Cloudflare Changelog ★★★★ Markdown で見る
#cloudflare#ai#serverless

みんな、しぃちゃんだよ！今日は AI エージェントに Web ページを触らせている人がにっこりしちゃう発表を持ってきたよ。ページの中身を「見た目」じゃなくて「構造」で受け取れる、新しいエンドポイントのお話！

Cloudflare Changelog developers.cloudflare.com

なにが発表されたの？

Cloudflare の Changelog で、Browser Run に /accessibilityTree という単体エンドポイントが追加されたことが発表されたよ。

これを使うと、レンダリング済みの Web ページの「アクセシビリティツリー」だけを直接リクエストできるの。アクセシビリティツリーっていうのは、ブラウザがページを解釈して作る構造化されたビューのことで、要素の役割 (role)、名前 (name)、状態 (state)、値 (value)、そして階層 (hierarchy) が入っているんだよ。

名前のとおり、もともとはアクセシビリティ支援ツールのための情報。でも Cloudflare は、これが AI エージェントや自動化ワークフローにもすごく役立つよ、って推しているの。

今までどうだったの？

これまで AI エージェントにページの中身を理解させるには、大きく 2 つのやり方があったの。ひとつはスクリーンショットを撮ってピクセルから推論する方法、もうひとつは生の HTML をまるっと渡してパースする方法。

でもどっちも重たいんだよね。スクショはコストがかかるし、生 HTML はノイズが多くて、エージェントが「今どこに何があるのか」を読み解くのが大変。

そこで意味的な構造だけをきれいに取り出せるアクセシビリティツリーの出番、というわけ！

これで何が変わるの？

いちばん嬉しいのは、AI エージェントを作っている人。ページの構造をそのまま渡せるから、ピクセルからの推論も HTML のパースも減らせるの。

エージェントは「どんな要素があるか」「どのアクションが取れるか」を、構造から素直に判断できるようになるよ。ボタンやリンク、見出しといった要素が role と name で並んでいるから、次の一手を決めやすいんだね。

もちろん本来の用途であるアクセシビリティのツール作りにも使えるし、ページ構造が欲しいだけの自動化ワークフローにもぴったりだよ。

深く潜ってみよう

リクエストはとってもシンプル。アカウントの Browser Run 宛てに URL を投げるだけだよ。

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/{accountId}/browser-run/accessibilityTree' \
  -H 'Authorization: Bearer {apiToken}' \
  -H 'Content-Type: application/json' \
  -d '{ "url": "https://example.com/" }'

返ってくるのは、role や name、children を持ったツリー構造。たとえばこんな感じだよ。

{
  "success": true,
  "result": {
    "accessibilityTree": {
      "role": "RootWebArea",
      "name": "Example Domain",
      "children": [
        { "role": "heading", "name": "Example Domain", "level": 1 },
        { "role": "link", "name": "Learn more" }
      ]
    }
  }
}

調整用のパラメータも用意されているよ。

  • interestingOnly — 意味のあるノードだけを返して、ツリーをすっきりさせる
  • root — ページ全体じゃなくて、特定のサブツリーだけを対象にする

そして「ページの構造だけ欲しい」ときは今回の /accessibilityTree を、「1 回の API 呼び出しで複数の形式が欲しい」ときは /snapshot を使い分けるのがポイント。/snapshot のほうは Markdown・HTML・スクリーンショットもまとめて返してくれるんだよ。

まとめ

  • Cloudflare の Browser Run に /accessibilityTree エンドポイントが追加されたよ
  • レンダリング済みページのアクセシビリティツリー (role・name・state・value・階層) を直接取得できる
  • スクショや生 HTML なしで、AI エージェントにページ構造をそのまま渡せる
  • interestingOnly で意味のあるノードだけ、root でサブツリーだけに絞れる
  • 複数形式がまとめて欲しいときは /snapshot を使う

AI エージェントや自動化でブラウザを操作している開発者さんに、じわっと効いてくるアップデートだよ！

関連記事