Headless Chromeを手軽に使うpuppeteerがとっても便利！
今までヘッドレスブラウザが出る度に試してきましたが動作が不安定だったりして今ひとつ決め手に欠けていました。（これまでに試したのはphantomJSと、それを間接的に利用するライブラリであるCasperJSの2つ）
そんな中、Google Chromeにヘッドレスモードが搭載されたという情報を見かけたので実際に使ってみることにしました。
実際に使い始めてみるとWindowsでは環境変数の登録が必要だったりと周りに広めるには手軽さが足りない、オプションの指定が通らず動作が今ひとつ安定しないなど気になるところが見つかってきました。
そんな中で見つけたのが、「GitHub - GoogleChrome/puppeteer: Headless Chrome Node API」です。使ってみるとかなり良い感じでだったので今回メモを残すことにしました。
このパッケージでは内部的にChromeのオープンソース版である「chromium」を使用しています。npm installで合わせてインストールされるためコマンド一つで環境構築が完了します。
中身は普段から使い慣れたChromeのため、ある程度のメソッドさえ覚えれば後は普段Chromeのデベロッパーツールで実行しているようにJavaScriptを実行することが可能です。
私は直近でCMSに投入するデータを作成するための既存コンテンツのスクレイピングと常時SSL化のMixedContentチェックに利用しようと思っています。
ひとまずヘッドレスブラウザで色々遊びたかった私としては、慣れているJavaScriptでサクサク書けるのはとても楽しいなーと思いました。普段使い捨てのJavaScriptをデベロッパーツールのコンソールで実行しているのでその延長線上で少しずつ遊んでみようと思います。
まだチュートリアルを見ながら試行錯誤している状況なため粗々ですが、サンプルコードを残しておきます。もしよかったら、ご参考にどうぞ！
サンプルコード
const puppeteer = require('puppeteer');
(async () => {
// デバッグ用に画面を確認したい時はheadless: false とすると画面を見れる
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
// 対象のURL
const urls = [
"https://riatw.me/blog/",
"https://riatw.me/blog/index_2.html"
];
var stash = [];
// レスポンスをモニターする
// page.on("response", function(data) {
// });
// 404を検知する？
// page.on('requestfailed', r => {
// failedReqs[r._requestId] = r.url;
// });
// MixedContentを検知する
// page._client.on('Network.loadingFailed', r => {
// if (r['blockedReason'] == 'mixed-content') {
// }
// });
for ( var i = 0; i < urls.length; i++ ) {
await page.goto( urls[i] , { waitUntil: 'networkidle' });
// 1ページごとの処理、ページ側で読み込んでいればjQueryが書ける
const _tmp = await page.evaluate(() => {
const $node = $(".entries-item a");
const array = [];
$node.each(function() {
array.push ( $node.attr("href") );
});
return array;
});
stash = stash.concat(_tmp);
}
console.log( stash.length );
await browser.close();
})();