視覚化エンジンRoassal

762 views

Published on

Smalltalkによる視覚化エンジンRoassalの紹介です

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
762
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
7
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

視覚化エンジンRoassal

  1. 1. 視覚化エンジン Roassal Smalltalkで気軽に視覚化 第67回Smalltalk勉強会 合同会社ソフトウメヤ 梅澤真史
  2. 2. Roassalとは?? ● インタラクティブ性を持つ視覚化エンジン ○ http://objectprofile.com/Roassal.html ● 複数のSmalltalkに対応 ○ VisualWorks ○ Pharo ○ Amber ■ https://github.com/pestefo/roamber ● 2012年にデビュー ○ 現在Roassal2やRoassal3Dの開発中 ● OSS, MITライセンス
  3. 3. インストール (Pharo) ● SmalltalkHubから取得 Gofer new smalltalkhubUser: 'ObjectProfile' project: 'Roassal'; package: 'ConfigurationOfRoassal'; load. (Smalltalk at: #ConfigurationOfRoassal) load ● Roassal2やRoassal3DはPharoから直接 ○ Configuration Browserで選択し”Install Stable Version”
  4. 4. ドキュメント ● 公式サイト ○ Roassal.pdf ○ Mondrian.pdf ■ まず読んでおくこと ● Facebook ○ https://www.facebook.com/ObjectProfile?fref=photo ■ Roassal2やRoassal3Dの豊富な例
  5. 5. 豊富な例 ● インストール後のToolsメニュー ● Roassal Easel (Roassal) ● Roassal examples (Roassal2) ● Roassal3D examples (Roassal3D)
  6. 6. タグクラウドとか... ● Collectionのサブクラスで最も実装されているセ レクタは? (セレクタの人気度) nc := RTNameCloud new. Collection withAllSubclasses do: [ :c | nc addStrings: (c methods collect: #selector) ]. nc open Sunburst
  7. 7. 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
  8. 8. グラフとか... ● 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.
  9. 9. 使い方 ● 基本的に作りたい図の種類のBuilderを 使えば良い ○ Builder-* カテゴリ ○ 各カテゴリにはexamplesメソッドやExampleクラスがある のでなんとなくわかる ● 高度なことをする場合はCoreのクラス群を 直接操作する
  10. 10. 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にレイアウトを 指定
  11. 11. 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を足してい る
  12. 12. 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 ドラッグ可能&マウスオーバーで ポップアップするように
  13. 13. 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).
  14. 14. 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 モデルからエッジを生成す るためのルールを指定
  15. 15. イベントハンドラも入れてみる ● Element やEdgeにwhen:do:でイベントハンドラを 入れることができる ○ 先ほどの例に以下を追加 ■ もちろん開いたままでもOK view edges do: [:each | each when: TRMouseClick do: [ :evt | RTBlink on: each in: view ]]. クリックするとチカチカする ように
  16. 16. 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 エレメント追加 レイアウト指定 インタラクション指定
  17. 17. その他の機能 ● GraphET ○ 円グラフ、折れ線グラフなどビジネス系グラフの 作成 ● SVG、HTMLエクスポータ ○ http://objectprofile. com/examples/DependencyAnalyzerBuilder.html ● Trachel ○ Cairoを使ったCanvas実装 ○ Morphベースのものよりも高速
  18. 18. 応用例 ● Moose ○ 既存プログラムのリエンジニアリングツール ■ http://www.moosetechnology.org ● AspectMaps ○ アスペクト指向で作られたソフトの視覚化 ■ http://pleiad.cl/research/software/aspectmaps ■ https://www.youtube.com/watch? feature=player_detailpage&v=uOmox7NgRAg
  19. 19. まとめ ● Roassalはインタラクティブな視覚化を支援する強 力なライブラリ ● 視覚化コンテスト開催中 (8/11まで) ○ 応募してみるのもいいかも ○ https://www.facebook.com/ObjectProfile/photos/pb. 340543479365589.-2207520000.1397480066./615059938580607

×