• クリーンなデータ
  • 効率性
  • 構造化
  • ユーザー操作

AIでWebサイトの特定データを抽出する方法｜HTML DOM Query Engine

このMCPをAIクライアントに一度接続するだけです。ページ全体を読み込むことなく、エージェントが必要なHTML要素だけをピンポイントで取得できるようになります。

このページについてAIに聞く

すぐに答え

AIを使ってWebページから特定のデータを抽出するには？

AIがCSSセレクターを利用して、価格や見出しなど、ページ内の特定の箇所を狙い撃ちします。膨大なHTMLコードに惑わされることなく、次のタスクにすぐ使える、クリーンで構造化されたデータのみを取得できます。

得られる結果

データの活用イメージ

コードの解析という重労働はAIに任せられます。

クリーンなデータ

的確なテキスト抽出

セレクターを使用して、特定の文字列や属性を抽出します。不要なコードに紛れることなく、指定した値だけを正確に取得できます。

効率性

コンテキストの節約

指定した部分のみを読み取るため、無関係なタグにトークンを消費しません。会話のスピードが上がり、コストも抑えられます。

構造化

属性の取得

テキストだけでなく、リンク、画像のソース、IDなども取得可能です。生のWebページを、そのまま使えるデータセットへと変換します。

ユーザー操作

セレクターの指定

セレクターが複雑な場合は、適切なCSSパスをご自身で特定する必要があります。AIは指示に従いますが、地図（パス）はユーザーが提供します。

ワークフロー

URLが提供された際、AIが行うプロセス

Webページを単なる巨大なテキストの塊としてではなく、構造化されたデータベースとして扱います。

  1. ターゲットの特定

    ページ内のどの要素を見つけたいかをエージェントに伝えます。

    query_dom

  2. セレクターの実行

    AIが生のHTMLに対してCSSクエリを実行し、要求されたデータを分離します。

    query_dom

  3. 属性のフィルタリング

    一致した要素から、hrefやsrcなどの特定のプロパティを抽出します。

    query_dom

  4. 出力の整形

    抽出されたデータは、使いやすいテキストや構造化されたリストとして提示されます。

    query_dom

試してみる

以下のプロンプトをコピーして開始

これらのプロンプトを使って、すぐにデータ抽出を開始できます。

出発点

括弧内の情報は、実際のターゲットURLや使用したいCSSセレクターに書き換えてください。

Cheerio DOM Connector

準備完了です。MCPクライアントを選択し、セットアップ手順に従ってください。

コネクタリンクhttps://edge.vinkius.com/vk_preview_yforvmpWi3y9TqnYhrCHzOXtUdI6qMtPsOkV6gLr/mcp

Claude Desktop

以下の手順で数秒で接続できます。

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — Cheerio DOM capabilities are ready to use.
設定 · claude_desktop_config.jsonコピー
{
  "mcpServers": {
    "html-dom-query-engine-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_yforvmpWi3y9TqnYhrCHzOXtUdI6qMtPsOkV6gLr/mcp"
    }
  }
}
チャットにコピー04

  • Use the HTML DOM Query Engine to get the text inside the 'h1' tag from https://example.com

  • Find all the 'href' attributes for the links within the 'nav' element on https://news.com

  • Extract the price value from the element with the class '.product-price' on https://store.com

  • Get the 'src' attribute for all images inside the 'article' tag on https://blog.com

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

ここから始める

HTML DOM Query Engineを接続して、すぐに指示を出しましょう。

リンクをクリックして接続するだけです。認証情報は暗号化され、プライバシーは守られます。接続後は、AIクライアントが指定したあらゆるページに対して即座にクエリを実行できるようになります。

HTML DOM Query EngineをAIに接続する

FAQ

動作に関する詳細

  • 01

    AIはボタンをクリックしたり、フォームに入力したりできますか？

    いいえ。このMCPは既存のHTMLを読み取り、クエリを実行するためのものであり、ページを操作したり操作したりするためのものではありません。

  • 02

    AIはページ全体を一度に見ていますか？

    いいえ。指定されたセレクターを使用して、要求された特定のパーツのみを抽出します。これによりコンテキストの容量を節約できます。

  • 03

    ログインが必要なページのデータをスクレイピングできますか？

    いいえ。AIは、公開されているHTMLコンテンツ、または現在のセッションで提供されているHTMLコンテンツのみをクエリできます。

  • 04

    CSSセレクターが間違っている場合はどうなりますか？

    AIは空の結果を返すか、エラーを表示します。データを取得するには、有効なセレクターを指定する必要があります。

  • 05

    AIはWebサイトの内容を書き換えることができますか？

    いいえ。このツールはデータ抽出専用であり、Webページの内容を変更することはできません。

  • HTML DOM Query Engineについて他に質問がありますか？ HTML DOM Query Engine Connectorの全機能を見る

『Cheerio DOM』を Claude、Cursor、ChatGPT などに接続