Headless Browser

ヘッドレスブラウザは、表示されるウィンドウを持たず、コードによって制御されるWebブラウザです。通常のブラウザと同じエンジンを使います。HTMLを解析し、JavaScriptを実行し、レイアウトを計算し、ピクセルを描画しますが、描画結果は画面外のバッファーに書き込まれます。

ChromeとFirefoxには、どちらもヘッドレスモードがあります。プログラムは、Chrome DevTools Protocol、WebDriver、WebDriver BiDiなどのプロトコルを通じてブラウザを制御します。Puppeteer、Playwright、Seleniumなどのライブラリは、これらのプロトコルをプログラミング用のAPIでラップします。

画面には何も描画されないため、ヘッドレスブラウザはディスプレイのないサーバーやCIパイプラインでも実行できます。

ヘッドレスブラウザの動作

1. スクリプトがヘッドレスモードでブラウザを起動します。
2. ページを開き、ビューポートのサイズを設定してURLを読み込みます。
3. loadイベントやネットワーク通信の停止などのイベントを待ちます。
4. クリックやスクロールなどの操作を実行し、スクリーンショットまたはPDFを要求します。
5. ページまたはブラウザを閉じます。

ヘッドレスブラウザの用途

• ページと操作の流れを確認する自動テスト。
• 監視やアーカイブのための定期的なスクリーンショット。
• HTMLからのPDFやSNSのプレビュー画像の生成。
• JavaScriptで描画されるページからの公開データの収集。

ヘッドレスと、ウィンドウを表示する撮影の比較

項目	ヘッドレス	ヘッドあり（表示ウィンドウ）
ディスプレイの必要性	不要	必要
バッチの速度	通常は速い	遅い
デバッグ	難しい。確認できる画面がない	容易
サイトによる検出	検出されやすい	検出されにくい

サイトによっては、ヘッドレスブラウザを検出して別のコンテンツを返したり、ブロックしたりします。フォントやGPU機能もデスクトップのブラウザと異なることがあるため、同じページでも描画がわずかに異なる場合があります。

よくある間違い

• コンテンツの読み込みが続くページを、loadイベントの時点で撮影する。
• ビューポートを設定せず、すべての撮影が既定のサイズになる。
• 性能の低いマシンで多数のブラウザを同時に実行する。
• サーバーにフォントが不足しており、テキストのレイアウトが変わる。

同じスクリーンショットを繰り返し撮りますか？

Temposhotの Website Capture は、コードを書かずに、お使いのMac上で管理されたローカルブラウザでURLを読み込みます。Concurrent browsers は1〜10に設定できます。詳しくは Webサイトのスクリーンショット自動化 をご覧ください。

よくある質問

ヘッドレスブラウザを使うにはコードを書く必要がありますか？

PuppeteerやPlaywrightなどのライブラリにはコードが必要です。デスクトップツールやスクリーンショットのサービスは、この層を隠します。

ヘッドレスで撮影したスクリーンショットは通常のものと同じですか？

近いことが多いですが、フォント、GPUの描画、サイトの動作によって違いが出ることがあります。

出典

• Headless browser（Wikipedia）
• Puppeteer
• Playwright

関連リソース

• Playwrightでwebサイトのスクリーンショットを自動化する: コード例。
• Puppeteerでwebサイトのスクリーンショットを自動化する: コード例。
• Website Captureのクイックスタート: コード不要の方法。