Tech Sketch Bucket of Technical Chips by TIS Inc.

[JointJS入門]JointJSを使ってブラウザ上にフォルダ構成図を描いてみよう

Pocket

HTML5の登場によりCanvasやSVGなどを利用することでWebサイトやアプリでリッチな表現ができるようになってきています。しかし、CanvasやSVGを使って全て自前でグラフを描くのは大変なので、D3.jsなどのライブラリを使用してグラフや図を描くことが多いと思います。そこで、今回は「JavaScript Diagramming Library」であるJointJSを使い、ブラウザ上に図を書いてみます。

JointJSとは

JointJS はJavaScriptでダイアグラム描くことができるライブラリで、2014年5月16日時点では0.9.0となっています。JointJSは、「静的や動的なダイアグラムが作れるJavaScriptライブラリ」であると公式ページにて謳われています。JointJSは以下のように色々な図が表現可能になっています。

JointJSデモ ~Rappid A complete diagramming toolkit.~

jointjs_tutorial.png

JointJSでやりたいことのほとんどが凝縮されていると思われるデモ。
オブジェクトを置くだけじゃなく、色を変えたり回転させることも可能です。

JointJSデモ2 ~Petri Nets~

jointjs_demo.png

JointJSで動きを出しているデモ。図を描くだけじゃなくインタラクティブなものも作れることがわかると思います。
このようにJointJSを使用することで、SVGを利用した図を作成できます。

今回取り上げなかったサンプルや実際に試してみるための方法については公式サイトに チュートリアルデモ などがあるのでこれらのサイトをみると描ける絵のイメージがつかめると思います。

JointJSを使用するために

サポートしているブラウザ

サポートしているブラウザは以下のとおりです。

  • Google Chrome (モバイル版にも対応)
  • Firefox
  • Safari (モバイル版にも対応)
  • IE 9以降
  • Opera 15以降

今回はGoogle Chrome 34で動作確認をしています。

使用しているライブラリ

JointJSは以下のライブラリを使用しています。

ライブラリ 説明
jQuery JavaScriptライブラリ
jquery.sortElements.js DOM要素をソートするライブラリ
Backbone.js JavaScript MVxフレームワーク
lodash.js Underscore.jsをForkしたライブラリ。Backbone.jsで使用している

公式サイトからダウンロードすると上記ライブラリが全て入ったものがダウンロードされます。
今回は、この全部入りのJointJSを使用しますが、すでにjQueryやBackbone.jsを使用しているWebアプリにJointJSを組み込む場合などは、backbone.jsやjqueryが入っていないバージョンがgithub上にあがっているので使用を検討してみてください。

ライセンス

JointJSは「Mozilla Public License Version 2.0」のライセンスを採用しているため商用利用も可能です。

JointJSを使えるようにしてみる

それでは早速JointJSを使ってみましょう。公式サイトの チュートリアル を参考にまずはJointJSを使える環境を整えてみます。

フォルダ構成

フォルダ構成は以下のようにしました。

ソース

index.html

joint.min.cssとjoint.min.js、main.jsを読み込んでいます。
また、描画領域であるid="myholder"というdivを準備しました。

main.js

  • htmlファイルで準備した#myholderに600 × 200の領域を確保します。
  • 100 × 30のrectとrectのコピーであるrect2を300px右側に配置します。
  • rect1とrect2をリンクでつないでいます。

これで、ソースが完成したので動作確認してみましょう。

jointjs-sample1.png

このように、JointJSを使うことで簡単にブラウザ上に図を描くことが可能になります。

Joint.JSを用いてチュートリアル作成時のフォルダ構成を描いてみる

さて、チュートリアルを参考にして最低限の描画ができるようになったので、自前でViewを作成し簡単な絵を書いてみましょう。先ほど作成したJoint.JSのサンプルのフォルダ構成をJoint.JSを用いてをフォルダ構成を描いてみました。

完成イメージ
folderhtml.png

置き換えを推奨するほど簡単かつ綺麗に書くことはできませんでしたが、実装は以下のようになりました。

folder.html

先ほどとほとんど変わっていません。

folder.js

  • フォルダを描画する「makeFolder 」、ファイル名を描画する「makeFile 」、オブジェクト同士をつなげる「makeLink」を用意し、各関数内でgraphにaddCellするようにしました。
  • 各オブジェクト間の接続については、フォルダ構成っぽいLinkにするために例えばrootDirとlibDirをつなぐ場合に単純な直線でつなぐのではなく、rootDirのX座標とlibDirのY座標に点を作成しこの点を経由させることで直角のLinkを描くようにしています。

joint.shapes.folder.js

  • joint.shapes.folder.jsではfolder.jsで使用しているオブジェクトを定義しています。joint.shapes.basic.Genericをextendし、SVGのマークアップの定義や各要素のデフォルト値などを設定できるようにしています。
  • 今回はフォルダを表示するための「joint.shapes.composition.folder」とファイル名を表示するための「joint.shapes.composition.file」を作成しました。

テキストで書くより大変ですが、それなりに綺麗に見えますね。
今回のサンプルはgithubで公開してあります。

https://github.com/tech-sketch/joint-js-sample

まとめ

今回はJointJSの導入編としてフォルダ構成を作成してみました。今回のように静的な図を描くだけだと労力に見合わない感じもしないではないですが、Webサイトやアプリ上でインタラクティブに図を描きたい場合などではJointJSが活躍するシーンがあると思います。

当社でOSS公開した CloudConductor でまさに上記要件を満たすためにJointJSを使っているのでどんな使い方をしているのか見ていただけると幸いです。

エンジニア採用中!私たちと一緒に働いてみませんか?