wkhtmltopdf / wkhtmltoimageを使って画面キャプチャするバッチスクリプトを書いた

wkhtmltopdf これ最高では

— しまぶ (@shimabox) October 27, 2016

にあるとおり、画面キャプチャツールを作るにあたって wkhtmltopdf が（自分の中で）最高だった話を書きます。

何が最高だったのか

こんな要望

• 画面をキャプチャしたい
  • 記事とかの再校に使いたい
• できればPDFにしたい
• ローカルで完結させたい
  • サーバサイドでやってもいいけど、余計なものをいれたくない
• プログラマー以外の人が使う
  • そのため、なるべく負荷が無い様に
• そんなに工数をかけない
• Windowsだ

に対して以下を調べてみた。

• PHP PhantomJS
  • 日本語がだめだった(fontとか入れれば大丈夫っぽいけど要望にそぐわない)
• Selenium – Web Browser Automation
  • 色々インストールが必要だしこちらも要望にそぐわない

どれもこれも、あともう一歩。
そんな時、僕を救ってくれたのが wkhtmltopdf なのであります。

これの何がいいってプラットフォームごとにバイナリが配られていて、インストールしたら以下でポンっと出来るところ。

wkhtmltopdf http://google.com google.pdf

まじやばい。感動した。
そして、これを利用するバッチスクリプトを書いたので公開します。

shimabox/ecap: Easy Capture (簡単キャプチャツール)

Easy Capture – 簡単キャプチャツール -　　
略してecap (イーキャプ) です。
※ イーカップではありません

• CSVファイルに書かれている値 (URL,ファイル名(拡張子無し),出力タイプ(pdf or img)) を見て、画面キャプチャします
• 画面キャプチャは pdf or jpg で出力します
• wkhtmltopdf に依存します

wkhtmltopdfのインストール手順

まずこれを使うにはwkhtmltopdfのインストールが必要です。

Windows (64bit)

※ 32bitも大体同じだと思います

• wkhtmltopdf downloads のStableから自分のプラットフォームにあったバイナリー(Windows / 64-bit)を選択してインストールします。
  
• インストールが終わったらパスを通します。

パスを通す手順

• エクスプローラーからコンピューターのところで右クリック -> プロパティを選択
  
• システムの詳細設定を選択
  
• システムのプロパティ -> 環境変数を選択
  
• システム環境変数のPathを選択 -> 編集ボタンを選択
  
• 一番最後に、;C:\Program Files\wkhtmltopdf\bin を追記してOKを選択する
  ※ インストール先は一応確認してください
  
• 再起動後、コマンドプロンプトをたちあげて
  • メニュー -> プログラムとファイルの検索 に
    
  • cmdと打ってEnterをッターンするとたちあがります
    
• そして、以下を入力して

  wkhtmltopdf -V
  

  こんな感じでバージョンがでたらおｋです

  wkhtmltopdf 0.12.3.2 (with patched qt)
  

  

Mac (macOs Sierra 10.12)

• wkhtmltopdf downloads のStableから自分のプラットフォームにあったバイナリー(OS X / 64-bit)を選択してインストールします。
  • インストールするときに開発元が未確認のため開けませんみたいに怒られたら、システム環境設定 -> セキュリティとプライバシー -> 一般 -> ダウンロードしたアプリケーションの実行許可でこのまま開くを選択してください
• インストールが終わったら以下コマンドをターミナルで実行します

  $ wkhtmltopdf -V
  

• こんな感じでバージョンがでたらおｋです

  wkhtmltopdf 0.12.3 (with patched qt)
  

実行手順

動作環境

• Windows (64bit), Mac (macOs Sierra 10.12) で動作確認済みです
  • Windowsはecap.bat, Macはecap.shを使ってください
• Windowsでの利用を想定して作ったのでCSVファイルの形式は以下となります
  • 文字コードはShift_JIS
  • 改行コードはCRLF
• 後述しますがシェルecap.shを修正すれば、UTF-8, LF のファイルも利用できます

使い方

• shimabox/ecapからzipをダウンロードするなりcloneなりします
• example.url.csv をコピーして url.csv を作ってください

  cp example.url.csv url.csv
  

• url.csv ※ 必ず最後の行に改行を入れてください!!

URL,ファイル名(拡張子無し),出力タイプ(pdf or img)
https://www.google.co.jp/,google,pdf
http://www.yahoo.co.jp/,yahoo,img
https://www.google.co.jp/,google,img
https://ja.wikipedia.org/wiki/日本語ドメイン,日本語ドメイン,pdf

上記にある通り、文字コードはShift_JIS, 改行コードはCRLFとなります。
※ 空行とかの考慮はしていませんのであしからず

• 実行
  • Windowsの場合

        ecap.bat
        

  • Macの場合

        bash ecap.sh
        

• 結果
  • 出力タイプでpdfを指定した場合
    • pdf/ 以下に 指定したファイル名.pdf が出力される
  • 出力タイプでimgを指定した場合
    • img/ 以下に 指定したファイル名.jpg が出力される
• 出力後のディレクトリ構成

  ecap
  |--README.md
  |--.gitignor
  |--ecap.bat
  |--ecap.sh
  |--example.url.csv
  |--img # 出力タイプでimgを指定した場合はここに出力される
  |  |--.gitkeep
  |  |--ファイル名.jpg
  |--pdf # 出力タイプでpdfを指定した場合はここに出力される
  |  |--.gitkeep
  |  |--ファイル名.pdf
  |--url.csv
  

MACとかで UTF-8, LF のCSVを扱いたい場合

ecap.shの9行目辺りを修正します。

• 修正箇所 (9行目あたり)

  # Shift_JISをUTF-8に変換 | 改行コードをLFに変換 | 2行目から読み込み
  exec < <(iconv -f SHIFT-JIS -t UTF-8 $TARGET/url.csv | tr -d \\r | tail -n +2)
  

• 以下に修正

  exec < <(tail -n +2 $TARGET/url.csv)
  

上記を行なってから実行してください。

bash ecap.sh

その他

• wkhtmltopdf, wkhtmltoimage ともに色々なオプションを指定できますのでこちらを参考にしてください
  • http://wkhtmltopdf.org/usage/wkhtmltopdf.txt
• 以下に、一例を書きます

ヘッダーを付与したい

独自ヘッダーとかUserAgentとかを送れたら使い勝手がいいですよね。
( 自社 / 自分のサイトとかのキャプチャをとる場合とか )

それも簡単に設定できます。

• --custom-header をオプションで設定してください
  • --custom-header-propagation もつける
• 以下は、EXEC_CAPTURE = "running"、iOS 10のユーザーエージェントを設定した例です

ecap.bat

wkhtmltopdf ^
--margin-top 0 ^
--margin-bottom 0 ^
--custom-header "EXEC_CAPTURE" "running" ^
--custom-header "User-Agent" "Mozilla/5.0 (iPhone; CPU iPhone OS 10_0_1 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.0 Mobile/14A403 Safari/602.1" ^
--custom-header-propagation ^
%URL% ^
%TARGET%\pdf\%FILE_NAME%.pdf

ecap.sh

wkhtmltopdf \
--margin-top 0 \
--margin-bottom 0 \
--custom-header "EXEC_CAPTURE" "running" \
--custom-header "User-Agent" "Mozilla/5.0 (iPhone; CPU iPhone OS 10_0_1 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.0 Mobile/14A403 Safari/602.1" \
--custom-header-propagation \
${url} \
"${TARGET}/pdf/${file_name}.pdf

PHPですいませんが、サーバー側ではこんな感じで取得可能です。

if (isset($_SERVER['HTTP_EXEC_CAPTURE']) && $_SERVER['HTTP_EXEC_CAPTURE'] === 'running') {
    // キャプチャツールからのアクセス
}

まとめ

バッチファイルについて書きましたが、このバッチファイルを使わずともwkhtmltopdfをインストールしてしまえばコマンド一つでpdfが簡単に出力出来るので、単純に画面キャプチャをpdfで出したいとかの用途であればwkhtmltopdfは最高だと思います。

追記

このバッチスクリプトを書いた時に、ハマった事を書きました。
バッチスクリプトを書いてハマったところ | Shimabox Blog