検索して云々出来るようになったからには。

検索して云々だけでなく、マウスオーバに反応したりして「関連ノードだけハイライトされた状態で見たい」なんてのは非常にありがちなニーズ。コアの cytoscape API だけでもそう大変なことでもない気はしないでもないんだけれど、せっかくあるので使おうかと。リンク元での説明はこう:

なんだけれど、この説明、おかしい気がすんのよね。search API なんていなそうなんださ:

CDN にいないようなのでダウンロードして使うしかなさそうだ、てこと以外は、「使い方で難しいところはない」と思うが、ただ instance.removeHighlights(eles) に eles を渡す使い方だけなんかうまくいってない。ワタシのミスなのか、バグなのか。

というわけで、これから進化させた「動くヤツ」:

show/hide はやってない。ちょっと、まだどう設計すれば使いやすいかみえてないので。

今回のヤツ以外の進化を色々してるが、cytoscape.js やらの技術ネタに関しては何かしらほかのとこで書いてる、はず。特にこれ。(あとレイアウトマネージャの種類を増やしてるが、CDN にいないのが多いので、これらもワタシのサーバにわざわざ置いて使ってる。cola が個人的にはいい感じかな。)

というか段々説明しないと「使い方」が明快じゃなくなってる気がするんで「遊び方」:

1. アニメの名前を検索ボックスに入れる
2. と、ヒットしたアニメが Tabulator の表に入る
3. 表からアニメを選ぶ
4. と、cytoscape なグラフにノードが追加される
5. node filters は、特定の条件に合致したものだけを cytoscape グラフノードに追加するためのフィルタ
6. node finder は、5. によって追加されている全ノードを対象に名前検索し、それに基いて「選択」したり「ハイライト」したりするヤツ (つまり今回のネタの主役)
7. Export the current view as PNG は…わかるでしょ
8. アニメのノードで右クリックして「query…」すると、そのアニメのキャラクターたちの(特に日本語名)情報を MAL に取得しに行って、キャラクターノードが展開される
9. キャラクターのノードの方で同じことをした場合は、「その声優が演じている全キャラクター」を開く(この場合、他の共演者についての情報もついでに取りに行っている)。

これまで少しでも遊んできた人はわかるかもしんないけど、あまり激しいことをすると、ブラウザがハングアップすることが結構あるのでね、「静かに」使ったほうがええよ。特に喜んでキャラクターを開きまくってると、MAL へのクエリ数も尋常ではない上に「大量のノード」が追加されていくのでね。

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