ブラウザは友達！Puppeteerでスクリーンショットを撮ってみよう！

Shinya Okazawa

2019.11.29

こんにちは、フロントエンドエンジニアのザワです。

日常生活で写真を撮るという行為は無きに等しい私ですが、仕事中はスクリーンショットを撮りまくります。今回はPuppeteerというNode.jsライブラリを使ってWebサイトのスクリーンショットを撮ってみます。

どこで初めてPuppeteerを目にしたかは覚えていませんが、最近になってPuppeteerの存在を知りました。今回はスクリーンショットを撮りたくてPuppeteerを選んだのではなく、Puppeteerという語感に魅かれて調べていくうちにスクリーンショットを撮れることがわかったので取り上げてみました。ジャケ買いみたいなものですね。

それでは、まずはPuppeteerってなんなの？というところから話したいと思います。

Puppeteerとは

GitHubリポジトリはこちらです。

PuppeteerのREADME.mdには次のようにあります。

Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the [DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/). Puppeteer runs [headless](https://developers.google.com/web/updates/2017/04/headless-chrome) by default, but can be configured to run full (non-headless) Chrome or Chromium.

端的な解釈としては、ChromeまたはChromiumを制御できるAPIを提供するGoogle製Node.jsライブラリです。要するにブラウザ(Chrome / Chromium)を操ることが出来る、しかもヘッドレスブラウザ（GUIを持たないブラウザ）でも実行できるということですね。
このPuppeteerを利用して、今回はスクリーンショットを撮ってやろうじゃないかってことです。

このPuppeteer、「パペティア」と発音するみたいです。ここまで何回も出てきましたが、なんと読んでいましたでしょうか。私はPuppeteerについての動画を見るまで「パペッター」と読んでいました。記事にする前に気づいて良かったです。周りの何人かには自信満々にパペッターと呼んでいる場面を既に聞かれてしまいましたが……。ちなみに、辞書を調べると「操り人形師」という意味であることがわかります。ブラウザを操ることを考えるとピッタリのネーミングですね。

さて、今回の目標はシンプルに、Webサイトのスクリーンショットを撮る！です。

準備

Node.jsのバージョンについてですが、「Puppeteerは最新のmaintenance LTSバージョンに従う」とのことなのででご自身が使用しているバージョンをご確認ください。

ターミナルで適当な場所に移動し、今回のプロジェクトを作成、そのディレクトリに移動します。

$ mkdir screenshot
$ cd screenshot

package.jsonを作成します。今回は特にpackage.jsonに指定することが無いので、オプション-yを指定し、$ npm initした時に対話形式で聞かれる項目をスキップしてpackage.jsonを作成します。

$ npm init -y

Puppeteerをインストールします。

$ npm install puppeteer

スクリーンショットを撮る処理を書いていくJavaScriptファイルを作成します。

$ touch screenshot.js

これで準備が整いました。それでは処理を書いて実際にスクリーンショットを撮るところまで一気に進みたいと思います。

スクリーンショットを撮る

先ほど作成したscreenshot.jsを開き、下記のコードを記述します。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();//Chromiumを起動
  const page = await browser.newPage();//新しいタブを開く
  await page.goto('https://liginc.co.jp/');//指定したURLに移動
  await page.screenshot({ path: 'screenshot.png' });//スクリーンショットを撮る

  await browser.close();//Chromiumを閉じる
})();

何をしているのかはコード内のコメントを読んでいただければと思います。

ターミナルから下記コマンドを実行します。

$ node screenshot.js

同じディレクトリにscreenshot.pngが作成されたことを確認できると思います。ファイルを確認すると弊社Webサイトのスクリーンショットが確認できます。

スクリーンショットを撮ることは出来たのですが、何が起こっているのか把握しにくいと思うので、視覚的に処理が見えるようにしてみます。Puppeteerはデフォルト設定だとヘッドレスブラウザが起動するようになっているので、フッドフルで起動するように修正します。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });//ヘッドフルでChromiumを起動
  const page = await browser.newPage();
  await page.goto('https://liginc.co.jp/');
  await page.screenshot({ path: 'screenshot.png' });

  await browser.close();
})();

先ほどと同じようにターミナルからコマンドを実行すると、ブラウザが起動して一連の処理が自動で実行されるのが見えると思います。自分の思った通りにブラウザが自動で動いているのを見るとブラウザが愛おしく思えてきます。

終わりに

今回はpuppeteerを使ってWebサイトのスクリーンショットを撮ってみましたが、ブラウザにて手動で実行できるほとんどの操作が可能ということなので、可能性を探るべく今後も遊んでいきたいと思っています。さらにスクリーンショットを使ってまだまだやりたいことがあるので続編も出来ればやっていきたいなと思います。

それではよい制作ライフを！