pageres - 指定幅でのスクリーンショットをまとめて取得
コマンドで実行できるから自動化も楽々ですね! レスポンシブWebデザインはブラウザ幅によって表示が変わるので確認が大変です。一つのURLごとに複数の表示を確認しなければなりません。 そんな手間を軽減してくれるツールがpageresです。コマンド一つで複数のブラウザ幅におけるスクリーンショットを取得してくれます。
pageresのインストール
インストールはnpmコマンドでできます。
$ npm install -g pageres
pageresの使い方
完了したらヘルプを出してみましょう。
$ pageres --help
Get screenshots of websites in different resolutions.
Usage
pageres <url> [</url><url> ...] --sizes <resolution>,[</resolution><resolution>,...]
pageres <url> [</url><url> ...] --file <filepath>
Example
pageres todomvc.com yeoman.io --sizes 1366x768,1600x900
If --sizes is not specified it will fall back to the ten most popular screen resolutions according to w3counter.
The </filepath><filepath> file should be formatted to have one <resolution> on each line.
–sizezでサイズの指定をするくらいです。後は取得したいURLを指定します(複数指定ができます)。例えば次のようにコマンドを打ちます。
$ pageres todomvc.com yeoman.io --sizes 1366x768,1600x900
✓ Successfully generated 4 screenshots from 2 urls and 2 resolutions
画像で出てくれればその後拡大したり全体のバランスを掴むのも容易です。レスポンシブWebデザインはもちろん、通常のデザイン確認にも使えるでしょう。
pageresはnode/JavaScript製のオープンソース・ソフトウェア(MIT License)です。