JP5772928B2 - ユーザインタフェース設計装置 - Google Patents

Description

この発明は、画面にユーザインタフェース部品を配置して、アニメーション等の表示効果を定義することでユーザインタフェースを設計するユーザインタフェース設計装置に関するものである。

近年、バネを模擬した動きや、重力を模擬した動き、ふわふわした泡のような動き等、物理的な動きを表示効果としてユーザインタフェースに適用し、当該ユーザインタフェースを操作するユーザにリアリティのある操作感を与えるユーザインタフェースが増えてきている。このようなユーザインタフェースでは、個々のユーザインタフェース部品の動きが複雑なだけでなく、画面内に登場するユーザインタフェース部品の数も多く、その開発工数は増大している。

例えば、特許文献１には、上述のようなユーザインタフェースを設計するユーザインタフェース設計装置が開示されている。この装置では、ユーザインタフェース設計者が、画面仕様に従って画面上に表示部品をレイアウトする配置編集部を用いて、表示要素を持つ表示部品を追加、削除し又は表示部品の属性を編集して画面にレイアウトすることで、ユーザインタフェースを設計する。
また、ユーザインタフェース設計者は、例えば、タイムラインエディタ等の表示効果編集部を使用して、ユーザインタフェース部品に表示効果を付与する。タイムラインエディタでは、ユーザインタフェース部品が持つ各種属性値について、時間に沿った変化を定義することで表示効果を付与する。

特許文献１の装置では、３次元オブジェクトに、時間や動作等を定義したタイムラインオブジェクトをドラッグして設定し、簡単に動画を作成することができる。設定したタイムラインオブジェクトは、タイムラインオブジェクト編集部により動作の編集ができる。
タイムラインオブジェクトは、テンプレートとして用意されており、オブジェクト間の継承を行うことで、回転しながら移動するといった複合的な運動を３次元オブジェクトに与えることができる。

特開２００７−０２５９７９号公報

従来のユーザインタフェース設計装置のタイムラインエディタでは、ユーザインタフェース部品の属性ごとに時間軸が設定されており、時間軸上の特定の時刻（複数可）における属性値を定義していくことで、ユーザインタフェース部品にアニメーション等の効果を付与することができる。
このような編集方式では、ユーザインタフェース設計者が頭の中で思い描く動きを、時刻とその時刻での属性値という２次元空間に、頭の中や手作業等で分解し、手作業にて定義していく必要がある。
このため、バネの動きや重力を模擬した動き等の複雑な表示効果を定義するには、特殊なスキルが必要である上、スキルを持っていても、その作業は煩雑であるという問題があった。

また、従来の編集方式では、表示効果は、ユーザインタフェース部品の属性として付与される。例えば、ユーザからの入力イベントを処理するイベントハンドラのアクションとして付与される。
ユーザから右ボタンの入力があれば右方向にバネ状の動きをしながら当該ユーザインタフェース部品が移動し、上ボタンの入力があれば上方向にバネ状の動きをしながら当該ユーザインタフェース部品が移動し、他の方向に対しても類似な動きをするユーザインタフェースを例に挙げる。このようなユーザインタフェースでは、それぞれの入力イベントのイベントハンドラごとにそれぞれの方向に応じたバネ状の動きを個別に定義していく必要がある。

従来のユーザインタフェース設計装置では、ユーザインタフェース部品のそれぞれの動きの定義方法が煩雑な上、類似の表示効果をユーザインタフェース部品ごと、あるいはイベントハンドラごとに定義する必要があるため、ユーザインタフェース設計の工数が増大するという問題があった。
また、この工数の問題は、画面内に登場するユーザインタフェース部品の個数が増える程に顕著になる。

この発明は、上記のような課題を解決するためになされたもので、効率良く、容易に、ユーザインタフェースを設計できるユーザインタフェース設計装置を得ることを目的とする。

この発明に係るユーザインタフェース設計装置は、設計対象装置のユーザインタフェースを構成し、表示要素を示す表示属性並びに設計対象装置の画面上の配置座標及び大きさを示す配置属性を有する表示部品と、ユーザインタフェースを構成し、表示部品が登録される部品関連属性、部品関連属性に登録された表示部品の表示属性又は配置属性を時間経過に伴って変更して得られる表示効果を定義した効果属性並びに画面上の配置座標及び大きさを示す配置属性を有し、部品関連属性に登録された表示部品に対して効果属性に定義された表示効果を与える効果部品と、表示部品及び効果部品を格納するユーザインタフェース部品格納部と、表示部品及び効果部品の配置属性を編集する配置属性編集部と、配置属性編集部による配置属性の編集で、効果部品を配置した画面上の領域の内側で、かつはみ出さずに、効果部品上に表示部品が配置されると、表示部品を効果部品の部品関連属性に登録する部品関連属性設定部とを備え、親子関係の定義により表示部品が複数の効果部品の部品関連属性に登録された場合には、複数の効果部品の各々の効果属性に定義された効果を重畳して表示部品に与え、親子関係の定義により親の効果部品に定義された表示効果を子の部品にも与える
ことを特徴とするものである。

この発明によれば、バネの動きや重力を模擬した動き等の複雑な動きの表示効果であっても、容易に、且つ、複数の部品に一括して表示効果を付与したユーザインタフェースを設計できるという顕著な効果を奏するものである。
また、複数の効果部品を重畳して配置することができ、複数の効果部品が重畳された領域に包含される表示部品には、当該効果部品それぞれの表示効果が重畳して付与されるので、表示効果を容易に重畳することができ、開発工数を抑制することができる。
さらに、表示効果の付与対象のＵＩ部品が多数であっても効果部品の配置領域に包含するだけで、一括して効果を付与することができる。
さらに、効果部品に重畳することで表示効果の付与を視覚的に認知できるため、効果部品の重畳し忘れを防ぐことができる。

この発明の実施の形態１によるユーザインタフェース設計装置の構成を示すブロック図である。 表示部品のデータ内容の一例を示す図である。 効果部品のデータ内容の一例を示す図である。 部品関連属性設定部による処理の流れを示すフローチャートである。 表示部品の１つが効果部品に領域的に包含された場合を説明するための図である。 図５中の効果部品でｓｅｔＬｏｃａｔｉｏｎイベントが発生した場合を示す図である。 図５中の効果部品の幅と高さを編集した場合を示す図である。 効果部品を重畳させた場合を示す図である。 図８中の効果部品でｓｅｔＬｏｃａｔｉｏｎイベントが発生した場合を示す図である。 この発明の実施の形態２によるユーザインタフェース設計装置の構成を示すブロック図である。 この発明の実施の形態３によるユーザインタフェース設計装置の構成を示すブロック図である。

実施の形態１．
図１は、この発明の実施の形態１によるユーザインタフェース設計装置の構成を示すブロック図である。図１において、実施の形態１によるユーザインタフェース（以下、ＵＩと呼ぶ）設計装置は、表示部品１０１及び効果部品１０２を格納するＵＩ部品格納部１０３、配置属性編集部１０４、効果属性編集部１０５、表示属性編集部１０６及び部品関連属性設定部１０７を備える。

表示部品１０１は、表示属性、配置属性及び部品関連属性を有するＵＩ部品データである。ここで、表示属性とは、ＵＩ部品の表示要素を示すデータであり、画像又は文字列、図形等がある。また、配置属性としては、画面上に表示したときのＵＩ部品の座標、幅、高さ、ＵＩ部品間の前後関係を示すＺ値及び表示の可否がある。部品関連属性とは、関連性を有するＵＩ部品が登録される情報である。なお、表示部品１０１は、部品関連属性を有さない場合もある。

表示部品１０１には、型があってもよい。すなわち、型の属性値には、当該表示部品１０１としての標準的な値が予め定義されており、配置属性編集部１０４によって画面上に配置される際に実体となる。この際、必要に応じて、配置属性編集部１０４が、予め定義された型の属性値を上書きすることができる。
上書きしない属性の値は、型の値を継承する。また、型の属性値は、配置属性編集部１０４によって編集することができる。なお、型の属性値を変更すると、その値は、その型を継承する全ての実体の属性にも反映される。

また、同じ種類の表示部品には、予め座標、高さ、幅を特定したものを必要なだけ用意することも考えられるが、上述したように、これらを配置属性として変更可能なデータとしておき、設計時に、配置属性編集部１０４で編集できるようにする。このようにすることで、用意すべき表示部品１０１の数が少なくなるとともに、個々の表示部品１０１の汎用性が向上する。

効果部品１０２は、配置属性、効果属性及び部品関連属性を有するＵＩ部品データである。ここで、効果属性とは、ＵＩ部品に付与する表示効果が規定されたデータであり、イベント名及びこのイベント名が示すイベントの発生を契機として発現する表示効果を表す効果定義から構成されるデータである。

表示効果は、ＵＩ部品の表示上の効果であり、例えば、時間経過に従って、ＵＩ部品の位置の移動や、ＵＩ部品の回転、アフィン変換、ＵＩ部品の表示要素の点滅、色の変更、アニメーション表示等がある。また、表示効果には、物理的な運動を模擬した動き（例えば、バネ状の動きや重力に引かれて落ちる動き）のように複雑に移動したり、ふわふわと泡のように様々に幅や高さが変わったりするものも含まれる。

効果定義は、所定のイベントの発生を契機として動作するイベントシステムのイベントハンドラと考えてもよい。すなわち、ＵＩ実行時に当該イベントを受信すると、当該効果定義に定義した表示効果が発現する。

なお、効果属性におけるイベントには、ユーザイベント、システムイベント及びタイマイベント等がある。ユーザイベントは、ユーザからのキー入力やタッチパネルへのタッチ等により発生するイベントである。また、システムイベントは、ＵＩを実行している装置で発生するイベントであり、タイマイベントは、一定時間が経過したときに発生するイベントである。

効果属性における効果定義は、予め定義された効果から選択して設定するようにしてもよいし、何らかのプログラミング言語で記述してもよい。予め定義された効果定義としては、例えば、ワイプ、ディゾルブ、スライドインといったアニメーションが考えられる。

効果部品１０２には、型があってもよい。すなわち、型の属性値には、当該効果部品１０２としての標準的な値が予め定義されており、配置属性編集部１０４によって画面上に配置される際に実体となる。この際、必要に応じて、配置属性編集部１０４が、予め定義された型の属性値を上書きすることができる。
上書きしない属性の値は、型の値を継承する。また、型の属性値は、配置属性編集部１０４又は効果属性編集部１０５によって編集することができる。なお、型の属性値を変更すると、その値は、その型を継承する全ての実体の属性にも反映される。

ＵＩ部品格納部１０３は、表示部品１０１及び効果部品１０２が格納される記憶部であり、配置属性編集部１０４、効果属性編集部１０５及び表示属性編集部１０６のいずれかの保存指示を契機として、表示部品１０１及び効果部品１０２の内容がデータとして格納される。例えば、配置属性編集部１０４によって追加又は編集された表示部品１０１又は効果部品１０２や、表示属性編集部１０６によって編集された表示部品１０１、効果属性編集部１０５によって編集された効果部品１０２の内容が格納される。

また、ＵＩ部品格納部１０３は、配置属性編集部１０４からＵＩ部品の削除が指示されると、そのＵＩ部品に対応するデータを削除する。また、ＵＩ部品格納部１０３は、配置属性編集部１０４又は効果属性編集部１０５から読み出しが指示されると、当該指示に対応するＵＩ部品のデータを取り出し、指示元の編集部に提供する。また、ＵＩ部品格納部１０３は、編集部１０４〜１０６のいずれかが編集後のＵＩ部品を保存するよう指示すると、新しいデータとして、これまでのデータに上書きして保存する。

配置属性編集部１０４は、表示部品１０１又は効果部品１０２の配置属性を編集する構成部である。例えば、配置属性編集部１０４は、キーボード又はマウス等のような入力装置（図示せず）を用いた設定入力により、表示部品１０１や効果部品１０２の配置に関する内容を編集することにより、設計対象のＵＩ画面のレイアウトが編集される。なお、配置属性編集部１０４としては、既存のレイアウトエディタと同様なものであっても構わない。

また、配置属性編集部１０４は、表示部品１０１又は効果部品１０２を、ＵＩ部品格納部１０３に追加又は削除することができる。なお、表示部品１０１又は効果部品１０２を追加する際は、表示部品１０１又は効果部品１０２に予め定義された配置属性のままで、ＵＩ部品格納部１０３に格納することもできるし、配置属性を編集した上で格納することもできる。

配置属性編集部１０４は、ＵＩ部品格納部１０３から表示部品１０１や効果部品１０２を読み出し、当該ＵＩ部品の配置属性値を編集した上でＵＩ部品格納部１０３に格納することもできる。

また、配置属性編集部１０４は、ＵＩ部品格納部１０３から表示部品１０１や効果部品１０２を読み出し、当該ＵＩ部品の複製を作り、必要であれば、当該複製した部品の配置属性を編集した上で、ＵＩ部品格納部１０３に格納することもできる。

さらに、配置属性編集部１０４は、表示部品１０１又は効果部品１０２を、配置属性や表示要素に従って、それらの外観とともにグラフィカルに表示するとともに、それらをマウス等の入力装置で直接操作し、配置属性をグラフィカルに編集するようにしてもよい。
例えば、配置属性編集部１０４が、表示部品１０１又は効果部品１０２の型を一覧する部品パレットと、左上隅を原点とする座標系を持ったレイアウト部分とを有する、ＧＵＩ（Graphical User Interface）を提供する。ここで、上記レイアウト部分には、ＵＩ部品格納部１０３から読み出されたＵＩ部品が、その配置属性に従って視覚化される。
この場合、ＵＩ設計者が、部品パレットからレイアウト部分に部品の型をマウス操作でドラッグしてドロップすると、これを受けて、配置属性編集部１０４が、ＵＩ部品を実体化させる。このＵＩ部品は、ＵＩ部品格納部１０３に追加することができる。
また、このようにしてＵＩ部品格納部１０３追加したＵＩ部品を、ユーザがマウス操作でレイアウト部分上で移動させたり、広げたりすることで、当該ＵＩ部品の配置属性を視覚的に編集することができる。

さらに、配置属性編集部１０４は、効果部品１０２の配置属性を編集する際に、続けて当該効果部品１０２の効果属性も編集できるように、効果属性編集部１０５を起動してもよい。

効果属性編集部１０５は、効果部品１０２の効果属性を編集する構成部である。例えば、効果属性編集部１０５では、上記入力装置を用いた設定入力により、効果部品１０２の効果属性に関する内容を編集してＵＩ部品格納部１０３に格納する。
また、効果属性編集部１０５は、入力装置を用いて、予め定義された効果属性の値からリストボックスの形式で選択するＧＵＩを提供することにより、選択した効果属性の値を効果部品１０２の効果属性として設定するようにしてもよい。
さらに、プログラミング言語で効果属性を記述する場合のために、テキストエディタを装備してもよい。

表示属性編集部１０６は、表示部品１０１の表示属性を編集する構成部である。例えば、表示属性編集部１０６では、上記入力装置を用いた設定入力により、効果部品１０２の効果属性に関する内容を編集してＵＩ部品格納部１０３に格納する。
また、効果属性編集部１０５は、入力装置を用いて、表示部品１０１の表示属性を編集するＧＵＩを提供することにより、ラベル部品であれば、表示文字列を編集でき、画像部品であれば、表示画像のファイル名を編集することができる。

部品関連属性設定部１０７は、表示部品１０１及び効果部品１０２の少なくとも一方のＵＩ部品間の関連性を、部品関連属性として設定する構成部である。
例えば、部品関連属性設定部１０７は、ＵＩの実行時に適切なタイミングで、繰り返しＵＩ部品格納部１０３に格納されている全ての各表示部品１０１及び効果部品１０２の配置属性を読み出す。その都度、任意の各効果部品１０２を配置する画面上の領域が、表示部品１０１又は別の効果部品１０２が配置される画面上の領域を包含する場合には、任意の効果部品１０２の部品関連属性として、上述の表示部品１０１又は別の効果部品１０２を登録する。
具体的には、表示部品１０１が、効果部品１０２の座標・幅・高さからなる領域の内側に存在し、かつその領域の外にはみ出さずに存在しており、さらにＺ値を比較して効果部品１０２の上にあるかどうかを検査する。これらの条件を満たせば、当該効果部品１０２が当該表示部品１０１を領域的に包含していると判断し、当該効果部品１０２の部品関連属性として、領域的に包含している表示部品１０１を登録する。
同様にして、効果部品が別の効果部品を領域的に包含しているかどうかについても、上記と同様に検査を行い、一方が他方を領域的に包含している場合には、包含している側の部品関連属性として、領域的に包含されている効果部品を登録する。
また、部品関連属性に登録するＵＩ部品が複数個あるときは、リスト形式で登録する。

なお、配置属性編集部１０４、効果属性編集部１０５、表示属性編集部１０６及び部品関連属性設定部１０７は、この発明の趣旨に従うＵＩ設計用プログラムをコンピュータに実行させることで、ハードウエアとソフトウエアが協働した具体的な手段として実現することができる。
また、表示部品１０１及び効果部品１０２を格納するＵＩ部品格納部１０３は、上述のコンピュータが備える記憶装置（例えば、ハードディスク装置や外部記憶メディア等）あるいは上記コンピュータと通信接続可能な他のコンピュータの記憶装置に構築することができる。

次に、各構成部における処理内容について説明する。
図２は、表示部品のデータ内容の一例を示す図である。図２では、表示部品２０１で規定されるＵＩ部品の名前が「画像１」であり、ＵＩ部品の型が「画像部品」である。また、配置属性として、配置座標（１０，１０）と幅２０、高さ２０が設定されており、表示属性として、表示要素となる画像部品のファイル名“／ｔｍｐ／ｓａｍｐｌｅ．ｂｍｐ”が定義されている。

また、図３は、効果部品のデータ内容の一例を示す図である。図３では、効果部品３０１で規定されるＵＩ部品の名前が「ふんわり移動部品」であり、部品の型が「移動効果部品」である。また、配置属性として、配置座標（０，０）で、幅２００、高さ２００が設定されている。このＵＩ部品は、図２に示す画像部品「画像１」を領域的に包含している。つまり、このＵＩ部品を配置する画面上の領域が、画像部品「画像１」が配置される画面上の領域を包含しているため、部品関連属性設定部１０７によって部品関連属性として「画像１」が登録されている。

効果部品３０１に定義される効果属性は、設計対象のＵＩを実行している装置で内部的に発生するイベント“ｓｅｔＬｏｃａｔｉｏｎ”を契機として、ｓｅｔＬｏｃａｔｉｏｎイベントの引数である、移動先の到達座標に徐々に近づいていくという効果を、部品関連属性に登録されているＵＩ部品に付与する場合を示している。

上述したように、効果部品３０１では、効果属性のイベント名として“ｓｅｔＬｏｃａｔｉｏｎ”が定義してある。以下、効果部品３０１の効果定義を詳細に説明する。
図３では、効果定義がプログラム形式で定義してあり、１〜２行目では、ｓｅｔＬｏｃａｔｉｏｎイベントの引数である座標を取得し、Ｘ座標の値をｔａｒｇｅｔＸという変数に、Ｙ座標の値をｔａｒｇｅｔＹという変数にコピーしていることを示している。
また、３〜４行目では、部品関連属性に登録されているＵＩ部品を１つ取得して、そのＵＩ部品の現在の座標を、変数ｘ，ｙにコピーしていることを示している。＄ｐａｒｔｓとは、部品関連属性に登録されているＵＩ部品の１つへの参照を示している。
５〜６行目では、現在の位置から移動先の位置までの距離の１／６だけ近づいた座標を算出し、７〜８行目で、再びＵＩ部品にセットしている。
これにより、＄ｐａｒｔｓで参照するＵＩ部品が、最終到達座標に少しだけ近づく。
この処理を部品関連属性に登録されている全てのＵＩ部品に対して繰り返し、さらに、これらの処理を適切なタイミングで繰り返すことで、部品関連属性に登録されているＵＩ部品に対して最終到達座標に向かって徐々に近づいていくという表示効果を付与することができる。

また、効果部品には、図３に示すように終了条件を設定することもできる。ここでは、最終到達座標と、上述の表示効果を付与する対象のＵＩ部品の座標とが一致した場合に、処理を終了することを示している。

次に動作について説明する。
図４は、部品関連属性設定部による処理の流れを示すフローチャートである。
先ず、実施の形態１によるＵＩ設計装置が起動すると、部品関連属性設定部１０７が起動して、ステップＳＴ４０１の処理に進む。

ステップＳＴ４０１において、部品関連属性設定部１０７は、ＵＩ部品格納部１０３から未処理の効果部品１０２を１つ読み出す。
続いて、部品関連属性設定部１０７は、ステップＳＴ４０１で読み出した効果部品１０２における部品関連属性の登録内容を全て取り除く（ステップＳＴ４０２）。

次に、部品関連属性設定部１０７は、ＵＩ部品格納部１０３から未処理の表示部品１０１を１つ読み出す（ステップＳＴ４０３）。
部品関連属性設定部１０７は、ステップＳＴ４０１でＵＩ部品格納部１０３から読み出した効果部品１０２が、当該表示部品１０１を領域的に包含しているか否かを判定する（ステップＳＴ４０４）。各表示部品が、効果部品１０２の幅・高さからなる領域の内側に存在し、かつその領域の外にははみ出さずに存在し、さらに効果部品１０２の上にあるかどうかを検査する。これらの条件を全て満たしていれば、ＹＥＳと判定する。そうでなければ、NOと判定する。これは、双方の配置属性から既存の方式を用いて容易に判定することができる。

領域的に包含していると判定すると（ステップＳＴ４０４；ＹＥＳ）、部品関連属性設定部１０７は、ステップＳＴ４０５の処理に進み、領域的に包含していなければ（ステップＳＴ４０４；ＮＯ）、ステップＳＴ４０６の処理に進む。

ステップＳＴ４０５において、部品関連属性設定部１０７は、ステップＳＴ４０１でＵＩ部品格納部１０３から読み出した効果部品１０２の部品関連属性に、ステップＳＴ４０３でＵＩ部品格納部１０３から読み出した表示部品１０１の名前を登録又は追加する。

ステップＳＴ４０６では、部品関連属性設定部１０７が、ＵＩ部品格納部１０３に未処理の表示部品１０１があるか否かを判定する。ここで、未処理の表示部品１０１があれば（ステップＳＴ４０６；ＹＥＳ）、部品関連属性設定部１０７は、ステップＳＴ４０３の処理に戻り、ステップＳＴ４０３からステップＳＴ４０６までの処理を繰り返す。

一方、未処理の表示部品１０１がないと判定すると（ステップＳＴ４０６；ＮＯ）、部品関連属性設定部１０７は、ステップＳＴ４０２からステップＳＴ４０６までのループを終了し、ＵＩ部品格納部１０３に未処理の効果部品１０２があるか否かを判定する（ステップＳＴ４０７）。

ここで、未処理の効果部品１０２があれば（ステップＳＴ４０７；ＹＥＳ）、部品関連属性設定部１０７は、ステップＳＴ４０１の処理に戻り、ステップＳＴ４０１からステップＳＴ４０７までの処理を繰り返す。
また、未処理の効果部品１０２がなければ（ステップＳＴ４０７；ＮＯ）、ステップＳＴ４０１からステップＳＴ４０７までのループを終了する。

図５は、表示部品の１つが効果部品に領域的に包含された場合を説明するための図であり、ＵＩ部品及び表示画面の概略を示している。図５において、ＵＩを表示する画面５０１上に、画像部品（表示部品）５０２，５０４と効果部品５０３が配置されている。
効果部品５０３は、ｓｅｔＬｏｃａｔｉｏｎイベントとその引数である最終到達座標を受け取ったのを契機として、部品関連属性に登録された部品に対して、回転しながら終着点に近づいていく、という効果属性が定義されている。
また、効果部品５０３は、画像部品５０２を領域的に包含しているため、効果部品５０３の部品関連属性には、画像部品５０２が登録されている。
一方、画像部品５０４は、どの効果部品にも領域的に包含されていないため、どの効果部品の部品関連属性にも登録されていない。

図６は、図５中の効果部品でｓｅｔＬｏｃａｔｉｏｎイベントが発生した場合を示す図である。図６において、図５の画像部品５０１が、最初に配置されていた領域６０１からｓｅｔＬｏｃａｔｉｏｎイベントの引数で与えられた最終到達座標の領域６０２に移動したことを示している。なお、ｓｅｔＬｏｃａｔｉｏｎイベント発生時には、効果部品５０３の効果属性により、図６中に破線矢印で示す軌跡を描いて領域６０１から領域６０２へ画像部品５０１が移動する。

図７は、図５中の効果部品の幅と高さを編集した場合を示す図であり、配置属性編集部１０４によって効果部品５０３の幅と高さの値を大きくして効果部品７０１としたため、画像部品５０４が表示効果を付与する範囲に入った場合を示している。これにより、部品関連属性設定部１０７は、効果部品７０１の部品関連属性として、新たに画像部品５０４を登録する。

図８は、効果部品を重畳させた場合を示す図である。図８において、効果部品８０１は、図５で示した効果部品５０３と同等のものである。また、効果部品８０２は、効果部品８０１に重畳させた効果部品であり、部品関連属性に登録されたＵＩ部品に対して「点滅する」という表示効果を付与する。

図９は、図８中の効果部品でｓｅｔＬｏｃａｔｉｏｎイベントが発生した場合を示す図である。図９において、図５の画像部品５０１が、最初に配置されていた領域９０１からｓｅｔＬｏｃａｔｉｏｎイベントの引数で与えられた最終到達座標の領域９０３に移動したことを示している。なお、ｓｅｔＬｏｃａｔｉｏｎイベント発生時には、効果部品８０１の効果属性により、図９中に破線矢印で示す軌跡を描いて、領域９０１から領域９０２を経由して領域９０３へ画像部品５０１が移動する。

領域９０２では、画像部品５０１が、効果部品８０１と効果部品８０２の双方に領域的に包含される状態になる。このとき、部品関連属性設定部１０７によって、効果部品８０２にも画像部品５０１が登録される。すなわち、画像部品５０１は、効果部品８０１の表示効果により回転しながら移動しつつ、効果部品８０２の表示効果により点滅する表示となる。

画像部品５０１が効果部品８０２内の領域９０２から出ると、部品関連属性設定部１０７によって、効果部品８０２から画像部品５０１が取り除かれるため、効果部品８０２の表示効果である点滅する効果は付与されなくなる。

以上のように、この実施の形態１によれば、設計対象装置のＵＩを構成する部品の表示要素を示す表示属性、及び当該部品の配置属性を有する表示部品データ１０１と、表示効果を他の部品に与える効果部品と関連性のある部品が登録される部品関連属性、部品関連属性に登録された部品の表示属性又は配置属性を時間経過に伴って変更して得られる表示上の効果を定義した効果属性、及び、効果部品の配置属性を有する効果部品データ１０２とを有し、部品関連属性設定部１０７が、効果部品を配置した画面上の領域の内側で、かつはみ出さずに、当該効果部品上に他の部品が配置されると、当該部品を当該効果部品の部品関連属性に登録する。
このように、従来では、表示部品における属性として付与していた表示効果を効果属性として分離し、この効果属性及び表示部品と同様の配置属性を有する効果部品を設けたので、効果部品の配置される領域の内側で、かつはみ出さずに、当該効果部品上に部品を配置するだけで、この効果部品に規定される表示効果を当該部品に付与することができる。
これにより、バネの動きや重力を模擬した動き等の複雑な動きの表示効果であっても、容易に、且つ、複数の部品に一括して表示効果を付与したＵＩを設計できる。

また、この実施の形態１によれば、配置属性編集部１０４によって、一度配置した効果部品の幅や高さを広げる等して他の表示部品を配置領域内に包含させれば、表示効果の付与対象となるＵＩ部品を容易に追加することができ、開発工数を抑制できるという効果がある。なお、効果付与対象となるＵＩ部品の数が増加するほどにこの効果は増大する。

さらに、この実施の形態１によれば、効果属性編集部１０５によって、複数の表示部品を配置領域内に包含している効果部品の効果属性を変更することで、複数の表示部品に付与された表示効果を一括して差し替えることができ、開発工数を抑制できるという効果がある。なお、効果付与対象となるＵＩ部品の数が増加するほどにこの効果は増大する。

さらに、この実施の形態１によれば、配置属性編集部１０４によって、所望の効果定義を施した効果部品を複製して配置することで、同じ効果を容易に再利用でき、開発工数を抑制できるという効果がある。

さらに、この実施の形態１によれば、配置属性編集部１０４によって、既に効果部品の配置領域内に包含されている表示部品を削除し、別の表示部品を追加し、追加した表示部品の配置属性を削除した表示部品と同じ配置属性に設定することで、同じ表示効果を、新しい表示部品に付与することができる。このため、効果付与後であっても容易に表示部品を差し替えることができ、開発工数を抑制できるという効果がある。なお、表示効果の差し替え対象となるＵＩ部品の数が増加するほどにこの効果は増大する。

さらに、この実施の形態１によれば、配置属性編集部１０４によって、効果部品を削除し、他の効果部品を配置して、配置属性の値を削除した上記効果部品の配置属性の値と同一にすることで、表示効果を容易に差し替えることができ、開発工数を抑制できる、という効果がある。なお、差し替え対象となるＵＩ部品の数が増加するほどにこの効果は増大する。

さらに、この実施の形態１によれば、効果部品は、表示部品と同様に画面上の前後関係の配置属性を有するため、異なるＺ値を持つ複数の効果部品を重畳して配置することができる。なお、複数の効果部品が重畳された領域に包含される表示部品には、当該効果部品それぞれの表示効果が重畳して付与されるので、表示効果を容易に重畳することができ、開発工数を抑制することができるという効果がある。
また、表示効果の付与対象のＵＩ部品が多数であっても効果部品の配置領域に包含するだけで、一括して効果を付与することができる。
さらに、効果部品に重畳することで表示効果の付与を視覚的に認知できるため、効果部品の重畳し忘れを防ぐことができる。

実施の形態２．
図１０は、この発明の実施の形態２によるＵＩ設計装置の構成を示すブロック図である。図１０において、図１と同一符号を付した構成部は同一又はこれに相当する機能を有するので説明を省略する。実施の形態２によるＵＩ設計装置は、上記実施の形態１で図１を用いて説明した構成における部品関連属性設定部１０７の代わりに部品関連属性編集部１００１を備える。
部品関連属性編集部１００１は、効果部品１０２と表示部品１０１との間、効果部品間あるいは表示部品１０１間に論理的な親子関係を定義し、親となるＵＩ部品の部品関連属性として子となるＵＩ部品を登録する構成部である。

部品関連属性編集部１００１は、入力装置を用いて、表示部品１０１や効果部品１０２の部品関連属性を編集するＧＵＩを提供することにより、ユーザが入力装置を用いて編集内容を入力し、この編集内容を表示部品１０１や効果部品１０２の部品関連属性に反映させる。

なお、部品関連属性編集部１００１は、配置属性編集部１０４と統合していてもよく、また、グラフィカルな表現を持つ編集部であってもよい。例えば、配置属性編集部１０４において、ＵＩ部品をドラッグして別のＵＩ部品へドロップした際、部品関連属性編集部１００１が、ドラッグしたＵＩ部品を子とし、ドロップされたＵＩ部品を親として、論理的な親子関係を構築し、部品関連属性に反映させるようにしてもよい。

また、配置属性編集部１０４によって、既に効果部品１０２と親子関係が結ばれている表示部品１０１を削除し、別の新しい表示部品１０１を追加するにあたり、部品関連属性編集部１００１が、新しい表示部品１０１について削除した表示部品１０１と同じ親子関係を結ぶだけで、同じ表示効果を、当該新しい表示部品１０１に付与することができる。このため、効果の付与後であっても容易に表示部品１０１を差し替えることができ、開発工数を抑制できる。

さらに、複数の子部品を持つ効果部品１０２に対して、効果属性編集部１０５が、当該効果部品１０２の効果属性を変更すれば、一括して複数の子部品に付与された表示効果を差し替えることができる。これによっても、開発工数を抑制できる。

さらに、この実施の形態２によれば、配置属性編集部１０４によって、効果部品１０２を削除し、別の新たな効果部品１０２を配置しその部品関連属性の値を削除した際、部品関連属性編集部１００１が、新たな効果部品の部品関連属性を、削除した効果部品の部品関連属性の値と同一にすることで、表示効果を容易に差し替えることができ、開発工数を抑制できる。

以上のように、この実施の形態２によれば、設計対象装置のＵＩを構成する部品の表示要素を示す表示属性、及び当該部品の配置属性を有する表示部品データ１０１と、表示効果を他の部品に与える効果部品と関連性のある部品が登録される部品関連属性、部品関連属性に登録された部品の表示属性又は配置属性を時間経過に伴って変更して得られる表示上の効果を定義した効果属性、及び、効果部品の配置属性を有する効果部品データ１０２とを有し、部品関連属性編集部１００１が、効果部品を親とし、他の部品を子とする親子関係を定義して、当該部品関連属性の内容を編集する。
このように、部品関連属性編集部１００１によって親子関係を定義するだけで、任意のＵＩ部品を効果部品の部品関連属性に登録することができるため、効果部品１０２の画面上の領域に制限されることなく、当該効果部品１０２の効果付与の対象とすることができ、効果を付与する際の編集作業の自由度を飛躍的に高めることができる。
また、複数の表示効果を重畳する場合であっても、効果部品１０２を実際に重畳させる必要はなく、効果部品間の親子関係を結ぶだけで、子の効果部品には親の効果部品の効果が付与される。
従って、さらにその子のＵＩ部品は、両方の効果部品の効果が重畳して付与されることから、重畳した効果を付与する自由度をさらに高めることができる。
これらによって、表示効果が付与されたＵＩを容易に実現でき、開発工数を抑制できるという、顕著な効果を奏するものである。

また、この実施の形態２によれば、親子関係の順序を容易に変更することができることから、容易に表示効果の適用順序を変えることが可能であり、開発工数を抑制できる、という効果がある。

さらに、この実施の形態２によれば、部品関連属性編集部１００１によってＵＩ部品と親子関係を結ぶだけで、任意の配置属性を持つ任意の複数のＵＩ部品に対して容易に同じ表示効果を付与することができ、開発工数を抑制できる、という効果がある。

さらに、この実施の形態２によれば、所望の効果定義を施した効果部品を複製して配置することで、同じ効果を容易に再利用でき、開発工数を抑制できる、という効果がある。

実施の形態３．
図１１は、この発明の実施の形態３によるＵＩ設計装置の構成を示すブロック図である。図１１において、図１と同一符号を付した構成部は同一又はこれに相当する機能を有するので説明を省略する。実施の形態３によるＵＩ設計装置は、上記実施の形態１で図１を用いて説明した構成に加えて、実行部１１０１を備える。

実行部１１０１は、上記実施の形態１及び上記実施の形態２で設計された内容を、シミュレーションしたり、設計対象のＵＩを構築した装置上で実行する構成部であり、入力部１１０２、視覚化部１１０３、イベント生成部１１０４及びイベントディスパッチ部１１０５を備える。

なお、入力部１１０２、視覚化部１１０３、イベント生成部１１０４及びイベントディスパッチ部１１０５は、この発明の趣旨に従うＵＩ設計用プログラムをコンピュータに実行させることで、ハードウエアとソフトウエアが協働した具体的な手段として実現することができる。

入力部１１０２は、入力装置１１０２ａを用いたユーザからの入力を受け付ける構成部である。入力装置１１０２ａとしては、マウスやキーボード、タッチパネル等が挙げられる。視覚化部１１０３は、ＵＩの表示内容を表示装置１１０３ａの画面上に表示する構成部である。表示装置１１０３ａとしては、液晶ディスプレイ等、様々なディスプレイが考えられる。

イベント生成部１１０４は、各種のイベントを生成する構成部であり、イベントディスパッチ部１１０５は、イベント生成部１１０４で生成されたイベントに対応するイベントハンドラが定義されているＵＩ部品を特定し、このイベントハンドラに定義される内容を実行する構成部である。

次に動作について説明する。
先ず、実行部１１０１が起動すると、視覚化部１１０３は、ＵＩ部品格納部１０３から表示部品１０１を配置属性のＺ値の小さい方から順に読み出して、表示属性の内容と配置属性の値とを取得する。

視覚化部１１０３は、表示属性の内容と配置属性の値を取得した順に、表示属性の内容を配置属性の値に合わせて表示装置１１０３ａの画面上に表示する。
例えば、視覚化部１１０３は、取得した表示属性の内容が画像ファイルであり、配置属性が座標（０，０）であると、当該画像ファイルをＵＩ部品格納部１０３から読み出してビットマップに変換し、ビットマップの内容を表示装置１１０３ａの画面上の座標（０，０）を示すメモリに転送することで、視覚化を行う。

イベント生成部１１０４は、入力部１１０２を介して、ユーザからのキーイベントやタッチパネルのイベントを受信した場合、どのキーが押されたか、あるいは、どの座標がタッチされたかを引数とするユーザイベントを生成する。
また、イベント生成部１１０４は、別の装置からメッセージを受信した場合、そのメッセージ内容を引数とするシステムイベントを生成する。
さらに、イベント生成部１１０４は、タイマが発火した場合には、タイマイベントを生成する。また、ＵＩ部品がイベントの発生を指示した場合、内部イベントを生成する。

イベントディスパッチ部１１０５は、イベント生成部１１０４が生成したイベントを受信し、そのイベントに対するイベントハンドラが定義されているＵＩ部品を、ＵＩ部品格納部１０３から検索する。当該イベントに対するイベントハンドラが定義されているＵＩ部品があれば、当該イベントハンドラに定義されている内容（アクション）を実行する。
なお、アクションがプログラミング言語で記述されている場合、イベントディスパッチ部１１０５が、アクションを示すプログラミング言語を解釈して実行してもよい。

このように、イベントディスパッチ部１１０５は、効果部品１０２の効果定義をイベントハンドラとして解釈して、効果属性に定義されたイベントが発生した場合に、部品関連属性に登録されたＵＩ部品に対して、当該効果属性の効果定義の処理を実行する。
従って、効果部品の部品関連属性に登録されたそれぞれのＵＩ部品に対して、効果が付与される。また、イベントディスパッチ部１１０５は、効果の付与完了後、終了条件を満たしていなければ、再び効果定義の処理を実行する。
なお、イベントディスパッチ部１１０５は、イベント発生時の処理を実行する上で、必要に応じてＵＩ部品格納部１０３に格納した各ＵＩ部品の属性値を更新する。

イベントディスパッチ部１１０５の処理が終了すると、視覚化部１１０３が、ＵＩ部品格納部１３の記憶内容を再び取得することにより、表示装置１１０３ａの画面上に視覚化した表示内容を更新する。
実行部１１０１では、上述の処理が繰り返される。

なお、実行部１１０１は、既存のＵＩ設計装置における、イベントを契機とした動作を行う実行システムと同様のものでも構わない。

以上のように、この実施の形態３によれば、ＵＩ設計対象装置で設計されたＵＩを実行する実行部１１０１を備えたので、ＵＩ実行時の動作を確認しつつ、ＵＩ設計を実施することができる。

なお、上記実施の形態３では、実行部１１０１を上記実施の形態１の構成に適用した場合を示したが、上記実施の形態２の構成に適用しても構わない。

１０１，２０１，５０２，５０４ 表示部品、１０２，３０１，５０３，７０１，８０１，８０３ 効果部品、１０３ ＵＩ部品格納部、１０４ 配置属性編集部、１０５ 効果属性編集部、１０６ 表示属性編集部、１０７ 部品関連属性設定部、５０１ 画面、６０１，６０２，９０１，９０２，９０３ 領域、１００１ 部品関連属性編集部、１１０１ 実行部、１１０２ 入力部、１１０２ａ 入力装置、１１０３ 視覚化部、１１０３ａ 表示装置、１１０４ イベント生成部、１１０５ イベントディスパッチ部。

Claims (2)

1. 設計対象装置のユーザインタフェースを構成し、表示要素を示す表示属性並びに前記設計対象装置の画面上の配置座標及び大きさを示す配置属性を有する表示部品と、
   前記ユーザインタフェースを構成し、前記表示部品が登録される部品関連属性、前記部品関連属性に登録された前記表示部品の表示属性又は配置属性を時間経過に伴って変更して得られる表示効果を定義した効果属性並びに前記画面上の配置座標及び大きさを示す配置属性を有し、前記部品関連属性に登録された前記表示部品に対して前記効果属性に定義された表示効果を与える効果部品と、
   前記表示部品及び前記効果部品を格納するユーザインタフェース部品格納部と、
   前記表示部品及び前記効果部品の配置属性を編集する配置属性編集部と、
   効果部品を親とし、表示部品を子とする親子関係を定義して、前記部品関連属性の内容を編集する部品関連属性編集部とを備え、
   前記親子関係の定義により前記表示部品が複数の効果部品の部品関連属性に登録された場合には、前記複数の効果部品の各々の効果属性に定義された効果を重畳して前記表示部品に与え、前記親子関係の定義により親の前記効果部品に定義された前記表示効果を子の部品にも与えることを特徴とするユーザインタフェース設計装置。
2. 請求項１に記載のユーザインタフェース設計装置で設計したユーザインタフェースを実行する実行部を備えたことを特徴とするユーザインタフェース設計装置。

Images