ヘッドレスChromeでWebサイトのスクリーンショットを一括生成する

ターミナルから実行

下記はMacのターミナルから実行する例です。Windowsなど他の環境ではChromeまでのパスを置き換えてください。

$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --disable-gpu --screenshot --window-size=1280,1080 https://www.yahoo.co.jp

これだけでカレントディレクトリに「screenshot.png」という名前でスクリーンショットが保存されます。

今後も使用する場合は.bash_profileにパスをエイリアス登録しておくと便利です。

alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"

これで下記のようにパスを省略して使用できるようになります。

$ chrome --headless --disable-gpu --screenshot --window-size=1280,1080 https://www.yahoo.co.jp

JavaScript（Node）から実行

次はJavaScript（Node）で処理できるようにしてみます。

screenshot.js

const execFile = require('child_process').execFile;
const CHROME = '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome';
execFile(CHROME, [
    '--headless',
	'--disable-gpu',
	'--screenshot=test.png',  // ファイル名指定
	// '--print-to-pdf='+ index +'.pdf',	// PDFで保存する場合
	'--window-size=1280,1080',  // 画面サイズ
	'--virtual-time-budget=10000',  // キャプチャまでの時間
	'--hide-scrollbars',	// スクロールバー非表示
    'https://www.yahoo.co.jp' // キャプチャするURL
]);

上記ファイルを「screenshot.js」で保存したら、下記コマンドで実行しましょう。

$ node screenshot.js

今度はファイル名のオプションを指定したので、指定したファイル名で画像が生成されます。
また、表示されてからローディングをするようなサイトもあるので--virtual-time-budgetで待機する時間を調節してください。

外部のURL一覧ファイルから連番画像ファイルを生成

URLだけ書いたテキストファイルを読み込んで、連番ファイル名でキャプチャ画像を生成するというちょっとだけ実用的なやつ。

url.txt

https://www.yahoo.co.jp
https://www.google.co.jp
https://www.apple.com/jp

screenshot.js

const execFile = require('child_process').execFile;
const CHROME = '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome';

const fs = require('fs');
const path = 'url.txt';

fs.readFile(path, 'utf8', (err, data) => {
  const urls = data.split(/\n/);

  urls.forEach((value, index) => {
    execFile(CHROME, [
        '--headless',
        '--disable-gpu',
        '--screenshot='+ index +'.png',
        '--window-size=1280,1080',
        '--virtual-time-budget=30000',
        '--hide-scrollbars',
        value
    ]);
  });
});

以上。ローカルChrome環境なので結構いい感じでキャプチャ画像を作成してくれるようです。