# agentにWebページのデータを取らせるために、3つの不器用な方法を試して、最後に1つだけ残した

agentにWebページのデータを取らせるために、私は前後ぜんごして3つの不器用ぶきような方法ほうほうを試ためした。

いちばん直接的ちょくせつてきなのは、ページ全体ぜんたいのHTMLをモデルに渡わたして自分じぶんで読よませることだ。中ちゅうくらいのページでも数万すうまんtokenになり、データをまだ取とれていないのに、コンテキストを先さきに半分はんぶんほど使つかい切きってしまう。モデルもよく行ぎょうを取とり違ちがえる。2つ目めはCSSセレクターを自分じぶんで書かき、1フィールドごとにfindを1回かい、さらにgetを1回かいするやり方かただ。10個こを超こえるフィールドなら10回かいを超こえる往復おうふくになり、遅おそくて冗長じょうちょうだ。3つ目めはJSのevalを手書てがきしてページに流ながし込こんで実行じっこうすること。使つかえはするが、ページごとに書かき直なおす必要ひつようがあり、属性ぞくせいの取得しゅとくも、複数値ふくすうちの取得しゅとくも、すべて自分じぶんで面倒めんどうを見みることになる。

一周いっしゅうまわって残のこったのは、chrome-useの2つのコマンドだ。既知きちのサイトにはsite、任意にんいのページにはextractを使つかう。背後はいごにある判断はんだんは同おなじで、データ取得しゅとくは1回かいの**宣言的せんげんてきな評価ひょうかであるべきで、命令的めいれいてき**な往復おうふくの列れつではない、ということだ。

site:既知きちのサイトなら、セレクターを自分じぶんで書かかない

chrome-useが認識にんしきしているサイトを開ひらくと、利用可能りようかのうなadapterがあると自動じどうで示しめしてくれる。

$ chrome-use open https://news.ycombinator.com
💡 site adapters for news.ycombinator.com — prefer these for structured data:
   hackernews/thread, hackernews/top

adapterは、特定とくていのサイトに向むけてあらかじめ書かかれたデータ取得しゅとくロジックだ。HNのDOMがどんな形かたちか、これまで何度なんど変かわったかを気きにする必要ひつようはない。

chrome-use site hackernews/top --json

返かえってくる1件けんごとのデータは完全かんぜんで、タイトルだけではない。

{ "rank": 1, "title": "ZCode – Harness for GLM-5.2", "url": "https://zcode.z.ai/en",
  "author": "chvid", "score": 329, "comments": 258, "id": 48753715,
  "hn_url": "https://news.ycombinator.com/item?id=48753715" }

adapterの本当ほんとうの価値かちは、「ページ構造こうぞうは変かわる」という問題もんだいをあなたの側がわから切きり離はなしてくれることだ。HNが改版かいはんされればadapterがそれに合あわせて直なおされる。あなたのsite hackernews/topは1文字もじも変かえなくていい。代償だいしょうは、対応たいおうするのが内蔵ないぞうされたサイトだけに限かぎられることだ。まずchrome-use siteで何なにがあるかを見みればいい。

実際じっさいにつまずきやすい小ちいさな点てんが2つある。データは戻もどり値ちのトップレベルではなく.data.result.postsにあるので、jqと組くみ合あわせるなら完全かんぜんなパスを書かく必要ひつようがある。もう1つ、chrome-useはstderrにバージョン通知つうちを1行ぎょう出だす。それはstdoutのJSONには影響えいきょうしないが、完全かんぜんにきれいにしたいなら2>/dev/nullを付つければいい。

extract:任意にんいのページには、セレクターschemaを渡わたす

既製きせいのadapterがないサイトではextractを使つかう。ここでまず誤解ごかいを正ただしておきたい。私も最初さいしょは間違まちがえたが、これは「欲ほしいものを自然言語しぜんげんごで説明せつめいする」ものではない。渡わたすのはCSSセレクターのschemaだ。

{
  "rows": "<css>",           // rowsがある:反復コンテナ → 配列を返す。ない → ページ全体に対して1つのオブジェクトを返す
  "fields": {
    "name": ".title",                          // 短縮形:セレクター → trim後のテキスト
    "href": { "sel": "a", "get": "@href" },    // 属性を取得
    "tags": { "sel": ".tag", "get": "text", "all": true }  // 一致したものを全部取得 → 配列
  }
}

getにはtext（デフォルト）/ @属性 / html / valueを指定していできる。HNのトップページから各かく項目こうもくのタイトルとリンクを取とるなら、行ぎょうコンテナは.athingだ。

chrome-use extract --schema '{"rows":".athing","fields":{"title":".titleline a","url":{"sel":".titleline a","get":"@href"}}}'

[ { "title": "ZCode – Harness for GLM-5.2", "url": "https://zcode.z.ai/en" },
  { "title": "Oomwoo, an open-source robot vacuum you build yourself", "url": "https://makerspet.com/blog/..." } ]

rowsを書かかなければ、ページ全体ぜんたいに対たいして1つのオブジェクトを返かえす。h1やlink[rel=canonical]のようなページ単位たんいのフィールドを取とるのに向むいている。

もう一段いちだん深ふかく考かんがえる価値かちがあるのは、その実行方法じっこうほうほうだ。schema全体ぜんたいは1回かいのページ評価ひょうかにコンパイルされる。前まえのように1フィールドごとに往復おうふくするわけではない。10個こを超こえるフィールドでも1回かいで取とり戻もどせる。速はやく、挙動きょどうも確定的かくていてきだ。同おなじschemaを同おなじページに当あてれば、結果けっかは安定あんていして再現さいげんできる。ここが、データ取得しゅとくにおいて宣言的せんげんてきなやり方かたが命令的めいれいてきなやり方かたより扱あつかいやすい理由りゆうだ。構造こうぞうを記述きじゅつすれば、あとは1回かいで計算けいさんしてくれる。セレクターの書かき方かたがわからないなら、まずsnapshot -iで構造こうぞうを見みるか、DevToolsで対象たいしょう要素ようそをクリックしてselectorを取とればいい。

取とれないもの、そして使つかうべきでないもの

単一たんいつコンテナモデルにも届とどかない場合ばあいがある。HNのスコアは.athingの行ぎょうにはなく、すぐ次つぎの行ぎょうの.sublineにある。そのため、上うえの例れいではタイトルとリンクだけが取とれている。「1件けんのデータが2行ぎょうのDOMに分わかれている」構造こうぞうでは、rows/fieldsの仕組しくみだけでは全部ぜんぶを取とれない。まさにこれがadapterの存在理由そんざいりゆうだ。site hackernews/topはすでに2行ぎょうを結合けつごうしてくれている。

逆ぎゃくに、そもそもブラウザを開ひらくべきでない場面ばめんもある。公開こうかいされた静的せいてきページの数個すうこのフィールドなら、curl + jqのほうが速はやい。「どんなページがあるか」を知しりたいなら検索けんさくエンジンを使つかうべきだ。extract / siteの本当ほんとうの主戦場しゅせんじょうは、ログインが必要ひつようで、JSを実行じっこうする必要ひつようがあり、アンチボットに止とめられるページだ。chrome-useが操作そうさするのは、あなたがその時点じてんでログインしている本物ほんもののChromeだからだ。それらのデータはもともと目めの前まえにレンダリングされている。chrome-useは、画面がめんにあるものをJSONとして読よみ取とっているだけだ。CreepJSで実測じっそくしたbotスコアは0%。偽装ぎそうしているからではなく、それがもともとあなたのブラウザだからだ。

データ取得しゅとくで難むずかしいのは、解析かいせきそのものではない。解析かいせきできる段階だんかいまでまず到達とうたつすることだ。前半ぜんはんのログイン、レンダリング、検出けんしゅつの通過つうかはあなた自身じしんのブラウザに任まかせる。後半こうはんでは、siteが組くみ立たて済ずみのレコードを渡わたし、extractが1つのセレクターで一度いちどにきれいに取とらせてくれる。