ユニバーサルスクレイピングAPI特徴JS Render

JSレンダリング

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

詳細は、当社の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
        ]
        // 要素を待機
      },
      {
        "click": [
          "#load-more",
          1000
        ]
        // 要素をクリック
      },
      {
        "fill": [
          "#search-input",
          "search term"
        ]
        // フォームに入力
      },
      {
        "keyboard": [
          "press",
          "Enter"
        ]
        // キー押下をシミュレート
      },
      {
        "evaluate": "window.scrollTo(0, document.body.scrollHeight)"
        // カスタム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

レスポンスの種類

outputパラメータで値をフィルタリングでき、結果はJSON文字列形式で返されます。response_typeパラメータでhtml、markdownなどの他の返却タイプを指定することもできます。

出力フィルタ

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

このパラメータは、コンマ区切りのフィルタタイプのリストを受け入れ、構造化されたJSON文字列形式で結果を返します。許可されるフィルタタイプには、以下が含まれます。

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

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

const axios =require('axios');
const fs =require('fs');
 
(async () => {
    // 設定
    const url = "https://api.scrapeless.com/api/v1/unlocker/request";
    const token = "API Key";
 
    const headers = {"x-api-token": token, "Content-Type": "application/json"};
 
    const payload = {
        actor: "unlocker.webunlocker",
        input: {
            url: "https://www.example.com",
            js_render: true, // trueである必要があります
            outputs: "phone_numbers, headings, images, audios, videos, links, menus, hashtags, emails, metadata, tables, favicon" // outputsフィルタ
        },
        proxy: {
            country: "ANY"
        }
    };
 
    try {
        const response = await axios.post(url, payload, {headers, timeout: 60000});
 
        if (response.status !== 200) {
            throw newError(`HTTPエラー: ${response.status}`);
        }
 
        const data = response.data;
        if (data.code !== 200) {
            throw newError(`APIエラー: ${data}`);
        }
 
        const content = data.data || '';
 
        // 結果を保存して返す
        fs.writeFileSync('response.json', content, 'utf8');
console.log('✅ 成功! コンテンツはresponse.jsonとして保存されました');
 
        returnJSON.parse(content);
 
    } catch (error) {
console.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\"}"
}

その他の形式

outputsパラメータでJSONデータをフィルタリングすることに加えて、response_typeパラメータを指定することで、より多くの戻り値のタイプを指定することもできます。オプションの値はhtml | plaintext | markdown | png/jpegで、デフォルト値はhtmlです。詳細は以下のとおりです。

HTML

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

リクエストにresponse_type=htmlを追加します。

const axios = require('axios');
const fs = require('fs');
 
(async () => {
    const payload = {
        actor: "unlocker.webunlocker",
        input: {
            url: "https://www.example.com",
            js_render: true,
            response_type: "html"
        },
        proxy: {
            country: "ANY"
        }
    };
 
    const response = await axios.post("https://api.scrapeless.com/api/v1/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の書式設定を含まない、クリーンでフォーマットされていないコンテンツのバージョンの必要性が高い場合に非常に実用的です。テキスト処理や分析をより便利にするコンテンツ抽出プロセスを合理化します。

リクエストにresponse_type=plaintextを追加します。

const axios = require('axios');
const fs = require('fs');
 
(async () => {
    const payload = {
        actor: "unlocker.webunlocker",
        input: {
            url: "https://www.example.com",
            js_render: true,
            response_type: "plaintext"
        },
        proxy: {
            country: "ANY"
        }
    };
 
    const response = await axios.post("https://api.scrapeless.com/api/v1/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ページが最適です。リクエストパラメータにresponse_type=markdownを追加すると、ユニバーサルスクレイピングAPIはMarkdown形式でコンテンツを返し、より読みやすく、処理しやすくなります。

リクエストにresponse_type=markdownを追加します。

const axios = require('axios');
const fs = require('fs');
 
(async () => {
    const payload = {
        actor: "unlocker.webunlocker",
        input: {
            url: "https://www.example.com",
            js_render: true,
            response_type: "markdown"
        },
        proxy: {
            country: "ANY"
        }
    };
 
    const response = await axios.post("https://api.scrapeless.com/api/v1/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

リクエストにresponse_type=pngを追加することで、対象ページのスクリーンショットを取得し、PNGまたはJPEG形式の画像を返すことができます。レスポンスの結果がPNGまたはJPEGに設定されている場合、response_image_full_page=trueパラメータを使用して、返される結果がフルページのスクリーンショットであるかどうかを指定できます。response_image_full_pageパラメータのデフォルト値はfalseです。

リクエストにresponse_type=pngを追加します。

const axios = require('axios');
const fs = require('fs');
 
(async () => {
    const payload = {
        actor: "unlocker.webunlocker",
        input: {
            url: "https://www.example.com",
            js_render: true,
            response_type: "png", // png or jpeg
            response_image_full_page: true
        },
        proxy: {
            country: "ANY"
        }
    };
 
    const response = await axios.post("https://api.scrapeless.com/api/v1/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で保存後の例ファイル:

リソース制御

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

{
  "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音声とビデオリソースマルチメディアコンテンツ
FontWebフォントテキストレンダリング
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を有効にしない
    • リソースブロッキングを賢く使用する。高速な読み込みのために、重要でないリソースをブロックする
    • ネットワーク使用量を削減するためにPrefetchとPingのブロックを検討する
    • Documentと重要なScriptリソースはブロックしない

  2. 帯域幅管理

    • 帯域幅を大量に消費するページではImageとMediaをブロックする
    • システムフォントを使用するためにFontのブロックを検討する

  3. 安定性の向上

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

  4. リソース効率

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

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

はじめるキャプチャ解決