Herokuで日本語を含むページのスクリーンショットを撮ってみた（その2）

2018/07/16

前回、node-webshotを利用してスクリーンショットを撮っていましたが、PhantomJSが開発終了していることに気づいたため、node-webshotからPuppeteerに変更してみました。（よくよく見ると、node-webshotも2016年から更新されていないんですね…）

Puppeteerを使ってみる

いつものごとくnpm、またはyarnでPuppeteerをインストールすると利用できます。

npm i puppeteer
# または
yarn add puppeteer

それぞれの関数はPromiseで返ってくることが多いため、サンプルを見てもawaitを多用しているのが印象的でした。取り敢えずスクリーンショットを取るには、こんな感じでOKです。

import * as puppeteer from 'puppeteer'

const url = 'http://example.com'

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto(url)

  // スクリーンショットを保存
  await page.screenshot({path: 'example.png'})

  await browser.close()
})()

ウィンドウサイズを設定する

キャプチャするウィンドウサイズを指定する際は、setViewport関数が用意されています。

// 省略
const width = 1024
const height = 768

(async () => {
  // 省略
  const page = await browser.newPage()
  await page.setViewport({
    width,
    height
  })
  // 省略
})()

deviceScaleFactorで、高解像度端末をシミュレーションすることも出来るみたいですね。

Basic認証下のページにアクセスする

Puppeteerには、authenticateメソッドがありました。

// 省略
const userId = 'user_id'
const passWord = 'password'

(async () => {
  // 省略
  await page.authenticate(userId, passWord)
  // 省略
})()

~~node-webshotと同様に、setExtraHTTPHeadersによってheaderを追加することで対応が可能です。（前回に引き続きCryptoJSでBase64エンコードしてます）~~

/* 下記の様な記述はしなくてもOK
import * as CryptoJS from 'crypto-js';

// 省略
const userId = 'user_id'
const passWord = 'password'

(async () => {
  // 省略
  const wordArray = CryptoJS.enc.Utf8.parse(userId + ':' + passWord)
  await page.setExtraHTTPHeaders({
    Authorization: 'Basic ' + CryptoJS.enc.Base64.stringify(wordArray)
  })
  // 省略
})()
*/

ページ全体を撮影する

ページ全体なのか、ウィンドウ範囲内だけなのかも、screenshotのオプションで制御が可能です。その他ちょっとしたオプションも併せてご紹介。

// 省略
(async () => {
  // 省略
  await page.screenshot({
    path: 'example.jpg', // example.jpg に保存
    type: 'jpeg',        // JPEG形式で保存
    quality: 80,         // 品質を0-100で指定
    fullPage: true       // trueにするとページ全体を保存
  })
  // 省略
})()

また、clipで切り抜きも出来るようですね。

Herokuで動かしてみる

次に、Herokuで動かしてみようとすると、そのままでは動かないことが分かりました。そのまま動かそうとして発生したエラーのURLに、まさにHerokuの場合の解決方法が記載されていました。

Buildpackを追加する

（多分）初期状態では必要なライブラリが揃っていない様子なので、有志の方が作ってくれたBuildpackを追加して、Puppeteer（Chrome）が動く環境を整える、ということだと思います。

Herokuのダッシュボードからの場合は、Settings -> BuildpacksでGitHubのURLを入力します。入力するURLはこちらか、日本語・中国語・韓国語に対応させたい場合はこちらです。

ちなみに、後者のBuildpackを利用する場合は、前回追加したフォントは不要なので、容量を削減する上でも削除した方が良いでしょう。 ~~というか、無料枠の500MB超えちゃってので~~

もしくは、Heroku CLIをインストールしているのであれば下記コマンドでも大丈夫です。

heroku buildpacks:add https://github.com/CoffeeAndCode/puppeteer-heroku-buildpack

Puppeteerの起動オプションを追加

Buildpackを追加しただけでは、まだエラーが出てしまうので、Puppeteerの起動オプションを追加します。

import * as puppeteer from 'puppeteer'

const url = 'http://example.com'

(async () => {
  // 起動オプションを追加
  const browser = await puppeteer.launch({
    args: [
      '--enable-font-antialiasing',
      '--no-sandbox',
      '--disable-setuid-sandbox'
    ]
  })
  const page = await browser.newPage()
  await page.goto(url)

  await page.screenshot({path: 'example.png'})

  await browser.close()
})()

（Herokuじゃない時と振り分けておいた方が良いかも？）

雑感

前回のnode-webshotに比べると、Heroku上での起動に少しつまづいてしまいましたが、node-webshotで気になっていた点が解消されたので、変更して良かったと思いました。

また、Puppeteerに乗り換えるちょっと前にawait、asyncを勉強していてタイムリーでした。TypeScript(JavaScript)楽しいです。