きまぐれモノログ。

気まぐれ者のおこだわりの記録。

Chromeで全画面キャプチャを撮る方法

ブラウザシェア率が高いChromeで全画面キャプチャを撮る方法を紹介します。

www.google.com

拡張機能なしで全画面キャプチャを撮る方法

Chrome拡張機能なしでも全画面キャプチャが撮れます。

chromeでデベロッパーツールを開く

Chromeでキャプチャを取るWebページを表示して、
画面右上の設定(縦並びの三点)アイコン→その他のツール→デベロッパーツール
デベロッパーツールを開く

デベロッパーツール画面

端末表示(スマホタブレット)アイコン→Capture full size screenshot
で全画面のキャプチャが撮れます。

拡張機能を使って全画面キャプチャを撮る方法

拡張機能を使えばボタン一つで簡単に全画面キャプチャーが撮れるので便利です。

Chrome拡張機能「GoFullPage」を追加する

下記ページの「Chromeに追加」ボタンから「GoFullPage」を拡張機能に追加できます。

chrome.google.com

chromeにGoFullPageを追加

拡張機能に追加後に、拡張機能ボタン(パズルのピースみたいなアイコン)から「GoFullPage」をピン留めするとアドレスバーの右にアイコンを常に表示させておくことができます。

「GoFullPage」で全画面キャプチャを撮る方法

「GoFullPage」のアイコンを押すと撮影開始
キャプチャを撮りたいWebページを表示させて、先ほど表示させた「GoFullPage」のアイコンを押すと撮影が開始されます。

画面が切り替わったらダウンロードボタンで保存

この画面に切り替わったら、ダウンロードボタンを押してキャプチャを保存します。
ゴミ箱アイコンの右にあるPDFと書いてあるアイコンがPDF形式で保存、その隣がPNG形式の画像で保存になるので、好きな方を選んで保存します。

ヘッドレスChromeでキャプチャを一括で撮る方法

Chromeにはコマンドやプログラムから実行できる「ヘッドレスモード」があります。
コマンドやプログラムで繰り返し処理をさせることによって複数のページのキャプチャを一括で撮ることができます。

developers.google.com

コマンドラインからヘッドレスChromeでキャプチャを撮る方法

今回は割と簡単にできる、コマンドラインからヘッドレスChromeを実行してキャプチャを撮る方法を紹介します。

参考サイト:コマンドラインでWebサイトのスクリーンショットを撮る簡単な方法

①コードを作成

下記のコードをメモ帳に貼り付けて、コマンドラインオプションの解説を参考に自分用に書き換えて使用してください。

“C:¥Program Files (x86)¥Google¥Chrome¥Application¥chrome.exe” ––headless ––disable–gpu ––window–size=1920,1696 ––screenshot=C:¥Users¥UserName¥Desktop¥cap.png https://www.google.co.jp

コマンドラインオプションの解説】

最初の“C:¥Program Files (x86Google¥Chrome¥Application¥chrome.exe”
Chromeがインストールされている場所です。
Windowsの場合デフォルトでこの場所にインストールされているはずなので確認して、違ったら書き換えてください。
環境変数でパスを通しておくと楽ですが、今回はフルパスを入力する方法で行います。)

次の––headless ––disable–gpuはヘッドレスモードで実行させるものなのでそのまま使います。

––window–size=横幅,高さでウィンドウのサイズを指定できます。

––screenshotスクリーンショットを撮るオプションです。
––screenshotの後に=保存場所のパス&保存名.pngで撮ったスクリーンショットの保存場所と保存名を指定できます。
Windowsで「C:¥Users¥UserName¥Desktop¥cap.png」と指定した場合は、「UserName」というアカウントのデスクトップに「cap.png」という名前で保存されることになります。

最後のURL(https://www.google.co.jp)はスクリーンショットを撮るページのURLです。

②必要な分だけコードを追加する

キャプチャを撮りたいページの分だけ①のコードを作成して追加していきます。

下記のコードはその例で、google・Yahoo・Amazon楽天市場のキャプチャを撮ると仮定して作成してみました。

“C:¥Program Files (x86)¥Google¥Chrome¥Application¥chrome.exe” ––headless ––disable–gpu ––window–size=1920,867 ––screenshot=C:¥Users¥UserName¥Desktop¥google.png https://www.google.co.jp
“C:¥Program Files (x86)¥Google¥Chrome¥Application¥chrome.exe” ––headless ––disable–gpu ––window–size=1920,8230 ––screenshot=C:¥Users¥UserName¥Desktop¥yahoo.png https://www.yahoo.co.jp
“C:¥Program Files (x86)¥Google¥Chrome¥Application¥chrome.exe” ––headless ––disable–gpu ––window–size=1920,7645 ––screenshot=C:¥Users¥UserName¥Desktop¥amazon.png https://www.amazon.co.jp
“C:¥Program Files (x86)¥Google¥Chrome¥Application¥chrome.exe” ––headless ––disable–gpu ––window–size=1920,9250 ––screenshot=C:¥Users¥UserName¥Desktop¥rakuten.png https://www.rakuten.co.jp

(全て同じ条件でキャプチャを撮るならForで繰り返し処理をさせた方がいいと思いますが、今回はその方法の説明は割愛します。)

③bat形式で保存

作成したコードをメモ帳に貼り付け、ファイル名を拡張子が.batになるように「好きな名前.bat』で保存します。

例:cap.bat

これでバッチファイルが完成しました。

④バッチファイルを実行

③で保存したバッチファイルをダブルクリックで実行すると、指定した保存先にキャプチャが順番に保存されていきます。

毎回同じサイトのキャプチャを撮る場合は、既に作成してあるバッチファイルを実行するだけでいいので楽です。

バッチファイルを編集

編集したいバッチファイルを右クリック→編集でコードを書き換えることができます。

ヘッドレスChromeで全画面キャプチャを一括で撮る方法

上記のコマンドラインから実行する方法ではページ毎に画面サイズを指定してあげる必要あり、いつも画面サイズが同じなら問題ないですが、変わってしまうと途中で切れたキャプチャになってしまいます。

ヘッドレスモードで全画面キャプチャを撮ろうとすると少し複雑になります。
試してみたい方は下記の記事が参考になると思います。

hittobito.com