研究のためにオンラインでデータを抽出する方法は、特に手動によるデータ収集を容易にする革新的で適応性の高い Web スクレイピング技術の出現により、大幅に進化しました。
ハイパーテキスト転送プロトコル(HTTP)クライアントやウェブブラウザを使ってデータスクレイピングを行うことは可能です。しかし、動的なウェブサイトでは、同じタスクは実行できません。幸いなことに、ヘッドレスブラウザは動的なウェブページのスクレイピング専用に設計・開発されています。

この記事では、対応しているヘッドレスウェブブラウザとPuppeteerを使ってオンラインでデータを取得する方法を説明します。つまり、この記事はヘッドレスデータ抽出に関するPuppeteerの包括的なチュートリアルです。さらに詳しく知りたい方、Puppeteerの詳細なチュートリアルをご覧になりたい方は、Oxylabsのウェブサイトに専用の記事がありますので、ぜひご覧ください。
技術用語の説明
次のサブセクションでは、さらに理解しやすい詳細について知っておく必要があるいくつかの技術用語を紹介します。
i. ウェブスクレイピング
ウェブスクレイピングは、ウェブデータを収集するための構造化された方法であり、通常は自動的に実行されます。アマチュアからプロまで、ウェブハーベスティングやウェブデータ抽出とも呼ばれています。
Web スクレイピングは、今日最も頻繁に使用されているデータ スクレイピング手法の 1 つであり、市場調査やニュースの監視などのアプリケーションで使用されています。
ii. ヘッドレスウェブブラウザ
今日のインターネットブラウザは、Chromeのように、より高速でユーザーフレンドリーなソフトウェア操作を実現するために、グラフィカルユーザーインターフェース(GUI)(この文脈では「ヘッド」とも呼ばれます)を備えています。しかし、Webスクレイピング用に設計・開発されたブラウザは他にも存在します。例えば、ヘッドレスWebブラウザが挙げられます。
ヘッドレスブラウザにはGUIはありませんが、コマンドラインインターフェース(CLI)またはネットワーク通信を使用して実行できます。ヘッドレス機能またはモードは、専用のディスプレイを持たないサーバー上で実行され、JavaScriptなどのプログラミング言語の関数を検証します。
選択したブラウザでは、大規模な Web アプリケーション テストを実装および実行したり、人間の操作なしで 1 つの Web ページから別の Web ページにログオンしたりすることもできます。
iii. 操り人形師
Puppeteerは、高水準のアプリケーションプログラミングインターフェース(API)を備えたソフトウェアライブラリで、主に「devtools」(ウェブ開発ツール)プロトコルを介してヘッドレスブラウザを制御します。JavaScriptベースのランタイム環境Node.js(略してNode)と完全に互換性があります。
自動化された Web アプリのテスト以外にも、全体的な効率が最大限に高まるため、専門家や愛好家も Puppeteer を Web スクレイピングに使用しています。
iv. Node.js
Node.js は、Web ブラウザーの外部で JS コードを実行し、バックエンド サポートを備えたオープン ソースの JavaScript ランタイム システムです。
これにより、開発者は JavaScript プログラミング言語を使用してコマンドライン ツールをコーディングし、動的な Web ページ コンテンツ生成用のサーバー側スクリプトを開始できるようになります。
Puppeteerを使ったヘッドレスブラウザでのスクレイピングのメリット
Puppeteerを介してヘッドレスブラウザで動的なウェブサイトをスクレイピングすると、かなりのメリットが得られます。そのメリットには以下が含まれます。
i. より高速なデータスクレイピング
Puppeteerと互換性のあるヘッドレスブラウザを併用することで、フルブラウザ(ヘッドレスではないブラウザ)と比較して、より高速にWebページから貴重なデータをスクレイピングできます。この最適なパフォーマンスの最大の要因は、Puppeteerのデフォルトの非GUIモードです。
ii. 加速テスト自動化
ヘッドレスブラウザとPuppeteerライブラリの優れた組み合わせにより、高度なテスト自動化も可能になります。1つまたは複数のUIテストを自動化できるだけでなく、手動で開始されたフォーム送信やキーボード入力にも同じ設定を適用できます。
iii. パフォーマンス診断の改善
Puppeteerを搭載したヘッドレスブラウザを使えば、ウェブサイトのタイムライントレースをキャプチャできます。取得したログは、パフォーマンス上の問題の可能性を診断するのに役立ちます。
ヘッドレス Chrome と Puppeteer のセットアップガイド
このPuppeteerチュートリアルの次の部分では、Headless ChromeとPuppeteerのインストールと設定に焦点を当てます。このチュートリアルではNode.jsが前提条件となるため、Node.jsの公式サイトにログインして、完全なインストールガイドを別途入手することを強くお勧めします。
ステップ1 – ヘッドレスChromeとPuppeteerの設定
- 「npm」コマンドを使用して Puppeteer をインストールし、最も安定した最新のヘッドレス ブラウザー バージョンを含め、このセットアップが完了するまで数分間待ちます。
 
npm i puppeteer –save
ステップ2 – プロジェクトの設定
- プロジェクト ディレクトリに移動し、そこから新しいファイルを開始し、好みのコード エディターでそのファイルを開きます。
 - スクリプト内で Puppeteer をインポートし、いくつかのコマンドライン引数からユニフォーム リソース ロケーター (URL) または Web アドレスを取得します。
 
const 操り人形師 = require('操り人形師');
const url = process.argv[2];
もし (!url) {
throw “最初の引数としてURLを指定してください”;
}
- 非同期関数を定義し、以下のコードを参照してください。
 
非同期関数実行(){
const browser = puppeteer.launch() を待機します。
const page = browser.newPage() を待機します。
page.goto(url) を待機します。
page.screenshot({path: 'screenshot.png'}); を待機します。
ブラウザを閉じる();
}
走る();
- 最終的なコードが以下に示すものと同じであることを確認します。
 
const 操り人形師 = require('操り人形師');
const url = process.argv[2];
もし (!url) {
throw “最初の引数としてURLを指定してください”;
}
非同期関数実行(){
const browser = puppeteer.launch() を待機します。
const page = browser.newPage() を待機します。
page.goto(url) を待機します。
page.screenshot({path: 'screenshot.png'}); を待機します。
ブラウザを閉じる();
}
走る();
- 最後に、プロジェクトのルート ディレクトリに移動し、次のコマンドを実行してテストのスクリーンショットを撮ります。
 
ノードスクリーンショット.js https://github.com
結論
Puppeteerを使ったヘッドレススクレイピングの練習には、特にGUIがなく、コマンドラインで頻繁にツールを操作する必要があるため、忍耐と時間がかかります。しかし、慣れてしまえば、Webデータ収集のルーチンは大幅に向上するでしょう。