AIでウェブサイトのスクリーンショットを自動取得する方法

エージェントがScrapflyを使用してページをレンダリングし、表示領域全体または特定のHTML要素の画像をキャプチャします。これにより、レイアウトの監視や視覚的なチェックを自動化できます。あらゆるURLから正確な視覚データを取得可能です。

1. 01

   機能の確認

   まずエージェントが、対象サイトでどのようなスクリーンショットの撮影が可能かを判断し、リクエストが実行可能かを確認します。

   get_screenshot_capabilities
2. 02

   ページのレンダリング

   エージェントがコネクターに指示を出し、URLを読み込んでJavaScriptを実行することで、ページを完全に表示可能な状態にします。

   capture_screenshot
3. 03

   ビューのキャプチャ

   スクロールが必要なページ全体、または指定された特定の要素のいずれかを、エージェントが実際に撮影します。

   capture_screenshot
4. 04

   画像の提供

   生成された画像データをエージェントがチャットインターフェースに返し、あなたが確認や分析を行えるようにします。

   capture_screenshot

Scrapfly Connector

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

コネクタリンクhttps://edge.vinkius.com/vk_preview_ljGoukAFL719yEB20GwskucKcjiXnKMhir5d1j7S/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 — Scrapfly capabilities are ready to use.

設定 · claude_desktop_config.jsonコピー

{
  "mcpServers": {
    "scrapfly-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_ljGoukAFL719yEB20GwskucKcjiXnKMhir5d1j7S/mcp"
    }
  }
}

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

アカウントの連携は一度だけで済みます。認証情報は暗号化され、対応するあらゆるクライアントからスクリーンショットを依頼できるようになります。

• 01

  スクリーンショットを撮る前に、AIがボタンをクリックすることはできますか？

  いいえ。このコネクターはレンダリングされた状態の視覚的なスナップショットを撮影するためのものであり、ブラウザのインタラクティブな操作を自動化するものではありません。

• 02

  撮影したスクリーンショットをAIが編集することはできますか？

  いいえ。AIはキャプチャされたままの画像ファイルを受け取ります。画像への編集や注釈の追加は、手動で行う必要があります。

• 03

  ログインが必要なサイトのスクリーンショットを撮ることはできますか？

  エージェントは提供されたツールを通じて表示可能な範囲のみをキャプチャできます。ツールがそのサイトのセッション管理をサポートしていない場合、実行できません。

• 04

  ページのどの部分を撮影すべきか、AIはどうやって判断しますか？

  CSSセレクターを使用して対象の要素を指定するか、ページ全体を撮影するように指示してください。

• 05

  AIはスクリーンショットをローカルのハードドライブに保存しますか？

  いいえ。AIはチャットインターフェース内に画像を表示します。ローカルに保存したい場合は、ご自身で保存操作を行う必要があります。

• Scrapflyについてさらに詳しく知りたいですか？ Scrapfly Connectorの全機能を見る