Headless Chromeでのスクリーンショット取得とGoogle Chrome 60の搭載予定機能

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に搭載されます。