プログラミング

コマンドラインからウェブページのキャプチャ画像が取得できるpageres-cliが何かと便利

ヘッダーレスなchromeがnodeやらで登場してきています。そういうプロジェクトから派生して、様々なソフトウェア・ツールが生まれていますが、pageres-cliは実際にウェブページを閲覧する感覚でキャプチャして、ローカルに保存してくれるコマンドラインユーティリティです。

sindresorhus/pageres-cli: Capture website screenshots

WordPressブログのPHPなんかと組み合わせれると良さそうですね。ウェブページをURLでリンクしたときにキャプチャ画像を紹介することで、URL先のサイトがどういうデザイン、レイアウトなのか、だいたいサイトの雰囲気がわかるメリットがビジターにはあります。PHPであれば、数ヶ月ごとなどでキャプチャ画像を更新して最新のウェブページの画像に差し替える、なんていう心遣いを実装しても良いでしょう。

pageres-cliはリソリューションを指定するだけでなく、CSSセレクターを指定してその部分だけをキャプチャしたり、反対にページから特定のクラスをハイドしたりすることができます。

# Capture a specific element
pageres https://example.com 1366x768 --selector='.page-header'
# Hide a specific element
pageres https://example.com 1366x768 --hide='.page-header'

他にも、クッキーの指定--cookie=<cookie>、キャプチャの遅延 --delay=<seconds>に、CSSの追加--css=<string>と、様々なオプションが用意されています。

# クッキーの指定
pageres https://example.com --cookie='foo=bar'

インストール

sudo npm install --global pageres-cli

僕のサイトで試してみた

実際のページはこんな感じです。

https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_984c099e-8699-4a0f-9897-2ff3f0c02bb6.png

上記僕のサイトを、いろんなオプションでpageresでキャプチャをしてみたいと思います。

pageres http://yuis-programming.com

https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_26aae096-d89c-43b2-89f7-51b36e0880d2.png

pageres http://yuis-programming.com 1024x768 --crop

https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_27dab307-def4-484d-80f6-d63436fb4d10.png

pageres http://yuis-programming.com 2048x768 --crop

https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_255dd791-abf7-4993-9c90-e6c06b8a80af.png

pageres http://yuis-programming.com --crop

https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_3f8a48c2-03da-49d3-a3dd-049f0951b1c5.png