ITエンジニア/デザイナ向けにオープンソースを毎日紹介

html2canvasはHTML5/Canvasを使って任意のWebサイトのスクリーンショットを作成するソフトウェア。

html2canvasはHTML5/JavaScript製のオープンソース・ソフトウェア。これはまた…非常に面白い、トリッキーなソフトウェアが出たものだ。Webサイトのサムネイル表示はニーズが高いサービスだ。単なるテキストではなく、サムネイルがあるだけでずいぶん華やかな表示になるからだ。


通常、その手の外部サービスを使う。自分で作るならばFirefoxやWebKitのレンダリングエンジンを使うだろうか。だがhtml2canvasは違う。JavaScriptだけでWebサイトのサムネイルを作ってしまう。

html2canvasのテクニックは簡単に言えばCanvasタグの中で独自のレンダリングエンジンを使って取得したHTMLを描き出すという方法だ。非常にマニアックで面白い。Canvasタグの中に描かれるのでクリックできそうな雰囲気もあるが、実際にはできない。


日本語も大丈夫

外部コンテンツをそのままでは取得できないので、Google App EngineをプロキシとしてJSONに変換して利用しているらしい。まだ対応していないタグもある他、JavaScriptやFlashは難しいようだ。まさに無茶しやがって、と言わんばかりのソフトウェアだ。


MOONGIFTはこう見る

確かにCanvasを使えば任意のデータを画像にすることができる。だからといってWebサイトをそのまま画像にしようというのは誰が考えるだろうか。非常にマニアックで面白い。プログラマの鏡とも言えるのではないだろうか。

再現率も意外と高くて面白い。Cookieには対応していないのでログインが必要なサイトでは取得できない。また色々な制限もあるだろう。だがこの無茶な感じがいい。クライアントサイドだけでスクリーンショットが作成できてしまうというのが面白く、技術的に興味がわくソフトウェアだ。

html2canvas - screenshots with JavaScript

デモ

niklasvh/html2canvas - GitHub

 

MOONGIFTの関連記事

  • DevRel
  • Com2