コマンドラインでWebサイトのスクリーンショットを撮る簡単な方法
Chromeのヘッドレスモードってご存知でしょうか。
Chromeのv59、Windows版ではv60から搭載されている機能なのですが、簡単に言うとChromeをコマンドラインで操作する機能です。
実際にVBScript+IE並に自動操作しようとするとNode.js入れたり面倒くさそうなので、まだ試していないのですが、コマンドラインで使う分には簡単です。
Headless Chromeの使い方
コマンドプロンプトを開き、下記のようにコマンドラインオプションを指定するだけです。
Windowsの場合、デフォルトだと
"C:\Program Files\Google\Chrome\Application\chrome.exe"
あたりにChromeがインストールされているハズなので、パスを通すか、このままフルパスで書きます。
オプションの ––headless はヘッドレスモードで起動するという意味で、––disable–gpu はおまじないのようなものらしいです。
なんかいくつかの不具合があるのでheadlessモードのときは指定してあげてねってGoogleのエンジニアも言っているので指定しています。実際、この––disable–gpuを付けないとちゃんとスクリーンショットが撮れませんでした。そのうちこの指定をしなくても良いようになるけど、今のところは指定してほしい、ということらしいです。
最後の https://～ はスクリーンショットを撮りたいWebサイトのURLですね。どこでもOKです。
スクリーンショットの保存場所
デフォルトだとChromeがインストールされた場所にスクリーンショット（pngファイル）を作ろうとしてしまうため、アクセス拒否されて普通に失敗します。 （エラーメッセージも出ないためわかりづらい）
なので、どこか適当なフォルダを指定してあげると良いでしょう。
こんな感じ。
こうするとRドライブに解像度800×600pxのtest.pngが作成されます。ただ、いまどき800×600pxのウィンドウサイズだとタブレット用か、下手したらスマホ用のサイトが表示されて、その状態でスクリーンショットも保存されます。
■800x600で撮った例
SS撮影時のウィンドウサイズを指定する
PC用のWebサイトを撮りたい場合は––window–sizeオプションを付けてサイズを指定します。
■1920×1080で撮った例
まとめ
- コマンドラインでWebサイトのSSを撮るにはChromeを使うのが便利
- chromeは––headlessオプションを付けることでコマンドラインで実行できる
- 更に––screenshotオプション、––window–sizeオプションで好きなサイズでSSが保存できる
こんなことが出来て何が嬉しいのかと思う方もいるかもですが、文字よりも画像のほうが訴求力が高いため、最近のリンク集とかWebサイトのスクリーンショット（のサムネイル）を表示するのがワリと普通になってきてるんですよね。
1つや2つなら手動で撮って保存しますが、何十何百と管理するようになると手動でSS撮るのもしんどいです。Chromeのheadlessモードのおかげで、管理しているWebサイトのリンク集とかを一発で画像付きにできて、ぼくは大喜びです。
PHPスクリプトからchromeを呼ぶように作ったので、リンク先のサイトのデザインが変わっても、またポチっと実行するだけで全サイトのスクリーンショットが最新になるというのもポイント高いですね。
うちはリンク集もDBで管理しているのでPHPで作りましたが、普通にバッチファイルでchromeを起動してSSを撮るだけでも十分有用でしょう。
2022/08/05追記
コマンドラインに比べると複雑ですが、ログインが必要なページや、より複雑な操作をした後にスクリーンショットが撮りたい場合は、こちらのNodejs＋Puppeteerの例もどうぞ。
