2017年6月6日火曜日

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

本日、Google Chrome 59 がリリースされましたが、目玉の1つに「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'

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


0 件のコメント:

コメントを投稿

Google+ Badge