家系図、ER図、UML。JavaScriptでダイナミックに図を描く「Joint」
JointはUMLや家系図、ER図などをダイナミックに描くJavaScriptライブラリ。
JointはJavaScript製のオープンソース・ソフトウェア。Webでは簡単に表現できることから、テキストベースでのコンテンツが多い。だがテキストに溢れたWebサイトというのは見ていて疲れてしまうものだ。グラフがあるとインパクトも大きい。
家系図
だがデータベース等にあるデータをWeb上で表現するのは大変で、サーバ側での何らかのライブラリが必要になるケースが多い。そこで使ってみたいのがJointだ。
JointはJavaScriptで図を描くライブラリで、多彩な種類に対応している。例えば家系図、ER図、各種UML、DEVS、ペトリネットなどだ。さらにオブジェクト同士の接続方法も多様に用意されており、直線や曲線など多彩にある。接続を指し示すときの矢印すら数多い。
マウスで動かせる
さらに面白いのはJavaScriptでダイナミックに描いているのでマウスでのドラッグアンドドロップに対応しているということだろう。接続されているオブジェクトは連携して動く。データはJSONを使っているが、描いた図はSVGとして出力できる（対応ブラウザでないといけない）。
サポートブラウザはFirefox 3.0以上、Safari 3以上、Opera 9.5以上、Google Chrome 4以上そしてIE6以上と幅広い。描ける図は特定のものに限定されるが、対応していればとても便利に使えるライブラリだろう。
[s2If current_user_can(access_s2member_level1)]
クラス図（プレミアム限定）
[/s2If]
[s2If current_user_can(access_s2member_level1)]
こんな複雑な図も（プレミアム限定）
[/s2If]
[s2If current_user_can(access_s2member_level1)]
矢印（プレミアム限定）
[/s2If]
[s2If current_user_can(access_s2member_level1)]
ラベル（プレミアム限定）
[/s2If]
[s2If current_user_can(access_s2member_level1)]
線（プレミアム限定）
[/s2If]
MOONGIFTはこう見る
Jointを使うメリットとしてはクライアントサイドでレンダリングさせることによってサーバ側の負荷が全くないということだ。分散処理をさせるためにもこれはとても有効だ。サーバ側ではJSONファイルのみ管理しているので、ユーザが動かしたデータをそのまま保存しておけばまた利用できる。
サーバサイドで画像を生成する方式ではサーバの負荷はもちろん、ユーザの操作によるオブジェクトの変形をサポートできない。その意味でどんどんクライアントサイドで図を描けるようにすべきだろう。JointはIE6.0からサポートされる、今後この手のライブラリは需要が伸びそうだ。