Puppeteerとは？（ブラウザ自動化への道 準備編）

昨今は、業務の効率化が表立って言われるようになりました。そこで重要なのは、人がやらなくていいことはやらない、自動化できるものは自動化するということです。

そこで、Puppeteerというシステムを使って、自動化を進めてみようと思います。

今回は概要編です。

Puppeteer（パペティア）とは

Puppeteer（パペティア）とは、人形遣い。
Webの世界では、Chromium（Chrome）を自動化するNode.jsで動作するライブラリのことです。
GoogleのChrome DevTools Teamが作りました。

Chromeはみんな使っているGoogle Chromeです。Chromiumは、Google ChromeのベースになっているオープンソースのWebブラウザのことを言います。（意外と知らない事実）

https://www.chromium.org/

www.chromium.org

Chromiumは、Google ChromeはもちろんOperaもChromiumベースですし、最近ではMicrosoft EdgeもなんとChromiumベースに変わりました。

2020 年 1 月 15 日にリリースされた新しい Microsoft Edge  は、Chromium に基づいています。

Puppeteerを使うには

Puppeteerを使う場合に必要なものは、

1. OS（WindowsでもMacでもLinuxでもOK）
2. Visual Studio Code（エディタ インストール必要）
3. Node.js（後でインストールする）
4. npm（Node.jsのパッケージ管理ソフト 後でインストールする）
5. Puppeteer（後でnpmインストールする）
6. Chromium（Puppeteerのインストールで一緒に入ってくる）
7. ESLint（Visual Studio Codeの拡張機能 後で追加する）

結構多いですが、環境構築が必要です。

Visual Studio Codeのインストール

以下からインストールしておきます。エディタはこれだけあれば他は何もいらないというくらい便利ですので使っていない人も使ってみることをおすすめします。

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and availa...

code.visualstudio.com

ちなみに、最初に日本語設定や入れておいたほうがいい拡張機能などもありますので以下のページなどを参考に設定しておくと良いです。

VScodeを使う前に - おすすめ初期設定と最低限の拡張機能をセットする

VScode（Visual Studio Code）とは軽量かつ高速で動作する高機能エディタ。WindowsでもMacでも動作し、無料とは思えない機能の豊富さ、動作の軽さから多くのプログラマーから選ばれているエディタの１つです。今回紹介する

yumegori.com

Visual Studio Codeのワークスペースを作る

作業場であるワークスペースを作っていきます。

まず、適当なところに作業用のディレクトリ（フォルダ）を作成します。

僕はUsers/{username}/ の下に作成しました。

/Users/{username}/Puppeteer-workspace

その後は、Visual Studio Codeの「ファイル」の中にある「フォルダーをワークスペースに追加…」を選択して、先ほど作成したフォルダを選択します。

ESLintをインストール

拡張機能のESLintをインストールしていきます。

これは、正しいコーディングをしているのかを随時チェックしてくれ、ウザいぐらいに指摘してくれる拡張機能です。

拡張機能を開きます。

検索窓でESLintと検索し、出てきたものをインストールします。

関連するモジュールをダウンロードするためにコマンドを入力します。

npm install --save-dev eslint

そして、initします。

Macの場合

node ./node_modules/eslint/bin/eslint.js --init

Windowsの場合

node .\node_modules\eslint\bin\eslint.js --init

対話形式で質問がありますので、答えていき

“How would you like to configure ESLint?”に対して”Use a popular style guide”を答えます。

“Which style guide do you want to follow?”に対して”Airbnb”を答えます。

“Do you use React?”に対して”N”を答えます。

“What format do you want your config gile to be in?”に対して”JSON”を答えます。

すべて答えたら、ワークスペースに.eslintrc.jsonが作られますのでVisual Studio Codeを再起動し、出力ペインを確認します。

ESLint server is running. とあれば、OKです。

Node.jsのインストール

以下のリンクから、Node.jsをインストールしておきます。

最新版と推奨版がありますので好きな方を選択します。（最初であれば推奨版がいい）

https://nodejs.org/ja/download/

nodejs.org

ダウンロードが完了したら、コマンドプロンプトやターミナルで、

node --version

と入力してバージョンが出ればインストール完了。

Node.jsをインストールすると一緒にパッケージ管理ツールnpmも入ってくるので、こちらもチェック。

npm --version

npmを入れたあとはnpmコマンドで必要なモジュールをインストールしていきます。

先程作ったワークスペースを整備する

package.json

必要なファイルは、package.jsonです。ファイルを作って、以下のように設定を書きます。

{
  "name" : "googlesearch",
  "description" : "Googleで検索",
  "version" : "1.0.0",
  "author" : "nanashi",
  "dependencies" : {
    "puppetter" : "2.1.1"
  },
  "licence" : "MIT",
  "main" : "skelton.js",
  "scripts" : {
    "main" : "node skelton.js"
  }
}

nameは、処理の名前です。小文字アルファベットであれば何でもよいみたいです。

descriptionは、処理の説明です。どういう処理7日をわかりやすく書いておきます。

versionは、その処理のバージョンです。

authorは、作者名です。

dependenciesはモジュールの依存関係を定義します。例えばpuppeteerがモジュールに追加（npm install puppetter）されたら上記のように記載されます。

licenseは、公開する場合のライセンスです。

scriptsは、このワークスペース内で実行できるコマンドを定義します。
mainという名前で、node skelton.jsを実行することを指しています。

skelton.js

実際の処理を書きます。別にskelton.jsでなくても問題ないです。

const puppeteer = require('puppetter');

/**
 * メインロジック
 */
(async () => {
  // Puppeteerの起動
  const blowser = await puppetter.launch({
    headless: false, // Headlessモードで起動するかどうか
    slowMo: 50 //指定のミリ秒スローモーションで実行
  });
  // 新しい空っぽのページを開く
  const page = await blowser.newPage();

  // view portの設定
  await page.setViewport({ width: 1200, height: 800 });

  await page.goto("https://google.co.jp/");

  // ブラウザの終了
  await blowser.close();
})

workspace.code-workspace

Visual Studio Codeのワークスペースのパス指定をしているファイルです。

例

{
  "folders" : [
    {
      "path" : "/Users/{username}/Puppeteer-workspace"
    }
  ]
}

npmでパッケージの初期化

ワークスペースディレクトリで、以下のコマンドを実行します。

node init

これにより、先程作成した内容を引き継ぎつつ、インストールしたモジュールが入る node_modulesが作られます。

npmでパッケージのインストール

以下のコマンドでパッケージをインストールしていきます。

node install npm

動作としては、node_modulesフォルダの下に、ライブラリの保存をします。
コマンドにオプション（–save）をつけることで package.jsonにパッケージの内容を記録します。

Puppeteer

npm install puppeteer

インストールすると、package.jsonにも反映がされます。

見せてもらおうPuppeteerの性能とやらを

Puppeteerをインストールするとscreenshot.jsというのがついてくるらしいのですがなかったので、自分でscreenshot.jsというファイルを作って以下の内容をコピペしてみます。

const puppeteer = require('puppeteer');

(async () => {
  const TARGET_URL = 'https://yahoo.co.jp';
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(TARGET_URL);
  await page.screenshot({ path: 'screenshot.png' });

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

そして、このファイルを動かしてみます。

node screenshot.js

すると、同じ階層にscreenshot.pngができます。見てみると、Yahoo! Japanのキャプチャが取れています！

準備完了！

と、ここまでできれば準備完了です。かなり長くなってしまいましたが、これでPuppeteer自動化の準備が整いました。

次は、実際にコードを書いて様々な自動化をやっていきます。

参考資料