読者です 読者をやめる 読者になる 読者になる

ExcelのコネクタのようなことができるjQueryプラグイン【jsPlumb】

JavaScript
アドウェイズエンジニアのイシマルです。

あっと気づけば、もう12月。忘年会のシーズンになりましたね。
飲みなどでハメを外すこともあるかと思いますが、程々に^^;

では、本題のjQueryプラグインjsPlumbの紹介に入りたいと思います。

Web系エンジニアの皆様、Web上で画面遷移図を描いたり、樹形図を描いたりしたいと思ったことはありませんか?

「えっ、ないですって!?」

そのうち描きたくなると思うので、勝手に紹介させていただきます(笑)。

■jsPlumbを利用した遷移図サンプル

jsPlumbを利用すると、こんな図が簡単に描けます!

jsPlumb1

■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にすると以下のように表示されます。

jsPlumb2

http://jsplumbtoolkit.com/apidocs/jsPlumb.Connectors.html

●endpoints(終点の種類)

Blank|Dot|Rectangle|Imageの4種類の指定方法があります。

jsPlumb3

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種類の指定方法があります。

jsPlumb4

マークの場所は、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

紹介は以上になります!