サーバサイドでWebページのキャプチャ画像を作成する

開発の松尾です。
とある事情よりサーバサイドで任意のWebページのキャプチャ画像を保存したいという要件が湧いてきたので、比較的楽に実現できる方法について考えてみました。

CutyCapt

CutyCaptはAppleのSafariやGoogleのChromブラウザーなどのレンダリングエンジンのベースとなっているWebkitというライブラリを利用してWebページを画像やその他のフォーマットに変換してくれる非常に便利なツールです。
わたしが開発環境として利用しているUbuntu 14.04であれば下記のように簡単に導入できます。

$ sudo apt-get install cutycapt

使い方も簡単。

$ cutycapt --url=http://www.superdelivery.com/ --out=top.png

オプションの「--url」でキャプチャしたいページのURLを指定しつつ、「--out」で出力するファイルを指定するだけで問題なく使用できます。出力先のファイルの拡張子部分を見てフォーマットを推測しているようで、PNG形式に限らずPDF形式で出力することも可能です。

サーバサイドで動かすには？

たまたまわたしがUbuntu Desktopを手元で利用しているので簡単に導入と実行ができたわけですがサーバサイドでCutyCaptを動かすにはどうしたらいいでしょうか？
通常はサーバサイドでX Window Systemに類するサービスは動いていませんし、動かしたくもありません。
そこで、X Serverの仮想的フレームバッファを作るためにxvfbを利用します。

これまたUbuntuであれば導入も簡単。

$ sudo apt-get install xvfb

少しだけややこしいのですが、xvfbとCutyCaptを組み合わせて下記のように利用します。

$ xvfb-run --server-args="-screen 0, 1024x768x24" \
  /usr/bin/cutycapt --url=http://www.superdelivery.com/

xvfb-runは「--server-args」で指定された内容の仮想フレームバッファを用意し、その環境下で任意のコマンドを実行します。
これでサーバサイドでも上手く動きそうです。実際にAWS上のインスタンスで試してみましょう。

AWSインスタンス上でCutyCapt

仮想的なX環境とCutyCaptを利用してサーバサイドでも簡単にキャプチャは実行できそうですが、ひとつだけ厄介な問題があります。
「普通のLinuxサーバには通常プロポーショナルな日本語フォントなぞインストールされていない」という問題です。つまり、日本語も含めてWebページをそれなりにレンダリングするためにはOSのパッケージを取捨選択して必要なものを揃える必要があります。
Ubuntuの膨大なパッケージ情報の中からCutyCaptが日本語も含めて綺麗にレンダリングできる環境の設定…。
「無理！」
ということで大雑把にいきます。

AWSのインスタンスをUbuntu 14.04 LTSから作成して下記のようにえいやっと。

$ sudo apt-get install ubuntu-desktop xvfb cutycapt

ubuntu-desktopパッケージはUbuntuのデスクトップ環境であるUnityであるとか、そのベースであるgnomeであるとかとにかく大量の関連パッケージを含んでおり、累計1.7GBものパッケージがインストールされるため実行中はコーヒーでも飲みに行って休憩するといいかもしれません。
途中でFirefoxやThunderbirdのような明らかにサーバに不要なものもずんずんインストールされて怖くなってきますが我慢します。あまり労力を払わずに整った日本語環境を手に入れるための試練です。明らかに不要なのにデカいものはあとで個別にremoveすりゃなんとかなりますって（汗

さて、実験。
標準では横幅800ピクセルでレンダリングされるので、ちょっと贅沢に「--min-width=1280」で試してみます。

$ xvfb-run --server-args="-screen 0, 1024x768x24" \
  /usr/bin/cutycapt --url=http://www.superdelivery.com/ \
  --out=superdelivery.png --min-width=1280

処理の内容を考えれば当然のことなんですが数秒の時間がかかります。

superdelivery

かなり綺麗なレンダリング結果が得られました。Ubuntuの整った多言語環境がサーバサイドでも力を発揮した瞬間です。
このクオリティで画像化できることがわかり十分に要件を満たせそうだと立証できました。