Google Chrome 59 安定版がリリースされました。
CSSとJavaScriptが実際にどのくらい使用されているか計測することができるCoverageタブ、PNGフォーマットでもアニメーション可能なAPNGの搭載、DevToolsからのフルページスクリーンショット取得、MacOSにおけるネイティブ通知など素晴らしい機能が追加される中、今回の目玉だと私が思うのは、やはりヘッドレスモードの搭載です。
Headless Chromeでできること
ヘッドレス Chrome ことはじめでも詳しく記載がされていますが、特にサードパーティのツールを使う必要なくWebサイトのDOM取得やスクリーンショット、PDFの出力やデバッグが可能になります。
今回はMac OS Xにて、Headless ChromeとNode.jsビルトインモジュールの組み合わせだけで、npmを使わずに複数ページスクリーンショットの取得を試してみます。
test.js
ビルトインモジュールのchild_processからexecメソッドでGoogle Chromeの実行ファイルを指定し、--headlessオプションでヘッドレスモードを指定します。--screenshotオプションには出力する画像ファイルの名前を記載し、スクリーンサイズを--window-sizeオプションに記載します。あとは取得したいURLをfor文でループさせるだけです。
var childProcess = require('child_process');
var paths = [
'https://www.mitsue.co.jp/',
'https://www.mitsue.co.jp/service/',
'https://www.mitsue.co.jp/our_work/',
'https://www.mitsue.co.jp/knowledge/',
'https://www.mitsue.co.jp/seminar/',
'https://www.mitsue.co.jp/news/',
'https://www.mitsue.co.jp/company/',
'https://www.mitsue.co.jp/careers/'
];
for (var i = 0; i < paths.length; i++) {
childProcess.exec('"/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome" --headless --disable-gpu --screenshot=' + i + '.png --window-size=1280,1696 ' + paths[i]);
}作成したファイルを実行すると、画像ファイルの出力に多少の時間が必要な感覚はありましたが、想像通りのスクリーンショットが出力されました。
実際に出力した画像ファイルのリスト
※WindowsでもGoogle Chrome Cannaryを用いることで同様のことが可能です（この場合、画像の出力先に__dirnameで実行元パスを指定する必要があります）
特に手間もいらず、簡易的なコードでスクリーンショットやPDFが出力できる手軽な所が良いですね。
また、Google Chrome 59ではDevToolsの配置場所（Dock side）が左ペインに変更する機能が追加されていました、ワイドスクリーンなどで開発画面をメインに見る作業に嬉しい機能です。
Google Chrome 60の搭載予定機能
Coverageタブのリアルタイム更新
Google Chrome 59で追加されたCoverageタブの内容がリアルタイムで更新されるようになります。
Objectのコンソール表示とfunctionの省略
コンソールに表示されるJavaScriptの「Object」表記が無くなり、Objectの中身の一部が表示されるようになりました。また、function表記も「f」だけの表示に変更されています。
Lighthouseの搭載
LighthouseとはWebアプリケーションのパフォーマンス、品質、正確性を改善するためのオープンソースのツールです。従来はCLIやChrome Extensionなどを使う必要がありましたが、Chrome Chrome 60よりDevToolsのAuditsに搭載されます。