本記事はNRIネットコム Advent Calendar 2021 19日目の記事です。
🎄 18日目 ▶▶ 本記事 ▶▶ 20日目 🎅
はじめまして、Webディレクター／フロントエンドエンジニアの高木です。
今回はヘッドレスブラウザ*1「Puppeteer」を使ったスクリーンショット取得自動化についてご紹介します。
少しの手間で大きな時短になるので、ぜひお試しください！
この記事について
背景
Webディレクターの業務の中では、既存サイトの整理を行うことがままあると思います。
先日、「サイト全体のパーツを棚卸ししたい。その際に全パーツのスクリーンショットが必要」というケースがあり、Puppeteerを利用することでスピーディーに対応することができました。
これを受けて、ぜひみなさんにもご紹介したい！と思った次第です。
対象読者
こんな悩みをお持ちの方
- 手動スクショ辛すぎる😱
サイト全ページのスクリーンショットを自動で取得したい！ - 同じ操作するの辛すぎる😱
特定の操作をしたときのスクリーンショットを自動で取得したい！ - トリミング作業辛すぎる😱
特定の要素をトリミングした状態でスクリーンショットを取得したい！
必要環境
- Node.js
- JavaScirpt実行環境
- インストール方法は公式インストーラ／nodenv／nvmなどがありますが、ここでは割愛します
- Puppeteer
- Googleが開発しているヘッドレスブラウザ
環境の準備
1.作業ディレクトリを作り、その直下へ移動します。npm init実行後、いろいろと聞かれますがすべてEnterキーを押します。
$ cd 作業フォルダ $ npm init
2.npm*2を使って、Puppeteerをインストールします。
$ npm install puppeteer
使い方（基礎編）
サイト全ページのスクリーンショットを取得する
1.JSON形式でURL一覧を作成します。取得対象を増やす場合はurl, saveFileNameを追加してください。*3
[{ "url": "https://www.nri-net.com/company/profile/", "saveFileName": "profile" }]
2.Puppeteerを操作するために、JavaScriptファイルを用意します。
const puppeteer = require('puppeteer'); //Puppeteerの定義 const urlList = require('./urlList.json'); //URL一覧の読み込み (async () => { //ブラウザ起動 const browser = await puppeteer.launch({ headless: true }); //タブ展開 const page = await browser.newPage(); //Viewportの設定 await page.setViewport({ width: 1080, height: 768 }); for (key in urlList) { //ページ遷移 await page.goto(urlList[key].url, { waitUntil: 'networkidle2' }); //スクリーンショットの取得と保存 await page.screenshot({ path: urlList[key].saveFileName + '.png', fullPage: true }); } await browser.close(); })();
3.JavaScriptを実行すると、同じ階層にスクリーンショットが保存されます。
$ node getPageScreenshot.js
lazyloadやパララックスを採用している場合、スクリーンショット取得時に要素が空白になってしまいます。
これを防止するために、スクロールイベントを発生させる方法があります。"puppeteer screenshot scroll"などのキーワードで検索してみると参考記事が見つかります。
使い方（応用編）
特定の操作をしたときのスクリーンショットを取得する
遷移（page.goto）のあと、処理を挿入することでページ遷移後に任意の操作が実行できます。
代表的な例を以下に示しますが、他にもChromeでできる操作はすべて実行可能です。
特定の要素をトリミングした状態でスクリーンショットを取得する
遷移のあと、セレクタを指定することで特定の要素のみスクリーンショットを取得できます。
const selector = await page.$('セレクタ'); await selector.screenshot({ path: 'ファイル名.png' });
注意事項
自動化ツールを使うと、簡単に大量のページにリクエストを飛ばすことができます。…が、大量のリクエストを受けたサーバ側は高負荷になってしまいます。
大量のリクエストが必要な場合は、ローカル環境に資材を配置して対応しましょう。
終わりに
Puppeteerは有名なヘッドレスブラウザですが、コーディングが苦手な方にとっては少し敷居が高いツールなのかなと思います。
そういった方々に「こんなに簡単に自動化できるんだ！」と感じていただけたら嬉しいです。
単純作業に割く時間が少しでも減り、クリエイティブな活動をする時間が増えますように…
NRIネットコム Advent Calendar 2021
🎁 18日目 ▶▶ 本記事 ▶▶ 20日目 🍰
