―XMLHttpRequestでcyRESTを叩く―Cytoscapeさて、Cytoscape関係の4本目です。Powershellで叩く話を書きましたが、セキュリティ設定なんかの関係で、たとえば他の人に使ってもらいたい時には不便です。あと、GUIが欲しいって時、PowershellでもGUIを作ることはできるようですが、そもそもPowershell自体使い慣れていないので、少し敷居が高いです。sutefu7.hatenablog.comそこで、面倒な環境構築が不要で、プラットフォームも気にせず使えるhtmlとjavascriptを使って、簡単にCytoscapeの拡張GUIを作る方法を思いついたので、ここで紹介します。APIを叩く方法さて、javascriptからHTTPリクエストを送るには、XMLHttpRequestという関数を使います。ファイルから、Webサーバー上のCyREST-APIを叩くような使い方もできます。developer.mozilla.orgさらに、CytoscapeからはJson形式の返事がくるので、Javascriptならそのままオプジェクトとして扱えます。Perturbation.cys」を使って、「選択中のエッジのEdgeBetweennessの合計値をリアルタイムで表示する」というGUIを作ってみましょう。非同期通信なので、1秒間隔でポーリングして、「ほぼリアルタイム」を目指します(Cytoscapeがツラそうだったら、もう少し頻度を下げます)。ソースコード解説はコードのコメントに書いてみました。タイトルの通り、ひとつのhtmlファイルにまとめてあるので、テキストエディタに張り付け、UTF-8のhtmlとして保存すれば動くはずです。お作法とかエラー処理とかは特に気にせず、とりあえず動くレベル。id="result">ここに結果が入ります。`選択中のEdgeは${response_body.length}本です。EdgeBetweennessの合計は${total_Betweenness}です。</script></body></html>動いた!htmlファイルをブラウザで開いてから、Cytoscapeでエッジを選択すると、すぐに集計結果が反映されます。1秒間隔でも十分なレスポンスです、呼び出し頻度的にも特に問題は無さそう。おまけ:ネイティブプラグイン風に表示するCytoscapeにはWebブラウザが内蔵されているので、そこでhtmlファイルを開いて、あたかも本体に組み込まれた機能のような見た目にしてみましょう。panel?」にチェックを入れます。それか、APIからの操作で開く場合はこう。"file://htmlファイルのフルパス"}するとこうなります、ちゃんとCytoscapeのウィンドウ内で動くので、まるでネイティブなプラグインのようです。まとめ今回は文字列を作って表示しただけですが、データさえ取れてしまえば、あとはもうjavascriptでやりたい放題です。集計結果をテーブル表示したり、chart.jsのような可視化ライブラリを使ってグラフを描いたりと、夢が広がりますね!misc.0o0o.orgそれじゃ、今日はここまで。...タイトルのまんまです。超ニッチな話だと思いますが、自分用の...2019-07-20ネットワーク可視化ツール「Cytoscape」で描いた大きな図を印刷する話—CyREST+Image...さて、またCytoscapeネタを1発。はてなブログPro物作りやガジェットの事を書いていきます。(1)検索スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。