JSレンダリング

Universal Scraping APIは、複雑なウェブページのレンダリングとインタラクションシナリオをサポートする強力なウェブコンテンツ取得サービスです。

基本的なリクエスト構造

{
  "actor": "unlocker.webunlocker",
  "input": {
    "url": "https://example.com",
    "js_render": false,
    "headless": false
  },
  "proxy": {
    "country": "US"
  }
}

主要機能

JavaScriptレンダリング

JavaScriptレンダリングにより、動的にロードされたコンテンツとSPA(シングルページアプリケーション)の処理が可能になります。完全なブラウザ環境を実現し、より複雑なページのインタラクションとレンダリング要件をサポートします。

js_render=trueの場合、ブラウザを使用してリクエストを行います。

{
  "actor": "unlocker.webunlocker",
  "input": {
    "url": "https://www.google.com/",
    "js_render": true
  },
  "proxy": {
    "country": "US"
  }
}

JavaScript命令

ウェブページと動的にインタラクトするための、広範なJavaScriptディレクティブを提供します。

これらのディレクティブを使用すると、要素をクリックしたり、フォームに入力したり、フォームを送信したり、特定の要素が表示されるのを待機したりできます。「詳細を読む」ボタンをクリックしたり、フォームを送信したりといったタスクに対して柔軟性を提供します。

{
  "actor": "unlocker.webunlocker",
  "input": {
    "url": "https://example.com",
    "js_render": true,
    "js_instructions": [
      {
        "wait_for": [
          ".dynamic-content",
          30000
        ]
        // Wait for element
      },
      {
        "click": [
          "#load-more",
          1000
        ]
        // Click element
      },
      {
        "fill": [
          "#search-input",
          "search term"
        ]
        // Fill form
      },
      {
        "keyboard": [
          "press",
          "Enter"
        ]
        // Simulate key press
      },
      {
        "evaluate": "window.scrollTo(0, document.body.scrollHeight)"
        // Execute custom JS
      }
    ]
  }
}

JavaScript命令で実行できる一般的なアクションを以下に示します。

JavaScript命令リファレンス

命令構文説明
wait_for[selector, timeout]要素が表示されるのを待つ{"wait_for": [".content", 30000]}
click[selector, delay]要素をクリックする{"click": [".button", 1000]}
fill[selector, value]フォームに入力する{"fill": ["#input", "text"]}
waitmilliseconds固定時間待つ{"wait": 2000}
evaluatejavascript_codeJSコードを実行する{"evaluate": "console.log('test')"}
keyboard[action, value, delay?]キーボード操作下記のキーボード操作表を参照

キーボード操作

操作構文説明
キーを押す["press", keyInput]特定のkeyInputを押す{"keyboard": ["press", "Enter"]}
テキストを入力["type", text, delay?]テキストを入力する(オプションで遅延を設定){"keyboard": ["type", "Hello", 20]}
キーを押下["down", key]キーを押し続ける{"keyboard": ["down", "Shift"]}
キーを離す["up", key]キーを離す{"keyboard": ["up", "Shift"]}

サポートされている特別なKeyInputタイプ: https://pptr.dev/api/puppeteer.keyinput

リソース制御

パフォーマンスと帯域幅の使用量を最適化するためのリソースロード制御システム。

{
  "actor": "unlocker.webunlocker",
  "input": {
    "url": "https://example.com",
    "js_render": true,
    "block": {
      "resources": [
        "Image",
        "Font",
        "Stylesheet",
        "Script"
      ],
      "urls": [
        // Optional, URL pattern-based blocking
        "*.analytics.com/*",
        "*/ads/*"
      ]
    }
  }
}

完全なリソースタイプリファレンス:

リソースタイプ説明影響
Documentメインドキュメントとiframe主要なページコンテンツ
StylesheetCSSファイルページのスタイルとレイアウト
Image画像とアイコンビジュアルコンテンツ
Mediaオーディオとビデオリソースマルチメディアコンテンツ
Fontウェブフォントテキストレンダリング
ScriptJavaScriptファイルページの機能
TextTrackビデオの字幕とキャプションメディアアクセシビリティ
XHRXMLHttpRequest呼び出し従来の非同期リクエスト
FetchFetch APIリクエスト最新の非同期リクエスト
Prefetchプリフェッチされたリソースパフォーマンス最適化
EventSourceサーバー送信イベントリアルタイムアップデート
WebSocketWebSocket接続双方向通信
ManifestWebアプリマニフェストPWA設定
SignedExchange署名付きHTTP交換コンテンツの信頼性
PingPingリクエスト分析とトラッキング
CSPViolationReportCSP違反レポートセキュリティ監視
PreflightCORSプリフライトリクエストクロスオリジンセキュリティ
Other分類されていないリソースその他

使用例:

{
  "actor": "unlocker.webunlocker",
  "input": {
    "url": "https://example.com",
    "js_render": true,
    "block": {
      "resources": [
        "Image",
        "Font",
        "Stylesheet",
        "Script",
        "Media",
        "Ping",
        "Prefetch"
      ]
    }
  }
}

リソースブロッキングのベストプラクティス:

  1. パフォーマンス最適化

    • 必要に応じてのみjs_renderを有効にする
    • リソースブロッキングを賢く使用する。高速な読み込みのために、不要なリソースをブロックする
    • ネットワーク使用量を削減するためにPrefetchPingのブロックを検討する
    • Documentと重要なScriptリソースはブロックしないようにする
  2. 帯域幅管理

    • 帯域幅を大量に消費するページではImageMediaをブロックする
    • システムフォントを使用する代わりにFontをブロックすることを検討する
  3. 安定性の向上

    • リクエストの再試行メカニズムを実装する
    • エラー処理ロジックを追加する
    • 固定のwaitの代わりにwait_forを使用する
  4. リソース効率

    • 必要に応じてリソースをロードする
    • 不要な接続をすぐに閉じる

注意: リソースタイプの文字列は大文字と小文字が区別されます。リファレンステーブルに示されているものと完全に一致する文字列を使用してください。