なにかと重宝するウェブサイトのスクリーンショット。WEBサービスでもいくつかありますが、WebKitとPHPで作成してみました。
その過程をざっくりご紹介します。
インストール
利用したWebKitは、wkhtmltoxです。
wkhtmltoxは、Qt WebKitを使ってHTMLから画像(*)へレンダリングする、ディスプレイ不要のシンプルなシェルユーティリティです。
(*)画像フォーマット各種、PDFに対応しています。
こちらから入手できます。
php-wkhtmltox (GitHub)
wkhtmltopdf.org
Google Code - wkhtmltopdf
License
GNU Lesser General Public License v3
プラットフォームに合ったものをDLします。
※今回、DLしたものはこちら：wkhtmltox-linux-amd64_0.12.0-03c001d.tar.xz
DLしたファイルを、適切なディレクトリへアップし、展開すれば準備okです！
次にインストールの確認をしてみます。
コマンドラインから呼び出す
本来、ヘッドレスなので、コマンドラインから呼び出して、htmlから画像あるいはPDFへ変換することができます。
展開したファイルの、/wkhtmltox/bin/ 以下の2つのバイナリを使います。
画像用：.../wkhtmltox/bin/wkhtmltoimage
PDF用：.../wkhtmltox/bin/wkhtmltopdf
コマンドから呼び出すコマンド$ wkhtmltoimage (スクショするURL) (保存ファイル名)
※.../wkhtmltox/binへのパスが通っていること！
http://sakidesign.com のスクショをshot.jpgというファイル名で作成するには、
コマンドから試してみる$ wkhtmltoimage http://sakidesign.com shot.jpg
Loading page (1/2)
Rendering (2/2)
Done
とすると、デフォルト設定値で作成されます。
デフォルトでは、URLで指定したページの全体がスクショ対象になりますが、オプションが用意されていますのでお好みのサイズ等で作成できます。
■オプション
--width 800 //幅800 px
--height 600 //高さ600 px
--quality 50 //画質 50%
--crop-h 300 --crop-w 300 --crop-x 0 --crop-y 0 //トリミング
// スライダーやmasonryなど、レンダリングを妨げるJavaScriptを無効にするすオプション
$ wkhtmltoimage --disable-javascript
その他いろいろ。
JavaScript遅延オプションもあります。
・デフォルトは200ms
and more !!!
オプションを指定してみる$ wkhtmltoimage --width 800 --quality 50 (url) (output)
オンラインツール実装
今回は、PHPから呼び出してサーバー上にスクリーンショットファイルを作成するというオンラインツールにしてみました。
wkhtmltoxのオプション数とは逆に
・URL
・ファイルフォーマット(PNG,JPG,PDF)
を設定すると、
・幅800px
・画質50
・ページ全体
・JavaScript無効
のスクリーンショットファイルを作成する、というシンプル仕様です。
WebKitをサーバーへ設置し、PATHを通しただけで、簡単にできました。
■テスト環境
- Linux php5.5
- wkhtmltox-linux-amd64_0.12.0-03c001d.tar.xz
PDFにできるのが嬉しい～かな♪
