Headless Chrome を触ってみた。

その他

2018.01.31

どうもfujiharaです。今年の寒さは例年とちょっと違いますね、多分。昨年の寒さを覚えていないのですが、朝が寒すぎて辛すぎる思いが去年より強いです。
本日は発表されてだいぶ経ちますが、触ったことがないHeadless Chromeの基本的な使い方を紹介します。

Headless Chrome

Chrome59 から搭載されたUIを使用しないでChromeを実行でき、コマンドラインでChromeの各機能が使えるものです。
参考：Headless Chrome

使い方

今回は参考URL内で紹介されているDomの出力とPDF、スクリーンショットをご紹介します。今回の実行はMacで行いました。
chromeコマンドをaliasに登録してあげると楽です。


~/.bashrc内追記

alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"

保存後
$ source ~/.bashrc


#DOM出力
$ chrome --headless --disable-gpu --dump-dom http://c-brains.jp

#PDF
$ chrome --headless --disable-gpu --print-to-pdf="./c-brains-top.pdf" http://c-brains.jp

#スクリーンショット
$ chrome --headless --disable-gpu --screenshot http://c-brains.jp

まとめ

今回弊社のURLから各種データを取って見たのですが、スタイル崩れが起きていました。有名所のサイトで試してみた所、スタイルが崩れていなかったのでCSSの書き方が関係しているのかもしれません。原因がわかったらご報告します。 npm にも関連のパッケージが出ているのでそちらについても使ったらご報告します。テストが捗るような使い方を思いついたらまた記事にします。