BPSの福岡拠点として一緒にお仕事させて頂いてます、株式会社ウイングドアのアリタです。
今回は、サイズ指定のホームページのキャプチャ画像を簡単に取得する方法のご紹介です。
（Puppeteer知っている方は読み飛ばしていただいて大丈夫です）
追記（2019/06/19）:
waitForNavigation()を使わない方法に修正しました。
はじめに
ホームページのキャプチャを取りたいけれど、毎度
- キャプチャ画像を取得
* Windowsの場合：Snipping Tool を使ってキャプチャ画像を取得（参考）
* Macの場合：「Command + Shift + 4」でキャプチャ画像を取得 - 指定サイズに画像切り抜き
など手動で行なっていたら・・面倒ですよね。
そこで、Puppeteerを利用したキャプチャ画像の取得方法をご紹介します。
Puppeteerとは
Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol.
Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.
Chromeブラウザを操作できるNodeのライブラリです。
デフォルトでは、Chromeのヘッドレスブラウザ（GUI が無いブラウザ）で実行されます。
また、設定により通常のChromeでも実行可能です。
Q: Who maintains Puppeteer?
The Chrome DevTools team maintains the library, but we'd love your help and expertise on the project! See Contributing.
Chrome DevTools teamの方がメンテナンスしているみたいですね。
コントリビューター（Contributor）として手伝ってくれる方も募集しているようです。
Puppeteerインストール
1. 事前準備
はじめにnode、npmが実行できる環境を準備してください。
（ここではnode、npmのインストール方法は省略します）
$ node -v
v12.3.1
$ npm -v
6.9.0
2. インストール
$ npm i puppeteer
$ npm ls | grep puppeteer
/Users/osamu.arita/xxx/web/puppeteer
└─┬ puppeteer@1.6.0-next.1532381444032
以上です。
Puppeteerをちょっと触ってみたいなどであれば、
Puppeteerが提供しているWebのTry Puppeteerを利用することも出来ます。
ホームページのキャプチャを取得してみる
1. ファイルを準備
- capture.js
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({headless: true});
const page = await browser.newPage();
page.setViewport({width: 1024, height: 800})
const url = 'https://techracho.bpsinc.jp/'
await page.goto(url, { waitUntil: 'domcontentloaded' });
await page.screenshot({path: 'capture.png', fullPage:false})
console.log("save screenshot: " + url)
await browser.close()
})();
今回は、「https://techracho.bpsinc.jp/」のキャプチャ画像を「1024x800」pxで取得してみます。
2. あとは実行するだけ
$ node capture.js
save screenshot: https://techracho.bpsinc.jp/
無事、ホームページのキャプチャが取得できました！
URLの部分を変更すれば、どのようなホームページのキャプチャもサイズ指定で取得可能です。
備考
Basic認証がかかっている場合は、await page.goto(url); の前に下記を入れてください。
（USER、PASSWORDは要修正）
const USER = 'user';
const PASSWORD = 'password';
await page.setExtraHTTPHeaders({
Authorization: `Basic ${new Buffer(`${USER}:${PASSWORD}`).toString('base64')}`
});
まとめ
このように、サイズ指定のホームページのキャプチャ画像を取得するだけであれば
簡単に取得出来るかなと思います。
参考までに、ソースコードの説明も下記に記載します。
ソースをいじればスクレイピングなども可能なので、是非色々試してみてください！
参考：ソースコードの説明
1. puppeteerのnodeライブラリ読み込み
const puppeteer = require('puppeteer');
2. async開始
(async () => {
3. ヘッドレスブラウザ（GUI が無いブラウザ）起動
const browser = await puppeteer.launch({headless: true});
const page = await browser.newPage();
page.setViewport({width: 1024, height: 800})
※viewportは1024 x 800 px
※async内では、awaitが完了するまで次の処理が実行されません。
（asyncがPromiseを返すようになっており、awaitがPromiseが返ってくるまで処理を中断するため）
4. URLを開く
const url = 'https://techracho.bpsinc.jp/'
await page.goto(url);
5. スクリーンショットでキャプチャ画像を取得
await page.screenshot({path: 'capture.png', fullPage:false})
6. ヘッドレスブラウザを終了する
await browser.close()
株式会社ウイングドアでは、Ruby on RailsやPHPを活用したwebサービス、webサイト制作を中心に、
スマホアプリや業務系システムなど様々なシステム開発を承っています。