XvfbとFirefoxとImageMagickでWebページのサムネイルを自動生成する方法

linux

いまさらながら感がありますが、XvfbとFirefoxとImageMagickを使って、Webページのサムネイルを作成する方法をまとめてみます。環境はVMWare上のUbuntuですが、インストールのところ意外はLinux系OSだと共通にできると思います。

概要

Xvfbで仮想フレームバッファ(X画面)を生成して、そこでFirefoxでサムネイルを生成したいWebページを開いて、画面キャプチャをします。キャプチャすべきURLをリストしたテキストファイルを元に、どんどん画像をキャプチャしていき、さらに画像を縮小してサムネイル化します。

環境

  • Vista SP1 + VMWarePlayer2.0.3
  • Ubuntu 7.10 (いろいろ手間を省くためにVMWare用のイメージを利用)

インストール

Synapticで以下のパッケージをインストールします。

Firefoxはプリインストールされているはず。ついでに

  • libgraphics-magick-perl
  • libgraphicsmagick1
  • perlmagick

Firefox設定

まず、キャプチャ用のプロファイルを作成します。

firefox -createprofile webshot

~/.mozilla/firefox/　以下にwebshotのプロファイルが生成されます。一旦、すべてのFirefoxを終了して

firefox -profilemanager

でプロファイルwebshotを選択してFirefoxを起動。URL欄にabout:configと入力して以下の設定項目をfalseにする。

browser.sessionstore.enable
browser.sessionstore.resume_from_crash

これにより起動時のセッション復元ダイヤログを非表示にすることができます。

Firefoxのセキュリティ警告の類はすべてオフにしておきます。
メニューから、設定＞セキュリティタブ＞警告メッセージの設定
からチェックボックスをオフにします。

Firefoxのウィンドウサイズが起動パラメータの-widthと-wheightでうまく指定できないときには、プロファイルディレクトリの下のlocalstore.rdfの以下の項目を修正

  <RDF:Description RDF:about="chrome://browser/content/browser.xul#main-window"
                   sizemode="normal"
                   screenX="0"
                   screenY="25"
                   width="1024"
                   height="1024" />

まずは手動キャプチャ

export XAUTHORITY=./Xauthority DISPLAY=:1
xauth add :1 . > /dev/null 2>&1 
Xvfb :1 -screen 0 1024x1024x24 &
firefox -display :1 -width 1024 -height 1024 -P "webshot" &

これで仮想ディスプレイ:1にFirefoxが立ち上がっているはずなので、続けて以下のコマンドを実行

firefox -display :1 -remote "openurl(http://www.yahoo.co.jp/)"
import  -display :1 -window root -silent sample.png

これで、sample.pngに仮想ディスプレーをキャプチャしたものを得られます。

Perlスクリプトでサムネイル生成を自動化

標準入力から読み込んだURLを繰り返しキャプチャして、ImageMagickでサムネイル生成用を、以下のPerlスクリプトで行います。

#!/usr/bin/perl -w
use Image::Magick;

$ENV{DISPLAY} = ':1.0';
my $img_fname   = 'sample.png';
my $thumb_fname = 'thumb.png';

while (1) {
    my $url = <STDIN>;
    if ( !defined($url) ) {
        last;
    }
    chomp($url);
    my $encodedurl = URLencode($url);
    warn "Processing " . $url;

    #長いURLとかはnextしてスキップ
    mkdir $encodedurl, 0777 or next;
    my $thumb_path = $encodedurl . "/" . $thumb_fname;

    `firefox -display :1 -remote "openurl($url)"`;
    sleep 10;
    `import -display :1 -window root -silent $img_fname`;

    #ImageMagickで切り取り＆縮小
    $img = Image::Magick->new;
    $img->Read($img_fname);
    $img->Crop('1008x932+0+92');
    $img->Set( quality => 90 );
    $img->Scale( width => 128, height => 128 );
    $img->Write($thumb_path);
}
1;

sub URLencode {
    my $URLencode = shift;
#    $URLencode =~ s/([^0-9A-Za-z_ ])/'%'.unpack('H2',$1)/ge;
    #JavascriptのencodeURIComponentに対応するため16進数は大文字　(2008/5/3追記)
    $URLencode =~ s/([^0-9A-Za-z_\. ])/sprintf("%%%02X", ord($1))/ego;
    $URLencode =~ s/\s/+/g;
    return $URLencode;
}

適当なファイル名で保存して実行すると、標準入力で指定したURLをエンコードしたディレクトリ名以下にサムネイル画像が生成される。


その他注意すべきことなど

xvfb起動時の

Could not init font path element /usr/share/fonts/X11/cyrillic, removing from list!

はとりあえず気にしない

xauthがないと、firefoxを実行したときに以下のエラーが表示される

AUDIT: DAY MON DD HH:MM:SS YYYY: 22292 Xvfb: client 1 rejected from local host (uid 1000)
Xlib: connection to ":1.0" refused by server
Xlib: No protocol specified

参考

SimpleAPI の仕組みについて考察してみる - drk7jp

http://pink.cc/archives/2006/07/webnail_web.html