視覚化エンジンRoassalSmalltalkで気軽に視覚化

第67回Smalltalk勉強会

合同会社ソフトウメヤ 梅澤真史

Roassalとは??

● インタラクティブ性を持つ視覚化エンジン○ http://objectprofile.com/Roassal.html

● 複数のSmalltalkに対応○ VisualWorks○ Pharo○ Amber

■ https://github.com/pestefo/roamber● 2012年にデビュー

○ 現在Roassal2やRoassal3Dの開発中

● OSS, MITライセンス

インストール (Pharo)

● SmalltalkHubから取得

Gofer new smalltalkhubUser: 'ObjectProfile' project: 'Roassal'; package: 'ConfigurationOfRoassal'; load.(Smalltalk at: #ConfigurationOfRoassal) load

● Roassal2やRoassal3DはPharoから直接

○ Configuration Browserで選択し”Install Stable Version”

ドキュメント

● 公式サイト○ Roassal.pdf○ Mondrian.pdf

■ まず読んでおくこと

● Facebook○ https://www.facebook.com/ObjectProfile?fref=photo

■ Roassal2やRoassal3Dの豊富な例

豊富な例

● インストール後のToolsメニュー

● Roassal Easel (Roassal)● Roassal examples (Roassal2)● Roassal3D examples (Roassal3D)

タグクラウドとか...

● Collectionのサブクラスで最も実装されているセ

レクタは? (セレクタの人気度)nc := RTNameCloud new.Collection withAllSubclasses do: [ :c |

nc addStrings: (c methods collect: #selector) ].nc open

Sunburst

Sunburstとか...

● Collectionの全サブクラスでメソッドの実装数により色分け (黄色 -> 多いほどオレンジに)

b := RTSunburstBuilder new.b radialSpacing: 5; angularSpacing: 1.b shape current

color: [ :cls | | val |val := 1 / (cls selectors size + 1).Color yellow alphaMixed: val with: Color orange].

b explore: Collection using: #subclasses.b view @ RTDraggableView.b open

グラフとか...● Collection階層をツリー状に

○ メソッド数が多いほど赤く、大きく b := RTGraphBuilder new.b nodes

shape: (RTEllipse new size: #numberOfMethods);whenOverShowEdges: [ :cls | cls dependentClasses ].

b edges connectTo: [ :c | c subclasses ];useInLayout;shape: (RTLine new color: Color gray).

b layout tree.b global minSize: 5;

normalizeColor: [ :cls | cls selectors size ] using: (Array with: Color orange with: Color red).

b addAll: (Collection withAllSubclasses).b open.

使い方

● 基本的に作りたい図の種類のBuilderを使えば良い○ Builder-* カテゴリ

○ 各カテゴリにはexamplesメソッドやExampleクラスがある

のでなんとなくわかる

● 高度なことをする場合はCoreのクラス群を

直接操作する

Coreの使用例

● ViewにShapeを指定したElementを貼る

● レイアウトを指定して open

view := RTView new.label := RTLabel new height: [ :e | e ].view addAll: (label elementsOn: (10 to: 30)).ROCircleLayout onView: view.view open

Shape

Shapeからモデルを生成しViewに貼る

Viewにレイアウトを指定

Shapeの合成

● Shapeは+メッセージで足し算できる

○ 以下はlabelにellipseを足した例

view := RTView new.label := RTLabel new height: [ :e | e ].elli := label + (RTEllipse new

size: [:e | e]; color: (Color purple alpha: 0.3)).view addAll: (elli elementsOn: (10 to: 30)).RTGridLayout onView: view.view open

Ellipseを足している

Interactionの付与

● Elementに@メッセージでInteractionを追加

○ 各種イベントに反応するように

view := RTView new.label := RTLabel new height: [ :e | e ].elli := label + (RTEllipse new size: [:e | e]; color: (Color purple alpha: 0.3)).view addAll: 　(((elli elementsOn: (10 to: 30)) @ RTDraggable)

@ (RTPopup text: [:e | e hex])).RTGridLayout onView: view.view open

ドラッグ可能&マウスオーバーでポップアップするように

Animationの追加

● Viewに addAnimation:○ 先ほどの例でViewを開いたまま、追加してみる

view := RTView new.label := RTLabel new height: [ :e | e ].elli := label + (RTEllipse new size: [:e | e]; color: (Color purple alpha: 0.3)).view addAll: 　(((elli elementsOn: (10 to: 30)) @ RTDraggable) @ (RTPopup text: [:e | e hex])).RTGridLayout onView: view.view open.

view addAnimation: (RTSpringLayoutStepping new view: view).

Edgeも追加してみる

● RTEdgeに各種の便利ファクトリメソッド

○ ある条件でノード間を特定の線で結ぶ

model := 10 to: 30.view := RTView new.label := RTLabel new height: [ :e | e ].elli := label + (RTEllipse new size: [:e | e]; color: (Color purple alpha: 0.3)).view addAll: ((elli elementsOn: model) @ RTDraggable).

RTEdge buildEdgesFromObjects: model from: [:m | m ] toAll: [:m | model asArray shuffled first: (4 atRandom)] using: (RTArrow new color: (Color gray); withOffsetIfMultiple) inView: view.

RTTreeLayout onView: view.view open

モデルからエッジを生成するためのルールを指定

イベントハンドラも入れてみる

● Element やEdgeにwhen:do:でイベントハンドラを

入れることができる

○ 先ほどの例に以下を追加

■ もちろん開いたままでもOK

view edges do: [:each |

each when: TRMouseClick do: [ :evt | RTBlink on: each in: view ]].

クリックするとチカチカするように

3Dでもほぼ同じ

● 100個のキューブをレイアウトして表示してみる

view := R3View new.view camera translateUp: 3; rotateRight: 90.elements := OrderedCollection new.100 timesRepeat: [

| el |el := R3CubeShape new element.elements add: el.view add: el].

R3CubeLayout on: elements.view addInteraction: R3MouseControl; addInteraction: R3KeyControl.view open

エレメント追加

レイアウト指定

インタラクション指定

その他の機能

● GraphET○ 円グラフ、折れ線グラフなどビジネス系グラフの

作成

● SVG、HTMLエクスポータ

○ http://objectprofile.com/examples/DependencyAnalyzerBuilder.html

● Trachel○ Cairoを使ったCanvas実装

○ Morphベースのものよりも高速

応用例

● Moose○ 既存プログラムのリエンジニアリングツール

■ http://www.moosetechnology.org● AspectMaps

○ アスペクト指向で作られたソフトの視覚化

■ http://pleiad.cl/research/software/aspectmaps■ https://www.youtube.com/watch?

feature=player_detailpage&v=uOmox7NgRAg

まとめ

● Roassalはインタラクティブな視覚化を支援する強

力なライブラリ

● 視覚化コンテスト開催中 (8/11まで)○ 応募してみるのもいいかも

○ https://www.facebook.com/ObjectProfile/photos/pb.340543479365589.-2207520000.1397480066./615059938580607