- Published on
コマンドラインからウェブページのキャプチャ画像が取得できるpageres-cliが何かと便利
- Authors
- Name
- Shou Arisaka / 有坂翔
Linuxパソコン・サーバーのBash言語のコマンドラインから、ウェブページのキャプチャ画像が取得できるpageres-cliが何かと便利だったので紹介します。
ヘッダーレスなchromeがnodeやらで登場してきています。そういうプロジェクトから派生して、様々なソフトウェア・ツールが生まれていますが、pageres-cliは実際にウェブページを閲覧する感覚でキャプチャして、ローカルに保存してくれるコマンドラインユーティリティです。
sindresorhus/pageres-cli: Capture website screenshotsWordPressブログの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](https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_984c099e-8699-4a0f-9897-2ff3f0c02bb6.png)
上記僕のサイトを、いろんなオプションでpageresでキャプチャをしてみたいと思います。
pageres http://yuis-programming.com
pageres http://yuis-programming.com 1024x768 --crop
![https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_27dab307-def4-484d-80f6-d63436fb4d10.png](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](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](https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_3f8a48c2-03da-49d3-a3dd-049f0951b1c5.png)
上記のような感じで、いろんなオプションを指定してキャプチャをしてみました。
このツールでは他にも、様々なオプションが用意されています。
まとめ
今回は、コマンドラインからウェブページのキャプチャ画像が取得できるpageres-cliが何かと便利だった話について書きました。
また他にも、様々なオプションが用意されていますので、ぜひ公式のドキュメントを参照してみてください。
皆さんも、ぜひpageres-cliを使ってみてください。 また、面白いコマンドラインツールがあれば、ぜひ教えてください。
この記事が少しでも皆さんのお役に立てれば幸いです。