pageres-cliをインストールすると、コマンドラインから手軽に複数サイズのスクリーンショットを作成することができる。
レスポンシブサイト作成時の表示確認や、資料作成などに活用すると便利。
必要な環境
- Node.js
インストール方法
ターミナルから以下のコマンドを実行。
$ npm i -g pageres-cli
使い方
基本的なコマンド
単一デバイスでの書き出し
pageres コマンドの後に、URLと解像度（デバイスの画面サイズ）を引数で指定する。
$ pageres littlebird.mobi 1024x768
- 解像度を指定しない場合は、最もよく使われているサイズである
1366x768pxで保存される。 - URLは、ローカルのパスやファイル名を指定することも可能。
複数デバイスでの書き出し
解像度を複数指定すれば、複数サイズのスクリーンショットが一括保存される。
$ pageres littlebird.mobi 1024x768 1366x768 1600x900
人気のデバイスTOP10
サイズを指定するのが面倒な場合は、 w3counter と引数を指定することで、W3Counterから集計された、よく使われているデバイスサイズTOP10で、自動的に作成してくれる。
$ pageres littlebird.mobi w3counter
オプション
切り抜き
-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などのタスクランナーからも実行できるとのこと。