jQuery: Cytoscape.js お試せた18.001 (connectedNodes() とか)

アプリケーションは大進化を遂げたが cytoscape ネタはあまりない。

先にちょっと「誤解してたこと」から。makeLayout なんかドキュメントされとらんはウソでした。いたわ、ちゃんと。

今回の本題。

色々 cytoscape そのもののネタになりそうなことを夢想していたんだけれど、いざやろうとすると「おもしろくない」ものになっちゃってなぁ。

こんなことを考えていた:

エッジ選択で何かオイシイことをば
エッジをドラッグして動かすとノードも動くとか
「選択ノードだけ選んでレイアウト適用」の場所指定
やっぱし automove 的な気持ちのいい動きさせたいかなぁ

そうなんだけど特に 1.。これな、「エッジを選択して」みたところで、そこからユーザは何を期待するか、というのも今ひとつわからんし、実際エッジ選択で何をトリガーするべきかって、正直なんにも「エッジ固有のこと」って思いつかないんだよね。つまり「エッジに適用出来ることは多分ノードでも出来る」。そして「エッジ選択」は、ノード選択可能になってれば選択出来、こんな:

 1 // initialize cy
 2 var cy = window.cy = cytoscape({
 3     container: document.getElementById('cy'),
 4 
 5     // ...    
 6     autounselectify: false,
 7     selectionType: "additive",
 8 
 9     // ...    
10     style: cytoscape.stylesheet()
11         .selector("node:selected")
12         .css({
13             "border-style": "solid",
14             "border-color": "#47119e",
15             "border-width": 6,
16             "border-opacity": 0.7,
17         })
18         // ...
19         .selector("edge:selected")  // 「cascade」であることを忘れずに。つまり順番が大事。
20         .css({
21             "width": 8,
22         })
23         // ...
24 });

で「選択されてるぜっ」と自己主張出来て、これは「わかりやすい(読みやすい)」ものにはなるものの、そうしちゃうと今度は「じゃぁ選択状態なんだから何かうれしい操作が出来るんだべ?」というごく普通のユーザ心理が働いてしまい、「読みやすくなるだけ」がなんか許されない気分になっちゃう。

2. はおいしそうにも思うんだけれど、ただ、仮にエッジ上で「connected node を選択」出来るインターフェイスを用意するなら、あんましエッジで動かせても「特別な動きをしないなら」おいしくもなくなっちゃって。かといって「エッジで動かすときのスペシャルな動きってなんやねん」と。考えられるとすれば「ノードの距離を近づける・遠ざける」といったことくらいか? 4. も 2. と同質。実際「ほんとにおいしいのかなそれ」という、つまりアイディアが浮かんでない。

3. はシンプルにまだうまくいってない。これはもっと頑張ってみるかもしんない。

で、「「connected node を選択」出来るインターフェイスを用意」。多少バリエーションは考えられるけれど、シンプルに「ノード上・エッジ上での右クリック」でコンテキストメニューをトリガーしちゃうことに:

 1 var ctxm_menuItems = [
 2     {
 3         "id": "select_connected_nodes",
 4         "content": "select the connected nodes",
 5         "selector": "edge",
 6         "onClickFunction": function (event) {
 7             event.target.connectedNodes().select();
 8         },
 9         "hasTrailingDivider": true,
10     },
11     {
12         "id": "select_connected_nodes",
13         "content": "select the connected nodes",
14         "selector": "node",
15         "onClickFunction": function (event) {
16             event.target.connectedEdges().forEach(function(edge, _) {
17                 edge.connectedNodes().select();
18                 });
19         },
20         "hasTrailingDivider": true,
21     },
22     // ...
23 ];
24 cy.contextMenus({
25     menuItems: ctxm_menuItems
26 });

まぁ「cytoscape ネタ」としてはクソおもしろくもないわな。ドキュメントから素直に読めることしかやってないんだから。

というわけで、「新たな cytoscape ネタ」としては以上なんだけれど、ここまで作ってきた「声優関連図作り子ちゃん」は前回貼り付け時からは随分進化していて、簡単に言えば「少し(というか結構)動作が軽くなった」のと、「エキスポート/インポート」を用意した、の2つだけなんだけれど、まぁどちらの影響も全然大きいよ。(ソースも若干だけきれいにはなってるが、まぁまだまだ雑だ。)

なお、「エキスポート」は cy.json() とは全然無縁でやってる。書き出したいのはソレじゃなかったから。あとね、「jquery: bluebird を使って sleep」は入れてあって、無論「インポート」に関連してたんだけど、この措置を入れた後でコードを大整理して無駄を削ぎ落としたら、というか「合理的な振る舞いをするように」書き換えたら、なんかもう「sleep 措置なんかいらなかったんでは」てくらい一瞬でインポートが終わるようになっちゃった。まぁそんなもんだ、世の中。

てわけで:

フレームのソースを表示…、しても疲れるだろうけど、そうしたい人は頑張れ。(正直自分でも結構ツラくなりはじめてる。)

遊び方が少しだけ変わったので改めて説明:

一番左上のボタン
アニメの名前を検索ボックスに入れるか、もしくは「以前セーブしたデータ」インポート
- インポートからの場合:
  1. 参照でファイル入れたら「Import」ボタン
  2. と、cytoscape なグラフにノードが追加される
- 検索からの場合:
  1. ヒットしたアニメが Tabulator の表に入る
  2. 表からアニメを選ぶ
  3. と、cytoscape なグラフにノードが追加される
node filters は、特定の条件に合致したものだけを cytoscape グラフノードに追加するためのフィルタ
node finder は、3. によって追加されている全ノードを対象に名前検索し、それに基いて「選択」したり「ハイライト」したりするヤツ
フロッピーボタンがエキスポートね。2. でインポート出来るやつ。
Export the current view as PNG は…わかるでしょ
アニメのノードで右クリックして「query…」すると、そのアニメのキャラクターたちの(特に日本語名)情報を MAL に取得しに行って、キャラクターノードが展開される
キャラクターのノードの方で同じことをした場合は、「その声優が演じている全キャラクター」を開く(この場合、他の共演者についての情報もついでに取りに行っている)。
ノード、エッジ上での右クリックどちらからも「select the connected nodes」出来る。