HTML5 Canvasと、FlashCanvasの話。

HTML5なんて言葉もいよいよ普通のものになってきた感がありますが、
対応ブラウザーのシェアを考えると、あと一歩の過渡期というところ。
でも最近、仕事で、これだったらいけるんじゃね？ってのがあったので
その辺の話を、ちょっと。

HTML5で新しく追加された要素のひとつに<canvas>があります。
これは、要はJavascriptでFlashみたいなベクターグラフィックスを描画できる
まさに絵を描くためのキャンバスとなる要素です。
既に、これを利用した様々なライブラリーが成熟してきていて、
Processingコードをブラウザー上で動作させられる「Processing.js」や、
データ配列を渡すだけで様々なグラフを柔軟に描ける「Flot」などがあります。

例えば、下のグラフ画像は、
JPEGやPNGなどの画像ファイルではなく、
「Flot」を使って、Javascriptで描いたグラフです。
サーバー側で、PHPなどでの画像生成プログラムを駆使しなくても、
ブラウザー側に配列のテキストデータを渡すだけで
十分なクオリティのグラフが簡単に作れてしまいます！

まあ、別にこれだけだったらたいしたことはないんですが、
<canvas>要素には、さらに「toDataURL」というAPIが用意されていて、
描画済みの<canvas>をPNGやJPEGなどの画像データに変換することができます。
ブラウザー側で描画した画像をサーバーに送ってPDF化に再利用、
なんてこともできちゃうわけですね。
ログイン領域内で頻繁にグラフ描画条件の変わる業務システムなんかで
非常に役に立つのではないでしょうか。

ところが残念なことに、現在ブラウザーシェアの大半を占める
InternetExplorer 6/7/8では、<canvas>に対応していません。
どうしよう？　というところで、現状いちばん役立つと思われるのが
「FlashCanvas」という、Flashで<canvas>の機能を実現するライブラリーです。
これは非常にすぐれもので、<canvas>の大部分の機能がIEでも使えるようになります。
上記のグラフも、IE6〜8環境ではFlashCanvasで描画されているはずです。

なお、一昔前だとこんな用途では「excanvas」がよく使われていましたが、
excanvasは上記のtoDataURLに対応していません。
過渡期の現状において、「FlashCanvas」は非常におすすめなライブラリーです！