pageops logo
Screenshot API
APIキーを取得

Webページスクリーンショットの自動化：PageOps Screenshot API の活用

はじめに

手動でのウェブページのスクリーンショット撮影は、時間がかかり、信頼性にも欠けます。開発者の皆様、もし監視ツール、ビジュアルリグレッションテスト、競合他社の追跡システム、あるいはウェブクローラーやデータ収集パイプラインを構築しているのであれば、ウェブページのスクリーンショットをプログラム可能な方法でキャプチャする必要があります。

Screenshot APIを使用すれば、HTTPリクエストを送信するだけで、レンダリング後のウェブページのスクリーンショットを取得できます。APIはヘッドレスブラウザをクラウド上で実行するため、インフラの管理は一切不要です。

開発者がウェブページスクリーンショットを必要とする理由

スクリーンショットの自動化は、現代のアプリケーションでは非常に一般的で、主な用途は以下の通りです：

  • ウェブサイト監視: 定期的にウェブページのスクリーンショットを取得し、UIの変化、ページレイアウトの異常、サイトのダウンを検出します。
  • ビジュアルリグレッションテスト: QAチームが異なるデプロイバージョンのスクリーンショットを比較することで、UIのバグを発見できます。
  • ウェブクローリングとデータ収集: 複雑なウェブページでは、DOMを解析するよりもスクリーンショットの方がシンプルで信頼性が高い場合があります。
  • ソーシャルメディアプレビュー生成: OpenGraph、Twitter Card、またはウェブページリンクのプレビュー画像を自動生成します。

Screenshot API の仕組み

Screenshot API の使用は非常に簡単です：

  1. ターゲットURLを指定してリクエストを送信
  2. クラウド上のヘッドレスブラウザがページをレンダリング
  3. APIがスクリーンショットをキャプチャ
  4. スクリーンショットまたはそのURLを返却

JavaScript 呼び出し例

const response = await fetch("https://api.page-ops.com/api/v1/screenshots", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer YOUR_API_KEY"
  },
  body: JSON.stringify({
    url: "https://example.com",
    mode: "sync",
    timeoutMs: 8000,
    fullPage: false
  })
});

const data = await response.json();
console.log(data.result?.url);

cURL 呼び出し例

curl -X POST "https://api.page-ops.com/api/v1/screenshots" \
  -H "Authorization: Bearer $SCREENSHOT_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "mode": "sync",
    "timeoutMs": 8000,
    "fullPage": false
  }'

注意：同期モード (mode=sync) では、fullPage は false である必要があり、timeoutMs は 0–10000 ミリ秒の間である必要があります。そうでない場合、サーバーは自動的に非同期モードにフォールバックします。

高度なスクリーンショットオプション

Screenshot API は豊富なカスタマイズパラメータをサポートしています：

  • 全ページスクリーンショット：ページ全体をキャプチャします（非同期モードで利用可能）。
  • カスタムビューポート：デスクトップ、モバイル、タブレットなどのデバイスをエミュレートします。
  • 待機条件：特定のDOM要素やネットワークリクエストの完了を待ってからスクリーンショットを撮影します。
  • 要素選択スクリーンショット：ページ内の特定の要素のみをキャプチャします。
  • Headers & Cookies：認証情報やセッションCookieを渡します。
  • 遅延スクリーンショット：delayMs を使用して、ページロード完了後に遅延を追加できます。
{
  "url": "https://example.com/pricing",
  "selector": "#pricing"
}

同期呼び出しと非同期呼び出し

非同期モード（デフォルト）：リクエストは jobId を返します。GET /api/v1/screenshots/{jobId} をポーリングして、status=completed、failed または expired になるまで待機します。

同期モード：リクエストはスクリーンショットが完了するまで（またはタイムアウトするまで）ブロックし、直接スクリーンショットのURLを返します。タイムアウトした場合、APIは status=processing を返し、引き続きGETインターフェースを使用してポーリングを継続できます。

よくあるご質問

  1. Q1: 保護されたページのスクリーンショットを撮るには？

    headers または cookies パラメータを使用して、認証情報を渡してください。

  2. Q2: 全ページスクリーンショットで同期モードは使えますか？

    サポートされていません。全ページスクリーンショットには非同期モードを使用する必要があります。

  3. Q3: 非同期モードで最終的なスクリーンショットを取得するには？

    GET /api/v1/screenshots/{jobId} をポーリングし、status=completed になるまで待ちます。

次のステップ / 関連記事