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

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

【2024年2月~】25年卒 エンジニア新卒採用の募集を開始!

【2024年2月~】25年卒 エンジニア新卒採用の募集を開始!

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

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

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

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

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

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

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

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

【低コスト】Wasabi オブジェクトストレージ 構築・運用サービス

【低コスト】Wasabi オブジェクトストレージ 構築・運用サービス

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

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

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

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

【中国現地企業に対応】中国クラウド / サーバー構築・運用保守

【中国現地企業に対応】中国クラウド / サーバー構築・運用保守

【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
1,736
X facebook はてなブックマーク pocket
【2024.6.30 CentOS サポート終了】CentOS サーバー移行ソリューション

【2024.6.30 CentOS サポート終了】CentOS サーバー移行ソリューション

【2024年2月~】25年卒 エンジニア新卒採用の募集を開始いたします!

【2024年2月~】25年卒 エンジニア新卒採用の募集を開始いたします!

【大阪 / 横浜】インフラエンジニア・サーバーサイドエンジニア 積極採用中!

【大阪 / 横浜】インフラエンジニア・サーバーサイドエンジニア 積極採用中!

この記事をかいた人

About the author

萬代陽一

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