ZAPAnet総合情報局 > ZAPAブログ2.0 > Webサイトのスクリーンショットを撮るサービスの作り方

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

2007年03月23日 プログラミングTIPS
SimpleAPIなどで有名な「Webサイトのスクリーンショットを撮ってサムネイル画像を作成してくれる」サービス。
SimpleAPIは、
「1人で作るなら、一気にやるのが重要」SimpleAPI・伊藤まさおさん
の伊藤まさおさんが一人で作っています。

今回は、各スクリーンショット提供サービスを紹介した後、実際にこのサービスを作る手順を検証し、さらなる応用サービスにつなげる方法を考えてみます。

Webサイトのスクリーンショットを撮ってサムネイル画像にしてくれるサイト

まずは、Webサイトのスクリーンショットを撮ってサムネイル画像にしてくれるサービスとして有名なサイトを紹介しておきます。
SimpleAPI - ウェブサイト・サムネイル化ツール
日本国内、海外からも大人気。ややサムネイル結果が不安定。
Mozshot
ページごとにきれいに出力。大規模利用は禁止。
サムネイルAPI
APIとして各種オプションに対応。
WebToJpeg - [ リアルタイムウェブページサムネイラ ]
IMGタグの場合は、ページのどこかにWebToJpegへのリンクを貼る必要あり。
はてなスクリーンショット
はてな内サービス用。
livedoor Screenshot
ライブドア内サービス用。
Thumbshots.org
クレジット明記の必要あり。
Amazon.com: Alexa Site Thumbnail
ドメインのトップページのみ。
追記:HeartRails Capture | サムネイル画像/PDF ファイル作成サービス
HeartRails Captureは、画像の生成が速くオプションの指定も多く便利。


サムネイル画像作成の動作予測

次に、どういった手順でサムネイル画像を生成しているかを予測してみます。
1.Webブラウザを起動する
2.スクリーンショットを撮りたいURLにアクセスする
3.スクリーンショットを撮る
4.画像を縮小する
5.名前を付けて画像を保存する
6.Webブラウザを終了する
大体このような流れになるだろうと考えられます。


Linuxで実現させる場合

Webサービスとして、Webサーバー上で動作させる方法として、まずはLinux系サーバーでの実現方法を考えてみます。
以下のような流れで実現できると思います。
1.仮想フレームバッファ(Xvfb)を立ち上げる
2.Webブラウザ(Firefoxなど)を起動させる
3.スクリーンショットを撮りたいURLにアクセスする
4.Image::Magickなどでスクリーンショットを撮り、縮小して名前を付けて保存する
5.Webブラウザを終了する
6.以上1〜5の動作を自動的に行うプログラムを作成して実行させる
自分で手作業でやる動作を全てサーバーに任せて、自動で実行させます。
Linux系サーバーの場合は、仮想フレームバッファ内でブラウザを起動させてスクリーンショットを撮るところがポイントです。
あらかじめ、Linux系サーバーにXvfb、firefox、ImageMagickなどをインストールしておく必要があります。
yumなどで簡単にインストールできるので、それほど苦労はしないと思います。

問題点としては、1回1回Webブラウザの起動・終了を繰り返していくと、サーバーに負担がかかりすぎるところがあります。
リクエストはある程度ためてから、一気に画像生成していった方が良いかもしれません。
Webブラウザに何を使うかで、生成される画像も変わってきます。

参考になるサイトも紹介しておきます。
実際のソースコードなども公開されています。
Linuxサーバー環境でのサイトサムネイル化:PHPで実行
SimpleAPI の仕組みについて考察してみる :: Drk7jp
Pink cc Online - webnail - webサイトをサムネイル化
yukotan hour: 「SimpleAPI」 みたいなことがしたい
Studio MOYO:Xvfb - 仮想フレームバッファ
人力検索はてな - WEBページのサムネイル画像をサーバーサイドで動的に生成する方法を探しています。
[J] サーバー側でWEBサイトのスクリーンキャプチャ、サムネイルを作成する方法 - Jamz (Tech)
RubyGecko - Ruby-GNOME2 Project Website
khtml2png - Make screenshots from webpages


Windowsで実現させる場合

次にWindowsで実現させる方法を考えてみます。
実はLinux系サーバーよりもWindows系サーバーの方が、Webサイトのサムネイル画像作成には向いているとも言えます。
日本では圧倒的なシェアを誇るIEでスクリーンショットを撮れるところもポイントです。

Windowsの場合は、今から3年以上前にたつをの ChangeLog / 2003-10-28で紹介されていたurl2bmpや、高機能なCrenaHtml2jpgなどを使ってコマンドラインから動作させるのが簡単です。
はてなスクリーンショットでも、専用のWindowsマシンでCrenaHtml2jpgを利用してスクリーンショットを作成しているようです。
2006年6月時点の情報として、「Windowsマシン2台で毎分120枚、1日17万枚撮影」していたようです。(【日本Rubyカンファレンス2006】はてな,Webのスクリーンショットを作成/表示するサービスをRubyの分散オブジェクトとRuby on Railsの組み合わせで実現:ITproより)


参考になるサイトを紹介しておきます。
ダウンロード・CrenaHtml2jpg WEBページをサムネイル画像に!
技術情報メモ HTMLのサムネイル化-Windowsで実現する
url2bmp
URL2JPEG
url2bmp: blog.bulknews.net
php+url2bmpでページのスクリーンキャプチャをwebで提供:phpspot開発日誌
phpとurl2bmpでスクリーンキャプチャサーバ - phpspot
ABCDrawHTML - free HTML render and thumbnail component for ASP and .NET
spiritlooseのはてなダイアリー - Plagger で取得した記事のスクリーンショットを出力する
はてな、Webスクリーンショットを作成/表示するサービス - ニュース - nikkei BPnet


OpenCVと組み合わせる

そのサイトのスクリーンショットを撮るだけではなく、OpenCVなどと組み合わせるとまた違ったサービスができあがります。
顔にエフェクトをかけてプライバシーを守るWebサービスの作り方
で解説したように、スクリーンショットを撮るサイトに人の顔が映っていたら、モザイクをかけてプライバシーを守るような使い方もできます。
また、全く逆の考え方で、人の顔が映っているサイトだけを次々にキャプチャしていくことなどもできます。
人の顔に限らず、OpenCVの機能を使えば様々なサービスにつなげられると思います。


スクリーンショットを利用して、他のサービスを考える

Webサイトのサムネイル画像を利用して、もっともっと他のサービスを考えてみるのも良いと思います。

例えば…
自分がアクセスしたページのサムネイル画像を次々に生成していって、Webサイトの足跡アルバムを作ってみる
画像解析して、何かの研究・サービスに結びつける
サムネイル画像に文字やQRコードなどを埋め込んでみる
サムネイル画像を動画GIFにして広告などを表示してみる
サムネイル画像バトラーで対戦を楽しんでみる
これは今適当に考えてみた一例ですが、他にももっと楽しい活用方法があると思います。
サーバー資源に余裕のある方は、「Webサイトのスクリーンショットを撮るサービス」を応用して、ぜひいろいろとチャレンジしてみてください。