ヘッドレスchromeとは？CLIで実行する方法
ヘッドレスブラウザ(Headless Browser)とは？
ヘッドレスブラウザはGUI（グラフィカルユーザーインターフェイス）のないという点が特徴なブラウザーです。他には普通のウェブブラウザーと違いがないです。なので、タブやURLバー、インプットフィルド、ボタン、ブックマーク（お気に入り）などのインターフェース及び機能がありません。ヘッドレスブラウザはGUIがないため、ナビゲーションもできず、操作のため、コマンドラインインターフェースや自動スクリプトで操作する方法しかありません。
ヘッドレスブラウザを使う理由
ナビゲーションも簡単に使えないのになぜヘッドレスブラウザを使うのか、気になる方もいらしゃるでしょう。ヘッドレスブラウザの最大の利点はWebページのコンテンツをプログラム的にアクセスできるということです。
特に開発者やSEOマーケターの方々は以下の理由で利用する時が多いです。
「開発者」 ウェブサイトやアプリの中でバグを探すため、使えます。スクリプトの設定が可能となり、リンクのクリックやフィルドへのデーター入力など、ユーザー行動をシミュレーションできます。
「SEOマーケター」 特にヘッドレスChromeを利用しますが、ググるボット（Googlebot)の動きを確認するためです。ウェブサイトが４０４URLがあるか、イメージが壊れているかなど、ヘッドレスブラウザー上で異常に見えるか、確認することで、Googleがクロールする画面を最適化し、SEOペナルティーを避けられます。
ヘッドレスChromeをCLIで実行する方法
ヘッドレスChromeを実行する方法ではpuppeteer、selenuiumなどのライブラリを利用して実行する方法もありますが、今回の記事ではCLI（コマンドライン）でヘッドレスChromeを実行する方法に対して調べてみます。
１。chromeバージョンの確認
ヘッドレスモードはChrome59からサポートされます。（Linux, MacはChrome59,Windowは60から）
なので、chromeのバージョンを確認し、もしバージョンがそれ以下の古いものならば、Chromeをアップデートするか、ChromeCanaryを設置するか、にしてバージョンを合わせてください。Chrome59は2017年にリリースされたバージョンとなり、2023年の現在ではほとんどの人がそれ以上のブラウザーを使っているとは思いますが、念の為、一回確認した方が良いと思いますね。
２。chromedriverの設置
ヘッドレスChromeを実行するためにはchromedriverが必要です。以下の公式サイトからchromeバージョンに合うドライバーを設置してください。最新のバージョンなら、一番上のドライバーを設置しても問題ないです。
３。エイリアス（alias）の設定
エイリアス(alias)は長いコマンドを別名で指定することです。ヘッドレスchromeを実行するたびにchromeの設置位置をからchrome実行ファイルを呼び出しても問題ありませんが、コマンドが長すぎると不便なので、エイリアスの設定をお勧めします。
ターミナルを開き、以下の形式でchrome実行コマンドを設定してください。
alias 別名="chrome設置経路"
例えば、MACでChrome実行コマンドをエイリアス設定すると、以下の感じです。
alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
Windowsの場合
alias chrome="C:\Program Files\Google\Chrome\Application\chrome.exe"
４。ヘッドレスchromeの実行
これで全ての用意ができました！ヘッドレスChromeの実行するコマンドラインは以下のようです。こちらの方で、フラグを付けることで色々な情報が確認できます。今回はヘッドレスChromeから実行されたサイトのDOM構造、PDFファイル、スクショ、ログなどを確認する方法に対して説明します。
* ヘッドレスChromeの実行
chrome --headless --disable-gpu 確認したいサイトの住所
- DOM構造の確認：
--dump-dom
document.body.innerHTMLの内容を見せてくれます。
chrome --headless --disable-gpu --dump-dom https://www.chromestatus.com/
- PDF出力：
--print-to-pdf
ヘッドレスChromeがレンダーリングした内容をPDFとして出力できます。出力ファイルの経路も指定できます。経路を指定しないと、自動的にoutput.pdfという名前で生成されます。
chrome --headless --disable-gpu --print-to-pdf https://www.chromestatus.com/
chrome-canary --headless --disable-gpu --print-to-pdf=経路/ファイル名.pdf https://www.chromestatus.com/
- スクショの出力：
--screenshot
ヘッドレスChromeがレンダーリングした内容をイメージとして出力します。PDFとは違ってタイトルなどの情報は表示されないです。同様にイメージの経路が指定できます。経路を指定しないと、自動的にscreenshot.pngという名前で生成されます。もし、モバイル機器からの画面を確認したいなら、--window-size=幅,高さのフラグを付けて確認できます。
chrome --headless --disable-gpu --screenshot=経路/ファイル名.png --window-size=412,732 https://www.chromestatus.com/
- ログの確認：
--enable-logging
レンダーリングまでのログを確認したい時、使われます。ログを確認することで、リソースのfecth順番やエラーは起こってないのか、確認できます。ログをテキストファイルとして確認するためには経路の指定が必要です。
chrome --headless --disable-gpu --enable-logging=経路/ファイル名.txt https://www.chromestatus.com/
上記、記載したフラグは重ねて付けても問題なく実行され、該当の情報が出力されますので試してみてください。もっと詳しい情報が気になる方は以下の公式ドキュメントをご参考にしてください。
Discussion