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

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

【サーバー管理不要】WordPress専用クラウド『WebSpeed』

【サーバー管理不要】WordPress専用クラウド『WebSpeed』

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

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

【コミュニケーションアプリ開発】LINE アプリ開発サービス

【コミュニケーションアプリ開発】LINE アプリ開発サービス

【ECサイト構築】Shopify カスタムアプリ開発サービス

【ECサイト構築】Shopify カスタムアプリ開発サービス

【音声アプリ開発】Twilio アプリ開発サービス

【音声アプリ開発】Twilio アプリ開発サービス

【グローバル対応】北米リージョン・クラウド / サーバー サポート

【グローバル対応】北米リージョン・クラウド / サーバー サポート

【CPU】AMD EPYC 技術検証(PoC)サービス

【CPU】AMD EPYC 技術検証(PoC)サービス

【Webシステム / サービス開発】SAKARAKU Lab(セカラクラボ)

【Webシステム / サービス開発】SAKARAKU Lab(セカラクラボ)

【取材記事】サーバー系企業ビヨンドが サーバーサイドエンジニアを募集中

【取材記事】サーバー系企業ビヨンドが サーバーサイドエンジニアを募集中

【対談記事】「やっぱクラウド移設っていいですよね」マイネット × ビヨンド エンジニア対談

【対談記事】「やっぱクラウド移設っていいですよね」マイネット × ビヨンド エンジニア対談

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

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

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

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

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に名前を付けて保存ができます。

 

まとめ

何気なく使っていて、勝手に最新バージョンへアップデートされるGoogle Chromeですが、今回は割とインパクトがあるアップデートかなと思ったので取り上げてみました。

実は、ヘッドレスモードで起動したGoogle ChromeをNode.jsでDevTools Protocolを経由して操作する方法があり、よりカジュアルに、より深くやれるようになった気がします。
この部分も改めて記事にできればと思っています。

本日はロックの日(69)ということでロックな内容にしたかったんですが、そうでもなかったですね。

追記:[Node.jsからヘッドレスGoogle Chromeを使ってみる | 株式会社ビヨンド](https://beyondjapan.com/blog/2017/07/headless-chrome-with-nodejs)という関連記事を書きました。

追記2:[Google Chromeのヘッドレスモードで外形監視が細かくできそうなのでやってみた | 株式会社ビヨンド](https://beyondjapan.com/blog/2017/07/headless-chrome-networks)という関連記事も書きました。

以上です。

この記事がお役に立てば【 いいね 】のご協力をお願いいたします!
0
読み込み中...
0 票, 平均: 0.00 / 10
920
facebook twitter はてなブックマーク

この記事をかいた人

About the author

萬代陽一

ソーシャルゲームのウェブ API などの開発がメイン業務ですが、ありがたいことにマーケティングなどいろんな仕事をさせてもらえています。
なおビヨンド内での私の肖像権は CC0 扱いになっています。