はじめに
HeadlessChromeとはChrome59より追加された、画面を表示せずコマンドのみで動作が可能なChromeの機能のこと。自動テストやクローリング、スクレイピングに役立ちます。
自動テストとかで有名なSeleniumというのもあります。私も以前触った事がありますが両方触った感想としてはHeadlessChromeの方がオススメです。
準備
私の環境
・macOS Sierra
・nodejs 9.11.1
・npm 5.6.0
・puppeteer
・googleChrome 61
・chromiun
nodejs
v6.4.0以上が必須ですが、v7.6.0以上を推奨します。最新入れとけばとりあえずOK。
（puppeteerでasync/awaitといったものを使うのにv7.6.0以上が必要なので）
npm
nodeのパッケージ管理ツール
nodeのインストール時にインストールされている
puppeteer(パペティア）
googleが開発・公開しているHeadlessChromeを操作するためのnodeライブラリ。公式ライブラリなのでドキュメントが豊富
chromium
puppeteerと一緒にインストールされる、簡単に説明するとchromeの機能少ない版(OSS)。chromeも入れておいた方が良い（私の環境では既にインストール済でした）
node -v コマンドでnodeのversionを確認してください。インストールされていない場合やversionが低い場合はインストールしてください。ついでにnpm -v でnpmが入っていることも確認しましょう。
適当なディレクトリを作成して、puppeteerのインストールをnpmで行います
npm install puppeteer
インストールが終わるとnode_modulesディレクトリが作成されるので確認しましょう。
動作確認
とりあえすpuppeteer公式サイトのサンプルを動かしてみる。puppeteerをインストールしたディレクトリに下記ファイルを作成する。このサイトのスクリーンショットを撮る。
test.js
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.subculeng.com');
// 画面の一部しか撮れないので全画面撮るために fullPage: true オプションをつける
await page.screenshot({path: 'subcul.png', fullPage: true});
await browser.close();
})();使用方法
コンソール画面にて
node test.js
すると、スクリプトが置いてあるディレクトリにsubcul.pngという名前でスクリーンショットが保存されます。
Tips
よく使いそうな機能をピックアップして紹介。
ログインが必要なサイトにログインする
await page.goto('https://loginpage'); // ログインページ遷移
await page.type('#inputUserName', 'username'); // id="inputUserName"にusernameと入力
await page.type('#inputPassword', 'password');
const buttonElement = await page.$('button[type=submit]'); // よくあるログインボタン(submit)取得後クリック
await buttonElement.click();ヘッドレスだけど挙動を確認する
// デフォルトtrueだがfalseにすると実際にブラウザ起動する
const browser = await puppeteer.launch({ headless: false });システムコマンドを使う
jsのシステムコマンド使用して例としてディレクトリ作成してみる。
var exec = require('child_process').exec;
exec('mkdir test', function(err, stdout, stderr) {
if (err) { console.log(err); }
});ページの特定の要素の値を取得する
例としてgoogleのtopページの右上Gmailのリンクを取得、表示してみる。
const gmailLink = await page.$eval('.gb_P', e => e.href); // class="gb_P"内のhrefを取得
console.log(gmailLink);CentOS上で動かす
こちらの記事が参考になります。また日本語が文字化けすることがあるのでその際には以下の様に対応
- /etc/locale.confの編集
LANG=“ja_JP.utf8”
- ロケールの変更
localectl –no-convert set-x11-keymap jp
- 日本語フォントのinstall
yum install ipa-gothic-fonts ipa-mincho-fonts ipa-pgothic-fonts ipa-pmincho-fonts
おわりに
HeadlessChromeを触ってみましたが、webサイトの自動テストなどにとても便利だと感じました。jsを普段ほぼ使わない私でもpuppeteerのドキュメントが豊富だったおかげで、簡単に使用することができました。HeadlessChrome使ってみようかと思っている方にはpuppeteerオススメします。
コメント