GUI を持つプログラムの理解支援のための可視化システム
佐藤竜也†

志築文 太 郎†

田 中二郎†

Visualization for supporting extension of GUI programs
Tatsuya Sato,† Buntarou Shizuki† and Jiro Tanaka†

にくい。これに対して、我々は GUI 実行画面の操作

1. は じ め にに対してインタラクティブに反応する可視化システム

他人の書いたプログラムに機能を追加する場合、開発者はそのプログラムを理解するために、実行の外的振る舞いや関数呼び出し、クラス階層などの要素を把を構築する。

2. システム概要

握する必要がある。ソースコードのみからこの把握を基本表示行う場合、プログラムの規模が大きくなるとプログラ

図 1 にシステムの概観を示す。上部はコントロールムの理解に必要な部分を即座に見出すことは難しい。

部、中央はグラフ表示部、下部はサムネイル表示部で

ま た 、現 在 開 発 さ れ る ソ フ ト ウェア の 多 く はある。プログラム理解にはソースコードを見る必要がGUI(Graphical User Interface) を持つ。GUI はマあるため、本システムではソースコードそのものを表ウスやキーボードを用いた操作に応じて処理を行い視示に利用する。ソースコードはクラスごとにクラス名覚的なフィードバックを返す特徴を持つ。そこで本研付きパネルとしてグラフ表示部に縮小表示される。各

究ではこの特徴を活かしたプログラム可視化手法を提パネルは親子関係で結び付けられて木構造状に配置さ案することで GUI を持つプログラムの理解を支援し、れる (図 1、親子関係ツリー)。

機能追加時にソースコードを読む作業のコストを最小コントロール部にはボタンが配置されていて、開発化し作業効率を向上させることを目的とする。既存の者は対象プログラムの起動、停止、ステップ実行等を行研究として1)∼4) 等があるが、我々は以下のような可える。さらに開発者は起動した対象プログラムの GUI視化を行う。

を操作することができる。システムは GUI への操作可視化する要素に反応して、インタラクティブに表示を更新する。

GUI を持つプログラムに機能追加を行う場合のプ
ログラムの理解すべき重要な要素は以下である。

システムは随時、操作によって実行されたソースコード行を強調表示し関数呼び出しを矢印で結び順序(1)

各操作のプログラム全体に対する実装部分付けを行う (図 1、プログラム実行部)。操作によるプ(2)関数呼び出し階層

ログラム実行が終了すると、その操作に対するグラフ(3)

クラス階層表示が完成し、それ以降静的に閲覧することができる。
このように遠目から眺めるようにプログラムの実行を本研究ではこれらの要素を効果的に可視化する。
インタラクティブ性

見ることで、開発者は各操作のプログラム全体に対すプログラムへの操作と可視化が別々に行われることる実装部分を知ることができる。

による時間差は、開発者がいつ、どのような操作を行っサムネイル表示部には、操作前と後での対象プログたかを忘れさせるので、操作と可視化情報を結び付けラムの GUI の画面遷移がサムネイルで表示される (図† 筑波大学コンピュータサイエンス専攻
Department of Computer Science,
Tsukuba

1 参照)。このサムネイルは選択することが可能で、左Universityofの画面を選択すると前、右の画面を選択すると後の操作の実行の静的グラフを閲覧することができる。情報処理学会 インタラクション 2007

図 1 システムの概観

詳細表示
操作ごとのプログラム実行を詳細に把握するには、

図 2 ズーミング機能を用いた詳細表示

静的グラフを構成するエッジを順に追えばよい。そこで我々は静的グラフの注目している部分のソースコーある。特に動的情報はトレースとして実行時に取得すドが見えるように拡大しながら、エッジを順に追う詳る。動的情報を取得するために JavaVM の実行を明

細表示を実装した。注目部分は見ている時点の実行ク示的に制御し、各クラスの情報を観察することができラスとその前後のクラス間の関数呼び出しであると考る JDI(Java Debug Interface)API を使用した。シスえ、それらのクラスのパネルと呼び出しのエッジを拡

テムは、まずソースコードから静的なクラス構成を取大表示する。またそれ以外の呼び出しは注目していな得してシステムの概観を表示する。その後、JDI を用い情報とみなし、パネルを暗色で縮小表示する。エッジ

いて対象となる GUI を持つプログラムを立ち上げる。

に関しても透過処理を施して目立たなくさせる。エッ

開発者がプログラムを操作することによりイベントがジはその時点の以前と以後の呼び出しであるかがわか発生すると、JDI によってその場で動的にプログラムるようにそれぞれ別の色で描画される。このように開の実行を解析し、実行の情報を表示に反映させる。表

発者は注目部分だけを取り出しながら、プログラムの示のズーミング機能の実装には Piccolo.Java 1.2 を利実行の様子を追うことが可能となる。

用した。Piccolo はズーミングインタフェースの構築

ズーミング機能を用いた詳細表示を図 2 に示す。このように詳細表示ではある時点での注目部分だけがズームして表示される。図 2a はある時点の詳細表示である。今 ClassA が実行されていて、次に ClassBの実行が控えている。開発者がボタンを押してステップ実行を行うと図 2a から図 2b のように表示が変化する。図 2a では ClassA から ClassB への呼び出しのエッジは次の時点での呼び出しなので点線表示されているが、次のステップである図 2b では ClassB が実行されているためエッジは実線表示されている。

3. 実

装本研究では Java を対象言語にした。Java プログラ
ムの動作を解析するためにはソースコードとクラスファイルから、メソッドやフィールドといったクラス構成、およびプログラム実行中のメソッド呼び出しやフィールドの変化といった動的情報を取得する必要がをサポートするツールキットである5) 。

参 考 文 献1) Stephen G. Eick and Joseph L. Steffen and
E. Summer : Seesoft - A Tool For VisualizingLine Oriented Software Statics, IEEE TRANSACTIONS ON SOFTWARE ENGINEERING,
Vol.18, No.11, pp.957–968 (1992).
2) 寺田実：電子紙芝居 Electoronic Paper-Slide
Show，日本ソフトウェア科学会 WISS’98, pp.
181–186 (1998).
3) 久永賢司, 柴山悦哉, 高橋伸：GUI プログラムの理解を支援するツールの構築，日本ソフトウエア科学会第 17 回 (2000 年度) 大会 (2000).
4) Storey, M.-A., C. Best, and J. Michaud :SHriMP views - an environment for exploring
Java programs, IEEE International Workshop
on Program Comprehension ’2001 (2001).
5) Piccolo: http://www.cs.umd.edu/hcil/piccolo/.