Ⅰ. はじめに
タイトルの通り「Puppeteer を利用してWebページのスクリーンショットを撮る方法」です。
Ⅱ. やり方
1. Puppeteer をインストールする
npm install puppeteer
2. サンプルプログラムを書く
index.js
const puppeteer = require('puppeteer'); (async () => { // const browser = await puppeteer.launch({ defaultViewport: null, headless: false, slowMo: 300 }); const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://google.com'); await page.screenshot({path: 'out.png', fullPage: true}); await browser.close(); })();
3. 実行する
node index.js
実行結果
out.png
GUIを持たないLinuxで実行する場合
1. ライブラリをインストールする
apt update apt install -y ca-certificates fonts-liberation libappindicator3-1 libasound2 libatk-bridge2.0-0 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgbm1 libgcc1 libglib2.0-0 libgtk-3-0 libnspr4 libnss3 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 lsb-release wget xdg-utils # ReHat系 yum install -y alsa-lib.x86_64 atk.x86_64 cups-libs.x86_64 gtk3.x86_64 ipa-gothic-fonts libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXrandr.x86_64 libXScrnSaver.x86_64 libXtst.x86_64 pango.x86_64 xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-fonts-cyrillic xorg-x11-fonts-misc xorg-x11-fonts-Type1 xorg-x11-utils
2. 日本語フォントをインストールする
apt install -y fonts-ipafont-gothic fonts-ipafont-mincho # RedHat系 yum -y install ipa-gothic-fonts ipa-mincho-fonts ipa-pgothic-fonts ipa-pmincho-fonts
3. サンプルプログラムを書く
const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch({ headless: true, args: [ '--no-sandbox' // 必須 ] }); const page = await browser.newPage(); await page.goto('https://google.com'); await page.screenshot({path: 'out.png', fullPage: true}); await browser.close(); })();
4. 実行する
node index.js
実行結果
out.png
その他
- Puppeteer Recorder
Puppeteer用の操作スクリプトを生成するGoogle Chrome機能拡張
- Screenshoteer
スクリーンショットを撮るCLIアプリケーション(内部でPuppeteerを利用している)