Edited at

複数のViewportのスクリーンショットをコマンド一回でまとめてとるためのCLIツールをつくった

レスポンシブデザインのサイトの動作確認をしたいときに、マウス操作で人差し指が痛くなることありますよね。

というわけで、コマンド一発でスクショをまとめてとるCLIツールを作りました。

https://github.com/tilecloud/shootbot


使い方

$ shootbot https://example.com/

上のコマンドを実行すると、あらかじめ定義されている 1200, 992, 768, 576 という4通りのウインドウ幅で、https://example.com/ のスクリーンショットを保存します。

ウインドウ幅は、コマンドラインオプションで以下のように指定することも可能です。

$ shootbot https://example.com/ -v 1200,320

高さの指定がない場合、全ページのスクショをとりますが、以下のように高さを指定することもできます。

$ shootbot https://example.com/ -v 1200x800,320x480

あと複数の URL を指定することも可能です。

$ shootbot https://example.com/ https://example.jp/

デフォルトではレンダリングエンジンに Chrome を使用していますが、Firefox を指定することもできます。

$ shootbot https://example.com/ -b firefox

たとえば多言語サイトでは、以下のように言語を指定することも可能です。

$ shootbot https://example.com/ -l ja

ヘルプは以下の通り。

$ shootbot -h

Usage: shootbot [options] <URL ...>

Take screenshots with multiple viewports with headless browser.

Options:
-V, --version output the version number
-b, --browser <browser> `chrome` or `firefox`. The default is `chrome`
-v, --viewports <viewports> Viewports to take screenshots. e.g, `--viewports 1200x800,320`.
-l, --accept-language <language> The language. The default is `en`.
-w, --waitfor <seconds> The number of seconds to wait for saving screenshots. The default is `3000`.
-h, --help output usage information


インストール方法

$ npm install -g @tilecloud/shootbot


設定ファイル

コマンドラインオプションの初期値を設定ファイルでカスタマイズすることも可能です。

~/.shootbot.json

{

viewports: '1200,320',
browser: 'chrome',
acceptLanguage: 'ja',
waitfor: 3000,
}


既知の不具合


Firefox では言語指定ができない

puppeteer-firefoxというモジュールを使っているのですが、リクエストヘッダをごにょごにょするためのメソッドが実装されていません。

同様にレスポンスヘッダーも取得できないので、もしかしたら Firefox での制限が今後増えるかも。