ホームページのスクリーンショットを撮る作業を何とか自動化したい・・・ということで、ずっと前は phantomjs 一択だったような・・・ちょっと前に開発終了してて、今はGoogle Chrome、Mozilla FireFox自体が既にヘッドレスモードをサポートしている、との事。
Window版のChrome/FireFox 及びWSL(ubuntu 1604)上のLinux版での導入手順の備忘録です。
まずは、Windows(x64)版で試してみます。
Windows10を使用していますが、すでに Chrome/FireFoxともインストール済みです。
コマンドラインから手軽に使えるように環境変数にChrome/Firefoxのインストール先のディレクトリパスを登録しときます。
僕はあまり環境を汚したくないので 下記のようなコマンドファイル(chrome.cmd/firefox.cmd)を作って現在パスが通ってるディレクトリに放り込んでます(C:\Windows ディレクトリとか(^^;。
@echo off
"Chromeのexeファイルのフルパス"
FireFoxも同様
さて、ヘッドレスモードは、–headless オプションつけて起動します。
このヘッドレスモードは node.jsやその他のスクリプト言語から、制御するのですが、スクショ撮りだけなら、chrome/firefoxとも -screenshotオプションが用意されていますので、簡単です。
# FireFoxの場合
>> firefox.cmd -headless -screenshot スクショ.jpg https://www.yahoo.co.jp/ --window-size=1024
# Chromeの場合
>> chrome.cmd --headless --disable-gpu --screenshot https://www.yahoo.co.jp/ --window-size=1024,768
微妙にオプションの付け方違いますので本家サイトで要調査です。
FireFoxの場合、カレントディレクトリに画像が作られます。ウィンドウサイズも横幅だけ指定しておけば、高さは自動的に決めてくれますし、ラクです。
chromeの場合は、ちょっとクセがあって、まず、ヘッドレスモードは管理者モードが必要みたいです。コマンドプロンプトを管理者モードで立ち上げないとおそらく失敗します。また、画像の名前は screenshot.png と固定みたい？で、保存されるディレクトリも chromeの実行ファイルと同じディレクトリで固定みたいです。ちょっと使い勝手が悪いです。後述する Linux(ubuntu)版ではカレントディレクトリに作られるのでこの辺は直して欲しいなぁ。。。
実際の業務では、撮ったスクショを ImageMagick でリサイズしたりして加工する、一連のスクリプトを組んで運用します。
注意点が一つ。間違ったURLを指定すると、制御が戻ってこないのでタスクマネージャーもしくは taskkillコマンドで殺すしかありません(^^;
次にLinux版(WSL)です。
具体的な導入手順です。ヘッドレスモードでの使用なので、Xサーバーは必要ありません。
一点、ご注意を。chrome/firefoxとも、日本語フォントが無い場合スクショに豆腐フォントになります。
WSLの場合は、/usr/share/fonts に Windowsのフォントディレクトリのシンボリックを作ればいいみたいですね。
$ sudo ln -s /mnt/c/Windows/Fonts /usr/share/fonts/windows
$ fc-cache -fv
FireFox編
普通に sudo apt install firefox でインストールします。
使用するときのオプション指定は、上記 Windows版と同じです。
google-chrome編
$ wget -nd https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
$ dpkg -i ./google-chrome-stable_current_amd64.deb
※このパッケージをインストールすると googleのリポジトリが追加されます。追加されたくない場合は、
$ sudo touch /etc/default/google-chrome
4/6現在のバージョン 73.0.3683.xxx は問題(バグ？)があるらしく、ヘッドレスモードで立ち上げるとエラーで落ちます。そのため、以前のバージョンにダウングレードしないと使えません。(WSLの固有の問題なのかも？)
$ google-chrome --headless --no-sandbox --disable-gpu --screenshot https://www.yahoo.co.jp/ --window-size=1024,768
[0406/230503.514352:FATAL:gpu_data_manager_impl_private.cc(892)] The display compositor is frequently crashing. Goodbye.
Failed to generate minidump.Illegal instruction (コアダンプ)
古いバージョンは、ググれば見つけられると思います。僕は71.0.3578.80をダウンロードし、上書きインストールしました。
また、WSLで chromeを使用する場合、WSL自体を管理者モードで立ち上げないと使えないみたいです。普通にWSLを使用すると、–no-sandboxが必要です。–no-sandboxをつけるとセキュリティ低下を伴うので、特にこだわりがない場合は FireFoxを常用するのがいいのかも。
#普通にWSLを立ち上げた場合、--no-sandoboxを付けないと以下のエラーがでます。
$ google-chrome --headless --disable-gpu --screenshot https://www.yahoo.co.jp/ --window-size=1024,768
Failed to move to new namespace: PID namespaces supported, Network namespace supported, but failed: errno = Permission denied
Failed to generate minidump.Illegal instruction (コアダンプ)
#管理者モードで立ち上げると
$ google-chrome --headless --disable-gpu --screenshot https://www.yahoo.co.jp/ --window-size=1024,768
[0406/230947.581201:ERROR:gpu_process_transport_factory.cc(967)] Lost UI shared context.
[0406/230948.477496:INFO:headless_shell.cc(546)] Written to file screenshot.png.
