おはようございますまたはこんにちはまたはこんばんは。13のカイヤンです。
RPG王国、ひっさびさの更新ですね。申し訳ない。
後学期卒業研究で忙しかったつまり時間がなかっただけです。体調不良とかではないです。以上、言い訳でした。
さて、忙しかった理由案件であるツールと出会いました。それは
Windowsと言いましたがMacOSXでも大差ありません。Linuxは知りません。
ズームやスクロールの点でMacOSXで用いる方が便利(パッド上で簡単にスクロールできる)な感がありますが、Macでの便利さを知らなければWindowsで困ることはありません。
右側でノードを選び、ポチポチと置いておけばノードが置かれます。エッジの種類を選択しておき、ノードからノードへクリックしながらマウスポインタを動かすとエッジが結ばれます。ノードを選択して同様の動きをするとノードが動きますのでそのままドラッグを続けて好きなところでクリックボタンをリリースすればそこにノードを移動できます。このように極めて直感的にグラフを描いていくことができます。
ノードやエッジの種類も豊富です。
基本的な平面図形のノードもあれば、フローチャート図に用いる種々の形状あり、人物あり、コンピュータネットワーク向けのものなど様々なものが存在します。
さらに、自分で好きなものを追加することもできます。画像を用意しておけば簡単に追加できます。ここではhogeという項目で、ドット絵歩行グラフィックなテックちゃんがいます。
Current Elementsでは現在のグラフに存在するノードとエッジを記してくれます。
Group Nodesはノードをグルーピングして一つのノードとしてまとめることができます。
何ができるか
何ができるといえばグラフを描くんですけど、エディタの機能として何ができるのか。
それがLayout機能です。
Figure5-1 Layout機能Hierarchialはヒエラルキつまり階層構造の可視化に向いたレイアウトで、Organicはスパースにレイアウトしてくれます(何が有機的なんだろう)。Orthogonalはエッジを直角に曲げることを認めてレイアウトします。Circularは円の形状を目指します。他にもFigure5のように様々なレイアウト方法があります。
レイアウト機能を選ぶと、様々なパラメータを指定できます。例えばOrganicを選ぶと次のようウィンドウが出てきます:
画像に表示されているVisual以外にもパラメータを設定できます。アルゴリズムも素早さと精度どちらに重きを置くかを指定するなどができます。
マウスカーソルをLayoutに持っていき、そこからさらに選ぶのが億劫なこともあるでしょう。しかしFigure5にあるように、たいていショートカットキーが用意されています。コマンドを覚えていなくても使えるし、覚えていれば素早く使えるというのはやはり良いですね。
次の記事で実際に使った結果を紹介したいと思います。
Figure6-2 Geometric TransformationGeometric Transformationsは鏡映・回転・拡大縮小・平行移動の変換を施します。この変換を幾何学的という辺り、鏡映と回転と平行移動で重ね合わせられる相似な図形を同一視するタイプの幾何なんですかね。どんな同型を考えるかはさておき、上述した操作を施すのに役立ちます。回転は若干注意が必要です。これはグラフとして回転はしますが、ノードそのものは回転しません。つまり座標だけが回転してノードは正立したままになります。選択したノードだけを動かすこともできるのは、レイアウト機能の多くと同様です。
しかし悲しいかな、Toolsにショートカットキーがない……。エッジの反転くらいはショートカットしたいものです。
このPaletteを編集することができます。
Figure7 Pallete Manager
RPG王国、ひっさびさの更新ですね。申し訳ない。
後学期卒業研究で忙しかったつまり時間がなかっただけです。体調不良とかではないです。以上、言い訳でした。
さて、忙しかった理由案件であるツールと出会いました。それは
yEd - Graph Editor
というグラフ描画エディタです。
エディタ上で描かれたグラフは、poyo.graphmlという形式で保存されます。graphml形式はグラフの構造を記述するのに特化したxml形式です。
エディタ上で描かれたグラフは、上述の形式に限らずBMP,JPG,PDF,PNG,SVGといった形式にエクスポートでき、さらにHTML Flash Viewerという形式でウェブブラウザをUIとしてグラフを眺めることもできます。特に難読化はされていないので、簡単に埋め込むことができます。他にも次のような形式に出力できます:
概要
yEdはグラフ描画エディタです。一切プログラムを書くことなく、mspaintでとりあえず何か描く程度の極めて低い学習コストでグラフを描くことができます。エディタ上で描かれたグラフは、poyo.graphmlという形式で保存されます。graphml形式はグラフの構造を記述するのに特化したxml形式です。
エディタ上で描かれたグラフは、上述の形式に限らずBMP,JPG,PDF,PNG,SVGといった形式にエクスポートでき、さらにHTML Flash Viewerという形式でウェブブラウザをUIとしてグラフを眺めることもできます。特に難読化はされていないので、簡単に埋め込むことができます。他にも次のような形式に出力できます:
エディタのUI
Windowsで開いたエディタのUIは次のようになっています:Windowsと言いましたがMacOSXでも大差ありません。Linuxは知りません。
ズームやスクロールの点でMacOSXで用いる方が便利(パッド上で簡単にスクロールできる)な感がありますが、Macでの便利さを知らなければWindowsで困ることはありません。
右側でノードを選び、ポチポチと置いておけばノードが置かれます。エッジの種類を選択しておき、ノードからノードへクリックしながらマウスポインタを動かすとエッジが結ばれます。ノードを選択して同様の動きをするとノードが動きますのでそのままドラッグを続けて好きなところでクリックボタンをリリースすればそこにノードを移動できます。このように極めて直感的にグラフを描いていくことができます。
ノードやエッジの種類も豊富です。
基本的な平面図形のノードもあれば、フローチャート図に用いる種々の形状あり、人物あり、コンピュータネットワーク向けのものなど様々なものが存在します。
さらに、自分で好きなものを追加することもできます。画像を用意しておけば簡単に追加できます。ここではhogeという項目で、ドット絵歩行グラフィックなテックちゃんがいます。
Current Elementsでは現在のグラフに存在するノードとエッジを記してくれます。
Group Nodesはノードをグルーピングして一つのノードとしてまとめることができます。
何ができるか
何ができるといえばグラフを描くんですけど、エディタの機能として何ができるのか。 Layout
グラフを描くとき、目的によって様々なレイアウトが考えられます。できるだけスパースに散らばめたいときもあれば、樹形図・分岐樹として木構造を可視化したいときなどなど。その実装にさまざまな方法が考えられますが、yEdではコマンド一つでそれらを実現します。それがLayout機能です。
Figure5-1 Layout機能
レイアウト機能を選ぶと、様々なパラメータを指定できます。例えばOrganicを選ぶと次のようウィンドウが出てきます:
画像に表示されているVisual以外にもパラメータを設定できます。アルゴリズムも素早さと精度どちらに重きを置くかを指定するなどができます。
マウスカーソルをLayoutに持っていき、そこからさらに選ぶのが億劫なこともあるでしょう。しかしFigure5にあるように、たいていショートカットキーが用意されています。コマンドを覚えていなくても使えるし、覚えていれば素早く使えるというのはやはり良いですね。
次の記事で実際に使った結果を紹介したいと思います。
Tools
描いたグラフをいじったり解析したり、グラフを自動で生成したりするツールがまとまっています。Figure6-1 Tools機能
Create Graphは文字通りグラフを自動生成します。ツリーなどいくつかパターンがあるようです(何に使うんだろう)。Analyze Graphは作製したグラフを解析します。ノードやエッジの数、トポロジーとやらを調べられるようです。Reverse Selected Edgesは選択したエッジの向きを反転させます。いろいろな機能が並んでいますが、おそらくToolsで最も使うのはGeometric Transformationsでしょう。Figure6-2 Geometric Transformation
しかし悲しいかな、Toolsにショートカットキーがない……。エッジの反転くらいはショートカットしたいものです。
Palette Manager
EditのManage Paletteから行けます。PaletteはFigure4で上げたノードやエッジたちのウィンドウです。このPaletteを編集することができます。
Figure7 Pallete Manager
上でも少し述べた、好きなノードの追加というのはここで行います。画像はPNG,JPG,GIFがサポートされているようです[yEd Q&A 2011]。 New SectionからEmpty Sectionを適当な名前で追加します。FIgure7ではhogeやfugaという名前で追加されています。追加したSectionを選択し、Import Symbolsを左側でクリックします。適当な画像を選べば追加完了です。
英語のみですが、好きな単語で検索するとそのアイコンを探してきてくれます。例えばFigure8ではtorus(トーラス)で検索した結果です。気に入ったものがあればそれをImport Symbolsすることで指定したPalette Section(ここではfuga)に追加することができます。
何に使えるか
有向、無向を問わずグラフが使えるような場面は多いでしょう。もちろんゲーム製作においても。人物相関図、武器や防具の開発ツリー、モンスターの進化ツリー、マップ間のネットワーク……枚挙に暇がないでしょう。
次の記事で詳述しますが、冒頭で軽く触れたようにこのエディタで作製したグラフはgraphmlというグラフの構造を記述するのに特化したxml形式で保存されます。つまりxmlをパースできればgraphmlも簡単にパースできるのです。より一般のxmlをパースできるのだから形式が定まっているgraphmlは況や、ということです。
つまり次の流れです:yEdでグラフを描きます。それを(必要があれば適当な画像形式でエクスポートもしつつ)graphmlとして保存します。xmlとして(必要があれば拡張子を書き換えてから)パースします。パースしたらいろいろ処理ができます!
また、純粋にグラフをお絵描きするツールとしてmspaintなどそこらのお絵かきツールより簡単かつきれいに描けるでしょう。SAIやらイラレ やらといった高価なお絵描きツールと異なり、yEdはフリーソフトです。フローチャート図を描いて説明したいがパワポじゃ図が描きにくい、そもそもパワポじゃないから絵を別で用意しないといけない、といった時にも使えるでしょう。可換図式を見せたいが……という場合も同様。SVGも出力に対応してますからHTMLへの埋め込みもしやすいんじゃないでしょうか。
このように、様々な利用例が考えられます。
次回は度々出てきたgraphml形式について書きたいと思います、ASAPで。
ICON FINDER
Palette Managerでノードが追加できるようですが、ではその画像は自分で用意しなくてはならないのか。つまり自作素材を用意する必要があるのか、という問題ですね。Figure7左の一番下のラジオボタンにあるICON FINDERはその問題をある程度解決します。英語のみですが、好きな単語で検索するとそのアイコンを探してきてくれます。例えばFigure8ではtorus(トーラス)で検索した結果です。気に入ったものがあればそれをImport Symbolsすることで指定したPalette Section(ここではfuga)に追加することができます。
その他
例によって英語のみですが、Q&Aとマニュアルが公式にあります。本記事の参考文献でもあります。何に使えるか
有向、無向を問わずグラフが使えるような場面は多いでしょう。もちろんゲーム製作においても。人物相関図、武器や防具の開発ツリー、モンスターの進化ツリー、マップ間のネットワーク……枚挙に暇がないでしょう。次の記事で詳述しますが、冒頭で軽く触れたようにこのエディタで作製したグラフはgraphmlというグラフの構造を記述するのに特化したxml形式で保存されます。つまりxmlをパースできればgraphmlも簡単にパースできるのです。より一般のxmlをパースできるのだから形式が定まっているgraphmlは況や、ということです。
つまり次の流れです:yEdでグラフを描きます。それを(必要があれば適当な画像形式でエクスポートもしつつ)graphmlとして保存します。xmlとして(必要があれば拡張子を書き換えてから)パースします。パースしたらいろいろ処理ができます!
また、純粋にグラフをお絵描きするツールとしてmspaintなどそこらのお絵かきツールより簡単かつきれいに描けるでしょう。SAIやらイラレ やらといった高価なお絵描きツールと異なり、yEdはフリーソフトです。フローチャート図を描いて説明したいがパワポじゃ図が描きにくい、そもそもパワポじゃないから絵を別で用意しないといけない、といった時にも使えるでしょう。可換図式を見せたいが……という場合も同様。SVGも出力に対応してますからHTMLへの埋め込みもしやすいんじゃないでしょうか。
このように、様々な利用例が考えられます。
ここまでのまとめ
- yEdはお手軽にグラフを描けるフリーのエディタ
- yEdはWindows,Mac,Linuxというようにほとんど至るところで動くjavaソフト
- yEdで生成されたグラフはxml形式で保存される
- yEdはグラフ描画に素敵な機能がたくさん組み込まれている
次回は度々出てきたgraphml形式について書きたいと思います、ASAPで。
以上です。ここまで読んでいただきありがとうございました。