Webサイトのスクリーンショットを撮る方法

2024年4月
日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

posted by Junrei

2011 8月 7

Webサイトの改ざん監視を行い、改ざんされていた場合にWebサイトの画面のスクリーンショットを撮る事が出来たら、目視確認も出来て便利な気がする。
そもそもは、SERVER×SERVERという無料監視サービスで実施しているサービスだ。
ちょっと面白そうなので調べてみたところ、以下の手順でスクリーンショットを撮る事が出来る事がわかった。
　
１．仮想フレームバッファ（Xvfb）を使ってブラウザ（FireFox）を起動する
２．ImageMagick を使って上記ブラウザ（FireFox）の画面をキャプチャしスクリーンショットを撮る
３．ついでにスクリーンショットを縮小し、サムネイルを作る
　
参考にしたのは以下のサイトである。
　
●SimpleAPI の仕組みについて考察してみる
●Webサイトのスクリーンショットを撮るサービスの作り方
●XvfbとFirefoxとImageMagickでWebページのサムネイルを自動生成する方法
　
サーバOSは、CentOS 5.3 である。
　

　

システム要求

１．Xvfb
２．FireFox
３．ImageMagick
　
今回は、１、２はインストール済みなので、３のImageMagickのインストールを行う。
　

# yum install ImageMagick*

仮想フレームバッファ（Xvfb）とブラウザ（FireFox）の起動

Xvfb を起動する init ファイルを作成する。
ここでのポイントは、XVFB=/usr/bin/Xvfb のところで、実際に自分の環境にインストールされているXvfbのパスを指定するという点だろう。
　

# vi /etc/init.d/xvfb
#!/bin/bash
#
# chkconfig: - 91 35
# description: Starts and stops XVfb. \
#              used to provide virtual frame buffer.

# Source function library.
. /etc/init.d/functions

prog=$"Xvfb"

# Xvfb program
XVFB=/usr/bin/Xvfb

start() {
    echo -n $"Starting $prog: "
    daemon /usr/bin/Xvfb :1 -screen 0 1024x1024x24 &
    echo
}

stop() {
    echo -n $"Shutting down $prog: "
    killproc Xvfb
    echo
}

# See how we were called.
case "$1" in
  start)
        start
        ;;
  stop)
        stop
        ;;
  restart|reload)
        stop
        start
        ;;
  *)
        echo $"Usage: $0 {start|stop|restart}"
        exit 1
esac

exit 0

# chmod 755 /etc/init.d/xvfb # chkconfig --add xvfb # chkconfig xvfb on # service xvfb start

　
続いて、ブラウザ（FireFox）を起動する。
ここでのポイントは、プロファイルを作ることと、ディスプレイのサイズを指定することだろう。
以下の例では、webshotとしてプロファイルを作成しているが、名前は自由に変更してもかまわない。
ディスプレイサイズは、1024×1024にしているが、これも自由に設定してかまわない。
小さすぎるとサイトが1画面に収まらなくなり、途切れてしまうので注意が必要だ。
　

# export DISPLAY=:1.0

# firefox -display :1 -CreateProfile webshot

# mkdir /tmp/webshot/

# firefox -display :1 -width 1024 -height 1024 -P "webshot" &

ブラウザ（FireFox）の画面をキャプチャする

ここでは、PerlでImage::Magick を使ってブラウザ（FireFox）の画面をキャプチャし、スクリーンショットとサムネイルを作成する方法を紹介する。
簡単な仕様は以下の通りだ。

・入力：引数にサイトのURL（http://を含む）を指定する。
・出力：以下のファイルを出力する。
　　　　sample.png        　画面全体のキャプチャ画像
　　　　sample_thumb1.png 　ブラウザで表示された部分を抜き出した画像
　　　　sample_thumb2.png 　ブラウザで表示された部分のサムネイル

# vi snapshot.pl
#!/usr/bin/perl -w
use Image::Magick;

$ENV{DISPLAY} = ':1.0';
my $url = $ARGV[0] or die 'need url args..';
my $img_fname = 'sample.png';
my $thumb_fname1 = 'sample_thumb1.png';
my $thumb_fname2 = 'sample_thumb2.png';

`firefox -display :1 -remote "openurl($url)"`;

sleep(2);

`import -display :1 -window root -silent $img_fname`;

$img=Image::Magick->new;
$img->Read($img_fname);
$img->Crop('1004x884+0+120');
$img->Set(quality=>100);

$img->Scale( width=>1004, height=>884 );
$img->Write($thumb_fname1);

$img->Scale( width=>128, height=>128 );
$img->Write($thumb_fname2);

# chmod 755 snapshot.pl

　
では実際にPerlスクリプトを起動してみよう。
　

# ./snapshot.pl http://www.goo.ne.jp/

# ls -al
drwxr-xr-x 2 root root   4096  8月  6 19:40 .
drwx------ 8 rook rook   4096  8月  6 19:26 ..
-rw-r--r-- 1 root root 792714  8月  6 19:43 sample.png
-rw-r--r-- 1 root root 573997  8月  6 19:43 sample_thumb1.png
-rw-r--r-- 1 root root  54165  8月  6 19:43 sample_thumb2.png
-rwxr-xr-x 1 root root    577  8月  6 19:26 snapshot.pl

　
ちゃんとファイルが出力されている事がわかる。
　
出力されたファイルは、以下の通りだ。
　

図１：sample.png（画面全体のキャプチャ画像）
　

図２：sample_thumb1.png（ブラウザで表示された部分を抜き出した画像）
　

図３：sample_thumb2.png（ブラウザで表示された部分のサムネイル）