【大阪 / 横浜 / 徳島】インフラ / サーバーサイドエンジニア募集中！

【導入実績 500社以上】AWS 構築・運用保守・監視サービス

【CentOS 後継】AlmaLinux OS サーバー構築・移行サービス

【WordPress 専用】クラウドサーバー『ウェブスピード』

【格安】Webサイトセキュリティ自動診断「クイックスキャナー」

【予約システム開発】EDISONE カスタマイズ開発サービス

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【200ヶ国以上に対応】グローバル eSIM「ビヨンドSIM」

【中国への旅行・出張・駐在なら】中国SIMサービス「チョコSIM」

【グローバル専用サービス】北米・中国でも、ビヨンドのMSP

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

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

2017.06.09

Webシステム開発

1 Google Chromeをアップデートする
2 とりあえず動かしてみる～ DOM確認～
3 とりあえず動かしてみる～スクリーンショット～
4 とりあえず動かしてみる～ PDF化～
5 まとめ

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

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

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

Google Chromeをアップデートする

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

sudo yum -y upgrade google-chrome-stable

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

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

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

google-chrome --headless --disable-gpu --dump-dom https://beyondjapan.com
<body id="index" style="">
...

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

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

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

google-chrome --headless --disable-gpu --screenshot --window-size=1280,1440 https://beyondjapan.com
[0608/054855.748933:INFO:headless_shell.cc(436)] Written to file screenshot.png.

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

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

google-chrome --headless --disable-gpu --screenshot=top.png --window-size=1280,1440 https://beyondjapan.com
[0608/055147.536344:INFO:headless_shell.cc(436)] Written to file top.png.

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

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

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

google-chrome --headless --disable-gpu --print-to-pdf https://beyondjapan.com
[0608/033512.266562:INFO:headless_shell.cc(436)] Written to file output.pdf.

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

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

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

google-chrome --headless --disable-gpu --print-to-pdf=top.pdf https://beyondjapan.com
[0608/033723.196640:INFO:headless_shell.cc(436)] Written to file top.pdf.

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