素肌にサスペンダー

個人的な備忘と日記

【ヘッドレス Chrome】Google Chrome headlessで、複数URLのWebサイトを一気にスクリーンショットを撮る方法

数ページならいいけど、たくさんのURLのスクリーンショットを撮りたい場合、1ページ1ページアクセスしてスクリーンショットを撮っていくのは大変。

ヘッドレス Chromeを使ってできたので、メモ


ヘッドレス Chromeを使ったスクリーンショットの撮り方

以下のコマンドで、ヘッドレス Chromeを実行すると、実行したディレクトリに、スクリーンショットが保存される。

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --headless --disable-gpu --window-size={横サイズ},{縦サイズ} --screenshot={スクリーンショット名.png} {ページURL}
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --disable-gpu --window-size={横サイズ},{縦サイズ} --screenshot={スクリーンショット名.png} {ページURL}

サンプル

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

これを実行すると、以下のようなスクリーンショットが保存される。

f:id:bnsgt:20210613093143p:plain


たくさんのURLのスクリーンショットを撮る場合

1.エクセルやスプレッドシートでコマンドをまとめて、セルをまるっとコピーし、エディタに貼り付ける。

f:id:bnsgt:20210613091633p:plain

2.セル間はtabになっていることがあるので、エディタで置換する。 (環境によっては必要ないかもしれない。サンプルのようになっていればOK。)

3.ターミナルやコマンドプロンプトで、スクリーンショットを保存したいディレクトリに移動し、コマンドを実行する。

※矢継ぎ早にスクショを撮ると上手く行かない場合があったので、コマンドの間に適宜sleep 10とかで、10秒置いたりすると上手くいった。


高さが決めうちの値であれば、上記で大丈夫だけど、「ページ全体」を計算して撮る場合は、工夫が必要らしい。

blog.amedama.jp

dschnurr.medium.com

参考

developers.google.com