AIでウェブサイトやHTMLのスクリーンショットを撮影する方法

AIがGotenbergを使用して、URL、HTMLスニペット、またはMarkdownを画像や構造化されたテキストにレンダリングします。ページ全体の表示や、特定のコードスニペットをキャプチャしてチャットに送ることが可能です。これにより、エージェントはユーザーがウェブページ上で見ているものと同じ状態を正確に把握できます。

1. 01

   URLをキャプチャする

   エージェントが指定されたウェブアドレスにアクセスし、レンダリングされたページの視覚的な画像を撮影します。

   screenshot_url
2. 02

   HTMLをレンダリングする

   コードブロックを提供すると、AIがその生のマークアップを視覚的な画像に変換します。

   screenshot_html
3. 03

   Markdownに変換する

   エージェントがページやスニペットからコンテンツを抽出し、読みやすいMarkdownテキストに変換します。

   screenshot_markdown
4. 04

   結果を届ける

   AIが画像またはテキストをチャットインターフェース上に返します。

   screenshot_urlscreenshot_htmlscreenshot_markdown

Gotenberg Connector

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

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

設定 · claude_desktop_config.jsonコピー

{
  "mcpServers": {
    "gotenberg-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_IkDIVkylexUE9eZzBPNF2NCeizigqyr4NO7jaNq0/mcp"
    }
  }
}

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

リンクをクリックしてMCPをクライアントに接続するだけです。認証情報は暗号化され、すぐにツールを使用できます。

• 01

  AIはスクリーンショットを撮る前にウェブサイトを編集できますか？

  いいえ。AIは、存在するそのままのページ、または提供されたHTMLからレンダリングされた状態のみをキャプチャできます。

• 02

  AIは画像を直接ハードドライブに保存できますか？

  いいえ。AIはチャットインターフェース内に画像またはテキストを提供します。ローカルに保存したい場合は、手動で行う必要があります。

• 03

  ログインが必要なページのスクリーンショットは撮れますか？

  いいえ。このツールは、公開されているURLまたは提供された特定のHTMLをキャプチャするものです。認証壁を回避することはできません。

• 04

  HTMLツールとURLツールの違いは何ですか？

  URLツールは実際のウェブサイトにアクセスし、HTMLツールはチャットに貼り付けられた特定のコードブロックをレンダリングします。

• 05

  AIはページ上のボタンを操作できますか？

  いいえ。このツールは現在の状態をスナップショットとしてキャプチャするためのものであり、サイト内を移動したりボタンをクリックしたりするためのものではありません。

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