柔軟なレイアウトを提供する「yFiles.NET」の紹介及びサンプルの動作手順
【１】 概要
- Microsoft VisualStudio の C# (.NET) 環境にて、Windows フォームに基づくアプリケーションを開発するためのライブラリーを提供します。
グラフ、ダイアグラム、ネットワーク図の分析や可視化機能に特化したアプリケーションを作成できます。
【２】 特徴
1) グラフの解析と自動最適レイアウト機能
グラフや、ダイアグラム、ネットワーク図の作成時、以下のような強力な解析機能を提供します。それは、最短経路探索やスパンニング・ツリー・アルゴリズムなどです。通常のコーディングでは、多くのステップを必要としますが、yFiles.NET ではシンプルな関数として容易に実現することができます。
階層構造、直交レイアウト、円環状レイアウトなどの多様なレイアウトを提供します。また、種々のレイアウトを組み合わせて、洗練された簡潔なレイアウトを実現できます。
yFiles.NET のルーティング機能により、グラフ要素間の接続を最適化したり、よりスッキリした結線を可能にします。
2) グラフ属性に対する強力なコントロール機能
Windowsフォームに対して、豊富なコントロールを提供します。その結果、ダイアグラムを直感的に操作できます。
マウスによるシンプルな操作で、ダイアグラムの属性を容易に編集できます。
以下のような種々の編集機能を提供します。
- ズームによる拡大・縮小
- 編集操作の取消・再実行 (UNDO/REDO)
- クリップボード機能(カット、コピー、貼り付け)
- エクスポート (画像として保存) や印刷機能
【３】 応用事例
1) ドキュメント管理
ドキュメント管理
 |
- 階層構造を持ったツリー・ビューにより、多種のドキュメントを系統的に管理できます。
CSVファイルやデータ・ベースから読み出したデータをツリー・ビューに渡すことができます。
- ツリー・ビューの階層の並びをメニューから指定できます。
- ツリー・ビューの各要素は、フォルダー (青色、オレンジ色) とファイル (緑色)
です。
- フォルダーは展開された状態 (青色) と縮退した状態 (オレンジ色) で表現されます。
また、そのフォルダーに含まれる要素数が () 内の数字で示されます。
- ファイルに添付データがある場合は、添付データの形式に対応したアイコンが付加されます。
例えば、PDF、エクセル、ワードなどです。
このアイコンをクリックすると、添付データに対応したビュワーが起動されます。
2) ネットワーク・システム管理
ネットワーク・システム管理
 |
- ネットワーク・リソースの構成を管理したり、個々の構成要素の状態を監視したりできます。
- データ・ベースより読み出したデータに基づいて、ダイアグラムを描画します。
- 各構成要素の状態は、データ・ベースより逐一更新して、異常状態を素早く通知できます。
- 構成要素をいくつかのグループに分けて、各グループ毎に展開したり縮退させたりできます。注目するグループだけを展開して表示することにより、システムの管理を効率良く行えます。
- 各構成要素の属性を確認したり、内容を更新したりして管理できます。
3) ビジネス・ワーク・フロー管理
ビジネス・ワーク・フロー管理
 |
- ビジネス用のワーク・フローを定義して、その進捗を管理できます。
- ワーク・フローの各ノードの状態に従って、ノード属性 (形状や背景色など) を更新することにより、視覚的にワーク・フローを管理できます。
4) データベース・スキーマの可視化
データベース・スキーマの可視化
 |
- データ・ベースを構成するテーブルの定義 (スキーマ) を可視化できます。
- 複数テーブルに関連する複雑な定義をダイアグラム的に可視化することによりテーブル相互の関係を明確に把握することができます。
- 種々パラメータの条件設定を変更して、テーブル間の詳細情報を簡潔なダイアグラム上の変化として表示できます。その結果、テーブル間の相互関係を把握することができます。
5) ソフトウェア・モジュール間の依存関係の可視化
ソフトウェア・モジュール間の依存関係の可視化
 |
- 大規模ソフトウェアは、通常多くのモジュールで構成されます。その多くのモジュール間の複雑な依存関係をビジュアルなダイアグラムとして可視化します。
- 特定のモジュールを修正した時に影響するモジュールを把握することで、システム全体の信頼性を高めることができます。
【４】 多くの有用なサンプル・コード
yFiles.NET をインストールすると、以下の２つのフォルダーがあります。
- yFiles.NET4 ... システム・フォルダー
- yFiles.NET4_Samples ... サンプル・フォルダー
サンプル・フォルダーに、45個の有用なサンプル・コードがあります。そのいくつかを以下に紹介します。
1) Demo.yFiles.GraphEditor
(フォルダー： yFiles.NET4_Samples／demos／yEd.NET／)
- [ファイル／ビュー] メニュー
グラフ、ダイアグラムをロードして表示できます。
グラフを拡大・縮小したり、要素 (ノード、エッジ) の属性値を確認できます。
- [編集] メニュー
グラフの構成や、要素の属性値をグラフ・データ上で修正し更新できます。
ノードやエッジの各々の一覧から任意の部品を選択して、繋ぎ合わせて新しいグラフ、ダイアグラムを作成できます。
- [レイアウト] メニュー
10種類のレイアウト・モデルが用意されています。各レイアウト・モデル毎に多様なパラメータを持っています。
グラフ全体または任意の範囲に、このレイアウト・モデルを適用できます。
- [ツール] メニュー
パラメータに従って、グラフ (ダイアグラム) を自動生成します。
ポートやエッジに対するレイアウト上の制約を設定できます。
- [ウィンドウ] メニュー
４つのウィンドウ (全体図、属性値表示など) を制御します。
- [グルーピング] メニュー
複数要素をグループ化したり、解除ができます。階層化されたグループの作成も可能です。
- [ヘルプ] メニュー
クィック・リファレンスが表示されます。
５種類の特徴を持ったサンプル・グラフ (ダイアグラム) が用意されています。
2) Demo.yFiles.Graph.Viewer
(フォルダー： yFiles.NET4_Samples／demos／GraphViewerDemos／)
８種類のサンプル・グラフが用意されています。
- Computer-network ...ネットワーク構成図、ノードに画像を適用する例です。
- Movies ... SHIFT+クリックで、詳細ダイアログが開く例です。
- Family-tree ... 'FamilyTree' レイアウターを用いている例です。
- Hierarchy ... 'Hierarchical (階層構成)' レイアウターを用いている例です。
- Nesting ... CTRL-SHIFT+クリックで、グループの内部に入る例です。
または、１つ前の階層のグループに移動する例です。
- Social-network ... 'Organic' レイアウターを用いている例です。
- Uml-diagram ... 'DirectedOrthogonal' レイアウターを用いている例です。
- Large-tree ... 要素数が膨大 (パフォーマンス計測用) な場合の例です。
3) Demo.yFiles.Graph.OrgChart
(フォルダー： yFiles.NET4_Samples／demos／CompleteDemos／)
４つのパネル構成を持った例です。
- Main Panel ... グラフ、ダイアグラムを表示します。
- OverView ... 全体俯瞰図を表示します。
- Structure ... ノード構成用のツリーを表示します。
- Details ... 詳細情報を表示します。
各パネルで、マウスや複数キーの組合せが種々の機能に割り当てられています。１つのパネルでの操作によって、他のパネルの表示内容が連携して変化します。
4) Demo.yFiles.Graph.Collapse
(フォルダー： yFiles.NET4_Samples／demos／CompleteDemos／)
下記機能の例です。
- ツリー・ビューの各枝を展開、または縮退した状態で表示できます。
- マウスのクリックで、各枝の展開・縮退した状態をトグルできます。
- ノードに属性を追加したり、アイコンを付加できます。
- ツリー・ビューのノードに対して、リーフ(葉)の判定を行い、属性値を変更できます。
(例えば、リーフの場合、背景色を緑色にしたり、特別なアイコンを付加することができます。)
5) Demo.yFiles.Graph.IncrementalHierarchicGrouping
(フォルダー： yFiles.NET4_Samples／demos／CompleteDemos／)
下記機能の例です。
- グループ・ノードに対する操作が直感的に行えます。
"＋アイコン" をクリックすると、グループを開きます。
"－アイコン" をクリックすると、グループを閉じます。
グループの開閉動作が、アニメーションを伴って行われます。
- グループ・ノードも含めた状態で、全体として統一のとれたレイアウトが行われます。
- 'Hierarchical (階層構成)' レイアウターを用いています。
6) Demo.yFiles.Graph.SimpleCustomStyle
(フォルダー： yFiles.NET4_Samples／demos／StyleDemos／)
下記機能の例です。
- 以下のようなグラフの構成要素に対して、種々のカスタマイズが行えます。
ノード、エッジ、ラベル、ポート(ノード接続点)、エッジの矢印
- [Modify Selected Nodes] ボタンで、ノードの色を変更します。
- ノードから出るエッジの色は、ノードの色に従います。
- エッジを選択すると、一時的にハイライト色表示します。
- グラフを拡大すると、ラベルに '修正アイコン' が付加され、このアイコンをクリックすると、ラベルの文字列を変更できます。
- グラフ全体を XML データとして保存できます。
【５】 開発環境の設定とサンプルのコンパイル
1) yFiles.NET のインストール
2) コマンド・ライン用のアプリケーションのコンパイルと実行
- "Microsoft Visual C# 2010 Express" を起動します。
- プロジェクトを開きます。
"ファイル(F)-> プロジェクトを開く(P).." を実行します。
--> [プロジェクトを開く] ダイアログが起動します。
demos\AlgorithmsOnlyDemos\Demo.Base.Graph\ フォルダーに存在する Demo.Base.Graph.csproj を開きます。
※ もしも、図のようなダイアログが表示された場合は、[OK] を押して下さい。
・ソリューションを保存するダイアログが表示されますので、[保存(S)] を押して下さい。
- コンパイルと実行を行います。
・メニューの "デバッグ(D)-> ソリューションのビルド(B)" を実行します。
--> 出力欄に [ビルド：正常終了] のメッセージが出ます。
該当するフォルダーに、２つのフォルダーと２つのファイルが生成されます。
Demo.Base.Graph.sln
Demo.Base.Graph.suo
obj/
bin/
・メニューの "デバッグ(D)-> デバッグ開始(S)" を実行します。
--> グラフに対する種々の操作を行い結果が表示されます。
3) GUIを用いたアプリケーション
- プロジェクトを開きます。
・"ファイル(F)-> プロジェクトを開く(P).." を実行します。
--> [プロジェクトを開く] ダイアログが表示されます。
demos\CompleteDemos\Demo.yFiles.Graph.Collapse\ フォルダーに存在する
Demo.yFiles.Graph.Collapse.csproj を開きます。
・ソリューションを保存するダイアログが表示されますので、[保存(S)] を押して下さい。
以下のようにソース(GraphCollapseForm.cs) とそのデザイン(フォーム)を表示できます。
- コンパイルと実行を行います。
・メニューの "デバッグ(D)-> ソリューションのビルド(B)" を実行します。
--> 出力欄に [ビルド：正常終了] のメッセージが表示されます。
該当するフォルダーに、２つのフォルダーと２つのファイルが生成されます。
Demo.yFiles.Graph.Collapse.sln
Demo.yFiles.Graph.Collapse.suo
obj/
bin/
・メニューの "デバッグ(D)-> デバッグ開始(S)" を実行します。
--> アプリケーションが起動し、サンプル・グラフが表示されます。
