CJ Column

コラム

【Chrome ヘッドレスモード】大量の画面キャプチャを一括で撮る方法

こんにちは。WebディレクターのNです。

Chromeヘッドレスモード※機能を使って大量キャプチャーを撮る方法はいろいろなサイト様が紹介してくださっているのですが、コマンド(ターミナル)を使ったり、サーバサイドJavaScriptをインストールするのはちょっと敷居が高い……というWebディレクターさんって結構多いのではないでしょうか?
※Chromeブラウザを開かずにコマンドラインやプログラムを使っていろんな処理ができる機能。

そこで今回は、こちらのサイト様を参考にエクセル(VBA)の編集だけでできる方法を試してみましたよ。それではさっそくいってみましょう!

 

【目次】

  1. 検証環境
  2. 取得したいWebページのリストを作成
  3. VBAコードを書き込む
  4. ベーシック認証(IDとパスが必要)なページを撮るには
  5. まとめ

1.検証環境

今回の検証環境はこちら

Windows 10 pro 
chrome 最新(2021年5月時点)
Excel 2019


2.取得したいWebページのURLリストを作成

A列には画像を書き出した時の「ファイル名」、B列には取得したい「URL」を書きます。
取得ページが大量にある場合は下記※のツールを使ってリスト化すると効率的かもしれません。

Website Explorer (ウェブサイト・エクスプローラ) ウェブサイトの情報を階層表示する サイト丸ごとダウンロードも可能

※制作者さんによるツール開発は終了しています。ダウンロードの場合はご留意ください。


ここで、任意の場所に書き出し用フォルダ(例:C:/Users/ユーザー名/01)を作成し一旦ファイルを保存します。


3.VBAコードを書き込む

次に、2.で作成したエクセルシートにVBAコードを書き込みます。

①エクセルを新規作成で開いてから
メニューリボン → 開発タブ → VisualBasicの順にクリック。
メニューリボンに「開発タブ」が表示されていない場合はこちらを参照してください。

②記入ボックスにソースコードを書き込む

ソースコードはこちら。赤字の値は用途に応じてカスタマイズ


③マクロ有効ブック形式(.xlsm)で保存


④作成したファイルを開いて実行ボタンをクリックすると…


⑤指定フォルダにちゃんとキャプチャが格納されましたよ!感動!



4.スマホ版、公開前の開発サイト(IDとパスが必要)なページを撮るには

スマホ版の場合はソースコードの-window-sizeの数値を調整、ベーシック認証なページはURLにIDとパスを含めると書き出すことができました※2021年5月時点
IDとPWが入っているのでとり扱いには十分にご注意ください。

例:

修正前)https://citrusjapan.co.jp/index.html

修正後)https://ユーザー名:パスワード@citrusjapan.co.jp/index.html

 

5.まとめ

以上、Chromeヘッドレスモードを使って画面キャプチャを一括で撮る方法のご紹介でした。
この手順に慣れてきたら、次はコマンドプロンプトとJavaScriptを使った方法も試してみたいと思います!結果はこのコラムで紹介しますね。

 

それではまた。

 

参考サイト:

WEB制作を効率化する (1) – 大量のスクリーンショット 第1回
ヘッドレス Chrome ことはじめ

Y.N  Webディレクター

コラム一覧に戻る
シトラスジャパン チラシ・フライヤー デザインサービス

お問合せ

以下のフォームにご入力の上、送信ボタンをクリックしてください。

企業名 企業名を入力してください
お名前 [必須] お名前を入力してください
メールアドレス [必須] メールアドレスを入力してください
電話番号 電話番号を入力してください
お問い合せ内容 [必須] お問い合わせ内容を入力してください

個人情報保護方針

個人情報の取り扱いについて

個人情報の取り扱いについて同意してください

ログインをすると、
会員限定記事を全文お読みいただけます。

パスワードを忘れた方へ

  • ログインIDを入力してください。
  • ログインIDを正しく入力してください。
  • パスワードを入力してください。
  • パスワードを正しく入力してください。
  • ログインID、パスワードが間違っています。


ログイン実行中

ログイン完了!ページを再読込します。