JS レンダリング

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

詳細は、APIドキュメントを参照してください。

リクエスト構造

{
  "actor": "unlocker.webunlocker",
  "proxy": {
    "country": "ANY",
    "url": ""
  },
  "input": {
    "url": "string",
    "jsRender": {
      "enabled": true,
      "headless": true,
      "waitUntil": "domcontentloaded",
      "instructions": [],
      "block": {
        "resources": [],
        "urls": []
      },
      "response": {
        "type": "html",
        "options": {}
      }
    }
  }
}

主要機能

JavaScriptレンダリング

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

input.jsRender.enabled=trueの場合、ブラウザを使用してリクエストします。

{
  "actor": "unlocker.webunlocker",
  "proxy": {
    "country": "ANY"
  },
  "input": {
    "url": "https://example.com/",
    "jsRender": {
      "enabled": true
    }
  }
}

JavaScript命令

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

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

{
  "actor": "unlocker.webunlocker",
  "input": {
    "url": "https://example.com",
    "jsRender": {
      "enabled": true,
      "instructions": [
        {
          "waitFor": [
            ".dynamic-content",
            30000
          ]
          // 要素を待機
        },
        {
          "click": [
            "#load-more",
            1000
          ]
          // 要素をクリック
        },
        {
          "fill": [
            "#search-input",
            "search term"
          ]
          // フォームに入力
        },
        {
          "keyboard": [
            "press",
            "Enter"
          ]
          // キー入力のシミュレート
        },
        {
          "evaluate": "window.scrollTo(0, document.body.scrollHeight)"
          // カスタムJSを実行
        }
      ]
    }
  }
}

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

JavaScript命令リファレンス

命令構文説明
waitFor[selector, timeout]要素が表示されるのを待機する{"waitFor": [".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

レスポンスタイプ

パラメータinput.jsRender.response.typeでレスポンスタイプを指定できます。オプションの値はhtml | plaintext | markdown | png | jpeg | network | contentで、デフォルト値はhtmlです。

タイプ説明
htmlページのraw HTML文字列(エスケープ済み)、CSSセレクタをサポート
plaintextページのプレーンテキスト文字列(エスケープ済み)、CSSセレクタをサポート
markdownページのMarkdown文字列(エスケープ済み)、CSSセレクタをサポート
pngpng形式のページのbase64エンコード文字列、CSSセレクタをサポート
jpegjpeg形式のページのbase64エンコード文字列、CSSセレクタをサポート
networkネットワークリクエストのキャプチャを有効化します。ページロード中に実行されたすべてのXHRfetchリクエストを収集し、エスケープ済みのJSON文字列形式で詳細を返します。CSSセレクタはサポートしません
contentページコンテンツからデータをフィルタリングし、エスケープ済みのJSON文字列形式で結果を返します

詳細は以下のとおりです。

HTML

ページのHTMLコンテンツを抽出するために使用します。純粋に静的なページに最適で、エスケープされたHTML文字列形式でコンテンツを返します。

リクエストにinput.jsRender.response.type=htmlを追加します。

const axios = require('axios');
const fs = require('fs');
 
(async () => {
    const payload = {
        actor: "unlocker.webunlocker",
        proxy: {
            country: "ANY"
        },
        input: {
            url: "https://www.example.com",
            jsRender: {
                enabled: true,
                response: {
                    type: "html"
                }
            }
        }
    };
 
    const response = await axios.post("https://api.scrapeless.com/api/v2/unlocker/request", payload, {
        headers: {
            "x-api-token": "API Key",
            "Content-Type": "application/json"
        },
        timeout: 60000
    });
 
    if (response.data?.code === 200) {
        fs.writeFileSync('response.html', response.data.data, 'utf8');
    }
})();

HTML形式でテキストコンテンツを返します。

{
    "code": 200,
    "data": "<!DOCTYPE html><html><head>\n    <title>Example Domain</title>\n\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"Content-type\" content=\"text/html; charset=utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <style type=\"text/css\">\n    body {\n        background-color: #f0f0f2;\n        margin: 0;\n        padding: 0;\n        font-family: -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Open Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n        \n    }\n    div {\n        width: 600px;\n        margin: 5em auto;\n        padding: 2em;\n        background-color: #fdfdff;\n        border-radius: 0.5em;\n        box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);\n    }\n    a:link, a:visited {\n        color: #38488f;\n        text-decoration: none;\n    }\n    @media (max-width: 700px) {\n        div {\n            margin: 0 auto;\n            width: auto;\n        }\n    }\n    </style>    \n</head>\n\n<body>\n<div>\n    <h1>Example Domain</h1>\n    <p>This domain is for use in illustrative examples in documents. You may use this\n    domain in literature without prior coordination or asking for permission.</p>\n    <p><a href=\"https://www.iana.org/domains/example\">More information...</a></p>\n</div>\n\n\n</body></html>"
}

保存後のHTMLファイルの例:

<!DOCTYPE html><html><head>
    <title>Example Domain</title>
 
    <meta charset="utf-8">
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
    body {
        background-color: #f0f0f2;
        margin: 0;
        padding: 0;
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 
    }
    div {
        width: 600px;
        margin: 5em auto;
        padding: 2em;
        background-color: #fdfdff;
        border-radius: 0.5em;
        box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);
    }
    a:link, a:visited {
        color: #38488f;
        text-decoration: none;
    }
    @media (max-width: 700px) {
        div {
            margin: 0 auto;
            width: auto;
        }
    }
    </style>
</head>
 
<body>
<div>
    <h1>Example Domain</h1>
    <p>This domain is for use in illustrative examples in documents. You may use this
    domain in literature without prior coordination or asking for permission.</p>
    <p><a href="https://www.iana.org/domains/example">More information...</a></p>
</div>
 
</body></html>

プレーンテキスト

プレーンテキスト機能は、スクレイピングされたコンテンツをHTMLまたはMarkdownではなく、プレーンテキスト形式で返す出力オプションです。HTMLタグやMarkdownフォーマットを含まない、クリーンでフォーマットされていないコンテンツのバージョンが必要な場合に非常に実用的です。コンテンツ抽出プロセスを合理化し、テキスト処理や分析をより便利にします。

リクエストにinput.jsRender.response.type=plaintextを追加します。

const axios = require('axios');
const fs = require('fs');
 
(async () => {
    const payload = {
        actor: "unlocker.webunlocker",
        proxy: {
            country: "ANY"
        },
        input: {
            url: "https://www.example.com",
            jsRender: {
                enabled: true,
                response: {
                    type: "plaintext"
                }
            }
        }
    };
 
    const response = await axios.post("https://api.scrapeless.com/api/v2/unlocker/request", payload, {
        headers: {
            "x-api-token": "API Key",
            "Content-Type": "application/json"
        },
        timeout: 60000
    });
 
    if (response.data?.code === 200) {
        fs.writeFileSync('response.txt', response.data.data, 'utf8');
    }
})();

ページのプレーンテキストコンテンツを文字列として返します。以下の例を参照してください。

{
    "code": 200,
    "data": "Example Domain\n\nThis domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.\n\nMore information..."
}

保存後のtxtファイルの例:

Example Domain

This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.

More information...

Markdown

ページコンテンツをMarkdown形式で抽出する場合、純粋に静的なMarkdownページが最適です。ユニバーサルスクレイピングAPIはMarkdown形式でコンテンツを返し、より読みやすく、処理しやすくなります。

リクエストにinput.jsRender.response.type=markdownを追加します。

const axios = require('axios');
const fs = require('fs');
 
(async () => {
    const payload = {
        actor: "unlocker.webunlocker",
        proxy: {
            country: "ANY"
        },
        input: {
            url: "https://www.example.com",
            jsRender: {
                enabled: true,
                response: {
                    type: "markdown"
                }
            }
        }
    };
 
    const response = await axios.post("https://api.scrapeless.com/api/v2/unlocker/request", payload, {
        headers: {
            "x-api-token": "API Key",
            "Content-Type": "application/json"
        },
        timeout: 60000
    });
 
    if (response.data?.code === 200) {
        fs.writeFileSync('response.md', response.data.data, 'utf8');
    }
})();

Markdown形式でテキストコンテンツを返します。

{
    "code": 200,
    "data": "# Example Domain\n\nThis domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.\n\n[More information...](https://www.iana.org/domains/example)"
}

Markdownファイル保存後の例:

# Example Domain
 
This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.
 
[More information...](https://www.iana.org/domains/example)
 

PNG/JPEG

ターゲットページのスクリーンショットをキャプチャし、PNGまたはJPEG形式で画像を返すことができます。レスポンスの結果がPNGまたはJPEGに設定されている場合、input.jsRender.response.options.fullPage=trueパラメータを使用して、返される結果がフルページのスクリーンショットかどうかを指定できます。

リクエストにinput.jsRender.response.type=png or jpegを追加します。

const axios = require('axios');
const fs = require('fs');
 
(async () => {
    const payload = {
        actor: "unlocker.webunlocker",
        proxy: {
            country: "ANY"
        },
        input: {
            url: "https://www.example.com",
            jsRender: {
                enabled: true,
                response: {
                    type: "png" // png or jpeg
                }
            }
        }
    };
 
    const response = await axios.post("https://api.scrapeless.com/api/v2/unlocker/request", payload, {
        headers: {
            "x-api-token": "API Key",
            "Content-Type": "application/json"
        },
        timeout: 60000
    });
 
    if (response.data?.code === 200) {
        fs.writeFileSync('response.png', Buffer.from(response.data.data, 'base64'));
    }
})();

PNGまたはJPEG形式でbase64エンコードされた文字列を返します。

{
    "code": 200,
    "data": "JVBERi0xLjQKJdPr6eEKM..."
}

png/jpegで保存後のファイル例:

Network

input.jsRender.response.type=networkの場合、ページロード中にXHRfetchタイプのすべてのネットワークリクエストがキャプチャされます。ネットワークリクエストデータは、エスケープされたJSON文字列形式で返されます。このレスポンスデータには、URL、リクエストメソッド、レスポンスステータスコード、ヘッダー、レスポンスボディなどが含まれます。

リクエストまたはレスポンスボディにバイナリコンテンツ、サイズの大きいレスポンスボディ、またはテキスト以外のデータが含まれている場合、元のコンテンツは直接返されません。代わりに、プレースホルダー文字列[Preview not available ...]でマークされます。input.jsRender.response.optionsパラメータを使用して、URL、リクエストメソッド、ステータスコードの条件で結果をフィルタリングできます。

const axios = require('axios');
const fs = require('fs');
 
(async () => {
    const payload = {
        actor: "unlocker.webunlocker",
        proxy: {
            country: "ANY"
        },
        input: {
            url: "https://www.example.com",
            jsRender: {
                enabled: true,
                response: {
                    type: "network",
                    options: {
                        "urls": [
                            "/example"
                        ],
                        "status": [
                            200
                        ],
                        "methods": [
                            "get"
                        ]
                    }
                }
            }
        }
    };
 
    const response = await axios.post("https://api.scrapeless.com/api/v2/unlocker/request", payload, {
        headers: {
            "x-api-token": "API Key",
            "Content-Type": "application/json"
        },
        timeout: 60000
    });
 
    if (response.data?.code === 200) {
        fs.writeFileSync('response.json', response.data.data, 'utf8');
    }
})();

エスケープされたJSON文字列でデータが返されます。

{
    "code": 200,
    "data": "[{\"url\":\"https://www.tiktok.com/api/explore/item_list/...]"
}

JSON結果の例:

[
  {
    "url": "https://www.tiktok.com/api/explore/item_list/?WebIdLastTime=1752724401&aid=1988&app_language=en&app_name=tiktok_web&browser_language=en&browser_name=Mozilla&browser_online=true&browser_platform=Win32&browser_version=5.0%20%28Windows%20NT%2010.0%3B%20Win64%3B%20x64%29%20AppleWebKit%2F537.36%20%28KHTML%2C%20like%20Gecko%29%20Chrome%2F135.0.0.0%20Safari%2F537.36&categoryType=120&channel=tiktok_web&clientABVersions=70508271%2C73485602%2C73547759%2C73720540%2C73810951%2C73814854%2C73848867%2C73866686%2C73944035%2C73969557%2C73990102%2C74048200%2C74129613%2C74148345%2C74157215%2C74163128%2C74176097%2C74195789%2C74213192%2C74241848%2C70405643%2C71057832%2C71200802%2C72361743%2C73171280%2C73208420&cookie_enabled=true&count=8&data_collection_enabled=false&device_id=7527893946556515853&device_platform=web_pc&enable_cache=true&focus_state=true&history_len=2&is_fullscreen=false&is_page_visible=true&language=en&odinId=7527893969448764429&os=windows&priority_region=&referer=&region=US&screen_height=1440&screen_width=3440&tz_name=America%2FNew_York&user_is_login=false&webcast_language=en",
    "method": "GET",
    "resourceType": "fetch",
    "status": 200,
    "timestamp": 1752724403206,
    "payload": null,
    "requestReaders": {
      "sec-ch-ua-platform": "\"Windows\"",
      "referer": "https://www.tiktok.com/explore",
      "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36",
      "sec-ch-ua": "\"Google Chrome\";v=\"135\", \"Not-A.Brand\";v=\"8\", \"Chromium\";v=\"135\"",
      "sec-ch-ua-mobile": "?0",
      "accept": "*/*",
      "cookie": "tt_csrf_token=KO5LUsj8-r2G0Lcbmx_RqngSiFd_VRcPiaeY; ttwid=1%7CQapzXhCnEqiLXypjvNK3iX65g9iXPk_Jpj4GGLdqNRY%7C1752724401%7Cfb5daf3940529652ba613376c011e990b0afede828ad52c4e0c14f1c422bea61; tt_chain_token=jIGTF0ppLEuXKFGayjhpyg=="
    },
    "responseHeaders": {
      "access-control-expose-headers": "x-tt-traceflag,x-tt-logid",
      "bd-tt-error-code": "0",
      "cache-control": "max-age=1800, must-revalidate",
      "content-encoding": "br",
      "content-length": "30900",
      "content-type": "application/json; charset=utf-8",
      "date": "Thu, 17 Jul 2025 03:53:23 GMT",
      "expires": "Thu, 17 Jul 2025 03:53:23 GMT",
      "pragma": "no-cache",
      "server": "nginx",
      "server-timing": "cdn-cache; desc=HIT, edge; dur=0, origin; dur=0\ninner; dur=387",
      "tt_stable": "1",
      "x-akamai-request-id": "42a8e99d",
      "x-cache": "TCP_MEM_HIT from a23-47-221-69.deploy.akamaitechnologies.com (AkamaiGHost/22.2.0-c471f2b4819e3aa253dfcc21bfdfd452) (-)",
      "x-ms-token": "YAOuylbpReZ5gTM1PP8mwsmWMCxWprQ4oHRNuZQgKsADY7HTftSBu6W9raVm6PKyp-1mXt9Q6CIs0BHLRxozI_uNNEOWSvkaxFyunXX-54aBUvkuHBe2id6bY0cB",
      "x-tt-logid": "20250717035100C13E2314287BF101E7D9",
      "x-tt-trace-host": "0102b37aa413a15dcf9191a3f676ab4b78d5ba03a6d109c921ad21a607e80d7a40dbc340eb8c009458e52488a06a1b874047a91b63eb21ce08d01175dca60742a8bdf12f766710e93ed82ca68be07bf95a053639c5cedca212d37246317d611b65",
      "x-tt-trace-id": "00-250717035100C13E2314287BF101E7D9-729F56051B790290-00",
      "x-tt-trace-tag": "id=16;cdn-cache=hit;type=static"
    },
    "responseBody": {
      "data": "omitted"
    },
  }
]
"responseSize": 249297,
    "error": null
  }
]

コンテンツ

input.jsRender.response.type=content の場合、ページコンテンツからJSON形式のデータをフィルタリングし、レスポンスはJSON文字列形式で固定されます。input.jsRender.response.options.outputs パラメータを使用すると、スクレイピングされたページコンテンツから抽出するデータ型を正確に定義でき、必要な情報のみを効率的に取得できます。これにより、処理時間を短縮し、ユースケースにとって最も関連性の高いデータに焦点を当てることができます。

input.jsRender.response.options.outputs が空の場合、すべての出力が返されます。オプションの出力には以下が含まれます。

phone_numbers, headings, images, audios, videos, links, menus, hashtags, emails, metadata, tables, favicon.

詳細な使用方法については、以下のコードを確認してください。

const axios = require('axios');
const fs = require('fs');
 
(async () => {
    // Configuration
    const url = "https://api.scrapeless.com/api/v2/unlocker/request";
    const token = "API Key";
 
    const headers = {"x-api-token": token, "Content-Type": "application/json"};
 
    const payload = {
        actor: "unlocker.webunlocker",
        proxy: {
            country: "ANY"
        },
        input: {
            url: "https://www.example.com",
            jsRender: {
                enabled: true,
                response: {
                    type: "content",
                    options: {
                        outputs: [
                            "phone_numbers",
                            "headings",
                            "images",
                            "audios",
                            "videos",
                            "links",
                            "menus",
                            "hashtags",
                            "emails",
                            "metadata",
                            "tables",
                            "favicon"
                        ]
                    }
                }
            }
        }
    };
 
    try {
        const response = await axios.post(url, payload, {headers, timeout: 60000});
 
        if (response.status !== 200) {
            throw newError(`HTTP Error: ${response.status}`);
        }
 
        const data = response.data;
        if (data.code !== 200) {
            throw newError(`API Error: ${data}`);
        }
 
        const content = data.data || '';
 
        // Save and return result
        fs.writeFileSync('response.json', content, 'utf8');
        console.log('✅ Success! Content saved as response.json');
 
        returnJSON.parse(content);
 
    } catch (error) {
        console.error('❌ Error:', error.message);
        throw error;
    }
})()

いくつかの例を以下に示します。

メールアドレス

CSSセレクタと正規表現を使用して、example@example.comなどの標準形式のメールアドレスを抽出します。

{
    "code": 200,
    "data": "{\"emails\":[\"market@scrapeless.com\"]}"
}
 
電話番号

CSSセレクタと正規表現を使用して電話番号を抽出し、tel: プロトコルを含むリンクに焦点を当てます。

例:outputs=phone_numbers

{
    "code": 200,
    "data": "{ \"phone_numbers\": [ \"+1-111-111-111\" ] }"
}
 
見出し

HTMLのH1からH6までの見出しテキストを抽出します。

例:outputs=headings

{
    "code": 200,
    "data": "{\"headings\":[\"Example Domain\"]}"
}
 
画像

imgタグから画像ソースを抽出します。src属性のみを返します。

例:outputs=images

{
    "code": 200,
    "data": "{\"images\":[\"https://www.scrapeless.com/_next/image?url=%2Fassets%2Fimages%2Ftoolkit%2Flight%2Fimg-2.png&w=750&q=100\"]}"
}
 
音声

audioタグ内のsource要素から音声ソースを抽出します。src属性のみを返します。

例:outputs=audios

{
    "code": 200,
    "data": "{\"audios\":[\"https://example.com/audio.mp3\"]}"
}
 
ビデオ

videoタグ内のsource要素からビデオソースを抽出します。src属性のみを返します。

例:outputs=videos

{
    "code": 200,
    "data": "{\"videos\":[\"https://example.com/video.mp4\"]}"
}
 
リンク

aタグからURLを抽出します。href属性のみを返します。

例:outputs=links

{
    "code": 200,
    "data": "{\"links\":[\"https://app.scrapeless.com/landing/guide\",\"https://www.scrapeless.com/en\",\"https://www.scrapeless.com/en/pricing\",\"https://docs.scrapeless.com/\",\"https://backend.scrapeless.com/app/api\",\"https://www.producthunt.com/posts/scrapeless-deep-serpapi\",\"https://www.g2.com/products/scrapeless/reviews\",\"https://www.trustpilot.com/review/scrapeless.com\",\"https://slashdot.org/software/p/Scrapeless/\",\"https://tekpon.com/software/scrapeless/reviews/\",\"https://www.scrapeless.com/en/product/deep-serp-api\",\"https://www.scrapeless.com/en/product/scraping-browser\",\"https://www.scrapeless.com/en/product/scraping-api\",\"https://www.scrapeless.com/en/product/universal-scraping-api\",\"https://www.scrapeless.com/en/solutions/e-commerce\",\"https://www.scrapeless.com/en/solutions/seo\",\"https://www.scrapeless.com/en/solutions/real-estate\",\"https://www.scrapeless.com/en/solutions/travel-hotel-airline\",\"https://www.scrapeless.com/en/solutions/social-media\",\"https://www.scrapeless.com/en/solutions/market-research\",\"https://www.scrapeless.com/en/blog\",\"https://www.scrapeless.com/en/blog/deep-serp-api-online\",\"https://www.scrapeless.com/en/blog/scrapeless-web-scraping-toolkit\",\"https://www.scrapeless.com/en/blog/google-shopping-scrape\",\"https://backend.scrapeless.com/app/api/v1/public/links/github\",\"https://backend.scrapeless.com/app/api/v1/public/links/youtube\",\"mailto:market@scrapeless.com\",\"https://www.scrapeless.com/en/ai-agent\",\"https://browserless.scrapeless.com/\",\"https://www.scrapeless.com/en/solutions/temu\",\"https://www.scrapeless.com/en/solutions/walmart\",\"https://www.scrapeless.com/en/solutions/shopee\",\"https://www.scrapeless.com/en/solutions/lazada\",\"https://www.scrapeless.com/en/solutions/amazon\",\"https://www.scrapeless.com/en/solutions/google-trends\",\"https://www.scrapeless.com/en/solutions/google-search\",\"https://www.scrapeless.com/en/solutions/airbnb\",\"https://www.scrapeless.com/en/solutions/scoot\",\"https://www.scrapeless.com/en/solutions/latam\",\"https://www.scrapeless.com/en/solutions/localiza\",\"https://www.scrapeless.com/en/solutions/tiktok\",\"https://www.scrapeless.com/en/solutions/instagram\",\"https://www.scrapeless.com/en/integration\",\"https://www.scrapeless.com/en/faq\",\"https://www.scrapeless.com/en/glossary\",\"https://www.scrapeless.com/en/legal/privacy-policy\",\"https://www.scrapeless.com/en/legal/terms\",\"https://www.scrapeless.com/en/legal/terms#refund-policy\",\"https://www.scrapeless.com/en/legal/check-your-data\",\"https://backend.scrapeless.com/app/api/v1/public/links/discord\"]}"
}
 
メニュー

メニュータグ内のli要素からメニュー項目を抽出します。

例:outputs=menus

{
    "code": 200,
    "data": "{\"links\":[ \"Coffee\", \"Tea\", \"Milk\" ]}"
}
 
ハッシュタグ

正規表現を使用して、#exampleなどの一般的なハッシュタグパターンに一致するハッシュタグ形式を抽出します。

例:outputs = hashtags

{
    "code": 200,
    "data": "{\"hashtags\":[\"#docsearch\",\"#search\"]}"
}
 
メタデータ

headセクションのmetaタグからメタ情報を抽出し、name: contentの形式でname属性とcontent属性を返します。

例:outputs=metadata

{
    "code": 200,
    "data": "{\"metadata\":[\"viewport: width=device-width, initial-scale=1\",\"description: Scrapeless is the best full-stack web scraping toolkit offering Scraping API, Scraping Browser\"]}"
}
 
テーブル

テーブル要素からデータを取り出し、次元、見出し、コンテンツを含むJSON形式でテーブルデータを出力します。

例:outputs=tables

{
    "code": 200,
    "data": "{\"tables\":[{\"dimensions\":{\"rows\":7,\"columns\":3,\"heading\":true},\"heading\":[\"Company\",\"Contact\",\"Country\"],\"content\":[{\"Company\":\"Alfreds Futterkiste\",\"Contact\":\"Maria Anders\",\"Country\":\"Germany\"},{\"Company\":\"Centro comercial Moctezuma\",\"Contact\":\"Francisco Chang\",\"Country\":\"Mexico\"},{\"Company\":\"Ernst Handel\",\"Contact\":\"Roland Mendel\",\"Country\":\"Austria\"},{\"Company\":\"Island Trading\",\"Contact\":\"Helen Bennett\",\"Country\":\"UK\"},{\"Company\":\"Laughing Bacchus Winecellars\",\"Contact\":\"Yoshi Tannamuri\",\"Country\":\"Canada\"},{\"Company\":\"Magazzini Alimentari Riuniti\",\"Contact\":\"Giovanni Rovelli\",\"Country\":\"Italy\"}]},{\"dimensions\":{\"rows\":11,\"columns\":2,\"heading\":true},\"heading\":[\"Tag\",\"Description\"],\"content\":[{\"Tag\":\"<table>\",\"Description\":\"Defines a table\"},{\"Tag\":\"<th>\",\"Description\":\"Defines a header cell in a table\"},{\"Tag\":\"<tr>\",\"Description\":\"Defines a row in a table\"},{\"Tag\":\"<td>\",\"Description\":\"Defines a cell in a table\"},{\"Tag\":\"<caption>\",\"Description\":\"Defines a table caption\"},{\"Tag\":\"<colgroup>\",\"Description\":\"Specifies a group of one or more columns in a table for formatting\"},{\"Tag\":\"<col>\",\"Description\":\"Specifies column properties for each column within a <colgroup> element\"},{\"Tag\":\"<thead>\",\"Description\":\"Groups the header content in a table\"},{\"Tag\":\"<tbody>\",\"Description\":\"Groups the body content in a table\"},{\"Tag\":\"<tfoot>\",\"Description\":\"Groups the footer content in a table\"}]}]}"
}
 
ファビコン

HTMLのheadセクションにあるlink要素からファビコンURLを抽出します。

例:outputs=favicon

{
    "code": 200,
    "data": "{\"favicon\":\"https://www.scrapeless.com/favicon.ico\"}"
}
 

リソース制御

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

{
  "actor": "unlocker.webunlocker",
  "proxy": {
    "country": "ANY",
    "url": ""
  },
  "input": {
    "url": "string",
    "jsRender": {
      "enabled": 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",
  "proxy": {
    "country": "ANY",
    "url": ""
  },
  "input": {
    "url": "string",
    "jsRender": {
      "enabled": true,
      "block": {
        "resources": [
          "Image",
          "Font",
          "Stylesheet",
          "Script",
          "Media",
          "Ping",
          "Prefetch"
        ]
      }
    }
  }
}

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

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

    • リソースブロッキングを賢く使用し、非重要なリソースをブロックして読み込みを高速化します。
    • ネットワーク使用量を削減するために、PrefetchPingのブロッキングを検討します。
    • Documentと重要なScriptリソースはブロックしないでください。
  2. 帯域幅管理

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

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

    • 必要に応じてリソースを読み込みます。
    • 不要な接続をすぐに閉じます。

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