TWSNMPマネージャのメイン画面には、ノードの配置、状態を表示するマップ部分、ノードのリストを表示する部分、ログを表示する部分が必要です。ノードのリストやログは、HTMLで作ることができますが、マップは、そういうわけにはいきません。

マップの表示はどうする？

マップを表示するためには、次のようなことが必要です。

・ノードを示すアイコンを平面の任意の位置に表示する
・ノードの状態でアイコンの色を変える
・ノード間の接続を示すラインを表示する
・ノード間の接続状態で、ラインの色を変える
・ノードのアイコンをドラックして位置を変える
・ノードやマップの背景を右クリックしてメニューを表示する

普通のHTML/CSSだけでは、実現できないので、またまた、良さそうな図形描画ライブラリを探しました。見つけたのが、

p5.jsは、図形描画のためのソフトウェアProcessingのJavaScript版です。アート作品を作成するために使われることが多く、プログラマ向けと言うよりは、デザイナー、アーティスト向けです。なので、線を描く時は、line関数のように描画のための関数が直感的です。TWSNMPのマップを表示するために必要な描画関数がそろっていたので、簡単にデモ画面が作れました。

表示するアイコンをどうするか？

マップ表示のためのアイコンは、オリジナルのTWSNMPでは、Windowsのアイコンファイル（画像）を使っていました。画像の解像度が低いので、そのままだと、あまり綺麗ではありません。復刻版では、シンボルをフォントで提供している、

のフリー版をp5.jsと組み合わせて使うことにしました。

ログの表示をどうするか？

画面の下のほうにあるログ表示のためのテーブルは、普通にHTMLで表現しても実現できますが、沢山のログ（１００００件とか）を表示して、検索やソート（並べ替え）をしたいと思うと、もう一工夫必要です。このためには、

というJavaScriptのライブラリを使うことにしました。このライブラリは、ここ数年、いろんなプロジェクトで利用してきたもので、表示した表をExcelなどの形式でダウンロードすることができる優れものです。

だいぶ、画面が形になってきたので、操作イメージも見えてきました。私は、ソフト開発する時に、だいたい、中身の処理よりも、見える部分を先につくって、操作イメージがわかるようにしています。そこから、必要な内部の処理が見えてくるので、開発の効率がよいのではと思っています。

つづく