SVG + VMLのJavaScriptグラフィックスライブラリ「Raphaël」
SVGは技術的に注目を集めていても実際に利用されている場面はそう見かけない。ブラウザ上でドローを描くだけであれば、画像で十分という話であるし、アニメーションを必要とするならFlashがあるからだ。かつIE6をはじめとするレガシーなブラウザで動作しないという最大の問題がある。
だがFlashに比べれば扱いやすく、テキストベースなのでシステムとの親和性も高い。また画像とは違いインタラクティブな動作ができる。そんなSVGの利用を推進するのがRaphaëlだ。
今回紹介するオープンソース・ソフトウェアはRaphaël、JavaScriptのグラフィックスライブラリだ。
RaphaëlはSVG、VML、JavaScriptを使ったグラフィックスライブラリだ。グラフやSVG、様々なオブジェクトを描き出すことができる。もちろんJavaScriptによって刻々と変化するアニメーションやマウスの動きによって動作をかえるような作りにすることもできる。
IE7での表示
多数のサンプルが登録されており、画像を回転させるものや、複雑なタイムライン、マウスに反応する円グラフ、範囲グラフ、時計、クリックで形を変えるオブジェクト、地図、マインドマップ風のオブジェクト表示などだ。どれもFlashや画像とは違う可能性を感じさせるものばかりだ。
もう一つの利点として、iPhoneのようなFlashをサポートしていないブラウザでも動作するということが挙げられる。実際、動作は若干遅くなるがiPhoneでも一部のデモが動作した。動作しないのはドラッグして形を変えるようなものだ。
対応ブラウザの多さもメリットの一つで、IE6以上、Firefox3以上、Safari3以上、Opera9.5以上から動作する。IE6は確認できていないが、IE7では問題なく動作した。次世代のWebを担う技術であるのは間違いないので、こうしたライブラリが多数登場することによってさらにその可能性が広がるのはとても面白い。
iPhoneでの実行結果
Raphaël—JavaScript Library
DmitryBaranovskiy’s raphael at master - GitHub