本日、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 の特徴
を見ると、ウェブサイトの PDF保存したり、スクリーンショットを保存したりできるようですね。なお「--disable-gpu」オプションは不要なようです。
下記のようなことができると、何からのプログラムを介在して纏めてサイトのPDFやスクリーンショットを撮ったりなどできそうですね〜。
以下「ターミナル」アプリ上の操作になります。
スクリーンショットを取る
対象：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'
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
