Google Chrome 59でヘッドレスモードが標準搭載されたのでいじってみる

こんにちは。
開発チームのワイルド担当、まんだいです。

Google Chromeのバージョン59において、ヘッドレスモードが搭載されました。
今までヘッドレスブラウザといえば、PhantomJSやSeleniumなどが有名です（個人的に使ったものでいうとWatirというものもありました。 → ヘッドレスブラウザリスト）
いずれも色々と下準備として環境構築する必要がありましたが、Google Chrome 59ならインストールだけでヘッドレス環境が構築できる！ ということで試してみました。

なお、バージョン59の時点では、Windows非対応ということで、CentOS 7で動作確認しております。

Google Chromeをアップデートする

yum経由でインストールしていた場合のアップデートは簡単です。

 

未導入の場合は、こちらのページからrpmパッケージをダウンロードし、インストールします。
自動的にGoogle Chrome用のリポジトリも追加されるので、今後のアップデートは、yumコマンドで実行できます。

 

とりあえず動かしてみる ～ DOM確認 ～

Google Chromeを通じてビヨンドのホームページへアクセスしてみます。

 

オプションで「--dump-dom」を付けて実行すると、サイトのDOMが取得できました。

 

とりあえず動かしてみる ～ スクリーンショット ～

続いて、スクショを撮ってみます。

 

スクショを撮る場合、ブラウザ表示サイズを指定しないとかなり小さめの範囲しか撮影できないので、「--window-size=[width],[height]」オプションで画面サイズを設定します。

ファイル名を指定して保存する場合は、

 

「--screenshot」オプションの引数としてファイル名を指定します。

 

とりあえず動かしてみる ～ PDF化 ～

続いてサイトをPDFにしてみます。

 

output.pdfという名前でPDFが出力されました。

中身を見てみると、バッチリサイトのレイアウトそのままのPDFが出力されています。
特別特殊というわけではないですが、最上部に固定されているサイトのヘッダが各ページに表示されているので、2ページ目以降の上の方が見えない状態になっています。
このようなサイトは少なくないと思いますので、知っておいたほうがよいかと思います。

また、このコマンドだと、複数のページをPDF化した場合、上書きされてしまうので

 

このように「--print-to-pdf」オプションの引数にファイル名を指定すると、PDFに名前を付けて保存ができます。

 

まとめ

何気なく使っていて、勝手に最新バージョンへアップデートされるGoogle Chromeですが、今回は割とインパクトがあるアップデートかなと思ったので取り上げてみました。

実は、ヘッドレスモードで起動したGoogle ChromeをNode.jsでDevTools Protocolを経由して操作する方法があり、よりカジュアルに、より深くやれるようになった気がします。
この部分も改めて記事にできればと思っています。

本日はロックの日（69）ということでロックな内容にしたかったんですが、そうでもなかったですね。

追記：[Node.jsからヘッドレスGoogle Chromeを使ってみる | 株式会社ビヨンド](https://beyondjapan.com/blog/2017/07/headless-chrome-with-nodejs)という関連記事を書きました。

追記2：[Google Chromeのヘッドレスモードで外形監視が細かくできそうなのでやってみた | 株式会社ビヨンド](https://beyondjapan.com/blog/2017/07/headless-chrome-networks)という関連記事も書きました。

以上です。