Raphael.jsを勉強したいのでいろんなサイトまとめ

ちょうど金環日食の時だけ曇り空だったminamiです。皆さんはちゃんと見られましたか？

Webサイトでベクターデータを扱うのにとっても強力なRaphael.jsというライブラリがあります。何年か前からあるのですが、なぜか最近興味が出てきたので勉強できるサイトを調べました。

Rapahel.jsはJavaScript用のグラフィックライブラリで、比較的簡単な記述でSVGで扱うことができます。SVG非対応のIEの場合はVMLで表示してくれるのがミソで、IE6であっても同じ見た目を確保することができます！また、マウスイベントに関連付けたアニメーションも作ることができます。

ライブラリ自体は多少容量が重いのですが、他のライブラリに依存していないのでこれ単体で済んでしまうというのも強みではないでしょうか。ちょっといじっただけで値によって変化するグラフなんかも描くことができます。

棒グラフのサンプル

Rapahel.jsを勉強したい時のサイトいろいろ

そんな可能性に満ちているRapahel.jsですが、日本語のドキュメントがまだまだ少ないです。ちょっと調べた限りですが、備忘録的に記していきます。

• Raphaël—JavaScript Library

本家サイト。ドキュメントは結構しっかりしているのでこれを読むだけでだいたいの機能についてはわかります。

• jsdo.it

実際に動いているコードが見られるのでわかりやすい。アイデアも参考になります。

• RAPHAELIST
• Raphael.jsについていろいろと調べてみた
• Raphael.JS でテトリスみたいなゲームを作ろう！

貴重な日本語のエントリ。テトリスの作り方はRaphael.jsというよりJSの書き方の勉強にもなりますね。

• Raphaelを使ってIllustratorで書き出したSVGを表示してみる - Design: WoodTree

• raphael-svg-import

SVG書き出しができるillustratorと連携がうまくいかないものか？と思って調べた結果。普通にやるとイラレから吐き出されたSVGから変換が異様にめんどくさいですが、変換できるライブラリを公開している人がいました。なかなか未来があるかも！

まとめ

まとめられないくらい取っ散らかっていますが、Raphael.js、まだまだどんどん良くなる気がするので定期的に情報を集めていきたいと思います。