JP2005242474A - ユーザインタフェース設計装置及びプログラム - Google Patents

Abstract

【課題】 独立した複数の異なる情報を表示するＧＵＩを設計するにあたり、複数の表示枠を用いて同時に各表示枠が独立した状態遷移を表現することにより、ユーザインタフェースとしての表示内容を充実化させることができるユーザインタフェース設計装置を提供する。
【解決手段】 ＧＵＩ画面上への表示枠の追加、削除及びその表示サイズを編集すると共に、ＧＵＩ画面上に配置した表示枠間で表示内容を遷移させる状態遷移を追加、削除する表示枠編集部２と、ＧＵＩ画面上に配置した表示枠内に配置する表示部品の追加、削除及びその表示サイズを編集する表示枠内レイアウト編集部３と、表示枠編集部２により追加された表示枠間の状態遷移について、表示枠内に配置する表示部品に対して遷移の契機となるイベントを設定すると共に、遷移前の表示枠を表示しながら遷移後の表示枠の表示内容を編集する表示枠間状態遷移編集部４とを備える。
【選択図】 図１

Description

この発明は、コンピュータなどのユーザインタフェースを設計するユーザインタフェース設計装置に係り、特にＧＵＩ（Graphic User Interface）を構成する操作画面における表示部品の状態遷移を設計するユーザインタフェース設計装置及びこれをコンピュータに実現させるためのプログラムに関するものである。

特許文献１には、コンピュータの情報入力装置によって発生した各種イベントに応じた状態遷移に伴ってＧＵＩ操作画面（以下、ＧＵＩ画面と称する）の表示部品を切り替えるユーザインタフェースの設計に適用されるユーザインタフェース設計装置が開示されている。

この設計装置では、イベント発生により状態が例えば状態１から状態２に遷移するＧＵＩを設計するにあたり、状態１を表現した表示内容を消去してから状態２に対応する表示部品を表示する。

特開２００２−２４４８４８号公報

従来のユーザインタフェース設計装置では、ＧＵＩ画面における表示部品の状態遷移を設計するにあたり、遷移すべき状態を決定すると前の状態に関する表示内容を消去してしまうため、同時に複数の状態を表現することができないという課題があった。

これは、ＧＵＩ画面において複数の表示枠を用いて独立した複数の異なる情報を表示するアプリケーションを実現することが不可能であることを意味する。

この発明は、上記のような課題を解決するためになされたものであり、独立した複数の異なる情報を表示するＧＵＩを設計するにあたり、複数の表示枠を用いて同時に各表示枠が独立した状態遷移を表現することにより、ユーザインタフェースとしての表示内容を充実化させることができるユーザインタフェース設計装置及びこれをコンピュータに実現させるためのプログラムを得ることを目的とする。

この発明に係るユーザインタフェース設計装置は、ユーザインタフェースとなる操作画面上への表示枠オブジェクトの追加、削除及びその表示サイズを編集すると共に、上記操作画面上に配置した表示枠オブジェクト間で表示内容を遷移させる状態遷移を追加、削除する表示枠編集部と、上記操作画面上に配置した表示枠オブジェクトの枠内に配置する表示部品オブジェクトの追加、削除及びその表示サイズを編集する表示枠内レイアウト編集部と、上記表示枠編集部により追加された表示枠オブジェクト間の状態遷移について、上記表示枠オブジェクトの枠内に配置する表示部品オブジェクトに対して遷移の契機となるイベントを設定すると共に、遷移前の表示枠オブジェクトを表示しながら遷移後の表示枠オブジェクトの表示内容を編集する状態遷移編集部とを備えるものである。

この発明によれば、ユーザインタフェースとなる操作画面上への表示枠オブジェクトの追加、削除及びその表示サイズを編集すると共に、上記操作画面上に配置した表示枠オブジェクト間で表示内容を遷移させる状態遷移を追加、削除する表示枠編集部と、上記操作画面上に配置した表示枠オブジェクトの枠内に配置する表示部品オブジェクトの追加、削除及びその表示サイズを編集する表示枠内レイアウト編集部と、上記表示枠編集部により追加された表示枠オブジェクト間の状態遷移について、上記表示枠オブジェクトの枠内に配置する表示部品オブジェクトに対して遷移の契機となるイベントを設定すると共に、遷移前の表示枠オブジェクトを表示しながら遷移後の表示枠オブジェクトの表示内容を編集する状態遷移編集部とを備えるので、複数の表示枠を用いて独立した複数の異なる表示部品オブジェクトを表示するアプリケーションを容易に構築することができ、ユーザインタフェースとしての表示内容を充実化させることができるという効果がある。

実施の形態１．
図１は、この発明の実施の形態１によるユーザインタフェース設計装置の構成を示す図である。ユーザインタフェース設計装置（以下、ＵＩ設計装置と略す）１は、表示枠編集部２、表示枠内レイアウト編集部３、表示枠間状態遷移編集部（状態遷移編集部）４、表示枠格納部（編集結果格納部）５、表示枠間状態遷移格納部（編集結果格納部）６及びシミュレート処理部７から構成される。ＵＩ設計装置１は、例えば汎用コンピュータなどを用いて、本発明に従うユーザインタフェース設計プログラムを実行させることによって具現化することができる。

つまり、ユーザインタフェース設計プログラムをコンピュータに実行させて上記構成要素２〜７として機能させることにより、ＵＩ設計装置１による特徴的なデータ処理を実行することができる。なお、以下の説明において、ＵＩ設計装置１を具現化するコンピュータ自体の構成及びその基本的な機能については、当業者が当該分野の技術常識に基づいて容易に認識できるものであり、本発明の本質に直接関わるものでないので詳細な記載を省略する。

表示枠編集部２は、表示装置９に表示させた編集用画面上の編集対象の表示枠の表示サイズ及びその表示位置、表示枠間での状態遷移の追加や削除などを編集し、その結果を表示枠格納部５や表示枠間状態遷移格納部６に格納する。

ここで、本発明での表示枠とは、ＧＵＩ画面を小領域に分けて内部に表示部品オブジェクトを配置しその挙動を他の領域とは別個に設計記述するための小画面オブジェクトである。この表示枠をＧＵＩ画面上に複数設けることで、複数の異なる表示部品をそれぞれ配置させ、これらの挙動を他の表示枠とは別個に設計記述することができる。

例えば、情報入力装置８を用いて、ユーザから表示枠のサイズや表示位置に関する情報が指定されると、表示枠編集部２は、当該情報に応じて編集対象の表示枠の大きさやその表示位置を変更すると共に、変更後のサイズや表示位置を特定する情報を表示枠格納部５に格納する。

また、情報入力装置８としてマウスを用い、表示枠の状態遷移を一方の表示枠から他方の表示枠へのマウスのドラッグ操作などにより指定されると、表示枠編集部２は、ドラッグ操作による表示枠遷移方向を矢印線として表示画面に表示し、この矢印線に応じた遷移方向を特定する情報と共にこの状態遷移の端点となる表示枠を特定する情報を表示枠間状態遷移格納部６に格納する。

ここで、表示枠の状態遷移とは、表示枠内に設定した状態遷移に応じて各状態で表示すべき表示部品に遷移することである。また、表示枠間の状態遷移とは、ＧＵＩ画面上で、ある状態での表示部品が表示された表示枠から他の状態の表示部品が表示された他の表示枠に遷移することを意味する。

なお、情報入力装置８としては、例えばＵＩ設計装置１を具現化するコンピュータに標準的に装備されたキーボードやマウスなどが挙げられる。また、表示装置９には、コンピュータのＬＣＤやＣＲＴなどが考えられる。

表示枠内レイアウト編集部３では、表示枠編集部２により編集用画面上に表示された表示枠についての枠内レイアウトを、情報入力装置８を用いて設計記述された情報に応じて編集する。また、表示枠内レイアウト編集部３は、表示枠ごとに枠内に配置すべき表示部品を格納する記憶部を有する。

編集用画面上で編集対象としての表示枠が指定されると、表示枠内レイアウト編集部３は、当該表示枠内に配置すべき表示部品を上記記憶部からリストアップして編集用画面上に表示させる。これにより、情報入力装置８を用いて、ユーザから表示部品及びその表示位置、表示サイズなどが指定されると、表示枠内レイアウト編集部３は、表示枠編集部２を介して当該指定情報をグラフィカルに反映させた枠内レイアウトを編集用画面上に表示させる。

同時に、表示枠内レイアウト編集部３は、上述のようにして求めた編集対象の表示枠内についての編集結果である表示部品の配置位置や表示サイズに関する情報を、表示枠編集部２を介して表示枠格納部５に格納する。

また、表示枠内レイアウト編集部３は、編集対象として指定された表示枠が表示枠間の状態遷移の遷移元になっている状態遷移に関する情報を、表示枠編集部２を介して表示枠間状態遷移格納部６から取得し、取得した状態遷移の契機を当該表示枠内に配置した表示部品に設定する。

状態遷移の契機とは、状態遷移の契機となるイベントを規定する情報であり、例えば表示枠内に配置したボタンなどの表示部品に対して、マウスによるクリックやキーボードのキー入力などのイベントを状態遷移の契機として結びつけられる。つまり、上記表示枠内のボタンにマウスクリックなどをすることにより、当該表示枠についての状態遷移が実行されることになる。

表示枠内レイアウト編集部３は、上述のようにして編集した状態遷移の契機となる表示部品やイベント、これにより実行される状態遷移を特定する状態遷移名称などの情報を、表示枠編集部２を介して表示枠間状態遷移格納部６に格納する。

表示枠間状態遷移格納部６に格納された表示枠間の状態遷移に関する情報は、表示枠編集部２を介して情報入力装置８を用いて指定可能である。これにより表示枠間の状態遷移に関する情報が指定されると、表示枠間状態遷移編集部４が起動して当該表示枠間の状態遷移を編集する。

このとき、表示枠間状態遷移編集部４は、表示枠間状態遷移格納部６から状態遷移に関する情報を読み出し、これの編集用画面を構築して表示枠編集部２を介して表示装置９に表示する。これにより、表示枠間状態遷移編集部４は、情報入力装置８を用いて設計記述された情報に応じてＧＵＩ画面上での表示枠間の状態遷移を編集する。

また、表示枠間状態遷移編集部４は、表示枠間の状態遷移を編集するにあたり、他の表示枠間の状態遷移と識別するための名称、状態遷移により遷移前の表示枠の表示を表示画面上に残すか否かの選択や、遷移前後の表示枠間の同時操作の可否などの状態遷移に関する情報を表示枠間状態遷移格納部６に逐次格納する。

なお、表示枠間状態遷移編集部４は、情報入力装置８を用いてユーザから表示枠間の状態遷移についての判定状態が入力されることにより、当該判定状態を反映させた条件付き状態遷移を作成し、この遷移条件を表示枠間状態遷移格納部６に格納することも可能である。

表示枠格納部５は、表示枠編集部２及び表示枠内レイアウト編集部３により編集された表示枠に関する情報を格納する記憶部であって、例えば表示装置９の表示画面上の表示枠の配置位置やサイズに加え、表示枠内の表示部品の配置位置やそのサイズを特定する情報が格納される。

表示枠間状態遷移格納部６は、表示枠編集部２及び表示枠間状態遷移編集部４により編集された表示枠間の状態遷移に関する情報を格納する記憶部であって、例えば表示枠間の状態遷移の端点となる表示枠を特定する情報、その遷移方向を特定する情報、他の表示枠間の状態遷移との識別を可能とする名称、状態遷移により遷移前の表示枠の表示を表示画面上に残すか否かの選択や、遷移前後の表示枠間の同時操作の可否などの状態遷移に関する情報が格納される。

表示枠格納部５及び表示枠間状態遷移格納部６は、例えばＵＩ設計装置１を具現化するコンピュータに標準的に装備されたハードディスク装置や、ＵＩ設計装置１で読み込み可能なＤＶＤなどの記録媒体などで具現化することができる。

シミュレート処理部７は、表示枠編集部２及び表示枠間状態遷移編集部４により編集された表示枠の表示や表示枠間の状態遷移をシミュレートする。具体的には、シミュレート処理部７が、表示枠格納部５及び表示枠間状態遷移格納部６からシミュレーションに使用する表示枠に関する情報とその表示枠間の状態遷移に関する情報を読み出し、表示枠内の複合表示部品の状態も初期状態に設定した初期表示枠として表示装置９に表示する。

ここで、複合表示部品とは、複数の状態からなる状態空間を有し、各状態における表示や状態遷移などのふるまいの設計記述が可能な表示部品オブジェクトである。上述した複合表示部品の初期状態とは、当該複合表示部品が取り得る複数の状態のうち、当該複合表示部品が指定された際に最初に表示する状態として選択された状態をいう。

表示画面上にシミュレート対象の表示枠を表示させている間、シミュレート処理部７は、マウスやキーボードなどの情報入力装置８からの情報入力を監視しており、上記表示枠内の表示部品に状態遷移の契機として設定されたイベントに一致する入力イベントが発生したか否かを検査する。

このとき、状態遷移の契機として設定されたイベントに一致するイベントが検出されると、シミュレート処理部７は、当該表示枠についての状態遷移に関する情報を基に状態遷移をシミュレートして、表示枠の表示が必要な場合は新たな表示枠を表示し、表示した表示枠内に複合表示部品があればその状態を初期状態に設定する。

また、表示している表示枠自身へ状態が遷移する場合、シミュレート処理部７は、上記状態遷移に関する情報に基づいて当該表示枠内での表示部品の状態遷移の必要性を確認する。これにより、表示枠内の表示部品の状態遷移が必要な場合は、当該表示枠自身への状態に遷移した表示内容を表示画面上に表示させる。

次に、具体例を挙げてユーザインタフェース設計動作について詳細に説明する。
図２は、実施の形態１によるＵＩ設計装置１にて設計されたＧＵＩ画面における表示枠の構成及び表示枠間の関係を示す図であり、この図に沿って説明する。

先ず、表示枠編集部２は、表示装置９に編集用画面を表示させる。この編集用画面には、ユーザ（設計者）が情報入力装置８を用いて表示枠や表示部品の追加や削除などの設計記述が可能となるように、これらの追加や削除を設定するための操作画面が設けられる。ユーザは、上記編集用画面を参照しながら、情報入力装置８を用いて編集対象の表示枠の追加を指定する。

ユーザからの指定情報を入力すると、表示枠編集部２は、表示枠の追加であれば、表示枠格納部５から追加指定された表示枠に関する情報を読み出して、ユーザから指定されたサイズや表示位置に従って編集用画面上に表示させる。反対に、表示枠の消去であれば、消去指定された表示枠を編集用画面上から消去する。

図２では、表示枠１，２が編集対象の表示枠として追加されている。これら表示枠１，２は設計表示画面上に実際のＧＵＩ画面上でのサイズや表示位置に対応して表示される。また、表示枠編集部２は、表示枠１，２についてユーザから指定されたサイズや表示位置に関する情報を表示枠格納部５に格納する。

さらに、本発明の特徴である表示枠間の状態遷移の取り扱いについて説明するため、ユーザ（設計者）が、情報入力装置８を用いて表示枠１から表示枠２へ状態遷移することを指定したものとする。

この遷移の関連付け操作としては、例えば情報入力装置８であるマウスを使い、表示画面上に表示させた表示枠１及び表示枠２について表示枠１を表示枠２が表示されている部位までマウスでドラッグし、その遷移方向を矢印線で表示するようなものが考えられる。

上記のような操作以外に、状態遷移を追加するための専用の設定画面を設け、これに状態遷移を設定すべき表示枠を記述するか、若しくは、現在表示されている表示枠の中から状態遷移させる表示枠を選択させるようにしてもよい。

このようにして、情報入力装置８を用いてユーザから設計記述された表示枠間の状態遷移に関する情報（状態遷移の端点となる表示枠を特定する情報や遷移の方向など）は、表示枠編集部２によって当該状態遷移を識別するための状態遷移名称と共に表示枠間状態遷移格納部６に格納される。

図示の例では、表示枠編集部２が、ユーザによるマウスドラッグに沿って編集用画面上で表示枠１と表示枠２との間に矢印線をひき、この矢印線で表現された状態遷移に対して遷移１を遷移名称として表示している。

表示枠のサイズの調整については、情報入力装置８を用いてユーザから設定されたサイズ情報により表示枠編集部２が実行する。具体的には、表示枠編集部２が、例えば編集用画面上にサイズを直接入力できるウィンドウを表示し、ユーザが当該ウィンドウを介して入力したサイズ情報を基に表示枠のサイズを調整するようにしてもよい。

また、表示枠自体をマウス操作に連動して自在にサイズを変更できるオブジェクトとして実現し、表示枠編集部２が、ユーザによって編集用画面上の表示枠を直接マウスで引き延ばす操作に連動させて、表示枠のサイズを変更するように構成してもよい。このようにすることで、ユーザが表示枠のサイズも視覚的に判断することができ、編集の効率を上げることができる。

上述のようにして変更された表示枠のサイズ情報は、表示枠編集部２によって逐次表示枠格納部６に格納される。

次に表示枠内のレイアウト編集処理について説明する。
編集用画面上の表示枠のうち、枠内レイアウトを編集したい表示枠をユーザがマウスなどにより指定することで、表示枠内レイアウト編集部３が起動する。
表示枠内レイアウト編集部３は、表示枠に関連付けて表示部品を記憶する記憶部から編集対象として指定された表示枠内に配置すべき表示部品に関する情報を読み出し、編集用画面上に表示する。

図２では、表示枠内レイアウト編集部３が、表示枠１に対して基本部品１、基本部品２、複合表示部品１を含む表示部品の選択候補を編集用画面上に表示し、ユーザが情報入力装置８を用いて選択候補の中から基本部品１、基本部品２、複合表示部品１を指定する。

この指定操作としては、情報入力装置８であるマウスを用いて表示枠１にマウスのドラッグ操作により枠内に配置すべき表示部品を表示したい位置に配置することなどが考えられる。このようなマウスを用いた編集用画面上での操作で指定された表示部品及びそのサイズや表示位置などの情報は、表示枠内レイアウト編集部３が表示枠格納部６に逐次格納する。

また、部品のサイズについては、表示枠内レイアウト編集部３が、マウスのドラッグ操作やキーボードのキー入力を用いてサイズ値を入力可能なサイズ設定画面を編集用画面上に表示し、これを介してユーザがサイズ値を入力する。

なお、基本部品１〜Ｎ（Ｎは自然数）は、典型的なＧＵＩ画面を構成する表示部品オブジェクトであり、例えばボタンやラベル、テキスト入力フォーム、チェックボックス、メニューなどが考えられる。また、複合表示部品１は、取り得る状態として状態１〜Ｎまであり、各状態に対応して基本部品６〜Ｎがそれぞれ配置される。

また、複合表示部品１は、ユーザによるマウス操作に連動して状態遷移するオブジェクトとして構成する。本実施の形態では、説明の簡単のため、例えば編集用画面上でマウスによりクリック指定すると、その状態が状態１から状態２に遷移し、これを再度クリックすると状態２から状態１に逆方向に遷移するように複合表示部品１を構成する。つまり、複合表示部品１は、マウス操作に連動した状態遷移で各状態に応じた表示部品が表示される１つの表示枠として構成される。

このようにして、表示枠内レイアウト編集部３は、情報入力装置８を用いてユーザから入力される情報に応じて、表示枠１についての枠内レイアウト編集を実行する。

同様に、表示枠２についても、表示枠内レイアウト編集部３が、ユーザからのマウス操作などにより基本部品３、基本部品４及び基本部品５を追加し、これらの枠内での配置位置を決定して表示内容を構築する。表示枠１，２についての編集結果に関する情報は、表示枠内レイアウト編集部３によって表示枠格納部６に格納される。

なお、表示枠内レイアウト編集部３では、表示枠内に配置する表示部品を編集用画面上に実際に使用するときと同様の表示枠サイズ上に枠内表示部品を表示して編集する。これにより、ユーザは、表示枠を実際のＧＵＩ画面に表示したときの構成通りに設計を行うことができ、その作業効率を向上させることが可能である。

次に、表示枠間状態遷移編集部４は、表示枠編集部３によって追加された表示枠間の状態遷移を編集する。具体的な処理としては、先ず、表示枠間状態遷移編集部４が、表示枠格納部５及び表示枠間状態遷移格納部６から編集対象の表示枠間の状態遷移に関する情報を読み出して、遷移の契機となるイベント、及び、遷移元となる表示枠１内に配置する表示部品のリストから上記遷移の契機となるイベントを受ける部品を、ユーザが情報入力装置８を用いて選択できる編集用画面を構築して表示する。

図２の例で説明すると、表示枠間状態遷移編集部４は、表示枠１に配置すべき表示部品として当該表示枠１から派生するように基本部品１、基本部品２及び複合表示部品１を表示する編集用画面を構築し、情報入力装置８を用いたユーザからの指定を待つ。

ここでは、説明の簡単のため、遷移１の契機として、例えば表示枠１に配置した基本部品１に対してマウスのクリックが行われたときを設定する。さらに、表示枠１から表示枠２への遷移の条件として、基本部品１にマウスのクリックがなされた際に複合表示部品１が状態２である場合、表示枠間状態遷移編集部４は、表示枠２を表示させ、それ以外の場合には何もしないよう設定する。

なお、表示枠間の状態遷移についての編集処理は、遷移の契機となるイベントを受ける部品に対して、上述したマウスクリック以外の複数種類のイベントを設定するようにしてもよい。例えば、情報入力装置８としてキーボードを考えた場合のキーイベント、キーやマウスなどからの入力がなくなってから指定時間後に発生するリリースイベント、ある状態もしくは状態グループに入ったときに発生するエントリイベント、ある状態もしくは状態グループからぬけるときに発生するイグジットイベント、音声による入力で発生する音声入力イベント、カメラなどからの入力で発生する画像入力イベント、機器の動きによって発生するモーションイベントなどであってもよい。

また、遷移前後の表示枠について、遷移後の表示枠を表示した際に遷移前の表示枠を表示したままにしておく。このとき、情報入力装置８を用いたユーザからの指定に対する主従関係を遷移前の表示枠と遷移後の表示枠との間にもたせる。つまり、遷移前の表示枠については、編集用画面上で常に遷移後の表示枠の背面に位置するように表示してマウスやキーボードからの入力ができないように制限したり、遷移前後の表示枠を両方表示してマウスやキーボードで指定された表示枠についてのみ情報入力を可能にするなどが考えられる。

さらに、表示枠間状態遷移編集部４による編集処理では、遷移の契機となる条件を編集用画面上で追加可能とする。例えば、遷移前の表示枠に配置する表示部品の状態を入力とした条件分岐を追加することで、遷移先となる表示枠を選択したり、遷移せずに遷移前の表示枠を再度表示するように構成しても良い。

この他、表示枠間の状態遷移の契機となるイベントを遷移前の表示枠の表示部品に予め設定しておき、表示枠間状態遷移格納部６に表示部品リストとして格納しておくようにしてもよい。このようにすることで、上記表示部品リストから上記イベントを選択することができるので、ユーザにとって直接的に設定可能な部位を知らせることができ、決定の単純化を実現できる。

上述した表示枠間の状態遷移の編集において、表示枠間状態遷移編集部４は、表示枠１及び表示枠２を独立に編集し、状態遷移で表示枠２が表示されるときにおいても表示枠１は表示したままにする。具体的には、表示枠１についての表示を維持しながら表示枠１と表示枠２とを独立に編集し、これらの間での状態遷移に関しては各表示枠オブジェクトにおける設定データや処理順などを関連付けることで、表示枠１，２間の状態遷移を編集することになる。

図２の例では、複合表示部品１及びこれが取り得る状態である状態１〜Ｎ、各状態に対応する基本部品を編集用画面上で編集する。例えば、状態１について基本部品６，７を設定すると共に、複合表示部品１へのマウス操作に関連付けて基本部品８を表示する状態２へ遷移するように設定する。

このとき、遷移後の状態２のみを表示するのではなく、遷移元の状態１についても消去せずに表示しておく。つまり、図２に示すような複合表示部品１から状態１〜Ｎ、基本部品６〜Ｎが派生するようなツリー構造で編集内容を表示する。この表示によれば、複合表示部品１の再クリックにより状態２から再び状態１に戻るような遷移を設定する際でも遷移前後の状態を視認しながら設定することができる。

このように本発明では、表示枠間の状態遷移の編集処理においても、表示枠間状態遷移編集部４が、各表示枠オブジェクトの表示や消去を独立して実行する。これにより、複数の表示枠を用いて同時に各表示枠が独立した状態遷移を表現するＧＵＩを容易に設計することができるのである。

上述のようにして編集された遷移１に関する情報は、表示枠間状態遷移編集部４によって表示枠間状態遷移格納部６に格納される。

また、表示枠編集部２、表示枠内レイアウト編集部３及び表示枠間状態遷移編集部４による編集処理において、表示枠とこれに配置される表示部品との関係や表示枠間の関係やその状態遷移などの各編集内容は、視認し易いツリー構造で編集用画面上に表示される。

このようにすることで、複数の表示枠を多数表示するユーザインタフェースを構築するにあたり、表示枠間に主従関係を持たせて編集用画面上に表示することで、ユーザ（設計者）にとって複数の表示枠の関係が明確になり、設計を容易に行うことができる。

次に、シミュレート処理部７は、上述した編集処理によって表示枠格納部５及び表示枠間状態遷移格納部６に格納された編集対象の表示枠に関する情報を読み出し、その表示を確認する。

図２の例において、シミュレート処理部７は、起動すると、表示枠格納部５及び表示枠間状態遷移格納部６から表示枠１，２に関する情報を読み出し、先ず表示枠１を編集用画面上に表示する。このとき、同時に表示枠１内の複合表示部品１の状態を初期状態として予め決定しておいた状態１に設定し、これに対応する基本部品６，７を表示する。

このあと、シミュレート処理部７は、表示枠間状態遷移格納部６から状態遷移に関する情報を読み出して、これら状態遷移に係る表示部品についてユーザからマウス操作が実行されたか否かを監視する。ここで、マウス操作があるとそのマウスイベントを検査し、模擬対象の表示枠間の状態遷移に設定されたその契機となるイベント（表示枠１内の基本部品１へのマウスクリック）と一致するか否かを判定する。

このとき、表示枠１，２間の状態遷移の契機となるイベントが発生したと判定されると、シミュレート処理部７は、その状態遷移に従って表示枠２に関する情報を表示枠格納部５から読み出して表示装置９の編集用画面上に表示する。

さらに、シミュレート処理部７は、表示枠間状態遷移格納部６から表示枠１，２間の状態遷移に関する情報を読み出して、表示枠１を消さずに表示枠２と同時に表示する。これにより、シミュレート処理部７は、編集用画面上に表示される表示枠１，２へのマウスイベントを、表示枠間状態遷移格納部６に格納された状態遷移に関する情報（状態遷移の契機となるイベント情報など）を基に監視する。

このようにして、シミュレート処理部７は、表示枠編集部２及び表示枠間状態遷移編集部４により編集された表示枠及び表示枠間の状態遷移をシミュレートし、編集部２，４による設計や編集の是非を確認するための情報をユーザに提供することができる。

以上のように、この実施の形態１によれば、ＧＵＩ画面上への表示枠の追加、削除及びその表示サイズを編集すると共に、ＧＵＩ画面上に配置した表示枠間で表示内容を遷移させる状態遷移を追加、削除する表示枠編集部２と、ＧＵＩ画面上に配置した表示枠内に配置する表示部品の追加、削除及びその表示サイズを編集する表示枠内レイアウト編集部３と、表示枠編集部２により追加された表示枠間の状態遷移について、表示枠内に配置する表示部品に対して遷移の契機となるイベントを設定すると共に、遷移前の表示枠を表示しながら遷移後の表示枠の表示内容を編集する表示枠間状態遷移編集部４とを備えるので、独立した複数の異なる情報を表示するＧＵＩを設計するにあたり、複数の表示枠間で状態遷移があっても同時にこれらの表示枠を表示して状態遷移を編集することができ、複数の表示枠を用いて独立した複数の異なる表示部品オブジェクトを表示するアプリケーションを容易に構築することができる。これにより、設計したＧＵＩ画面のユーザインタフェースとしての表示内容を充実化させることができる。

また、表示枠編集部２によって複数の表示枠間の状態遷移の有無を表示枠間を結ぶ線などでグラフィカルに表示するので、現在設定されている状態遷移を容易に視認することができ、設計状況を適格にユーザに提示することができる。

さらに、表示枠間状態遷移編集部４では、表示枠間の状態遷移の契機となるイベントを遷移前の表示枠の表示部品に設定し、表示部品リストとして表示枠間状態遷移格納部６に格納するので、上記表示部品リストから遷移の契機となるイベントを選択することができ、ユーザにとって直接的に設定可能な部位を知らせることができる。これにより、遷移の契機を決定する処理の単純化を図ることができる。

この実施の形態１によれば、操作画面上に配置した表示枠間の状態遷移をシミュレートして、編集した遷移条件で状態遷移が実行されるか否かを判定するシミュレート処理部７を備えたので、複数の表示枠を含むＧＵＩ画面の編集結果や表示枠間の状態遷移に伴う画面の遷移についても容易に確認することができる。これにより、表示枠の表示レイアウトや表示枠間の状態遷移の設計編集を進めながらその編集結果を確認することができ、設計作業を効率的に行うことができる。

また、本発明の実施の形態として、本発明のＵＩ設計装置１を具現化するプログラムをサーバ装置に格納しておき、ユーザが管理するコンピュータが当該サーバ装置から電気通信回線を介してその機能の提供を受けてＵＩ設計装置１を具現化する形態も含まれるものとする。

以上のように、この発明に係るユーザインタフェース設計装置及びプログラムは、コンピュータを利用した様々なシステムのユーザインタフェースを提供するアプリケーションの構築に適用可能である。

この発明の実施の形態１によるユーザインタフェース設計装置の構成を示す図である。 表示枠の構成及び表示枠間の関係を示す図である。

符号の説明

１ ユーザインタフェース設計装置（ＵＩ設計装置）、２ 表示枠編集部、３ 表示枠内レイアウト編集部、４ 表示枠間状態遷移編集部（状態遷移編集部）、５ 表示枠格納部（編集結果格納部）、６ 表示枠間状態遷移格納部（編集結果格納部）、７ シミュレート処理部。

Claims (4)

1. ユーザインタフェースとなる操作画面上への表示枠オブジェクトの追加、削除及びその表示サイズを編集すると共に、上記操作画面上に配置した表示枠オブジェクト間で表示内容を遷移させる状態遷移を追加、削除する表示枠編集部と、
   上記操作画面上に配置した表示枠オブジェクトの枠内に配置する表示部品オブジェクトの追加、削除及びその表示サイズを編集する表示枠内レイアウト編集部と、
   上記表示枠編集部により追加された表示枠オブジェクト間の状態遷移について、上記表示枠オブジェクトの枠内に配置する表示部品オブジェクトに対して遷移の契機となるイベントを設定すると共に、遷移前の表示枠オブジェクトを表示しながら遷移後の表示枠オブジェクトの表示内容を編集する状態遷移編集部と
   を備えたユーザインタフェース設計装置。
2. ユーザインタフェースとなる操作画面を設計するにあたり、各編集部による編集処理で得られた編集結果に関する電子情報を逐次格納する編集結果格納部を備えたことを特徴とする請求項１記載のユーザインタフェース設計装置。
3. 表示枠オブジェクト間の状態遷移を模擬して、編集した遷移の契機となる条件で上記状態遷移が実行されたか否かを判定するシミュレート処理部を備えたことを特徴とする請求項１記載のユーザインタフェース設計装置。
4. ユーザインタフェースとなる操作画面上への表示枠オブジェクトの追加、削除及びその表示サイズを編集すると共に、上記操作画面上に配置した表示枠オブジェクト間で表示内容を遷移させる状態遷移を追加、削除する表示枠編集部、
   上記操作画面上に配置した表示枠オブジェクトの枠内に配置する表示部品オブジェクトの追加、削除及びその表示サイズを編集する表示枠内レイアウト編集部、
   上記表示枠編集部により追加された表示枠オブジェクト間の状態遷移について、上記表示枠オブジェクトの枠内に配置する表示部品オブジェクトに対して遷移の契機となるイベントを設定すると共に、遷移前の表示枠オブジェクトを表示しながら遷移後の表示枠オブジェクトの表示内容を編集する状態遷移編集部
   としてコンピュータを機能させるプログラム。

Images