【大阪 / 横浜 / 徳島】インフラ / サーバーサイドエンジニア募集中！
【導入実績 500社以上】AWS 構築・運用保守・監視サービス
【CentOS 後継】AlmaLinux OS サーバー構築・移行サービス
【WordPress 専用】クラウドサーバー『ウェブスピード』
【格安】Webサイト セキュリティ自動診断「クイックスキャナー」
【予約システム開発】EDISONE カスタマイズ開発サービス
【100URLの登録が0円】Webサイト監視サービス『Appmill』
【200ヶ国以上に対応】グローバル eSIM「ビヨンドSIM」
【中国への旅行・出張・駐在なら】中国SIMサービス「チョコSIM」
【グローバル専用サービス】北米・中国でも、ビヨンドのMSP
【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 
【2025.6.30 Amazon Linux 2 サポート終了】Amazon Linux サーバー移行ソリューション
この記事をかいた人
About the author
