コマンドラインでWebサイトのスクリーンショットを撮る簡単な方法

Chromeのヘッドレスモードってご存知でしょうか。

Chromeのv59、Windows版ではv60から搭載されている機能なのですが、簡単に言うとChromeをコマンドラインで操作する機能です。

実際にVBScript+IE並に自動操作しようとするとNode.js入れたり面倒くさそうなので、まだ試していないのですが、コマンドラインで使う分には簡単です。

Headless Chromeの使い方

コマンドプロンプトを開き、下記のようにコマンドラインオプションを指定するだけです。

chrome ––headless ––disable-gpu ––screenshot https://blog.ver001.com/

Windowsの場合、デフォルトだと
“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe”
あたりにChromeがインストールされているハズなので、パスを通すか、このままフルパスで書きます。

“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” ––headless ––disable–gpu ––screenshot https://blog.ver001.com/

オプションの ––headless はヘッドレスモードで起動するという意味で、––disable–gpu はおまじないのようなものらしいです。

なんかいくつかの不具合があるのでheadlessモードのときは指定してあげてねってGoogleのエンジニアも言っているので指定しています。実際、この––disable–gpuを付けないとちゃんとスクリーンショットが撮れませんでした。そのうちこの指定をしなくても良いようになるけど、今のところは指定してほしい、ということらしいです。

最後の https://~ はスクリーンショットを撮りたいWebサイトのURLですね。どこでもOKです。

スクリーンショットの保存場所

デフォルトだとChromeがインストールされた場所にスクリーンショット(pngファイル)を作ろうとしてしまうため、アクセス拒否されて普通に失敗します。 (エラーメッセージも出ないためわかりづらい)

なので、どこか適当なフォルダを指定してあげると良いでしょう。

こんな感じ。

chrome ––headless ––disable–gpu ––screenshot=r:\test.png https://blog.ver001.com/

こうするとRドライブに解像度800×600pxのtest.pngが作成されます。ただ、いまどき800×600pxのウィンドウサイズだとタブレット用か、下手したらスマホ用のサイトが表示されて、その状態でスクリーンショットも保存されます。

■800×600で撮った例

800x600で撮った例

SS撮影時のウィンドウサイズを指定する

PC用のWebサイトを撮りたい場合は––window–sizeオプションを付けてサイズを指定します。

chrome ––headless ––disable–gpu ––window–size=1920,1080 ––screenshot=r:\test.png https://blog.ver001.com/

■1920×1080で撮った例

1920x1080で撮った例

まとめ

  • コマンドラインでWebサイトのSSを撮るにはChromeを使うのが便利
  • chromeは––headlessオプションを付けることでコマンドラインで実行できる
  • 更に––screenshotオプション、––window–sizeオプションで好きなサイズでSSが保存できる

こんなことが出来て何が嬉しいのかと思う方もいるかもですが、文字よりも画像のほうが訴求力が高いため、最近のリンク集とかWebサイトのスクリーンショット(のサムネイル)を表示するのがワリと普通になってきてるんですよね。

1つや2つなら手動で撮って保存しますが、何十何百と管理するようになると手動でSS撮るのもしんどいです。Chromeのheadlessモードのおかげで、管理しているWebサイトのリンク集とかを一発で画像付きにできて、ぼくは大喜びです(*´ω`*)

PHPスクリプトからchromeを呼ぶように作ったので、リンク先のサイトのデザインが変わっても、またポチっと実行するだけで全サイトのスクリーンショットが最新になるというのもポイント高いですね。

うちはリンク集もDBで管理しているのでPHPで作りましたが、普通にバッチファイルでchromeを起動してSSを撮るだけでも十分有用でしょう。

adsbygoogle

フォロー