Chrome 59で実装された Headless Chrome を使ってみよう - MacOS 編 -

本日、Google Chrome 59 がリリースされましたが、目玉の１つに「Headless Mode」というものがあります。これはコマンドから、Chrome に対していろいろな命令を実行できる機能のようです。で、実際にどうやってつかうのか、Macでのやり方情報があまり載っておらず、「どうやってつかうのじゃ〜」とちょっと苦労したので備忘録としてまとめておきます。

あとは APNGがサポート（GIFアニメーションの PNG版みたいな）されたのもありますが、個人的にはあまり興味なし・・・。

関連情報

• Headless dev ML (Google Group）
  　技術的な質問や回答のやり取りがフォーラム形式で出来ますね。何か疑問があれば質問してみては。。ただし英語ベースのようです。
• Bug Tracker for Headless （bugs.chromium.org）
  　バグを見つけたら、ここで issue を立てるとよいかと。再現性があるなら、開発者に見てもらえる可能性はあるかなと。

Headless Chrome の特徴

• New in Chrome 59 （developer.google.com）
• ヘッドレス Chrome ことはじめ（developer.google.com）
• How to install and use Headless Chrome on OSX（Object Partners）

を見ると、ウェブサイトの PDF保存したり、スクリーンショットを保存したりできるようですね。なお「--disable-gpu」オプションは不要なようです。

下記のようなことができると、何からのプログラムを介在して纏めてサイトのPDFやスクリーンショットを撮ったりなどできそうですね〜。

• macOS で node.js から Headless Chrome を操作してスクレイピング（Qiita）
• Headless Chromium (Chromium Project)

以下「ターミナル」アプリ上の操作になります。

スクリーンショットを取る

対象：https://kitaney-google.blogspot.jp/

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --screenshot https://kitaney-google.blogspot.jp/

な感じになります。保存先は「screen.png」上書きされます。
ただし、これではウィンドウサイズが小さすぎて、サイトすべてが入りません。

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --screenshot  --window-size=1280,1696 https://kitaney-google.blogspot.jp/

ウィンドウサイズを、1280x1696にしてみます。横幅は問題ないですね。あとは縦幅を調整すればよい感じかなと思います。

PDFで保存

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --print-to-pdf https://kitaney-google.blogspot.jp/

保存先は、「output.pdf」になります。
そのページをPDF保存した感じになりますね。

デバッグモードでサイトを表示

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --remote-debugging-port=9222 https://kitaney-google.blogspot.jp/

ローカルの 9222（http://localhost:9222） で、 https://kitaney-google.blogspot.jp/ サイトを見ながら Developer Tools も使える下図のような画面になります。何気に便利かもしれません。 9222 の部分を変更することで複数サイト利用可能。

大体 1024 以降の番号を使えばよいですが、 /etc/services に予約されている番号一覧があるので、それは避けたほうがいいでしょう。

複数利用するなら、ターミナルを複数立ち上げるほうが間違いがないかと。
終了するには、各ターミナルで、コマンドをControl+c を押して強制終了させましょう。

コマンド長すぎない？

ですよね。わたしもこんな長いの覚えられません。

エイリアス機能を使ってショートカットコマンドを作成しちゃいましょう。

ターミナルで利用するシェルよって異なります。何も指定していなければ bash になります。わたしは学生時代に tcsh を使ってきたからか、tcshにしてしまいますが...

bash系

touch  ~/.bash_profile

open -a textedit  ~/.bash_profile

tcsh系

touch  ~/.tcshrc

open -a textedit  ~/.tcshrc

とまぁ、ホームディレクトリ以下の、.bash_profile あるいは .tcshrc を作成してそのファイルをテキストエディタで開きます。

でどこの行でもいいので、

bash系

alias chrome-headless='/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless'

tcsh系

alias chrome-headless  '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless'

を一行でいれてしまいましょう。
※以下、alias設定は bash系のみを記載します。違いは、 = のある無しのみ。

そしてターミナルを新たに起動すると、

• chrome-headless --screenshot https://kitaney-google.blogspot.jp/
• chrome-headless --print-to-pdf https://kitaney-google.blogspot.jp/
• chrome-headless --remote-debugging-port=9222 https://kitaney-google.blogspot.jp/

などに短縮できます。

さらにスクリーンショット専用ショートカットを作成するなら

alias chrome-headless-screenshot='/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --screenshot'

• chrome-headless-screenshot  https://kitaney-google.blogspot.jp/

だけでいけちゃいます。。

個人的には

alias chrome-debug='/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless ----remote-debugging-port=9222'

あたりをいれておいて

• chrome-debug  https://kitaney-google.blogspot.jp/

なんてのをすると楽で良さげですかねぇ・・・

2017年6月6日 @kimipooh