「インタラクション，99」 平成11年3月

単一ビュー／モードに基づくビジュアルプログラミング環境の構築
遠 藤 清 適† 田 中 二 郎††
現在，発表されているビジュアルプログラミングシステムの多くが，プログラムの編集と実行をそれぞれ別環境で行なわせるような実装となっている．そのようなシステム構成におけるプログラミングの形態は，従来のテキスト言語環境で行なわれてきたものであり，必ずしもビジュアルプログラミングシステムの特徴を行かすものではない．
我々は，プログラムの編集・実行が単一の環境・単一の操作モードによって行なえることを重視した．
そのために，プログラムの論理的構造と視覚表現を同時に操作することのできる プリミティプ，によるプログラムの表現を捷案する・それを用いて，我々はプロトタイプシステムLivePP−prOtOを実装した．
LivePP−prOtOでは，ビューと呼ばれる単一の領域上でプログラムの操作を行なうことができる．

プリミティブを用いたビジュアルプログラミングシステムでは∴プログラムの構造および実行過程を柔軟に操作することが可能である．その特徴を生かし，プログラムの自由な加工の例として，プログラムの部分的実行と，自動ルール生成について考察する．

VisualProgrammingSystembasedon
SingleView／ManipulationMode

HIROMICHIENDOH†andJIRO TANAKA††
MostofexistingVisualProgrammingSystemsarebasedonthetraditioan1 Edit−and−Run
programmlngParadigminheritedfromthetext−basedprogrammlngenVironments．Aresuch

SyStemSbasedon

separa七edarchitecture

real1yintuitive？

Wbhaddesignedandimplementedanewprogramvisualizationsysteminwhichthelogical
StruCtureOftheprogramanditsvisualexpressionarebuiltinaobjectcal1ed primitive． In
OurSyStem，thestaticanddynamicaspectsoftheprogramcanbetreatedinthesameframe−

WOrkISOprOgrameditingandexecutioncanbeperformedonsingleview・Wecanapplythis
frameworktoprovidemoreintuitiveprogramman1pulationinterfacesuchaBPartialexecution
andauto−rule−generationfrohevaluationresultsassumedbyuser．

ためのトレーサから構成されており，それらの間では，1．は じ めにプログラムは単なる内部表現として扱われている．この従来のテキストベースのプログラミング言語環境でように，編集・実行に対してシステムのモードをはっきは，プログラムの構造という静的な側面と，実行というり区別しているという点で，やiょり従来のプログラミン動的な側面を同一の環境で扱うことが困難であったたグスタイルを受け継いだものであると言える．

め，エディタによる編集→（コンパイル→）実行とい

しかし，このようにプログラミングにおいて異なる環う形態が主流であった．

境でプログラムを扱わなければならないような構成は既存の多くのビジュアルプログラミングシステムも，ユーザにとって煩雑なものとなる可能性があり，充分にその多くは専用のエディタと実行過程の視覚化を行なう直感的な操作環境を提供しているとはいい難い．
我々の研究しているビジュアルプログラミングシステ

ムPPl）2）では，直接操作3）4）・眉感的操作の提供に重†筑波大学大学院修士課程理工学研究科

Master〉sPrograminScienceandEngineering，Univer− 点を置いているが，現在は特に，単一の環境上におけるSityofTsukuba

プログラムの操作の枠組みに注目している．5）6）††筑波大学電子・情報工学系

InstituteofInformationSciencesandElectronics，Uni−
VerSityofTsukubaー81−我々は，プログラムの論理構造と視覚表現を同時に扱

2．データ構造と視覚表現の統合

うためには，プログラムの内部表現があり，それを視覚2．1単一モード環境表現に変換して表示するという層割りの構造ではなく，1節で述べた通り，これまでに提案されてきたビジュ

図2のように，プログラムの構成要素を単位として，そアルプログラミングシステムは，前述したエディタとトの1つ1つが自らの視覚表現を生成すふようにすればよ

レーサに相当するサブシステムがシステム中ではっきりいと考えた．この構成要素をプリミティブと呼ぶ．プリ区別されていることが多い．これらはちょうどemacs

ミティブは，自分の名前や引数の数のようなシンボリッとccのように個別のプログラムとして実装されているクな情報を持つ部分と，それをもとにビュー上に自分をか，あるいは単一のビューを提供するようなシステムで描画する部分からなっており，これらの集合としてプロあっても，編集・実行でそれぞれモードを切り替える必グラムが表現される（図3）．プリミティブの1つ1つ要がある．

が，自分自身をビュー上に描画することにより，全体と我々は，このように個別の環境上でプログラムの編してそのときのプログラムの状態がビュー上に投影され集・実行を行なうのではなく，単一のビューの上でこれているように見える．もし，プログラムの構造が変化すらすべての操作を行なえるようなビジュアルプログラミればビューの状態も変化し，ユーザがビュー上でプリミング環境が重要であると考えている．ただし，「いわゆティブを操作すれば，同時にプログラムの構造が変更する統合環境」のようなものではなく，編集。実行のためる．の各操作がすべてモードの切り替えなしで行なわれ，ププリミティブの集合はビューと1対1に対応しておログラムを実行させた結果についても同じビューに提示

り，編集操作と実行操作はどちらもそのプリミティブ集されるような環境である．イメージとしては，ビュー上合を対象として行なわれる．いずれも，結局はプリミのプログラムを直接操作でき，実行させるとそれがそのティプ集合の書き換えであり，プログラムの編集はユーまま変形していって結果になるというものである．

ザが，実行はシステムが行なうという，書き換えを行な

2．2 プリミティブの導入

う主体の違いだけとなる，このため，編集操作・実行の既存のシステムでは，それぞれ編集・実行のためのサそれぞれが異なる操作モードを持つ必要がなくなる．

ブシステムが分離して存在していたこともあり，プログ
Language Primitives

ラムの論理的構造を内部表現として共有し，それを各サブシステムが視覚表現に変換して表示するという図1のPrimitive Objectような構成が一般的である．
ProgramStatic Visualization oftheProgramStrlICture（Editing）

轡

VisualExpressions

Internal Expression○ヽ（Symbolic）

DynamicVisualization
theProgramBehavior

く＝＝⊃Manipulation Methods

図2 言語要素と視覚表現の統合（Execution）

Editing（＝ManipulationbyUser）

図1既存のシステム構成

p．imitive＄

0 0 0

このような構成の場合，サブシステム間でプログラム

Visual Expression（Appoaronce，Aetion，…）

Symb01ieExpre8ふionの状態を直接共有することが難しく，例えばエディタでプログラムを変更したが，それがトレーサ上でのプログ

ExecLJtion（＝ManipuIationbySy＄tem）

ラムの実行状態に即座に反映されないといった問題が生

図3 プリミティブを用いたプログラムの表現

じる．

−82−

作はマウスの右ボタンを押すと出るメニューから行な

3．LivePP−prOtOう．

我々は，プリミティブの概念を用いて，プログラムのプリミティプやその引数どうしを論理変数で接続する論理的構造と視覚表現を続合して扱うことにより，単一ためには，マウスの中央ボタンを使用する．図6のようビュー上でプログラムの操作を行なうシステムLivePP−に，始点，終点となるプリミティプまたはその引数の上protoを設計，実装した．本節では主にその設計とプロでそれぞれクリックすると，それらの間に論理変数を表グラミング例について述べる．図4にLivePP−prOtOのす線分が生成される．

概観を示す．

LivePP−prOtOでは，ビジュアルプログラミングシス
テムにおける操作環境のサブセットとして，以下のような操作をサポートしている．
● プログラムの作成・編集● プログラムの実行● プログラムのファイルへの保存・ファイルからの呼び出し

乱1言語のモデル化
我々の提案する，単一のビューによるプログラミング環境では，次のような理由から，モデルとする言語に並列論理型言語の1つであるGHC7）を採用した．
図5 プリミティブの生成● 言語を構成する基本要素の数が少なく，規則がシンプルである

GHCを含む宣言型の言語は，データ構造の要素となる意味単位（アトム）や演算子，そしてそれらのデータ構造間の関係規則によって構成される．また，実行規則も，ゴールをサブゴールに置換するというもののみで，非常に簡潔なものである．このため，手続き呼び出し・変数・制御構造など多くの要素・規則を含む手続き型言語などに比べて視覚化が容易である．
図6 論理変数の接続● データ及びプログラムが単一の表現によっている
GHCのプログラムは，データ構造から新しいデータ構造への変換規則を定義するものであり，データプログラムの実行構造と同じ構成要素を用いて記述される．従って，

LivePP−prOtOは，プログラム中のゴール状態を監視

単一ビュー上でプログラムを操作する場合，操作対しており，リダクションが可能であると判断した場合は象による表現の違いを意識する必要がなく，ユーザそのゴールの評価を自動的に開始させる．従って，プロの負担も軽くて済む．

グラムの主要部分を3．2節のようにして作成しておき，3．2 プログラミング例

そこに必要なデータを与えることにより，自動的にプロ

本節では，LivePP−prOtOにおけるプログラミングのグラムの実行を開始させることができる．2つのリストを連結する述語appendを用いて実行例を示す．

手順を，実際の操作例を用いて説明する．

図7に，完成前のプログラムを示す．中央にあるのがプログラムの作成

LivePP−prOtOでプリミティプを生成するには，図5で示したように，メニューからプリミティブの種類をゴールappend／3，左は連結されるべき2つのリスト，そして右は結果を保持するダミーゴールである．これら選択することで行なう．このとき，プリミティプのシンを論理変数で接続すると，すべてが接続された時点でボル（名前）の入力を求められる．生成されたプリミティappend／3がリダクション可能と判断され，プログラムブはビュー上に配置され，マウスの左ボタンでドラッグ実行が開始される．まず，図8のように，append／3のして自由に動かすことができる．削除・コピーなどの操リダクションが発生し，サブゴールがビュー上に展開す−83−

図4 LivePP−prOtO
る．

ゴールの展開が終了すると，次に，論理変数で凄続されているプリミティブどうしで単一化が起こる．図9では，図8上に矢印で示された部分が単一化されている．
その結果リダクションが可能になったゴールがあれば，さらにサブゴールの展開が行われる．
このようにして，ゴールの評価に成功している間はサブゴールの展開と単一化が反復され，評価に失敗するとそこでプログラムの実行は停止する．サンプルプログラ
ムの最終状態を図10に示す．【a］と【b】という2つのリストが連結され，【a，b】というリストになっている

図8 プログラム実行例：実行開始

ことがわかる．

プログラムが実行されている間も，ユーザは自由にプリミティプの生成などを行なうことができる．また，実行の一時停止を指定しておいて，実行中のプログラム自体を再編集することも可能である．一時停止を解除すると，再編集を行なった状態からプログラムの実行が再開される．

4．単一環境を応用したプログラミング
LivePP−prOtOで実装された，プログラムの論理構造と視覚表現を統合したプログラム表現は，直感的かつ自由にプログラムを加工できるような操作環境を構築する
図7 プログラム実行例：初期状態ための基礎として有用であると考えている．本節では，−84−

予測することは困難であるから，実際にプログラムがどのような挙動を示すのかを見せる必要がある．このような場合に，既存のシステムでは2．2節で述べたような問題があり，ただ一部分の変更のために最初からプログラムを実行し直すなどの必要がある．
もし，編集中のプログラムのある部分だけを実行させてみたり，それをまたもとの状態に戻してみたりという，時間軸の操作のようなことができれば，部分的な試行錯誤がしやすくなり，その部分の挙動の把握や修正をしたいといった場合に有効であると考えられる．
そこで，LivePP−prOtOで実装されたプログラムの自図9 プログラム実行例：単一化直後

動実行機構を利用して，次のように，プログラムの指定した一部分に全体とは独立した時間軸を与え，そこだけの評価を行なわせることができる．
（1）プログラムから評価したい部分を切り出す（図11

上）．
切り出しを指定した部分は独立した時間軸を持っており，巻き戻しなどによって実行過程の任意の時点の状態を呼び出せる．選択部分の評価によって生じた変化は本体のプログラムには干渉しない．

（2）切り由し部分の時間軸を操作して，その部分が正しく評価されているかどうかを観察することができる．意図した動作をしない場合は，その部分の図10 プログラム実行例：最終状態

ル⊥ルを修正することができる．

LivePP−PrOtOの環境の発展として，次に挙げるような（3）必要であれば，切り出した部分に対して新しい入力データを与える．ゴールに適切な引数が与えら環境の有用性について考察する．

れていれば，選択された範囲だけが，通常の実行● プログラムの自動評価● ルール定義・追加の支援と同様に自動的に評価される．修正後の実行過程

2。2節で挙げたような，プログラムの編集／実行を明は，それまでの実行過程から分岐した新たら枝として管理される．

確に分離している構成のビジュアルプログラミングシス

テムでは，これらの環境の実現は困難と思われるが，前4．2 ルール定義・追加の支援節で示した枠組を用いることでこれらを自然に達成できユーザは，ビュー上にアトムやゴールなどの部品を配置してプログラムを編集する．ゴールの引数に対してると思われる．

4．1 プログラムの部分的評価

データが与えられると，LivePP−PrOtOと同様に，それプログラミングの過程では，ある程度の試行錯誤が生がゴールの定義節におけるリダクション条件を満たすかじることが予想される．ビジュアルプログラミングシス

どうかがチェックされる．

テムでは，2次元（あるいはそれ以上）空間内にプログラ

もしもそのゴールに定義節が存在しないか，または与ムの構造を表現しているため，ユーザはテキストで善かえられたデータがどの定義節のリダクション条件にも合れたプログラムよりも比較的容易にプログラムの構造を致しない場合，システムは図12のようにそのゴールを把握することができ，ソース上での変更は自由に行なう待機状態にして，ユーザにルールの定義を促す．ユーザ

ことができる．

は，新たに追加するルールの適用後の状態を仮寒とし実際には，プログラムのある部分を実行させて，そのてビュー上に作成する（図1芦）・システムは・そこから挙動を見ながら他の部分を作成していきたいという場ユーザが仮定したルールを自動的に作成する．

合がある．特に，プログラミングの経験の少ないユーザ

プログラムの実行中に，それまでに定義されているは，プログラムが視覚化されていても，その挙動までをルールの適用に失敗した場合にも，そこでプログラム仝

−85−

図12 ルール定義の開始（1）

図11領域の切り出しとテストデータの適用体の実行を放棄するのではなく，ルール適用に失敗した部分で，ユーザに新たなルールの定義を求めるようにする．
図13 ルール定義の開始（2）例えば，プログラムを実行中，園14のように，ゴールに対してどの定義節のリダクション条件も満たさないいために完全にフラットなプログラムしか記述できなようなデータが引数として与えられると，このゴールにい，実行規則の適用が単純なパターンマッチのみによる対するリダクションが失敗する．通常，GHCではこのなどの相違点がある．

ような場合にはプログラム全体の実行が放棄されるが，BurnettらによるFbrms／39）10）は，スプレッドシー

ここですぐに実行を放棄せず，リダクションに失敗した

トの動作をもとにしたプログラミングシステムである．

ゴールを待機状態にして，ユーザに新しいルールの追加オブジェクトの動作は，を促す．もし，新しいルールの追加によってその部分のセル内の記述によって制御され，セル内容が更新され評価が可能になった場合，追加されたルール状態でプロると，自動的に再評価が行なわれる．制約の向きはセルグラムの実行が続行される．

→オブジェクトの一方通行であって，オブジェクトに対する操作をセルに反映させることはできない．

5．関連研究1bonT山kll）は，データや演算痘どを漫画のキャラク

山本のvisulan8）は，1枚のビットマップをプログラタに見立て，それらの動きによってプログラムを表現すミング空間とみなし，その中でパターンマッチと置換をる．プログラミングは単一のビュー上で行なわれる．プ

繰り返すことによってプログラムを実行するシステムでログラムの編集は例示的であり，ユーザの操作をロボッある．しかし，ビットマップの各ドットは意味を持たなト（プログラム）に覚えさせることで行なわれる．

−86−

るビジュアルプログラミングシステムの構成，コン
ピュータソフトウェア）Vbl・15，No・1，pp・50−53（1998）−

6）Endoh，H．and Thnaka，，．：Integrating
Data／Pro一ramStructureandtheirVisualEx−pressionsln the Vis11al Programming Sys−
tem，AβねタαC所c Co叩扉er仇mαれ九feすⅦC−
如mJタタβ，pp・453−458（199呵．
7）K．Ueda：GuardedHornClauses，ICOTtech．
report TR−103，Institutefor New Generation

ComputerTbchnology（1985）．
8）山本格也：ビットマップに基づくプログラミング言語Visulan，インタラクティププログラミングとソフトウェアⅠⅠⅠ，近代科学社，pp・15ト160（1995）．

9）JohnAtwood，M．B．etal．：SteeringProgramS
Via．TimeTravel，19961EEESymposiumonV査−
β祝αg山花g祝叩eぷ（1996）．

10）Carlson，P．，Burnett，M．and Cadi2；，J．：A
SeamiessIntegrationofAlgorithmAnimation
into a Declarative VisualProgrammlng Lan−

図14 実行失敗時のルール追加定義

guage，クmceedれgβA血αれCedⅥβuαg九￡eγ舟ceβ
何†7，タり（1996）．

6．ま と め11）Kal1n，K．：TbonTalk（TM）−An Anima尤ed
ProgrammingEnvironmentforChildren，JourL

我々は，プログラムの論理的な構造と，その視覚的表
現を同一のデータ構造内に組み込むことにより，プログ

れα〜げⅥβ祝αg血れgu叩eβαmd（わ†叩u血g，Acar

ラムの静的な面と動的な面を同等に扱うことができるよdemicPress（1996）．

うになった．これにより，単一のビュー上においてプログラムの編集及び実行という性質の異なる操作を並行して自由に行なえるという，従来のビジュアルプログラミ

ングシステムにみられなかった環境を実現できるようになった．この枠組を利用するとにより，4．1，4．2節で示したように，プログラムの編集と同時にその部分の評価結果を得てそれを編集操作にフィードバックさせることができたり，プログラムの実行中に発見された誤りをその場で訂正し，そのまま評価を続行させたりすることが可能になる．
参 考 文 献1）田中二郎：並列論理型言語GHCのビジュアル化の試み，インタラクティブプログラミングとソフト

ウェアⅠ，近代科学社，pp．205−214（1994）．

2）中野勝次郎，田中二郎：ビジュアルプログラミング
システムにおけるモデルの視覚化アルゴリズム，インタラクティブプログラミングとソフトウェアⅠⅠ，

近代科学社，pp．205−214（1994）．
3）B．Sclmeiderman：DirectManipulation：AStep
beyondProgrammmgLanguageS，IEEECom−p視ねr，Vbl・19，No・8，pp・5ト69（1983）・
4）Schneiderman，B．：Desi9nin91he ther九ter−
face，Addison−Wtsley，2nd edition，Chapter5（1992）・

5）遠藤清適，田中二郎：パッドベースシステムによ−87−