2010/12/01

Webサイトのサムネイルを撮ってBase64で返すWebサービスつくりました

サーバーサイドでのWebページレンダリングについて調べていたらいつの間にかつくっていました。Base64形式でサムネイルを出力してくれるものは今のところ見当たらなかったので、便利かな。

こちらです!
※負荷がかかった場合にうまくリクエストを捌けないバグがあり、うまく動いていないかもしれません。申し訳ないです。対策中です。

こんな感じのものが撮れます。



使い方
URLをテキストボックスに入力して、Sendボタンを押してしばらく待つと、テキストエリアに何か出力されます。エラーメッセージっぽい場合は無視してください。正しそうならテキストエリアをまるごとコピーしてHPなりブログなりに貼り付けると、うまく画像が表示されるはずです。

内部仕様
使用しているブラウザ : Firefox4 beta7 (en)
フラッシュプラグイン   : Adobe Flash Player 10.2 beta

どんなことをしているか
Xvfbで仮想フレームバッファをつくり、その上でFirefoxを動かし、スクリーンショットを撮って適当に加工してサムネイル化しています。

似たようなサービス
SimpleAPI
IgWebCap
Mozshot
websnaper
2010/12/01現在、僕が試したところ、上記のサービスはあまりうまく機能していませんでした。多分リクエストが多くて負荷が高いのでしょう。
それに加えhttpsに対応していなかったり複雑なURLを送信すると、思ったとおりの結果が得られません。
上記のサービスはサーバー側で画像を一定期間保存するため、サーバーの容量への負担が大きく、また貼りつけ先からのGETリクエストにも答えなければなりません。
拙作のモノはBase64で出力するので、サーバー側で画像を貯めておく必要はありません。

余談
実はこのサービスはNode.jsでのCanvas共有アプリに、書いた絵を保存する機能を付けることを目的にしてできた副産物です。現在のCanvas共有はクライアントから送られてきたデータをそのままサーバーに保存するため、任意のpng画像がサーバーに送り込まれてしまう脆弱性が存在します。事実、公開初日に何者かによりイーノックさんの画像が送り込まれてしまいました。その脆弱性を解消するべく考案したのが、サーバーサイドでのHTMLレンダリング、というわけです。そいういわけでブラウザにはWebSocketおよびWebWorkersに対応したFirefox4betaを選びました。

ご本尊はhttp://etsukata.com/web2img/w2i.plであり、それにたいしてXHRでリクエストをおくっています。サーバーの処理能力に余裕があったらレスポンスヘッダにAccess-Control-Allow-Origin: * を追加してみなさんに使ってもらえるようにしたいと思っています。


参考
pomo123の日記
http://d.hatena.ne.jp/pomo123/20080430/1209532590
The "data" URL scheme - RFC 2397
http://tools.ietf.org/html/rfc2397

0 件のコメント:

コメントを投稿