Puppeteerを使ってみた

株式会社ココロファン - エンジニアリング事業部所属のhazamaです。

サイト制作・運用業務をメインに行っています。
業務の一環でサイトのスクリーンショットを取得することがあるのですが、便利なものがないか探しているうちに
「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.

参考：https://github.com/puppeteer/puppeteer

とまぁ、こんな感じの説明があるのですが、
「ChromeまたはChromiumを制御できるAPIを提供するGoogle製Node.jsライブラリ」ということらしいです。

環境

• Windows 10 Home
• Node.js v16.2.0
• npm 7.13.0
• Puppeteer 10.0.0

使用準備

Node.jsをインストールする

インストールはこちらから

作業場所を準備する

続いて作業場所を準備します。
適当な場所で構わないので作業ディレクトリを作成します。

$ mkdir screenshot

package.jsonを作成する

作成時、本来は設定する際に色々聞かれますが、今回は特に設定なくても問題ないので次のコマンドで作成します。

$ npm init -y

Puppeteerのインストール

package.jsonが作成できたら、いよいよPuppeteerのインストールです。

$ npm install puppeteer

jsファイルの作成

Puppeteerのインストール後、起動させるためのjsファイルを作成します。

$ touch screenshot.js

jsファイルの中身は次のように記述します。
ちなみにこの記述はPuppeteerがGit hubにソースコードをあげており、そちらに記載されているものをそのまま使用しています。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com'); //スクリーンショットを取りたいURLを記述
  await page.screenshot({ path: 'example.png' }); //スクリーンショットのファイル名を記述

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

上記を実行するとザックリこんな感じのことをしています。

• Chromiumを起動
• 指定したURLに移動
• 指定したファイル名でスクリーンショットを保存
• Chromiumを閉じる

jsの記述が終わったらコマンドラインで実行してください。

$ node screenshot.js

実際に動かしてみる

試しにgoogleのスクリーンショットを取得してみようと思います。
まずは先程のjsでURL部分を変えます。保存される時の名前もわかりやすくしておきましょう。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.google.com/'); //←googleのURLを記述
  await page.screenshot({ path: 'screen_google.png' }); //←保存時のファイル名

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

次にjsがあるディレクトリまで移動してコマンドラインで実行します。

//screenshotディレクトリまで移動
$ cd C:\Users\ユーザ名\Desktop\screenshot

//screenshot.jsを実行
$ node screenshot.js

実行するとコマンドラインでは特に何も起きていませんが、screenshotのディレクトリを見ると
「screen_google.png」で保存されていました！

最後に

Node.jsのライブラリと聞いて敷居が高いかなと思っていましたが、意外とすんなり導入できました。
スクリーンショットを取るにあたって、今はchromeの拡張機能やフリーのソフトでも性能のいいものがありますが、puppeteerは差分を比較するなどの機能もあるみたいなので、今後研究を重ねたいと思います。