Headless Chrome を操るPuppeteer のご紹介 (Node ライブラリ)

JavaScript

2018.02.28

どうもfujiharaです。
寒さが気持ち和らいで春の訪れが楽しみです。最近まるちゃんのワンタンシリーズにハマっていて、1週間で7個以上食べる異常ぶりです。痛風と健康診断が怖い。。
本日は前回ご紹介したHeadless Chromeを簡単に操作できるNodeライブラリ Puppeteer をご紹介します。

Puppeteer

GitHub のリポジトリで27000以上のstarを獲得(2018/02/02)している大人気のライブラリです。説明はさておき使い方説明していきます。GitHub

準備

Nodeライブラリなので node が必要です。バージョンはv6.4.0 以上と書いていますがサンプルではasync, await を使うので v7.6.0 をインストールしましょう。

サンプル


## sample.js

const puppeteer = require('puppeteer');

(async () => { 
  //サンプルでは launch関数にオプションを入れていないが今回エラーになった(CentOS)
  const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});
  const page = await browser.newPage();
  await page.goto('http://c-brains.jp');
  await page.setViewport({width: 1920, height: 1080});
  await page.screenshot({path: 'c-brains.jp.png'}); // スクリーンショット
  await await page.pdf({path: 'c-brains.jp.pdf', format: 'A4'}); //PDF
  await browser.close();
})();


#実行
node sample.js

前回ご紹介した画像とPDFの取得が上記でできちゃいます。可読性が凄くあって扱いやすいですよね。最後に closeしないとターミナル帰ってこないので注意です。

サンプル2

次は何個かURLを設定し、それぞれアクセスして画像の保存（ステータスコード付き)を行うプログラムです。


const puppeteer = require('puppeteer');

const checkUrl = [
  {url: 'http://c-brains.jp', name: 'c-brains'},
  {url: 'https://bashalog.c-brains.jp/', name: 'bashalog'},
  {url: 'https://localization.c-brains.jp/', name: 'itd'},
  {url: 'https://toubankun.c-brains.jp', name: 'toubankun'},
  {url: 'https://bashalog.c-brains.jp/18/01/31-170000.php', name: 'toubankun_fujihara'}
];

(async () => {
  const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});
  for (let index in checkUrl) {
    let data = checkUrl[index];
    let page = await browser.newPage();
    let response = await page.goto(data.url);
    let statusCode = response.status();
    if (statusCode !== 200 && statusCode !== 301) {
      //外部に知らせる処理
    }
    await page.setViewport({width: 1920, height: 1080});
    await page.screenshot({path: `${statusCode}_${data.name}.png`}); // スクリーンショット
  }
  await browser.close();
})();