はじめに

Webシステムやサイトなどの作成や修正時には、Webページのスクリーンショットを、PDFにまとめることが多々あります。
1ページ、2ページなら良いのですが、ページ数が増えれば増えるほど、なかなか時間がかかります。

そこで今回は、Webページのスクリーンショットの取得から、PDFへまとめる作業を、自動化できるツールを作成してみました。

利用したもの

・Headless Chrome
→ バックグラウンドで動作する、GUI画面を持たないChrome。コマンドラインから利用します。今回は自動化を行うため、ブラウザをコマンドで操作するために利用しました。

・Node.js
→ JavaScript実行環境の1つ。今回はHeadless Chromeを操作するために利用しました。

・ImageMagick
→ コマンドにて画像を操作するソフトウェア。今回は取得したPNGデータをPDFにまとめるために利用しました。

Node.jsのライブラリ・モジュール

・Puppeteer
→Headless Chromeの操作に利用しました。

・fs
→Node.jsにてファイルを扱うためのモジュール。Node.jsに標準で備えられています。
今回は別ファイルにURLリストを作成し、読み込ませるために利用しました。

・readline
→Node.jsにてファイルを1行ずつ読み込むためのモジュール。Node.jsに標準で備えられています。
今回はURLリストから、URLを一行ずつ取得するために利用しました。

環境

・Windows 10

・Node.js v12.14.1

・ImageMagick 7.0.9

全体の流れ

スクリーンショットを取得したいURLリストを作成。
Node.jsから、URLリストを読み込み。Headless Chromeより、スクリーンショットを取得、保存。
取得したスクリーンショットをImageMagickにてPDFにまとめる。

ディレクトリ構成

├─getScreenShot.js → Node.jsの処理記述ファイル
├─makePDF.bat 　　→ 全体の処理記述バッチ
├─png　　　　　　　→ 取得したスクリーンショットを保存するディレクトリ
└─url.txt　　　　　　→ 取得したいスクリーンショットのURLを記載したリスト

コード

getScreenShot.js

const puppeteer = require('puppeteer');
let fs = require('fs');
let readline = require('readline');

// URLリストに記載した順番にPDFのスクリーンショットが並ぶよう、番号を振る。
let count = 1;

// URLリストよりURLの読込
let stream = fs.createReadStream('./url.txt', 'utf8');
let reader = readline.createInterface({ input: stream });

reader.on('line', (data) => {
  asyncCall(data, count);
  count++;
});


async function asyncCall(url, count) {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();

  // Basic認証の設定
  // await page.authenticate({ username: 'ID', password: 'PassWord' });

  // 画面サイズの設定今回は1290×800に設定
  await page.setViewport({ width: 1290, height: 800 });

  // 取得したURLへ遷移
  await page.goto(url);

  // 画面表示待ち
  await page.waitForNavigation({ waitUntil: ['load', 'networkidle2'] })
            .catch(e => console.log('timeout exceed. proceed to next operation'));

  // フルサイズのスクリーンショットを取得
  await page.screenshot({ path: './png/' + count + '.png', fullPage: true });
  console.log('save screenshot: ' + url);

  // ブラウザタスクの終了
  await browser.close();
};

＊Basic認証がかかったテストページなどの場合は、Basic認証の記述を追記

makePDF.bat

node getScreenShot.js

cd png

rem 余白ができることがあるため、トリミング
magick mogrify *.png -trim *.png

magick *.png output.pdf

url.txt

https://www.tribeck.jp/
https://www.tribeck.jp/column/tribeck/topics/20201110/
https://www.tribeck.jp/column/tribeck/topics/20201007/index.html

アウトプット

pngディレクトリ内容

output.pdf内容

まとめ

以上で、必要なURLのリストがあれば、ワンクリックで資料を作成することができました。
補足ですが、Puppeteerでは画面操作なども行えますので、ログインが必要なサイトでも、カスタマイズすると、キャプチャが取得できるようになりますよ。
また、今回は簡単に作業できるようURLをリストにまとめる形にしてみましたが、場合によってはメモリーリークなどで落ちてしまうので、そのあたりも適宜カスタマイズすると使いやすくなるかと思います。