ユーザーサイトのTopページのスクリーンショットを取得することをいろいろ試してます。
これまでは、「HeartRailes Capture」というサイトを利用させていただいてます。
これがすごい便利なのですが、この自身のサイトがSSL対応なので、どうしても画像を取得して表示するとそのページが「一部SSL･･･」みたいに、完全なSSLページとしては表示されません。
「HeartRailes Capture」がSSL対応してくれるといいのですが・・・。
そこで、自分でスクリーンショットをPHPで作れないかといろいろ調べた結果、 wkhtmltoimage というのが良さそうなので試してみました。
wkhtmltoimage というのは、 wkhtmltopdf という画面のスクリーンショットをPDF化してくれるツールの画像版。
wkhtmltopdf をインストールすると wkhtmltox というフォルダが出来て、 wkhtmltopdf と wkhtmltoimage の二つが使えるようになります。
wkhtmltopdf の詳細等説明はググればたくさん出てくるのでここでは割愛させていただきます。
Linux版やWindows版などがあり、私の場合はレンタルサーバー上でPHPで動作させたいので、サーバーの仕様に合わせた Linux 64bit用を使用させていただきました。
Versionは、ダウンロード時点での最新版の 0.12.3 です。
インストール方法等苦労話は別に報告します。
使用方法は、コマンドで、
wkhtmltoimage http://サイト 画像ファイル名
と叩けば、指定したURLのスクリーンショットが指定した画像ファイルとして保存されます。
ちなみにオプションはどのようなものがあるかというと、
wkhtmltoimage -H
と入力すれば出てきます。
出力結果が下記です。
Name:
wkhtmltoimage 0.12.3 (with patched qt)
Synopsis:
wkhtmltoimage [OPTIONS]... <input file> <output file>
Description:
Converts an HTML page into an image,
General Options:
--allow <path> Allow the file or files from the specified
folder to be loaded (repeatable)
--bypass-proxy-for <value> Bypass proxy for host (repeatable)
--cache-dir <path> Web cache directory
--checkbox-checked-svg <path> Use this SVG file when rendering checked
checkboxes
--checkbox-svg <path> Use this SVG file when rendering unchecked
checkboxes
--cookie <name> <value> Set an additional cookie (repeatable),
value should be url encoded.
--cookie-jar <path> Read and write cookies from and to the
supplied cookie jar file
--crop-h <int> Set height for cropping
--crop-w <int> Set width for cropping
--crop-x <int> Set x coordinate for cropping
--crop-y <int> Set y coordinate for cropping
--custom-header <name> <value> Set an additional HTTP header (repeatable)
--custom-header-propagation Add HTTP headers specified by
--custom-header for each resource request.
--no-custom-header-propagation Do not add HTTP headers specified by
--custom-header for each resource request.
--debug-javascript Show javascript debugging output
--no-debug-javascript Do not show javascript debugging output
(default)
--encoding <encoding> Set the default text encoding, for input
-H, --extended-help Display more extensive help, detailing
less common command switches
-f, --format <format> Output file format
--height <int> Set screen height (default is calculated
from page content) (default 0)
-h, --help Display help
--htmldoc Output program html help
--images Do load or print images (default)
--no-images Do not load or print images
-n, --disable-javascript Do not allow web pages to run javascript
--enable-javascript Do allow web pages to run javascript
(default)
--javascript-delay <msec> Wait some milliseconds for javascript
finish (default 200)
--license Output license information and exit
--load-error-handling <handler> Specify how to handle pages that fail to
load: abort, ignore or skip (default
abort)
--load-media-error-handling <handler> Specify how to handle media files
that fail to load: abort, ignore or skip
(default ignore)
--disable-local-file-access Do not allowed conversion of a local file
to read in other local files, unless
explicitly allowed with --allow
--enable-local-file-access Allowed conversion of a local file to read
in other local files. (default)
--manpage Output program man page
--minimum-font-size <int> Minimum font size
--password <password> HTTP Authentication password
--disable-plugins Disable installed plugins (default)
--enable-plugins Enable installed plugins (plugins will
likely not work)
--post <name> <value> Add an additional post field (repeatable)
--post-file <name> <path> Post an additional file (repeatable)
-p, --proxy <proxy> Use a proxy
--quality <int> Output image quality (between 0 and 100)
(default 94)
-q, --quiet Be less verbose
--radiobutton-checked-svg <path> Use this SVG file when rendering checked
radiobuttons
--radiobutton-svg <path> Use this SVG file when rendering unchecked
radiobuttons
--readme Output program readme
--run-script <js> Run this additional javascript after the
page is done loading (repeatable)
--disable-smart-width Use the specified width even if it is not
large enough for the content
--enable-smart-width Extend --width to fit unbreakable content
(default)
--stop-slow-scripts Stop slow running javascripts (default)
--no-stop-slow-scripts Do not Stop slow running javascripts
--transparent Make the background transparent in pngs
--use-xserver Use the X server (some plugins and other
stuff might not work without X11)
--user-style-sheet <url> Specify a user style sheet, to load with
every page
--username <username> HTTP Authentication username
-V, --version Output version information and exit
--width <int> Set screen width, note that this is used
only as a guide line. Use
--disable-smart-width to make it strict.
(default 1024)
--window-status <windowStatus> Wait until window.status is equal to this
string before rendering page
--zoom <float> Use this zoom factor (default 1)
Specifying A Proxy:
By default proxy information will be read from the environment variables:
proxy, all_proxy and http_proxy, proxy options can also by specified with the
-p switch
<type> := "http://" | "socks5://"
<serif> := <username> (":" <password>)? "@"
<proxy> := "None" | <type>? <string>? <host> (":" <port>)?
上記を Google翻訳で日本語化したのがこれです。
名：
（パッチ済みQT付き）wkhtmltoimage 0.12.3
あらすじ：
wkhtmltoimage [OPTIONS] ... <入力ファイル> <出力ファイル>
説明：
HTMLページが画像に変換し、
一般的なオプション：
--allow <パス>指定したフォルダからファイルまたはファイルがロードされることを可能にする（反復可能）
--bypass-プロキシのための<値>ホストにはプロキシ（反復可能）
--cache-dirの<パス>のWebキャッシュディレクトリ
--checkbox-チェックインSVGをチェックチェックボックスをレンダリングするときに、<パス>このSVGファイルを使用します
未チェックのチェックボックスをレンダリングするとき--checkbox-SVG <path>は、このSVGファイルを使用します
--cookieは、<名前> <値>追加のクッキー（再現性）を設定し、値はURLエンコードする必要があります。
--cookieジャー<パス>読むとから供給されたクッキーのjarファイルにクッキーを書き込みます
トリミング用--crop-H <整数>高さを設定します
トリミング用--crop-W <整数>設定幅
--crop-xの<整数>の設定は、トリミングのためのx座標
--crop-Y <整数> yはトリミング座標を設定
--customヘッダ<名前> <値>を設定し、追加のHTTPヘッダ（反復可能）
--customヘッダ-伝播がで指定されたHTTPヘッダを追加します。
各リソース要求のための--custom-ヘッダー。
--no-カスタムヘッダー伝搬はで指定されたHTTPヘッダを追加しないでください
各リソース要求のための--custom-ヘッダー。
--debug-javascriptの表示JavaScriptのデバッグ出力
--no-デバッグJavaScriptはデバッグ出力（デフォルト）を表示しません
入力のために、デフォルトのテキストエンコードを設定します。<エンコード> --encoding
あまり一般的でコマンドスイッチを詳述-H、--extended-ヘルプを表示し、より広範なヘルプ、
-f、--format <フォーマット>出力ファイル形式
--height <整数>設定画面の高さ（デフォルトはページのコンテンツから計算される）（デフォルト0）
-h、--helpヘルプを表示します
--htmldoc出力プログラムのHTMLヘルプ
--imagesですか負荷や印刷画像（デフォルト）
--no-画像はロードまたは印刷イメージしないでください
-n、--disable-JavascriptをWebページではJavaScriptを実行することはできません
WebページではJavaScriptを実行できるようにするか--enable-ジャバスクリプト（デフォルト）
--javascript-遅延が<ミリ秒> javascriptの仕上げのためのいくつかのミリ秒を待ちます（デフォルト200）
--license出力ライセンス情報を表示して終了
--load-エラー処理<ハンドラ>負荷に失敗するページを処理する方法を指定します、中止無視またはスキップ（デフォルトのアボート）
<ハンドラ>メディア・エラー処理を--loadロードに失敗したメディアファイルを処理する方法を指定します（デフォルトは無視する）、中止を無視またはスキップ
--disable-ローカル・ファイル・アクセスを明示的--allowで許可されていない限り、ローカルファイルの変換は他のローカルファイルで読み取ることが許されません
ローカルファイルの変換は他のローカルファイルを読み込むことが可--enable-ローカルファイルアクセス。 （デフォルト）
--manpage出力プログラムのmanページ
--minimumフォントサイズ<整数>最小フォントサイズ
--password <パスワード> HTTP認証のパスワード
--disable-プラグインがインストール]を無効プラグイン（デフォルト）
--enable-プラグインは（プラグインはおそらく動作しません）インストールされたプラグインを有効にします
--post <名前> <値>後の追加フィールドを追加します（繰り返し可能）
--postファイル<名前> <パス>ポストの追加ファイル（反復可能）
-p、--proxy <プロキシ>プロキシを使用します
--quality <整数>出力画質（0?100）（デフォルト94）
-q、あまり冗長に--quiet
<パス>にチェック-SVG---radiobuttonチェックをラジオボタンをレンダリングするときに、このSVGファイルを使用します
未チェックのラジオボタンをレンダリングするとき--radiobutton-SVG <path>は、このSVGファイルを使用します
--readme出力プログラムのreadme
--run-スクリプト<JS>ページの読み込みが完了した後、この追加のJavaScriptを実行します（繰り返し可能）
--disable-スマート幅は、それがコンテンツのための十分な大きさでない場合でも、指定された幅を使用します
--enable-スマート幅割れないコンテンツ（デフォルト）に合うように--width拡張
--stop-スロースクリプトが実行速度の遅いJavaScriptを停止します（デフォルト）
--no-ストップスロースクリプトは、実行速度の遅いJavaScriptを停止しないでください。
PNG画像内の背景を透明に--transparent
--use-のxserverは、Xサーバを（いくつかのプラグインや他のものは、X11なしで動作しない場合があります）を使用します
--user-スタイルシートの<url>すべてのページでロードするために、ユーザースタイルシートを指定します
--username <ユーザー名> HTTP認証のユーザー名
-V、--versionバージョン情報を出力して終了
--width <整数>設定画面の幅、これはあくまでも目安線として使用されることに注意してください。それは厳密にするために--disable-スマート幅を使用してください。 （デフォルト1024）
よるwindow.statusがページをレンダリングする前にこの文字列に等しくなるまで--windowステータス<windowStatus>待ち
--zoom <フロート>このズーム倍率を使用します（デフォルト1）
プロキシの指定：
デフォルトのプロキシ情報によって環境変数から読み込まれます。
プロキシ、ALL_PROXYとHTTP_PROXY、プロキシオプションもによってで指定することができます
-pスイッチ
<タイプ>：= "のhttp：//" | 「SOCKS5：// "
<セリフ>：= <ユーザー名>（ "：" <パスワード>）？ "@"
<プロキシ>：= "なし" | <タイプ>？ <文字列>？ <ホスト>（ "：" <ポート>）？
英語の説明と日本語(ちょっと･･･怪しい部分もありますが)を合わせて見ると理解しやすいかも・・・
GoogleとYahooを試してみました。
まずは、Google。
画像サイズは、横 1024px、縦 507px でした。
今度は Yahoo。
画像サイズは、 横 1024px、縦 1998px です。
両方とも、横が1024pxなのは、これがデフォルトだからです。
デフォルトだと、縦は表示される部分がすべて対象になるようです。
ちなみにこのサイトを指定するとこうなりました。
画像サイズは、 横 1024px、縦 7806px です。
しかも、実行する度に結果が少しづつ違います。
縦が長いのでファイルサイズも当然デカくなります。
これではわかりづらいと思うので、超簡単に体験できるPHPを用意しました。
ココ⇒ wkhtmlimageサンプル表示 をクリックしてください！。
PNG形式だと異様にファイルサイズが大きくなったりするので、オプションは控えめに選択できるようにしました。
簡単に作ったのでエラーチェックなど細かいところは勘弁してくださいね。
とりあえず、今回はここまで。続きも投稿します。