pageres-cliをインストールすると、コマンドラインから手軽に複数サイズのスクリーンショットを作成することができる。
レスポンシブサイト作成時の表示確認や、資料作成などに活用すると便利。

必要な環境

インストール方法

ターミナルから以下のコマンドを実行。

$ npm i -g pageres-cli

pageres コマンドの後に、URLと解像度（デバイスの画面サイズ）を引数で指定する。

$ pageres littlebird.mobi 1024x768

解像度を複数指定すれば、複数サイズのスクリーンショットが一括保存される。

$ pageres littlebird.mobi 1024x768 1366x768 1600x900

-c または --crop を指定することで、画面の縦サイズを切り抜いてキャプチャすることができる。
（指定しない場合は、画面全体をスクロールした状態でキャプチャされる）

$ pageres littlebird.mobi 1024x768 --crop

--filename オプションを使うと、指定したファイル名でキャプチャ画像を保存できる。
以下の例のように、「日付-URL」といったファイル名にすることもも可能。

$ pageres littlebird.mobi 1024x768 --filename='<%= date %> - <%= url %>'

HTML上のセレクターを指定することで、特定のDOM要素だけを選んで画面キャプチャすることができる。

$ pageres littlebird.mobi 1024x768 --selector='.main'

BASIC認証がかかっているサイトでも、ユーザー名とパスワードを指定することで、コマンドラインからキャプチャすることができる。

$ pageres littlebird.mobi 1024x768 --username='youthkee' --password='hogehoge'

--format オプションを使うことで、指定したファイル形式でキャプチャ画像を保存できる。デフォルトは png 形式。

$ pageres littlebird.mobi 1024x768 --format='jpg'

デバイスの画面サイズを、あらかじめリストアップしたテキストファイルから読み込んで指定することができる。

$ pageres littlebird.mobi < screen-resolutions.txt

この方法を応用することで、Google Analyticsから抽出した、そのサイトでよくアクセスされているデバイスサイズで、キャプチャを作成することも可能。

以前は npm i -g pageres でインストールされるパッケージが、上記コマンドラインから使用できるツールだったが、現在pageresは、APIから利用するバージョンへと移行された模様。

コマンドラインツールとして使用したい場合は、

$ npm i -g pageres

ではなく、

$ npm i -g pageres-cli

コマンドでインストールする必要があるので、注意が必要。

※APIバージョンのpageresの方は、gruntやgulpなどのタスクランナーからも実行できるとのこと。