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

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

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


今回の本題。

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

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

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

以前ほどではないものの、あまり激しいことをするとブラウザがハングアップ状態に陥りがちなのは同じ。いじめ過ぎないように、というのと、あと出来るだけエキスポート/インポートをこまめにやる使い方が CPU にもメモリにも「ネットワークにも」優しい。

ここに貼り付けたせせこましい状態じゃなく、Open Frame 使って広々遊ぶがいいよ。



Related Posts