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"]} |
wait | milliseconds | 固定時間待つ | {"wait": 2000} |
evaluate | javascript_code | JSコードを実行する | {"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 | 主要なページコンテンツ |
Stylesheet | CSSファイル | ページのスタイルとレイアウト |
Image | 画像とアイコン | ビジュアルコンテンツ |
Media | オーディオとビデオリソース | マルチメディアコンテンツ |
Font | ウェブフォント | テキストレンダリング |
Script | JavaScriptファイル | ページの機能 |
TextTrack | ビデオの字幕とキャプション | メディアアクセシビリティ |
XHR | XMLHttpRequest呼び出し | 従来の非同期リクエスト |
Fetch | Fetch APIリクエスト | 最新の非同期リクエスト |
Prefetch | プリフェッチされたリソース | パフォーマンス最適化 |
EventSource | サーバー送信イベント | リアルタイムアップデート |
WebSocket | WebSocket接続 | 双方向通信 |
Manifest | Webアプリマニフェスト | PWA設定 |
SignedExchange | 署名付きHTTP交換 | コンテンツの信頼性 |
Ping | Pingリクエスト | 分析とトラッキング |
CSPViolationReport | CSP違反レポート | セキュリティ監視 |
Preflight | CORSプリフライトリクエスト | クロスオリジンセキュリティ |
Other | 分類されていないリソース | その他 |
使用例:
{
"actor": "unlocker.webunlocker",
"input": {
"url": "https://example.com",
"js_render": true,
"block": {
"resources": [
"Image",
"Font",
"Stylesheet",
"Script",
"Media",
"Ping",
"Prefetch"
]
}
}
}
リソースブロッキングのベストプラクティス:
-
パフォーマンス最適化
- 必要に応じてのみ
js_render
を有効にする - リソースブロッキングを賢く使用する。高速な読み込みのために、不要なリソースをブロックする
- ネットワーク使用量を削減するために
Prefetch
とPing
のブロックを検討する Document
と重要なScript
リソースはブロックしないようにする
- 必要に応じてのみ
-
帯域幅管理
- 帯域幅を大量に消費するページでは
Image
とMedia
をブロックする - システムフォントを使用する代わりに
Font
をブロックすることを検討する
- 帯域幅を大量に消費するページでは
-
安定性の向上
- リクエストの再試行メカニズムを実装する
- エラー処理ロジックを追加する
- 固定の
wait
の代わりにwait_for
を使用する
-
リソース効率
- 必要に応じてリソースをロードする
- 不要な接続をすぐに閉じる
注意: リソースタイプの文字列は大文字と小文字が区別されます。リファレンステーブルに示されているものと完全に一致する文字列を使用してください。