【Puppeteer】Chromeのお手軽自動化(1) 開発環境準備~実行
こんにちは、自動化エンジニアをしています。kozuです。
PCでのインターネットのブラウザは何を使用しているでしょうか。仕事の業務システムではIEが使われることはありますが、特に指定がない場合はほとんどの人がChromeを使用していると思います。
Chromeを自動操作する方法はいくつかありますが、Node.jsのライブラリ「Puppeteer」について開発方法を紹介します。実際のWebサイトで自動操作と情報を取得するプログラムの開発を通して、自動化ツールの開発について学ぶことができます。
PuppeteerというライブラリはGoogleのChromeを開発しているチームで開発されています。そのため信頼性が高く、最近でも頻繁に更新されており将来的にも期待できます。環境の準備が楽で実装も簡単であるため、個人的には他のライブラリやツールよりも好んで使用しています。本連載では、Node.jsの環境の準備からコードの実装について順を追って解説しようと思います。
この章では、開発環境の準備からプログラムの実行までを行います。
1.対象者
ブラウザで定期的に手作業で行っているデータ入力やデータ収集等の作業から開放されたい、楽したいと考えている方を対象に、Chromeの操作を自動化するツールの開発ができるようになることを目指しています。プログラミングの経験がない方でも、コードをコピーすれば開発できるようになっています。
2.開発環境
以下の環境を使用します。
OSはMacでも問題ありません。
Chromeはインストールしておいてください。
node、npmについては導入方法を解説します。
・OS:Windows10
・ブラウザ:Chrome
・node
・npm
3.開発準備
Node.jsを使用するために、nodeとnpmというパッケージ管理ツールをインストールする必要があります。
Windowsの場合は以下のサイトからインストーラをダウンロードし、インストーラを実行してください。「LTS(Long Term Support):長期サポート版」と「Current:最新版」がありますが、前者のLTSで問題ありません。
Macの場合は下記サイトを参考にしてください。
nodeのインストールが完了したらコンソールで以下のコマンドを実行してください。バージョン番号が表示されればインストールに成功しています。
node -v
npm -v
4.プロジェクト作成
今回開発で使用するフォルダを決めたらコンソールで以下のように「cd {フォルダパス}」コマンドを実行し、カレントディレクトリを変更してください。
cd C:\\puppeteer-test
次に、Node.jsのプロジェクトを作成します。
以下のコマンドを実行すると、カレントディレクトリに「package.json」というファイルが作成されます。「-y」のオプションがない場合はプロジェクト名や作者、説明などの質問がされます。考えるのが面倒な場合は「-y」をつけると質問をスキップしデフォルト値で作成されます。後からでも変更が可能であるため問題ありません。
npm init
または
npm init -y
今回使用するパッケージを追加します。「npm install {パッケージ名}」で指定したパッケージをネットワーク経由でプロジェクトに追加することができます。
以下のコマンドを実行すると、「package.json」に追加したパッケージの名前とバージョンが追記されます。また、「npm install」コマンドを実行すると「node_modules」というフォルダが作成され、この中にインストールしたパッケージのコードがダウンロードされます。
npm install puppeteer-core
先述した「Puppeteer」ではなく「puppeteer-core」を指定しましたが、PCにインストールしたChromeを使用するためこちらを使用します。「puppeteer」というものもありますが、こちらは「Chromium」というブラウザもダウンロードするためファイル容量が大きくなってしまいます。機能としてはほぼ変わらないため、今回はインストール済みのChromeを使用します。
5.コード実装
それでは、Chromeを操作するコードを実装します。まずはカレントディレクトリに「test.js」というjavascriptのファイルを作成し、任意のテキストエディタで開いてください。ここで注意することがあります。テキストファイルですが、文字コードを「UTF-8」にしてください。デフォルトの設定が「SJIS」になっている可能性があるため、コードを実装する前に確認してください。
ファイルを作成したら、以下のコードを実装してください。「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();
})();
6.実行
コードの実装ができたので、実行してみましょう。
以下のコマンドでNode.jsのコードを実行します(.jsは省略可)。Chromeのウィンドウが起動し、ページが表示され、ウィンドウが閉じます。また、カレントディレクトリ(test.jsと同じフォルダ)にスクリーンショットの画像(example.png)が保存されます。
node test.js
または
node test
7.コード解説
今回は公式のページに記載されているコードを使用しました。処理について解説します。
1行目でインストールしたパッケージをプログラムで使えるようにするため、「require」で読み込んでいます。
const puppeteer = require('puppeteer-core');
2行目(11行目)で、「async」を指定し、中の処理を非同期で実行します。
(async () => {
})();
3行目の「puppeteer.launch」でブラウザを起動します。
4~5行目でブラウザの起動設定のオプションを設定します。「executablePath」に起動するChromeのパスを指定します。「headless」に「false」を設定することで、ウィンドウが表示して実行されます。「true」を設定するとヘッドレスモードになり、ウィンドウが非表示で実行されます。実行時にウィンドウの確認が不要な場合は実装が完了したら「false」にするとよいでしょう。
他のオプションもありますが、ここでは省略します。
const browser = await puppeteer.launch({
executablePath: 'C:\\Program Files\ (x86)\\Google\\Chrome\\Application\\Chrome.exe',
headless: false
});
7行目で、起動したブラウザに対し「newPage」を実行し、新規タブのページを作成します。変数に格納し、以降はこのページに対して操作を行います。ここで、「await」というものが処理の前についていますが、非同期で実行されているため処理が終わるまで待機しています。基本的に処理の前に「await」をつけておきます。
const page = await browser.newPage();
8行目で、ページに対し「goto」を実行し、指定したURLにアクセスします。
await page.goto('https://example.com');
9行目で、ページ対し「screenshot」を実行し、指定したパスにスクリーンショットを画像で保存しています。
await page.screenshot({path: 'example.png'});
10行目でブラウザに対し「close」を実行することで、ブラウザのウィンドウをクローズします。
await browser.close();
ここまででPuppeteerの開発準備が整いましたので、次回は要素の操作について実装方法を紹介します。
この記事が気に入ったらサポートをしてみませんか?