ヘッドレスブラウザ

ヘッドレスブラウザは、画面にユーザーインターフェースを表示せずに動くWebブラウザです。スクリーンショット撮影、テスト、Webコンテンツの取得といった処理をプログラムから自動化するために使われます。

ヘッドレスブラウザの仕組み

ヘッドレスブラウザは、Chrome、Firefox、Safariなどでページを表示するコードと同系統のブラウザエンジンを、グラフィカルなウインドウなしで動かします。HTMLを読み込み、JavaScriptを実行し、CSSを適用して、通常のブラウザと同じようにページを描画します。違いは、結果をモニターではなく画面外のバッファへ出力することです。

通常は、ChromeまたはChromium向けのPuppeteerや、Chromium、Firefox、WebKit向けのPlaywrightといったライブラリを使い、コードから操作します。スクリプトはURLを開き、内容の読み込みを待ち、ページを操作し、スクリーンショットを撮影できます。マウスやキーボードを人が操作する必要はありません。

GUIを表示しないため、その表示に伴う負荷を省けます。画面を持たないサーバー、CIパイプライン、コンテナ環境でも実行できます。

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

• スクリーンショット自動化： 大量のWebページを視覚的な記録として撮影します。製品ページ、マーケティングサイト、ドキュメント、競合ページなどをプログラムから処理できます
• ビジュアルリグレッションテスト： コード変更の前後でスクリーンショットを比較し、意図しないUIの差を見つけます
• Webスクレイピング： 単純なHTTPリクエストでは内容を取得できない、JavaScriptを多用するページを読み込み、描画後のコンテンツを抽出します
• PDF生成： Webページを描画してPDF書類として書き出し、ブラウザで見えるレイアウトを保ちます
• パフォーマンステスト： 画面へウインドウを表示せず、ページの読み込み時間、リソースのサイズ、描画性能を測ります

ヘッドレス撮影とヘッド付き撮影

画面にブラウザを表示するヘッド付き撮影は分かりやすい一方、基本的には手作業です。ページを開き、ウインドウの大きさを変え、MacならCmd+Shift+3、WindowsならWin+Shift+Sを押します。1回限りの撮影には使えますが、大量処理には向きません。

ヘッドレス撮影はプログラムで制御できます。1つのスクリプトで数百ページを複数のビューポートサイズに設定し、順番または並列に撮影できます。モニターのないサーバー上で動き、CI/CDパイプラインへ組み込めます。実行する人が変わっても、同じ条件で結果を作れます。

描画結果は多くの場合ほぼ同じですが、わずかな違いが出ることがあります。サーバー環境にはデスクトップにあるシステムフォントがない場合があります。GPUアクセラレーションを使う機能は、ヘッドレス環境ではソフトウェア描画になることがあります。アニメーションは、適切な瞬間を撮るために明示的な待機処理が必要です。

この一貫性が、スクリーンショット制作でヘッドレスブラウザを使う大きな理由です。ビューポート、DPR、待機条件、Cookieをスクリプトで固定すれば、すべての撮影が同じ手順に従います。異なるノートパソコンで手作業した画像より比較しやすく、公開や確認にも使いやすくなります。

よくある失敗

• 内容の読み込みを待たない： ヘッドレスブラウザは処理が速いため、移動直後に撮影すると、遅延読み込みの画像、Webフォント、非同期の内容がまだ描画されていないことがあります。セレクター、ネットワークのアイドル状態、特定の要素など、明示的な条件を待ってから撮影します
• ビューポートとデバイスピクセル比を指定しない： ヘッドレスモードの標準ビューポートは、800×600など小さい場合があります。目的の出力に合わせて、ビューポートの寸法とデバイススケール係数を明示してください
• フォントがない： サーバー環境には、デスクトップにインストールされたフォントがないことがあります。代替フォントで描画されると、文字の見た目が変わります。必要なフォントをインストールするか、フォントを含むDockerイメージを使います
• Cookieバナーやポップアップを処理しない： 自動撮影では、新規訪問者としてページを開きます。同意ダイアログやポップアップをスクリプトで閉じなければ、内容ではなくオーバーレイが写ります