あっと気づけば、もう12月。忘年会のシーズンになりましたね。
飲みなどでハメを外すこともあるかと思いますが、程々に＾＾；
では、本題のjQueryのプラグインjsPlumbの紹介に入りたいと思います。
Web系エンジニアの皆様、Web上で画面遷移図を描いたり、樹形図を描いたりしたいと思ったことはありませんか？
「えっ、ないですって！？」
そのうち描きたくなると思うので、勝手に紹介させていただきます(笑)。
■jsPlumbを利用した遷移図サンプル
jsPlumbを利用すると、こんな図が簡単に描けます！
■pluginのダウンロード
今回は、以下のように、jsPlumbのデモサイトからjsを取ってきました。
$ wget http://jsplumbtoolkit.com/demo/js/jquery.jsPlumb-1.5.4-min.js
※ブラウザから上記のURLを叩いて、ファイルに保存しても大丈夫です。
■サンプルコード
sample.html
<!doctype html> <head> <title>jsPlumb sample</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> <script type="text/javascript" src="jquery.jsPlumb-1.5.4-min.js "></script> <script type="text/javascript" src="sample.js"></script> <link href="sample.css" media="all" rel="stylesheet" type="text/css"> <body> <div id="flow_area"> <div class="window" id="window1">Window1</div> <div class="window" id="window2">Window2</div> <div class="window" id="window3">Window3</div> <div class="window" id="window4">Window4</div> <div class="window" id="window5">Window5</div> <div class="window" id="window6">Window6</div> <div class="window" id="window7">Window7</div> <div class="window" id="window8">Window8</div> </div> </body> </html>
sample.js
$(function() {
var connection = [
['window1', 'window2'],
['window2', 'window3'],
['window1', 'window4'],
['window4', 'window5'],
['window1', 'window6'],
['window6', 'window7'],
['window7', 'window8']
];
window.jsPlumbDemo = {
init : function() {
var stateMachineConnector = {
connector:["Bezier", { curviness:70 }],
paintStyle:{lineWidth:3,strokeStyle:"#FFCC99",outlineWidth:1,outlineColor:"#FF9999"},
hoverPaintStyle:{strokeStyle:"#FF9999"},
endpoint:"Rectangle",
endpointStyle:{ fillStyle:"#FFCC99",lineWidth:1 },
anchor:["Right", "Left"],
overlays:"Arrow", {width:30, length:30}
};
for (var i = 0; i < connection.length; i++) {
jsPlumb.connect({
source:connection[i][0],
target:connection[i][1]
}, stateMachineConnector);
}
jsPlumb.draggable(jsPlumb.getSelector(".window"), { containment:"#flow_area"});
}
};
jsPlumb.ready(jsPlumbDemo.init);
});
sample.css
/** ELEMENT POSITIONS **/
#window1 {top:30px;left:30px;height:500px;}
#window2 {top:30px;left:280px;height:100px;}
#window3 {top:30px;left:530px;height:100px;}
#window4 {top:230px;left:280px;height:100px;}
#window5 {top:230px;left:530px;height:100px;}
#window6 {top:430px;left:280px;height:100px;}
#window7 {top:430px;left:530px;height:100px;}
#window8 {top:430px;left:780px;height:100px;}
#flow_area {
position:relative;
width:100%;
height:700px;
overflow:auto;
padding:30px;
}
.window {
position:absolute;
width: 120px;
border: 2px solid #ffcc66;
word-break: break-all;
padding: 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background: -moz-linear-gradient(top, #ffff99, #ffcc99);
background: -webkit-gradient(linear, left top, left bottom, from(#ffff99), to(#ffcc99));
}
■jsPlumbのデモサイト(English)
http://jsplumbtoolkit.com/demo/home/jquery.html
■jsPlumbのドキュメント(English)
http://jsplumbtoolkit.com/doc/home.html
■jsPlumbのAPIドキュメント(English)
http://jsplumbtoolkit.com/apidocs/
-------------------------------------------------------
jsPlumbは、日本語の記事が少ないので、上記スクリプト内の「stateMachineConnector」の部分をいくつか説明したい思います。
●connectors(線の種類)
Bezier｜Flowchart｜StateMachine｜Straightの4種類の指定方法があります。
Flowchartにすると以下のように表示されます。
http://jsplumbtoolkit.com/apidocs/jsPlumb.Connectors.html
●endpoints(終点の種類)
Blank｜Dot｜Rectangle｜Imageの4種類の指定方法があります。
Blankは終点無し、Dotは丸、Rectangleは四角、Imageは独自画像を入れられます。
独自画像を入れる場合は、以下のようにコードを書きます。
endpoint:["Image", {url:"endpointTest1.png"}]
http://jsplumbtoolkit.com/apidocs/jsPlumb.Endpoints.html
●anchors(線の起点・終点の場所)
Right｜Left｜BottomLeft｜Center｜Top・・・など多くの指定方法があります。
http://jsplumbtoolkit.com/apidocs/jsPlumb.Anchors.html
●overlays(マークの種類)
Arrow｜Diamond｜Label｜PlainArrowの4種類の指定方法があります。
マークの場所は、locationオプションで指定でき、0だと起点、1だと終点、0.5(default)だと線の中央に描画されます。
例)
overlays:"Arrow", {location: 1}
Labelは、以下のようなコードで入れられます。
例)
overlays:"Label", {width:30, length:30, label : "ラベル", location: 0.3}
http://jsplumbtoolkit.com/apidocs/jsPlumb.Overlays.html
紹介は以上になります！
