【Puppeteer】Chromeのお手軽自動化（１）　開発環境準備～実行

2020年8月9日 18:03

こんにちは、自動化エンジニアをしています。kozuです。

PCでのインターネットのブラウザは何を使用しているでしょうか。仕事の業務システムではIEが使われることはありますが、特に指定がない場合はほとんどの人がChromeを使用していると思います。

Chromeを自動操作する方法はいくつかありますが、Node.jsのライブラリ「Puppeteer」について開発方法を紹介します。実際のWebサイトで自動操作と情報を取得するプログラムの開発を通して、自動化ツールの開発について学ぶことができます。

PuppeteerというライブラリはGoogleのChromeを開発しているチームで開発されています。そのため信頼性が高く、最近でも頻繁に更新されており将来的にも期待できます。環境の準備が楽で実装も簡単であるため、個人的には他のライブラリやツールよりも好んで使用しています。本連載では、Node.jsの環境の準備からコードの実装について順を追って解説しようと思います。

この章では、開発環境の準備からプログラムの実行までを行います。

１．対象者

ブラウザで定期的に手作業で行っているデータ入力やデータ収集等の作業から開放されたい、楽したいと考えている方を対象に、Chromeの操作を自動化するツールの開発ができるようになることを目指しています。プログラミングの経験がない方でも、コードをコピーすれば開発できるようになっています。

２．開発環境

以下の環境を使用します。
OSはMacでも問題ありません。
Chromeはインストールしておいてください。
node、npmについては導入方法を解説します。
・OS：Windows10
・ブラウザ：Chrome
・node
・npm

３．開発準備

Node.jsを使用するために、nodeとnpmというパッケージ管理ツールをインストールする必要があります。

Windowsの場合は以下のサイトからインストーラをダウンロードし、インストーラを実行してください。「LTS（Long Term Support）：長期サポート版」と「Current：最新版」がありますが、前者のLTSで問題ありません。

Macの場合は下記サイトを参考にしてください。

nodeのインストールが完了したらコンソールで以下のコマンドを実行してください。バージョン番号が表示されればインストールに成功しています。

node -v

npm -v

４．プロジェクト作成

今回開発で使用するフォルダを決めたらコンソールで以下のように「cd {フォルダパス}」コマンドを実行し、カレントディレクトリを変更してください。

cd C:\\puppeteer-test

次に、Node.jsのプロジェクトを作成します。
以下のコマンドを実行すると、カレントディレクトリに「package.json」というファイルが作成されます。「-y」のオプションがない場合はプロジェクト名や作者、説明などの質問がされます。考えるのが面倒な場合は「-y」をつけると質問をスキップしデフォルト値で作成されます。後からでも変更が可能であるため問題ありません。

npm init
または
npm init -y

01_プロジェクト作成2

02_プロジェクト作成

今回使用するパッケージを追加します。「npm install {パッケージ名}」で指定したパッケージをネットワーク経由でプロジェクトに追加することができます。

以下のコマンドを実行すると、「package.json」に追加したパッケージの名前とバージョンが追記されます。また、「npm install」コマンドを実行すると「node_modules」というフォルダが作成され、この中にインストールしたパッケージのコードがダウンロードされます。

npm install puppeteer-core

03_パッケージインストール

先述した「Puppeteer」ではなく「puppeteer-core」を指定しましたが、PCにインストールしたChromeを使用するためこちらを使用します。「puppeteer」というものもありますが、こちらは「Chromium」というブラウザもダウンロードするためファイル容量が大きくなってしまいます。機能としてはほぼ変わらないため、今回はインストール済みのChromeを使用します。

５．コード実装

それでは、Chromeを操作するコードを実装します。まずはカレントディレクトリに「test.js」というjavascriptのファイルを作成し、任意のテキストエディタで開いてください。ここで注意することがあります。テキストファイルですが、文字コードを「UTF-8」にしてください。デフォルトの設定が「SJIS」になっている可能性があるため、コードを実装する前に確認してください。

04_文字コード

ファイルを作成したら、以下のコードを実装してください。「executablePath」の値にPCにインストールされているChromeのパスを指定しているので、別のフォルダにインストールされている場合は変更してください。

const puppeteer = require('puppeteer-core');

(async () => {
 const browser = await puppeteer.launch({
   executablePath: 'C:\\Program Files\ (x86)\\Google\\Chrome\\Application\\Chrome.exe',
   defaultViewport: null,
   headless: false
 });
 const page = await browser.newPage();
 await page.goto('https://example.com');
 await page.screenshot({path: 'example.png'});

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

６．実行

コードの実装ができたので、実行してみましょう。
以下のコマンドでNode.jsのコードを実行します（.jsは省略可）。Chromeのウィンドウが起動し、ページが表示され、ウィンドウが閉じます。また、カレントディレクトリ（test.jsと同じフォルダ）にスクリーンショットの画像（example.png）が保存されます。

node test.js
または
node test

05_実行

７．コード解説

今回は公式のページに記載されているコードを使用しました。処理について解説します。

１行目でインストールしたパッケージをプログラムで使えるようにするため、「require」で読み込んでいます。

const puppeteer = require('puppeteer-core');

２行目（11行目）で、「async」を指定し、中の処理を非同期で実行します。

(async () => {

})();

３行目の「puppeteer.launch」でブラウザを起動します。
４～５行目でブラウザの起動設定のオプションを設定します。「executablePath」に起動するChromeのパスを指定します。「headless」に「false」を設定することで、ウィンドウが表示して実行されます。「true」を設定するとヘッドレスモードになり、ウィンドウが非表示で実行されます。実行時にウィンドウの確認が不要な場合は実装が完了したら「false」にするとよいでしょう。
他のオプションもありますが、ここでは省略します。

const browser = await puppeteer.launch({
   executablePath: 'C:\\Program Files\ (x86)\\Google\\Chrome\\Application\\Chrome.exe',
   headless: false
 });

７行目で、起動したブラウザに対し「newPage」を実行し、新規タブのページを作成します。変数に格納し、以降はこのページに対して操作を行います。ここで、「await」というものが処理の前についていますが、非同期で実行されているため処理が終わるまで待機しています。基本的に処理の前に「await」をつけておきます。

const page = await browser.newPage();

８行目で、ページに対し「goto」を実行し、指定したURLにアクセスします。

await page.goto('https://example.com');

９行目で、ページ対し「screenshot」を実行し、指定したパスにスクリーンショットを画像で保存しています。

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

１０行目でブラウザに対し「close」を実行することで、ブラウザのウィンドウをクローズします。

await browser.close();

ここまででPuppeteerの開発準備が整いましたので、次回は要素の操作について実装方法を紹介します。

【Puppeteer】Chromeのお手軽自動化（１） 開発環境準備～実行