「インタラクション，97」 平成9年2月

MochiSheet‥ズーミングとレイアウト編集機能の統合
豊田正史 志築文太郎 高橋伸 柴山悦哉
東京工業大学情報理工学研究科数理・計算科学専攻
ビジュアルプログラムのエディタに適したズーミングおよびレイアウト編集のインタフェースを提案する．MochiSheetはこれを実装した汎用ライブラリであり，なめらかなズーミング，図形の重なりの回避，およびズーム操作の選択的なアンドゥ機能を提供する．この結果，MochiSheetを用いて実装したエディタでは大規模な階層構造の編集を，編集部分の拡大・編集・ズームのアンドゥという手順の繰り返しによって効率良く行うことができる．

MochiSheet‥IntegrationofZoomlngandLayoutEditing ●Wbproposeanintegratedinterface払rzoomlngandlayouteditingwhichis
appropriatefbrvisualprogrameditors，andimplementtheinterfaceasali−braryfortheAMULETTbolkit・MochiSheetprovidescontinuousdistorted
ZOOmlng，and aselectiveundofunction ofzoomlngOperations，and avoids
OVerlapplngOfgraphicalobjectsduringediting．Usinggraphicaleditorsim−

plementedwithMochiSheet，WeCaneditlargehierarchicaldatastructures
e氏cientlybyrepeatingfo1lowlngprOCeSSeS：ZOOmlngapart，editingthepart，
andundoirlgZOOmlngOfthepart．

1 はじめにデータフローグラフ，コントロールフローグラフなどのグラフ表現を扱うビジュアルプ
ログラムの子羊イタにおいては，大規模なプログラムの扱いが問題となる．大規模なビジュアルプログラムの編集に特徴的な点を以下に示す．

●プログラムは階層構造をなす．通常プログラムは複数のモジュールから構成され，モジュールは複数のグラフから構成され，グラフは複数のサブグラフから構成される．この結果，プログラム全体が巨大な階層構造をなすことになる．
●グラフのノードは重なってはいけない．ノードにはプログラムの意味を表す情報が含まれるため，ノードが重なるとプログラネの意味が理解できなくなる．
・あるモジュールで定義されている部品を他のモジュヤルで利用する際には，モジュール・グラフ間で部品をドラッグ＆ドロアブする操作が一般的である．このためモジュー

ル同士，グラフ同士を重ならないように同一画面に表示する必要がある．
実際には，以上の特徴を持つ図形構造を狭いスクリーン上で編集しなくてはならない．したがって，どのように大規模な図形の階層構造を重なりを畢けながら狭いスクリーンに表示し，そのレイアウトを効率良く編集できるようにするかという点が問題となる．
このうち表示に関してはズーミングの手法が有効であり，すでにPad＋＋【3】といった汎用のライブラリが発表されてきている．数あるズーミング手法のうちビジュアルプログ−79−ラムの表示に有効なのがfisheyeview［4】である．Fisheyeviewではデータ全体の概観表示および一部の詳細表示せ同じビューで行うため，プログラム全体の構造を見失うことなく一部分の詳細を見ることができる．この手法から派生したRubberSheet［5】，ContinuousZoom［2】は，2次元平面上の入れ子状に構成された図形の階層構造に対して，（a）図形の相対位置を保ち，（b）図形の重なりを避けながら，（c）複数のフォーカスを指定したズームを行うという点で我々の目的に適合している．特に【2］はズームによる変化をなめらかにアニメーション表示するため，視点の変化を把撞しやすい七いう特徴を持っている．
一方，レイアウトの編集作業にはズームに加えて，図形の追加，削除，および移動が最低限必要になる1．しかし上で述べたズーミング手法では，大規模な図形のレイアウトを編集するインタフェースがどうあるべきかという点についてはあまり考慮されていない．
【5】では拡大部分の編集が可能であるとされているが，編集操作後の図形の重なりの回避については触れられておらず，【2】では初期配置は重なりの無いものとしており，レイアウトの編集については考慮されていない．

我々の目的は，【2］と同様のなめらかなズーミングインタフェースにレイアウト編集の機能を統合したビジュアルプログラムのエディタを構築することである．現在我々はビジュアルプログラミング環境（以下VPE）KLIEG［8】【7】におけるエディタをこの目的に沿って開発している．KLIEGはプロセスとその間のデータフローに基づくVPEである．
エディタでは，プロセスのネットワーク構造，および関連するプロセス定義をまとめたモジュールの階層構造を表示し，編集を可能にする．

エディタでは，1つのウインドウの中で編集したい部分を適宜拡大して編集を行うことができる．図1では3つのモジュールが表示されており，そのうちのqsortモジュールを拡大し（図2），次にqsortモジュール中のネットワーク図を拡大している様子（図3）を示している．拡大したネットワーク図は詳細が見えるようになり，周りの図はそれに応じて縮小され，詳細が見えなくなっている様子がわかる．また拡大後も図形の相対位置は保たれている．また，2つのモジュールを拡大しておいて，その間でプロセスをドラッグアンドドロップするという編集操作も容易に行うことができる．
このエディタの設計に際しては以下のような問題点が生じた．

編集による図形の重なりの回避図形の追加，削除，および移動を行った後も，図形が重ならないよう自動的に再配置することが必要となる2．この間題に関しては力学モデ
ルに基づいて頂点の大きさの異なるグラフを配置するアルゴリズムが【6】に述べられている．しかし，再配置の計算を高速に行うことが難しいため，なめらかなズームを行うために必要な応答速度が得られない．
ズームによって歪んだレイアウトを元に戻す方法大規模な図形レイアウトの編集作業では，（1）編集部分の拡大，（2）拡大した部分内の編集，（3）拡大した部分を元に戻す，という手順を繰り返し行うことになる．（3）の元に戻す手順では，ズーム操作で戻す方法があるが，これは元の大きさに正確に戻すことが難しい．また普通のアンドゥ操作を導入しても，■拡大した部分に行った編集操作を無視してアンドゥを行うことはできない．
1リサイズはズームと区別が付きにくいのでズームで代用する．
2グラフにおける辺の重なりの回避は扱わない

ー80−

図1：KLIEGのエディタ

図2：qSOrtモジュールを拡大（ズームイン）

図3：ネットワーク図を拡大−81−

以上の問題点を踏まえて，我々はまず準用のズームおよび編集のためのライブラリMocbi
Sheetを作成し，これを用いてKLIEGのエディタを実装した．MochiSheetは他にもディレクトリツリーのエディタなど様々なアプリケーションに応用できる．MochiSheetは，以下のような特徴を持っている．
●編集操作後の図形の1レイアウトを基にグリッドを動的に生成して，その上に図形を並べる制約を導入した．グリッドは比較的きつい制約であるが，細かいレイアウトを必要としないVPEのようなアプリケーションには十分である．これにより編集操作後に図形の重なりを回避するための再配置を単純な計算で高速に行うことができる．ま．た後述するように空いている空間を探しやすいという利点がある．これを利用して【2】では利用できない空きスペースを図形に割り振ることが可能になった．

●ある図形におけるズーム操作のみを選択的にアンドゥするインタフェースを提供する．この機能により，拡大した編集部分を簡単に元の大きさに戻すことができる．また図形を編集履歴中における好みの大きさに一回の操作で戻すことが可能になる．
・［2】と同様にズームをなめらかに行う．
●様々なズームアルゴリズムを階層構造中に混在可能にした．例えば，小さくなったときに詳細を表示せず，名前だけは表示する図形を階層の中間に置くことが容易である．したがって［3］で述べられている．semanticzoomを容易に実現できる．

2 MochiSheet
この節では，MochiSheetのインタフェース，およびズーム・レイアウトのアルゴリズムに関して説明する．MochiSheetは，矩形甲領域を持つ図形3を扱う．矩形の中に子供にあたる矩形を入れ子状に配置することにより，階層的な木構造を構成できる．以後，木構造の節および葉にあたる矩形をノードと呼ぶ．また，内部に子ノードを持つノードをクラスタノードと呼んで区別する場合がある．

2．1 インタフェースと挙動
MochiSheetにおける編集作業は，通常以下のような手順の繰り返しによって行われる．
但し図形のレイアウトに影響をあたえない編集操作についてはここでは扱わない．
1・編集したいノードを拡大（ズームイン）すや，
2．拡大したノードの内部についてノードの追加，削除，移動による編集を行う，
3．拡大したノードを元の大きさに戻す（ズームのアンドゥ）．
この手順によれの手順におけるMochiSheetのインタフェースについて述べる．
3輪郭が矩形である必実はない．

−82−

ズーム

ズームは，選択したノードの8方向につけられるハンドルで行う．ハンドルをつかんで動かしている間，ノードとその周辺のノードが重ならないようになめらかに変化する．
MochiSheetはレイアウトの編集が主な目的であるため，個々の図形の大きさを細かく指定できるハンドルインタフェースを採用している．目的がブラウズのみならばこのインタフェースは煩わしいものとなるため，ContinuousZoomではマウスのボタンを押している間，ズームイン・アウトするインタフェースを採用している．しかし，このインタフェースでは縦横比を変更するズームができない．またRubberSheetでは，図形とは独立した領域を指定しそれをラバーバンドとしてズームを行うため，個々の図形の大きさを細かく指定するのが難しい．

クラスタノードを小さくした結果，子ノードが元の大きさで表示できなくなったときに，その内部に対レてズームアウト（縮小）が行われる・逆に大きくした場合，プログラマはズームイン（拡大）を行うか，行わなヤーかをクラスタノードに対して指定することができる．ズームインを行わない場合，子ノードは元の大きさのままで，各ノードに均等に空間が分配される．これらは用途によって使い分けられる．

ノードの追加，削除，移動ノードの追加，削除，移動については，通常の図形エディタと同様の操作で行うことができる．これらの操作が行われるとすべての図形が重ならないように再配置が行われる．
移動に関してはクラスタノード間にまたがる移動も行うことができる．
ズームのアンドゥ

ズームのアンドゥは，対象とするノードヘのズーム操作のみのアンドゥを行う．例えば，ある図形をズ∵ムした後移動して，アンドゥを行った場合，図形は元の大きさには戻るが，元の場所には戻らない．このアンドゥ機能を用いることで編集のために拡大したノードを簡単に元の大きさに戻すことができる．通常のアンドゥ機能では拡大したノードの内部への編集操作を無視してアンドゥを行えない．このためノードの大きさを元に戻すにはズームアウトの操作を行うしかない．しかしズームアウト操作で正確に元の大きさに戻すのは難しい．

アンドゥはノードのポップアップメニューから行う．メニューは一般的なアンドゥと同様に，アンドゥ，リドゥの項目を持つ．さらに次に述べる選択的アンドゥのためのダイアログを呼び出す項目も持っている．

選択的なアンドゥは，直前のズームだけではなく，それ以前のズーム操作を選択的にアンドゥできる機能である．これにより，ノードをある時点での大きさに一度の操作で戻すことが可能になる．選択的アンドゥはズーム操作の履歴を示すダイアログボックスから，大きさを選択することで行う．

アンドゥの代替案としては，図形のスケールをある時点で1に変更するというインタフェースも考えられる．しかしスケールを1に変更した時点での大きさにしか戻すことができないため，アンドゥインタフェースを採用した．

−83−

2．2 ズーム・レイアウトアルゴリズム
MochiSheetでは，ノードの追加・移動の後もノードが重ならないようにするため，子ノードを動的に生成した格子の上に並べる制約を導入している．この格子を用いて各ノードが重ならないようにズームを行う．また格子制約を利用して，空いているスペースを探しノードに割り振ることも行う．以下では，まず基本的なズーム・レイアウトのアルゴリズムを述べ，続いて空きスペースを探し有効利用する方法について述べる．
2．2．1 基本アルゴリズム

基本アルゴリズムは，1つのクラスタノードの子ノードのレイアウトを決定する．このアルゴリズムは対象とするクラスタノードの寸法，および，各子ノードの座標および寸法を入力とし，各子ノードを実際に表示する際の座標および寸法を出力する．階層構造に対しては，このアルゴリズムをルートのクラスタノードから再帰的に適用することで全体のレイアウトを定められる．以下に実行手順を示す．

1．グリッドの生成Ⅹ，y各軸についてノー下の中心の座標を比較し，しきい値以下の距離のものは同じ格子線上に置くようにグリッドを生成する4（図4）．

2・要求幅の計算ノードが重ならないために必要な各区間（Ⅹ卜Ⅹ3，yl〜y4）の要求幅を計算する．あるⅩ軸上の区間Ⅹkの要求幅月或は以下の式で表される．
月読＝maX（I竹た−1，ブ）′ ▼▼▼▼▼＼ 2 ）＋max（竺簗）2

ただし・町盲，ゴ）は，図4の右図における（宜，J）の示す格子点の要求する幅を表す．格子点の要求する幅は，格子点に矩形がのっているときはその矩形の幅，のっていないときは0となる・例えば，Ⅹ2の要求幅闇r2とⅠ・3の幅を与したものの和のとなる・y軸上の区間の要求幅は矩形の高さについて同様の計算を行うことで求める．

3・ノ−ドの配置Ⅹ，y各軸についで要求幅の和島，月yを計算する．】月∬，月yがクラスタノードの幅C諾，qより大きい場合，Ⅹ，y各軸にらいて恵，箸というスケールで各子ノードの大きさを縮小する（図5）．要求幅の和がクラスタノードの幅より小さく，拡大を行う指定の場合，同じスケールで拡大を行う．拡大を行わない指定の場合，格子の幅をできるかぎり平均化するように余りのスペースを割り振る（図4右）．
ノードの追加・削除・移動が行われた場合，1のグリッドの生成からやり直す．ズームが行われた場合には2からやり直すだけで済むため，なめらかにズームを行うことができる．
2ノ．2．2 空きスペースの割り振り

グリッドにノードをのせるという制約を導入したことで，空きスペースを有効にノードに割り当てるこ七が可能である．スペ⊥スの割り振りは要求幅がクラスタノードの帽より大きいときに行う．例えば図6に示した2つの例では斜線で示した格子の幅を狭めてスペースを節約し，・′−ドの元の大きさを保つことがやきる．ただしノードの中心点の相対位置は保有するようにする・Continuo対位置を保つためこのような空きスペースを利用することができない．
4ノードが同じ格子点にのらないように前処理が行われていることを仮定する

−84−

三：≡＝

三；壬＝二Xl】￠

x3

し…

図5：要求幅が大きくなった場合の配置

図4：グリ＿ツド生成とノードの配置

酪摩
図6：空きスペースの割り振り

スペースを割り振るときには，Ⅹ，y軸それぞれに対して各区間を可能な限り狭めた幅（狭め幅）を計算する．あるⅩ軸上の区間Ⅹkの狭め幅∫。たは以下の式で表される・∫。た＝印aX（Ⅵ1た−1，ブ）

要求幅とこの狭め帽との差（Ⅹkの場合月ヱた−ぶ∬た）が大きいものから格子を狭めていく・このときⅩ軌−y鱒の区別はせずに順番を決める・ただしⅩ，y軸にまたがる区間（Ⅹ2とy3など）を比較する際には，スケール（2−．2．1節の手順3で計算した値）のより小さい軸の方を優先する．すなわち，より縮小されている軸の帽を優先的に狭める．例えば図4の右の図では，て羊2，y・3，y2の順に狭めていく・ある格子を狭めると他の格子が狭め′られなくなる場合があぇが，このときは狭められなくなった格子を無視して残りの格子を狭める・

3 実装
．

M
集約を行うgroupオブジェクトが提供されている・Mochi・Sheetのクラスタノードは，このgroupオブジェクトを継承して実装しキため，，Amulet？groupと同嘩に扱うことがでさる．

ズームしアルブリ，ズムは，grOup自身の寸培，およびgroup中め図痕オブジェクトの位置および寸法に対する制約とし．て実現している．このためズ十本を行った場合，A品11etの制約解消系によって，位置・寸法の必要な部分についての●み再計算が行われる．耐えば，階層構造q）甲ほどのgroupのズームを行うと，そのgroup一に含まれる図形，および1階層上の宮血p七含まれる図形の再計算が行ねれる・・

ズームアル・．如ズムで昼group一に直接今まれLる（1鱒直下ゐ）歯形めみを変更するため・
階層構造中に異なるズームアルゴリズムを持つgroupを加えることが可能である・これ−85−

により【3］において述べられているsemanticzoomと同等の機能を実現しやすくなっている．例えば，第1節で示したエディタではモジュール，プロセスなどは，どのような大きさになっても名前だけは表示するというgroupで実装されており，その内部にまたMochiSheetのgroupを含んでいる．

現在の実装は，Pentium90MHzのPC互換機（OSはLinux）上で行っている．50個程度の図形が画面上に表示されていて，そのすべてが大きさを変える場合には秒間5フレーム程度で動く．数が100個程度になると秒間2フレーム程度である．なお，Amuletでは100個の図形を表示するのに約0．2秒かかるため，秒間5フレーム程度が限界である．

4 まとめと今後の課題
ズーミングのインタフェースにレイアウト編集機能を統合する手法を提案し，これを汎用ライブラリとして実装した．ユーザは大規模な図形構造の編集を，拡大・編集・アンドゥ操作の繰り返しにより効率良く行うことができる．
今後の課題としてはより一般的な幾何制約のもとでの編集を可能にすることがあげられる．またユーザテストを行ってインタフェースの有効性を調べることも必要である．

参考文献【1】AmuletProjectHomePage．http：／／www．cs．cml．edu／afb／cs／project／amulet／www／amulet−
bome．btml．

【2】LynBartrふm，AlbertHo，JohnDill，andFrankHenigman．TheContin。OuSZoom：ACon−
StrainedFisheyeTechniqueforViewlngandNavigatingLargeInfbrmationSpace．InPrv−
Ceedin9SqfULgT 95，Pp．207−215，November1995．

【3】BeIかminB・BedersonandJamesD．Hollan．Pad＋＋：AZoomingGraphicalInterfacefor
ExploringAlterpateInterfacePhysics．InPrDCeedin9S qf・UHT
1994．

94，pP．17−26，November【4】GeorgeW．Furnas．Generalizedfisheyeviews．InProceedin9SqfACMCm，86Cor痴柁乃CeOn
助manPbcioriin Computin9Systems，Pp．16−23．Association払rComputingMachinery，1986．

【5】ManOji七Sarkar，ScottS．＄nibbe，OrenJ．Tversky，andSteveムp．Reiss．StrechingtheRubber

Sheet‥AMetaphorforViewingLargeLayoutsonSIPallScreens・InProceedin9SqfUMT
93，pp．81−91，NoveI‡iber1993．

【6］ⅩiaoboWangandIsaoMiyamoto．Generatingcu8tOmizedlayouts．InProceedin9SqfGraph
Drawm995，pp．504−515，September1995．

【7】志築文太郎，豊田正史，高橋伸，柴山悦哉．並列ビジュアルプログラミング環境KLIEG‥プロセスネットワークパター㌢を利用した、再利性の向上と実行表示の効率化インタラクティブシ

ステムとソフトウェアiv，1996．
【8】豊田正史，志築文太郎，高橋伸，柴山悦哉．並列ビジュアルプログラミング環境ⅩLIEG‥プロセス

ネットワークパターンによる柔軟な再利用機構の導入情報処理学会研究報告9b−PRO−6（1996年3月26日・27日），電子情報通信学会技術研究報告SS95−46（1996−03），March1996．

−86−