ヘッドレスChrome（Headless Chrome）は、コマンドラインから Google Chrome を操作できる仕組みです。WEBアプリの自動テストや、WEBサイトのパフォーマンス監視などに活用することができそうですね。また、ヘッドレスChrome を操作するための Nodeライブラリ Puppeteer（パペティアー）の正式版が最近(2018年1月)リリースされました。そこで今回は、CentOS7 に Google Chrome と Puppeteer をインストールする手順と、使い方を簡単にご紹介いたします。
基本パッケージのインストール
はにめに開発ツールなど、基本的なパッケージをインストールしておきます。
yum -y groupinstall development
yum -y groupinstall network-tools
Google Chrome のインストール
Google Chrome の yum リポジトリを追加します。
sudo vi /etc/yum.repos.d/google-chrome.repo
name=google-chrome
baseurl=http://dl.google.com/linux/chrome/rpm/stable/$basearch
enabled=1
gpgcheck=1
gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub
Google Chrome をインストールします。（Chrome が依存するライブラリもインストールされます）
日本語フォントをインストールします。
Google Chrome が正しく動作するか確認します。
Google Chrome 64.0.3282.167 ←バージョンが表示されればOK
ヘッドレスChrome の使い方
ヘッドレスChrome の使い方はじつにシンプルで、google-chrome コマンドに「--headless」オプションを付けてヘッドレスモードで実行するだけです。（現時点ではこれに加えて「--disable-gpu」も指定する必要があります）
例えば、WEBサイトの DOMを取得するには「--dump-dom」フラグを使います（root ユーザーで実行する場合は「--no-sandbox」も付ける必要があります）
WEBサイトのスクリーンショットを撮るには、「--screenshot」フラグに続けて出力先のファイルパスを指定します。（指定しない場合は、カレントディレクトリに screenshot.png というファイルが出力されます）
「--window-size」フラグを使って、スクリーンショットのサイズを指定することもできます。
ページ全体のスクリーンショットを撮りたい場合は、次にインストールする Puppeteer を使うのが便利です。
参考資料
ヘッドレス Chrome ことはじめ | Google Developers
便利なコマンドラインフラグ
Puppeteer のインストール
Puppeteer は、async/await をサポートしている Node.js v7.6.0 以上が必要になりますので、今回は Node.js の公式リポジトリ から Node.js v8 をインストールします。
Node.js v8 のインストール
Node.js v8 用の yum リポジトリ追加
Node.js のインストール
Node.js のバージョンを確認
v8.9.4 ←v8ならOK
Puppeteer のインストール
適当なディレクトリを作成して Puppeteer をインストールします。
cd puppeteer_app/
npm i --save puppeteer
【補足】
Puppeteer をインストールすると、最新版の Chromium（Google Chrome のベースになっているWEBブラウザ）もインストールされるので、先ほどインストールした Google Chrome は不要に思われるかもしれませんが、Chromium が依存するライブラリをインストールするため Google Chrome を先にインストールしておく必要があります。（Chromium と Google Chrome が依存するライブラリは、ほぼ同じです）
Puppeteer の使い方
Puppeteer の使い方も簡単で下のような JavaScript を作成して node コマンドで実行するだけです。
下はページ全体のスクリーンショットを撮るためのスクリプトです。（CentOS7.4の場合は一般ユーザーでも「--no-sandbox」フラグが必要でした）
vi screenshot.js
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({ args: ['--no-sandbox']});
const page = await browser.newPage();
await page.goto('https://blog.apar.jp/');
await page.screenshot({path: '/tmp/sample.png', fullPage: true});
await browser.close();
})();
スクリプトの実行
おわりに
Puppeteer の API ドキュメント をざっと見ただけでも、Puppeteer で Chrome を操作できることはかなりありそうです。色々試して見たいと思います。
コメント