Chromeヘッドレスモード完全ガイド！自動化・テストの基礎から実践まで

プログラミング・IT

プログラミングでウェブサイトのテストや自動化をしたいと思ったことはありませんか？

Chromeには「ヘッドレスモード」という特殊な動作モードがあり、画面を表示せずにブラウザを操作できます。自動テストやスクレイピング、スクリーンショット取得など、様々な用途で活用されているんです。

この記事では、Chromeヘッドレスモードの基本から実際の使い方、活用例まで初心者向けに分かりやすく解説します。プログラミングでブラウザ操作を自動化したい人は、ぜひ参考にしてください。

スポンサーリンク
  1. ヘッドレスモードとは
    1. 通常のChromeとの違い
    2. 「ヘッドレス」の意味
    3. どこで動作するか
  2. ヘッドレスモードの用途
    1. 自動テスト
    2. スクリーンショット取得
    3. PDF生成
    4. ウェブスクレイピング
    5. パフォーマンス測定
    6. SEO監査
  3. メリットとデメリット
    1. メリット
    2. デメリット
  4. 基本的な使い方
    1. コマンドラインから起動
    2. 主なコマンドラインオプション
    3. PDFを生成する例
    4. HTMLを取得する例
  5. Puppeteerでの使い方
    1. Puppeteerとは
    2. インストール方法
    3. 基本的なコード例
    4. PDFを生成する例
    5. テキストを入力する例
    6. 要素を待つ例
  6. Seleniumでの使い方
    1. Seleniumとは
    2. Python + Seleniumの例
    3. 基本的なコード例
    4. 要素を操作する例
  7. 実践的な活用例
    1. 定期的にスクリーンショットを撮る
    2. フォーム送信のテスト
    3. リンク切れチェック
    4. ページの読み込み時間を測定
  8. デバッグとトラブルシューティング
    1. 画面を表示してデバッグ
    2. スクリーンショットで確認
    3. コンソールログを確認
    4. タイムアウトの調整
    5. User-Agentを設定
  9. セキュリティと倫理的配慮
    1. スクレイピングのマナー
    2. アクセス頻度の制限
    3. 認証情報の管理
    4. 法律を守る
  10. パフォーマンス最適化
    1. キャッシュの活用
    2. 不要なリソースのブロック
    3. 並列処理
  11. よくある質問
    1. ヘッドレスモードは無料で使える？
    2. どのChromeバージョンで使える？
    3. サーバーで動かせる？
    4. 商用利用は可能？
    5. 拡張機能は使える？
    6. Firefoxでもできる？
  12. まとめ

ヘッドレスモードとは

ヘッドレスモード（Headless Mode）は、画面（ウィンドウ）なしでChromeを動作させるモードです。

通常のChromeとの違い

通常のChrome：

  • ブラウザウィンドウが表示される
  • 人間が見て操作する
  • マウスやキーボードで操作

ヘッドレスモード：

  • ウィンドウが表示されない
  • プログラムから操作する
  • コマンドやコードで自動制御

「ヘッドレス」の意味

「Head」は頭、つまりここでは「画面（GUI）」を意味します。

「Headless」は「頭がない」、つまり「画面がない」という意味です。ディスプレイに何も表示せず、裏側で動作するイメージです。

どこで動作するか

ローカル環境：
自分のパソコンで実行できます。

サーバー環境：
画面のないサーバーでも動作します。これが最大の利点です。

CI/CD環境：
自動テストやビルドシステムで活用されます。

ヘッドレスモードの用途

どんな場面で使われるのか見ていきましょう。

自動テスト

ウェブサイトの動作を自動でテストできます。

例：

  • ボタンをクリックして正しく動作するか確認
  • フォームに入力して送信できるかテスト
  • ページが正しく表示されるか検証

スクリーンショット取得

ウェブページの画像を自動で取得できます。

活用例：

  • サイトの見た目を記録
  • レポートの作成
  • サムネイル画像の生成

PDF生成

ウェブページをPDFに変換できます。

活用例：

  • 請求書の自動生成
  • レポートのPDF化
  • アーカイブの作成

ウェブスクレイピング

ウェブサイトから情報を収集できます。

例：

  • 価格情報の収集
  • ニュース記事の取得
  • 在庫状況の確認

注意：
スクレイピングは、サイトの利用規約を守って行いましょう。

パフォーマンス測定

ページの読み込み速度などを測定できます。

測定項目：

  • ページ表示速度
  • リソースの読み込み時間
  • JavaScriptの実行時間

SEO監査

検索エンジン最適化のチェックができます。

確認項目：

  • メタタグの確認
  • リンク切れチェック
  • 構造化データの検証

メリットとデメリット

ヘッドレスモードの良い点と悪い点を理解しましょう。

メリット

リソース消費が少ない：
画面を表示しないので、メモリやCPUの使用量が減ります。

高速動作：
描画処理がないため、通常モードより速く動作します。

サーバーで実行できる：
画面のない環境（Linuxサーバーなど）でもChromeが使えます。

並列実行が可能：
複数のインスタンスを同時に動かせます。

自動化しやすい：
人間の操作が不要で、完全自動化できます。

デメリット

デバッグが難しい：
画面が見えないので、問題を見つけにくいです。

一部の機能が制限される：
拡張機能など、一部の機能は使えません。

設定が複雑：
コマンドラインやプログラミングの知識が必要です。

検出される可能性：
一部のサイトは、ヘッドレスブラウザを検出してブロックします。

基本的な使い方

ヘッドレスモードの起動方法を説明します。

コマンドラインから起動

最もシンプルな方法です。

Windows：

"C:\Program Files\Google\Chrome\Application\chrome.exe" --headless --disable-gpu --screenshot="C:\screenshot.png" https://www.google.com

Mac：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --disable-gpu --screenshot=/Users/username/screenshot.png https://www.google.com

Linux：

google-chrome --headless --disable-gpu --screenshot=/home/username/screenshot.png https://www.google.com

このコマンドは、Googleのトップページのスクリーンショットを保存します。

主なコマンドラインオプション

–headless：
ヘッドレスモードで起動します。

–disable-gpu：
GPU使用を無効化します（一部の環境で必要）。

–screenshot=ファイル名：
スクリーンショットを保存します。

–print-to-pdf=ファイル名：
PDFとして保存します。

–dump-dom：
HTMLの内容を出力します。

–window-size=幅,高さ：
ウィンドウサイズを指定します。

–user-agent=文字列：
User-Agentを変更します。

PDFを生成する例

chrome --headless --disable-gpu --print-to-pdf=output.pdf https://example.com

ウェブページをPDFファイルとして保存します。

HTMLを取得する例

chrome --headless --disable-gpu --dump-dom https://example.com > output.html

ページのHTMLをファイルに保存します。

Puppeteerでの使い方

Puppeteerは、Chromeを制御するNode.js用のライブラリです。

Puppeteerとは

Googleが開発した、Chromeの自動化ツールです。

特徴：

  • JavaScriptで簡単に操作できる
  • 公式サポートがある
  • 豊富な機能
  • ドキュメントが充実

インストール方法

Node.jsがインストールされている前提です。

npm install puppeteer

このコマンドで、Puppeteerと一緒にChromeもダウンロードされます。

基本的なコード例

スクリーンショットを撮る：

const puppeteer = require('puppeteer');

(async () => {
  // ブラウザを起動
  const browser = await puppeteer.launch({
    headless: true  // ヘッドレスモードで起動
  });

  // 新しいページを開く
  const page = await browser.newPage();

  // URLにアクセス
  await page.goto('https://example.com');

  // スクリーンショットを撮る
  await page.screenshot({ path: 'screenshot.png' });

  // ブラウザを閉じる
  await browser.close();
})();

PDFを生成する例

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // PDFとして保存
  await page.pdf({
    path: 'page.pdf',
    format: 'A4'
  });

  await browser.close();
})();

テキストを入力する例

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // テキストを入力
  await page.type('#search-input', '検索キーワード');

  // ボタンをクリック
  await page.click('#search-button');

  // 少し待つ
  await page.waitForTimeout(2000);

  await browser.close();
})();

要素を待つ例

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // 特定の要素が表示されるまで待つ
  await page.waitForSelector('.result-item');

  // テキストを取得
  const text = await page.$eval('.result-item', el => el.textContent);
  console.log(text);

  await browser.close();
})();

Seleniumでの使い方

Seleniumは、複数のブラウザに対応した自動化ツールです。

Seleniumとは

様々なプログラミング言語で使える、ブラウザ自動化のツールです。

対応言語：

  • Python
  • Java
  • JavaScript
  • C#
  • Ruby

Python + Seleniumの例

Pythonでの使い方を紹介します。

インストール：

pip install selenium

ChromeDriverも必要です。

基本的なコード例

from selenium import webdriver
from selenium.webdriver.chrome.options import Options

# ヘッドレスモードの設定
chrome_options = Options()
chrome_options.add_argument('--headless')
chrome_options.add_argument('--disable-gpu')

# ブラウザを起動
driver = webdriver.Chrome(options=chrome_options)

# URLにアクセス
driver.get('https://example.com')

# スクリーンショットを撮る
driver.save_screenshot('screenshot.png')

# タイトルを取得
print(driver.title)

# ブラウザを閉じる
driver.quit()

要素を操作する例

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.options import Options

chrome_options = Options()
chrome_options.add_argument('--headless')

driver = webdriver.Chrome(options=chrome_options)
driver.get('https://example.com')

# 要素を見つける
search_box = driver.find_element(By.ID, 'search-input')

# テキストを入力
search_box.send_keys('検索キーワード')

# ボタンをクリック
button = driver.find_element(By.ID, 'search-button')
button.click()

driver.quit()

実践的な活用例

実際にどう使うか、具体例を紹介します。

定期的にスクリーンショットを撮る

サイトの見た目を定期的に記録するスクリプトです。

const puppeteer = require('puppeteer');
const fs = require('fs');

async function takeScreenshot(url) {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto(url);

  // 日時をファイル名に含める
  const timestamp = new Date().toISOString().replace(/:/g, '-');
  const filename = `screenshot_${timestamp}.png`;

  await page.screenshot({ path: filename });
  await browser.close();

  console.log(`スクリーンショットを保存しました: ${filename}`);
}

// 毎日実行
takeScreenshot('https://example.com');

フォーム送信のテスト

自動でフォームに入力して送信するテストです。

const puppeteer = require('puppeteer');

async function testForm() {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto('https://example.com/contact');

  // フォームに入力
  await page.type('#name', '山田太郎');
  await page.type('#email', 'test@example.com');
  await page.type('#message', 'テストメッセージです');

  // 送信ボタンをクリック
  await page.click('#submit-button');

  // 完了メッセージが表示されるまで待つ
  await page.waitForSelector('.success-message');

  console.log('フォーム送信テスト成功！');

  await browser.close();
}

testForm();

リンク切れチェック

サイト内のリンクをチェックするスクリプトです。

const puppeteer = require('puppeteer');

async function checkLinks(url) {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto(url);

  // すべてのリンクを取得
  const links = await page.$$eval('a', anchors => 
    anchors.map(a => a.href)
  );

  console.log(`リンク数: ${links.length}`);

  // 各リンクをチェック
  for (const link of links) {
    try {
      await page.goto(link);
      console.log(`OK: ${link}`);
    } catch (error) {
      console.log(`エラー: ${link}`);
    }
  }

  await browser.close();
}

checkLinks('https://example.com');

ページの読み込み時間を測定

パフォーマンステストの例です。

const puppeteer = require('puppeteer');

async function measureLoadTime(url) {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  const startTime = Date.now();
  await page.goto(url, { waitUntil: 'networkidle0' });
  const endTime = Date.now();

  const loadTime = endTime - startTime;
  console.log(`ページ読み込み時間: ${loadTime}ms`);

  await browser.close();
}

measureLoadTime('https://example.com');

デバッグとトラブルシューティング

ヘッドレスモードでの問題解決方法です。

画面を表示してデバッグ

開発中は、画面を表示してデバッグすると楽です。

const browser = await puppeteer.launch({
  headless: false,  // 画面を表示
  slowMo: 100       // 動作を遅くして見やすく
});

スクリーンショットで確認

エラーが起きた時にスクリーンショットを撮ると原因が分かります。

try {
  await page.click('#button');
} catch (error) {
  await page.screenshot({ path: 'error.png' });
  console.error('エラーが発生しました');
}

コンソールログを確認

ブラウザのコンソールメッセージを表示できます。

page.on('console', msg => console.log('ブラウザ:', msg.text()));

タイムアウトの調整

読み込みが遅いサイトでは、タイムアウトを延ばします。

await page.goto('https://example.com', {
  waitUntil: 'networkidle0',
  timeout: 60000  // 60秒
});

User-Agentを設定

一部のサイトは、ヘッドレスブラウザを検出します。

await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36');

セキュリティと倫理的配慮

ヘッドレスモードを使う際の注意点です。

スクレイピングのマナー

利用規約を確認：
サイトの利用規約で、自動アクセスが禁止されていないか確認しましょう。

robots.txtを尊重：
サイトのrobots.txtファイルを確認し、クローリングが許可されているか確認します。

過度なアクセスを避ける：
サーバーに負荷をかけないよう、適度な間隔でアクセスしましょう。

アクセス頻度の制限

// リクエスト間に待機時間を入れる
async function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

await page.goto('https://example.com/page1');
await sleep(2000);  // 2秒待つ
await page.goto('https://example.com/page2');

認証情報の管理

パスワードなどの認証情報は、コードに直接書かないようにしましょう。

環境変数を使う：

const username = process.env.USERNAME;
const password = process.env.PASSWORD;

法律を守る

不正アクセス禁止法：
許可されていないシステムへのアクセスは違法です。

著作権法：
コンテンツの無断複製は著作権侵害になる可能性があります。

パフォーマンス最適化

ヘッドレスモードをより効率的に使う方法です。

キャッシュの活用

await page.setCacheEnabled(true);

不要なリソースのブロック

画像などを読み込まないことで高速化できます。

await page.setRequestInterception(true);

page.on('request', (req) => {
  if (req.resourceType() === 'image') {
    req.abort();  // 画像をブロック
  } else {
    req.continue();
  }
});

並列処理

複数のページを同時に処理できます。

const urls = ['url1', 'url2', 'url3'];

await Promise.all(urls.map(async (url) => {
  const page = await browser.newPage();
  await page.goto(url);
  await page.screenshot({ path: `${url}.png` });
  await page.close();
}));

よくある質問

ヘッドレスモードに関する疑問にお答えします。

ヘッドレスモードは無料で使える？

はい、Chromeは無料で、ヘッドレスモードも追加料金なしで使えます。

どのChromeバージョンで使える？

Chrome 59以降で利用可能です。最新版の使用を推奨します。

サーバーで動かせる？

はい、LinuxサーバーなどGUIのない環境でも動作します。

商用利用は可能？

はい、Chromeのライセンスの範囲内で商用利用できます。

拡張機能は使える？

一部の拡張機能は使えますが、制限があります。

Firefoxでもできる？

はい、Firefoxにもヘッドレスモードがあります。

まとめ

Chromeヘッドレスモードは、ブラウザ自動化の強力なツールです。

この記事のポイント：

  • 画面なしでChromeを動作させる機能
  • テスト、スクレイピング、PDF生成など多用途
  • コマンドライン、Puppeteer、Seleniumで利用可能
  • サーバー環境でも動作する
  • リソース消費が少なく高速
  • デバッグは画面表示モードを併用
  • スクレイピングは利用規約を守って実施

まずはコマンドラインやPuppeteerで簡単なスクリーンショット取得から始めてみましょう。

慣れてきたら、自動テストやスクレイピングなど、より高度な活用にチャレンジしてください。ウェブ開発やテストの効率が大幅に向上しますよ！

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました