xibファイルの中のオブジェクト図
xibファイルの中にある、それぞれのオブジェクトの関係を図示したい。 xibから自動生成させるのが理想だが、実力がないので出来なかった。 テキストから画像を生成させるところまでをメモとしてまとめた。
このようなテキストから
digraph window {
// 定義ファイルをインクルード
include(objectGraph.inc)
// オブジェクトの設定
GenericObject(WinController)
WindowObject(Window)
// コネクションの設定
IBOutlet(Window, WinController, "delegate")
IBOutlet(WinController, Window, "window")
// 表示上の調整
{rank=same; WinController; Window;}
}
以下のような図を生成する。
材料は、
- graphviz
- icon画像
- m4
の3つ。dot言語をm4マクロで包んで、簡単な表記でオブジェクト図を描画できるようにした。
手順は、
- ディレクトリ構造を整え、icon画像を配置。
zipファイルの中身を以下の様に配置する。objectGraph.zip
$ tree .
.
├── icon
│ ├── FirstResponder.png
│ ├── NSApplication.png
│ ├── NSCell.png
│ ├── NSControl.png
│ ├── NSObject.png
│ ├── NSObjectController.png
│ ├── NSView.png
│ ├── NSViewController.png
│ ├── NSWindow.png
│ ├── NSWindowController.png
│ └── Placeholder.png
└── objectGraph.inc
- 描画するオブジェクトのdot.m4ファイルを書く。
上記のファイルを展開したディレクトリに、テキストファイルを書く。
- コマンド実行。
$ m4 -DshowIBOutlet window.dot.m4 | dot -T png -o window.png
サンプル1 IBOutlet
以下の様なファイルを
digraph objectGraph {
// 定義ファイルをインクルード
include(objectGraph.inc)
// オブジェクトの設定
ApplicationObject(NSApplication)
GenericObject(CCAppDelegate)
WindowObject(NSWindow, , viewGroup)
// View階層の設定
BeginContainerView(contentsView, NSView, , viewGroup)
ControlObject(NSButton1)
ControlObject(NSTextField1)
ControlObject(NSTextField2)
EndContainerView
// コネクションの設定
IBOutlet(NSApplication, CCAppDelegate, " delegate")
IBOutlet(CCAppDelegate, NSWindow, "window")
IBOutlet(CCAppDelegate, NSTextField1, "yen")
IBOutlet(CCAppDelegate, NSTextField2, "doller")
IBOutlet(NSWindow, contentsView, " contentsView")
IBAction(NSButton1, CCAppDelegate, "target/convert:")
// 表示上の調整
{rank=same; CCAppDelegate; NSWindow;}
}
以下のコマンドで画像を生成すると、
$ m4 -DshowIBOutlet CurrencyConverter.dot.m4 | dot -T png -o CurrencyConverter_outlet.png
outletを表示します。
m4に”showIBOutlet”を渡すと、outletを表示します。
サンプル2 IBAction
サンプル1と同じテキストファイルを以下のコマンドで画像生成すると、
以下のコマンドで画像を生成すると、
$ m4 -DshowIBAction CurrencyConverter.dot.m4 | dot -T png -o CurrencyConverter_action.png
actionを表示します。
m4に”showIBAction”を渡すと、outletを表示します。
IBActionのラベルは”target/セレクタ名”にしています。
サンプル3 View階層
View階層を表現するのには、矢印などのコネクションの表現だけでは無理だと思われるので、”内包”の表現を使用する様にした。
digraph objectGraph {
// 定義ファイルをインクルード
include(objectGraph.inc)
// View階層の設定
BeginContainerView(contentsView, NSView, , viewGroup)
ControlObject(NSButton1)
ControlObject(NSTextField1)
ControlObject(NSTextField2)
EndContainerView
}
は、contentsViewに2つのテキストフィールドと1つのボタンを配置されていることを示しています。
以下のコマンドで画像を生成すると、
$ m4 CurrencyConverter_view.dot.m4 | dot -T png -o CurrencyConverter_view.png
こんな感じになります。グレーの枠で複数のコントロールがcontentsViewに内包されていることを示しています。
サンプル4 少し大きな画像
ある程度オブジェクトの数が増えると、実用的ではないかもしれない。
ここ( objectGraph.dot.m4 )にあるようなファイルを出力するだけで、
こんな煩雑な画像が出てくる。
初心者に説明するための、Object図ならば簡単に書けるけど、実用的なアプリケーションのオブジェクト図は、煩雑すぎて実用にはならないかもしれない。
試作してみての感想
利点としては、
- 元データがテキストなので各種コマンドラインツールと相性が良い。
- outletとactionを1つのデータから出力できる様にしたので、画像が煩雑になるのを防いでいる。
欠点は、 - m4のマクロだけでは、テキスト入力の手間はあまり変わらない。 - ある程度大きなオブジェクト図になるとかなり煩雑な画面になってしまう。
今後の展開として
- xibから出力できる様にしたい。
- bindingの表記も必要
- autoLayoutの表記も必要
- 注目するObjectをフィルタリングして出力可能にすると良いかもしれない