ユーザインタフェース設計装置
【課題】効率良く、容易に、ユーザインタフェースを設計できるユーザインタフェース設計装置を提供する。
【解決手段】設計対象装置のUIを構成する部品の表示要素を示す表示属性、及び当該部品の配置属性を有する表示部品データ101と、表示効果を他の部品に与える効果部品と関連性のある部品が登録される部品関連属性、部品関連属性に登録された部品の表示属性又は配置属性を時間経過に伴って変更して得られる表示上の効果を定義した効果属性、及び、効果部品の配置属性を有する効果部品データ102とを有し、部品関連属性設定部107が、効果部品を配置した画面上の領域の内側で、かつはみ出さずに、当該効果部品上に他の部品が配置されると、当該部品を当該効果部品の部品関連属性に登録する。
【解決手段】設計対象装置のUIを構成する部品の表示要素を示す表示属性、及び当該部品の配置属性を有する表示部品データ101と、表示効果を他の部品に与える効果部品と関連性のある部品が登録される部品関連属性、部品関連属性に登録された部品の表示属性又は配置属性を時間経過に伴って変更して得られる表示上の効果を定義した効果属性、及び、効果部品の配置属性を有する効果部品データ102とを有し、部品関連属性設定部107が、効果部品を配置した画面上の領域の内側で、かつはみ出さずに、当該効果部品上に他の部品が配置されると、当該部品を当該効果部品の部品関連属性に登録する。
【発明の詳細な説明】
【技術分野】
【0001】
この発明は、画面にユーザインタフェース部品を配置して、アニメーション等の表示効果を定義することでユーザインタフェースを設計するユーザインタフェース設計装置に関するものである。
【背景技術】
【0002】
近年、バネを模擬した動きや、重力を模擬した動き、ふわふわした泡のような動き等、物理的な動きを表示効果としてユーザインタフェースに適用し、当該ユーザインタフェースを操作するユーザにリアリティのある操作感を与えるユーザインタフェースが増えてきている。このようなユーザインタフェースでは、個々のユーザインタフェース部品の動きが複雑なだけでなく、画面内に登場するユーザインタフェース部品の数も多く、その開発工数は増大している。
【0003】
例えば、特許文献1には、上述のようなユーザインタフェースを設計するユーザインタフェース設計装置が開示されている。この装置では、ユーザインタフェース設計者が、画面仕様に従って画面上に表示部品をレイアウトする配置編集部を用いて、表示要素を持つ表示部品を追加、削除し又は表示部品の属性を編集して画面にレイアウトすることで、ユーザインタフェースを設計する。
また、ユーザインタフェース設計者は、例えば、タイムラインエディタ等の表示効果編集部を使用して、ユーザインタフェース部品に表示効果を付与する。タイムラインエディタでは、ユーザインタフェース部品が持つ各種属性値について、時間に沿った変化を定義することで表示効果を付与する。
【0004】
特許文献1の装置では、3次元オブジェクトに、時間や動作等を定義したタイムラインオブジェクトをドラッグして設定し、簡単に動画を作成することができる。設定したタイムラインオブジェクトは、タイムラインオブジェクト編集部により動作の編集ができる。
タイムラインオブジェクトは、テンプレートとして用意されており、オブジェクト間の継承を行うことで、回転しながら移動するといった複合的な運動を3次元オブジェクトに与えることができる。
【先行技術文献】
【特許文献】
【0005】
【特許文献1】特開2007−025979号公報
【発明の概要】
【発明が解決しようとする課題】
【0006】
従来のユーザインタフェース設計装置のタイムラインエディタでは、ユーザインタフェース部品の属性ごとに時間軸が設定されており、時間軸上の特定の時刻(複数可)における属性値を定義していくことで、ユーザインタフェース部品にアニメーション等の効果を付与することができる。
このような編集方式では、ユーザインタフェース設計者が頭の中で思い描く動きを、時刻とその時刻での属性値という2次元空間に、頭の中や手作業等で分解し、手作業にて定義していく必要がある。
このため、バネの動きや重力を模擬した動き等の複雑な表示効果を定義するには、特殊なスキルが必要である上、スキルを持っていても、その作業は煩雑であるという問題があった。
【0007】
また、従来の編集方式では、表示効果は、ユーザインタフェース部品の属性として付与される。例えば、ユーザからの入力イベントを処理するイベントハンドラのアクションとして付与される。
ユーザから右ボタンの入力があれば右方向にバネ状の動きをしながら当該ユーザインタフェース部品が移動し、上ボタンの入力があれば上方向にバネ状の動きをしながら当該ユーザインタフェース部品が移動し、他の方向に対しても類似な動きをするユーザインタフェースを例に挙げる。このようなユーザインタフェースでは、それぞれの入力イベントのイベントハンドラごとにそれぞれの方向に応じたバネ状の動きを個別に定義していく必要がある。
【0008】
従来のユーザインタフェース設計装置では、ユーザインタフェース部品のそれぞれの動きの定義方法が煩雑な上、類似の表示効果をユーザインタフェース部品ごと、あるいはイベントハンドラごとに定義する必要があるため、ユーザインタフェース設計の工数が増大するという問題があった。
また、この工数の問題は、画面内に登場するユーザインタフェース部品の個数が増える程に顕著になる。
【0009】
この発明は、上記のような課題を解決するためになされたもので、効率良く、容易に、ユーザインタフェースを設計できるユーザインタフェース設計装置を得ることを目的とする。
【課題を解決するための手段】
【0010】
この発明に係るユーザインタフェース設計装置は、設計対象装置のユーザインタフェースを構成する部品の表示要素を示す表示属性、及び設計対象装置の画面上の当該部品の配置座標及び大きさを示す配置属性を有する表示部品データと、表示効果を他の部品に与える効果部品と関連性のある部品が登録される部品関連属性、部品関連属性に登録された部品の表示属性又は配置属性を時間経過に伴って変更して得られる表示効果を定義した効果属性、及び、設計対象装置の画面上の効果部品の配置座標及び大きさを示す配置属性を有する効果部品データとを格納するUI部品格納部と、表示部品データ及び効果部品データの配置属性を編集する配置属性編集部と、効果部品データの効果属性を編集する効果属性編集部と、表示部品データの表示属性を編集する表示属性編集部と、配置属性編集部による配置属性の編集で、効果部品を配置した画面上の領域の内側で、かつはみ出さずに、当該効果部品上に他の部品が配置されると、当該部品を当該効果部品の部品関連属性に登録する部品関連属性設定部とを備えるものである。
【発明の効果】
【0011】
この発明によれば、設計対象装置のユーザインタフェースを構成する部品の表示要素を示す表示属性、及び設計対象装置の画面上の当該部品の配置座標及び大きさを示す配置属性を有する表示部品データと、表示効果を他の部品に与える効果部品と関連性のある部品が登録される部品関連属性、部品関連属性に登録された部品の表示属性又は配置属性を、時間経過に伴って変更して得られる表示効果を定義した効果属性、及び、設計対象装置の画面上の効果部品の配置座標及び大きさを示す配置属性を有する効果部品データとを有し、効果部品を配置した画面上の領域の内側で、かつはみ出さずに、当該効果部品上に他の部品が配置されると、当該部品を当該効果部品の部品関連属性に登録する。このように構成することで、バネの動きや重力を模擬した動き等の複雑な動きの表示効果であっても、容易に、且つ、複数の部品に一括して表示効果を付与したユーザインタフェースを設計できるという顕著な効果を奏するものである。
【図面の簡単な説明】
【0012】
【図1】この発明の実施の形態1によるユーザインタフェース設計装置の構成を示すブロック図である。
【図2】表示部品のデータ内容の一例を示す図である。
【図3】効果部品のデータ内容の一例を示す図である。
【図4】部品関連属性設定部による処理の流れを示すフローチャートである。
【図5】表示部品の1つが効果部品に領域的に包含された場合を説明するための図である。
【図6】図5中の効果部品でsetLocationイベントが発生した場合を示す図である。
【図7】図5中の効果部品の幅と高さを編集した場合を示す図である。
【図8】効果部品を重畳させた場合を示す図である。
【図9】図8中の効果部品でsetLocationイベントが発生した場合を示す図である。
【図10】この発明の実施の形態2によるユーザインタフェース設計装置の構成を示すブロック図である。
【図11】この発明の実施の形態3によるユーザインタフェース設計装置の構成を示すブロック図である。
【発明を実施するための形態】
【0013】
実施の形態1.
図1は、この発明の実施の形態1によるユーザインタフェース設計装置の構成を示すブロック図である。図1において、実施の形態1によるユーザインタフェース(以下、UIと呼ぶ)設計装置は、表示部品101及び効果部品102を格納するUI部品格納部103、配置属性編集部104、効果属性編集部105、表示属性編集部106及び部品関連属性設定部107を備える。
【0014】
表示部品101は、表示属性、配置属性及び部品関連属性を有するUI部品データである。ここで、表示属性とは、UI部品の表示要素を示すデータであり、画像又は文字列、図形等がある。また、配置属性としては、画面上に表示したときのUI部品の座標、幅、高さ、UI部品間の前後関係を示すZ値及び表示の可否がある。部品関連属性とは、関連性を有するUI部品が登録される情報である。なお、表示部品101は、部品関連属性を有さない場合もある。
【0015】
表示部品101には、型があってもよい。すなわち、型の属性値には、当該表示部品101としての標準的な値が予め定義されており、配置属性編集部104によって画面上に配置される際に実体となる。この際、必要に応じて、配置属性編集部104が、予め定義された型の属性値を上書きすることができる。
上書きしない属性の値は、型の値を継承する。また、型の属性値は、配置属性編集部104によって編集することができる。なお、型の属性値を変更すると、その値は、その型を継承する全ての実体の属性にも反映される。
【0016】
また、同じ種類の表示部品には、予め座標、高さ、幅を特定したものを必要なだけ用意することも考えられるが、上述したように、これらを配置属性として変更可能なデータとしておき、設計時に、配置属性編集部104で編集できるようにする。このようにすることで、用意すべき表示部品101の数が少なくなるとともに、個々の表示部品101の汎用性が向上する。
【0017】
効果部品102は、配置属性、効果属性及び部品関連属性を有するUI部品データである。ここで、効果属性とは、UI部品に付与する表示効果が規定されたデータであり、イベント名及びこのイベント名が示すイベントの発生を契機として発現する表示効果を表す効果定義から構成されるデータである。
【0018】
表示効果は、UI部品の表示上の効果であり、例えば、時間経過に従って、UI部品の位置の移動や、UI部品の回転、アフィン変換、UI部品の表示要素の点滅、色の変更、アニメーション表示等がある。また、表示効果には、物理的な運動を模擬した動き(例えば、バネ状の動きや重力に引かれて落ちる動き)のように複雑に移動したり、ふわふわと泡のように様々に幅や高さが変わったりするものも含まれる。
【0019】
効果定義は、所定のイベントの発生を契機として動作するイベントシステムのイベントハンドラと考えてもよい。すなわち、UI実行時に当該イベントを受信すると、当該効果定義に定義した表示効果が発現する。
【0020】
なお、効果属性におけるイベントには、ユーザイベント、システムイベント及びタイマイベント等がある。ユーザイベントは、ユーザからのキー入力やタッチパネルへのタッチ等により発生するイベントである。また、システムイベントは、UIを実行している装置で発生するイベントであり、タイマイベントは、一定時間が経過したときに発生するイベントである。
【0021】
効果属性における効果定義は、予め定義された効果から選択して設定するようにしてもよいし、何らかのプログラミング言語で記述してもよい。予め定義された効果定義としては、例えば、ワイプ、ディゾルブ、スライドインといったアニメーションが考えられる。
【0022】
効果部品102には、型があってもよい。すなわち、型の属性値には、当該効果部品102としての標準的な値が予め定義されており、配置属性編集部104によって画面上に配置される際に実体となる。この際、必要に応じて、配置属性編集部104が、予め定義された型の属性値を上書きすることができる。
上書きしない属性の値は、型の値を継承する。また、型の属性値は、配置属性編集部104又は効果属性編集部105によって編集することができる。なお、型の属性値を変更すると、その値は、その型を継承する全ての実体の属性にも反映される。
【0023】
UI部品格納部103は、表示部品101及び効果部品102が格納される記憶部であり、配置属性編集部104、効果属性編集部105及び表示属性編集部106のいずれかの保存指示を契機として、表示部品101及び効果部品102の内容がデータとして格納される。例えば、配置属性編集部104によって追加又は編集された表示部品101又は効果部品102や、表示属性編集部106によって編集された表示部品101、効果属性編集部105によって編集された効果部品102の内容が格納される。
【0024】
また、UI部品格納部103は、配置属性編集部104からUI部品の削除が指示されると、そのUI部品に対応するデータを削除する。また、UI部品格納部103は、配置属性編集部104又は効果属性編集部105から読み出しが指示されると、当該指示に対応するUI部品のデータを取り出し、指示元の編集部に提供する。また、UI部品格納部103は、編集部104〜106のいずれかが編集後のUI部品を保存するよう指示すると、新しいデータとして、これまでのデータに上書きして保存する。
【0025】
配置属性編集部104は、表示部品101又は効果部品102の配置属性を編集する構成部である。例えば、配置属性編集部104は、キーボード又はマウス等のような入力装置(図示せず)を用いた設定入力により、表示部品101や効果部品102の配置に関する内容を編集することにより、設計対象のUI画面のレイアウトが編集される。なお、配置属性編集部104としては、既存のレイアウトエディタと同様なものであっても構わない。
【0026】
また、配置属性編集部104は、表示部品101又は効果部品102を、UI部品格納部103に追加又は削除することができる。なお、表示部品101又は効果部品102を追加する際は、表示部品101又は効果部品102に予め定義された配置属性のままで、UI部品格納部103に格納することもできるし、配置属性を編集した上で格納することもできる。
【0027】
配置属性編集部104は、UI部品格納部103から表示部品101や効果部品102を読み出し、当該UI部品の配置属性値を編集した上でUI部品格納部103に格納することもできる。
【0028】
また、配置属性編集部104は、UI部品格納部103から表示部品101や効果部品102を読み出し、当該UI部品の複製を作り、必要であれば、当該複製した部品の配置属性を編集した上で、UI部品格納部103に格納することもできる。
【0029】
さらに、配置属性編集部104は、表示部品101又は効果部品102を、配置属性や表示要素に従って、それらの外観とともにグラフィカルに表示するとともに、それらをマウス等の入力装置で直接操作し、配置属性をグラフィカルに編集するようにしてもよい。
例えば、配置属性編集部104が、表示部品101又は効果部品102の型を一覧する部品パレットと、左上隅を原点とする座標系を持ったレイアウト部分とを有する、GUI(Graphical User Interface)を提供する。ここで、上記レイアウト部分には、UI部品格納部103から読み出されたUI部品が、その配置属性に従って視覚化される。
この場合、UI設計者が、部品パレットからレイアウト部分に部品の型をマウス操作でドラッグしてドロップすると、これを受けて、配置属性編集部104が、UI部品を実体化させる。このUI部品は、UI部品格納部103に追加することができる。
また、このようにしてUI部品格納部103追加したUI部品を、ユーザがマウス操作でレイアウト部分上で移動させたり、広げたりすることで、当該UI部品の配置属性を視覚的に編集することができる。
【0030】
さらに、配置属性編集部104は、効果部品102の配置属性を編集する際に、続けて当該効果部品102の効果属性も編集できるように、効果属性編集部105を起動してもよい。
【0031】
効果属性編集部105は、効果部品102の効果属性を編集する構成部である。例えば、効果属性編集部105では、上記入力装置を用いた設定入力により、効果部品102の効果属性に関する内容を編集してUI部品格納部103に格納する。
また、効果属性編集部105は、入力装置を用いて、予め定義された効果属性の値からリストボックスの形式で選択するGUIを提供することにより、選択した効果属性の値を効果部品102の効果属性として設定するようにしてもよい。
さらに、プログラミング言語で効果属性を記述する場合のために、テキストエディタを装備してもよい。
【0032】
表示属性編集部106は、表示部品101の表示属性を編集する構成部である。例えば、表示属性編集部106では、上記入力装置を用いた設定入力により、効果部品102の効果属性に関する内容を編集してUI部品格納部103に格納する。
また、効果属性編集部105は、入力装置を用いて、表示部品101の表示属性を編集するGUIを提供することにより、ラベル部品であれば、表示文字列を編集でき、画像部品であれば、表示画像のファイル名を編集することができる。
【0033】
部品関連属性設定部107は、表示部品101及び効果部品102の少なくとも一方のUI部品間の関連性を、部品関連属性として設定する構成部である。
例えば、部品関連属性設定部107は、UIの実行時に適切なタイミングで、繰り返しUI部品格納部103に格納されている全ての各表示部品101及び効果部品102の配置属性を読み出す。その都度、任意の各効果部品102を配置する画面上の領域が、表示部品101又は別の効果部品102が配置される画面上の領域を包含する場合には、任意の効果部品102の部品関連属性として、上述の表示部品101又は別の効果部品102を登録する。
具体的には、表示部品101が、効果部品102の座標・幅・高さからなる領域の内側に存在し、かつその領域の外にはみ出さずに存在しており、さらにZ値を比較して効果部品102の上にあるかどうかを検査する。これらの条件を満たせば、当該効果部品102が当該表示部品101を領域的に包含していると判断し、当該効果部品102の部品関連属性として、領域的に包含している表示部品101を登録する。
同様にして、効果部品が別の効果部品を領域的に包含しているかどうかについても、上記と同様に検査を行い、一方が他方を領域的に包含している場合には、包含している側の部品関連属性として、領域的に包含されている効果部品を登録する。
また、部品関連属性に登録するUI部品が複数個あるときは、リスト形式で登録する。
【0034】
なお、配置属性編集部104、効果属性編集部105、表示属性編集部106及び部品関連属性設定部107は、この発明の趣旨に従うUI設計用プログラムをコンピュータに実行させることで、ハードウエアとソフトウエアが協働した具体的な手段として実現することができる。
また、表示部品101及び効果部品102を格納するUI部品格納部103は、上述のコンピュータが備える記憶装置(例えば、ハードディスク装置や外部記憶メディア等)あるいは上記コンピュータと通信接続可能な他のコンピュータの記憶装置に構築することができる。
【0035】
次に、各構成部における処理内容について説明する。
図2は、表示部品のデータ内容の一例を示す図である。図2では、表示部品201で規定されるUI部品の名前が「画像1」であり、UI部品の型が「画像部品」である。また、配置属性として、配置座標(10,10)と幅20、高さ20が設定されており、表示属性として、表示要素となる画像部品のファイル名“/tmp/sample.bmp”が定義されている。
【0036】
また、図3は、効果部品のデータ内容の一例を示す図である。図3では、効果部品301で規定されるUI部品の名前が「ふんわり移動部品」であり、部品の型が「移動効果部品」である。また、配置属性として、配置座標(0,0)で、幅200、高さ200が設定されている。このUI部品は、図2に示す画像部品「画像1」を領域的に包含している。つまり、このUI部品を配置する画面上の領域が、画像部品「画像1」が配置される画面上の領域を包含しているため、部品関連属性設定部107によって部品関連属性として「画像1」が登録されている。
【0037】
効果部品301に定義される効果属性は、設計対象のUIを実行している装置で内部的に発生するイベント“setLocation”を契機として、setLocationイベントの引数である、移動先の到達座標に徐々に近づいていくという効果を、部品関連属性に登録されているUI部品に付与する場合を示している。
【0038】
上述したように、効果部品301では、効果属性のイベント名として“setLocation”が定義してある。以下、効果部品301の効果定義を詳細に説明する。
図3では、効果定義がプログラム形式で定義してあり、1〜2行目では、setLocationイベントの引数である座標を取得し、X座標の値をtargetXという変数に、Y座標の値をtargetYという変数にコピーしていることを示している。
また、3〜4行目では、部品関連属性に登録されているUI部品を1つ取得して、そのUI部品の現在の座標を、変数x,yにコピーしていることを示している。$partsとは、部品関連属性に登録されているUI部品の1つへの参照を示している。
5〜6行目では、現在の位置から移動先の位置までの距離の1/6だけ近づいた座標を算出し、7〜8行目で、再びUI部品にセットしている。
これにより、$partsで参照するUI部品が、最終到達座標に少しだけ近づく。
この処理を部品関連属性に登録されている全てのUI部品に対して繰り返し、さらに、これらの処理を適切なタイミングで繰り返すことで、部品関連属性に登録されているUI部品に対して最終到達座標に向かって徐々に近づいていくという表示効果を付与することができる。
【0039】
また、効果部品には、図3に示すように終了条件を設定することもできる。ここでは、最終到達座標と、上述の表示効果を付与する対象のUI部品の座標とが一致した場合に、処理を終了することを示している。
【0040】
次に動作について説明する。
図4は、部品関連属性設定部による処理の流れを示すフローチャートである。
先ず、実施の形態1によるUI設計装置が起動すると、部品関連属性設定部107が起動して、ステップST401の処理に進む。
【0041】
ステップST401において、部品関連属性設定部107は、UI部品格納部103から未処理の効果部品102を1つ読み出す。
続いて、部品関連属性設定部107は、ステップST401で読み出した効果部品102における部品関連属性の登録内容を全て取り除く(ステップST402)。
【0042】
次に、部品関連属性設定部107は、UI部品格納部103から未処理の表示部品101を1つ読み出す(ステップST403)。
部品関連属性設定部107は、ステップST401でUI部品格納部103から読み出した効果部品102が、当該表示部品101を領域的に包含しているか否かを判定する(ステップST404)。各表示部品が、効果部品102の幅・高さからなる領域の内側に存在し、かつその領域の外にははみ出さずに存在し、さらに効果部品102の上にあるかどうかを検査する。これらの条件を全て満たしていれば、YESと判定する。そうでなければ、NOと判定する。これは、双方の配置属性から既存の方式を用いて容易に判定することができる。
【0043】
領域的に包含していると判定すると(ステップST404;YES)、部品関連属性設定部107は、ステップST405の処理に進み、領域的に包含していなければ(ステップST404;NO)、ステップST406の処理に進む。
【0044】
ステップST405において、部品関連属性設定部107は、ステップST401でUI部品格納部103から読み出した効果部品102の部品関連属性に、ステップST403でUI部品格納部103から読み出した表示部品101の名前を登録又は追加する。
【0045】
ステップST406では、部品関連属性設定部107が、UI部品格納部103に未処理の表示部品101があるか否かを判定する。ここで、未処理の表示部品101があれば(ステップST406;YES)、部品関連属性設定部107は、ステップST403の処理に戻り、ステップST403からステップST406までの処理を繰り返す。
【0046】
一方、未処理の表示部品101がないと判定すると(ステップST406;NO)、部品関連属性設定部107は、ステップST402からステップST406までのループを終了し、UI部品格納部103に未処理の効果部品102があるか否かを判定する(ステップST407)。
【0047】
ここで、未処理の効果部品102があれば(ステップST407;YES)、部品関連属性設定部107は、ステップST401の処理に戻り、ステップST401からステップST407までの処理を繰り返す。
また、未処理の効果部品102がなければ(ステップST407;NO)、ステップST401からステップST407までのループを終了する。
【0048】
図5は、表示部品の1つが効果部品に領域的に包含された場合を説明するための図であり、UI部品及び表示画面の概略を示している。図5において、UIを表示する画面501上に、画像部品(表示部品)502,504と効果部品503が配置されている。
効果部品503は、setLocationイベントとその引数である最終到達座標を受け取ったのを契機として、部品関連属性に登録された部品に対して、回転しながら終着点に近づいていく、という効果属性が定義されている。
また、効果部品503は、画像部品502を領域的に包含しているため、効果部品503の部品関連属性には、画像部品502が登録されている。
一方、画像部品504は、どの効果部品にも領域的に包含されていないため、どの効果部品の部品関連属性にも登録されていない。
【0049】
図6は、図5中の効果部品でsetLocationイベントが発生した場合を示す図である。図6において、図5の画像部品501が、最初に配置されていた領域601からsetLocationイベントの引数で与えられた最終到達座標の領域602に移動したことを示している。なお、setLocationイベント発生時には、効果部品503の効果属性により、図6中に破線矢印で示す軌跡を描いて領域601から領域602へ画像部品501が移動する。
【0050】
図7は、図5中の効果部品の幅と高さを編集した場合を示す図であり、配置属性編集部104によって効果部品503の幅と高さの値を大きくして効果部品701としたため、画像部品504が表示効果を付与する範囲に入った場合を示している。これにより、部品関連属性設定部107は、効果部品701の部品関連属性として、新たに画像部品504を登録する。
【0051】
図8は、効果部品を重畳させた場合を示す図である。図8において、効果部品801は、図5で示した効果部品503と同等のものである。また、効果部品802は、効果部品801に重畳させた効果部品であり、部品関連属性に登録されたUI部品に対して「点滅する」という表示効果を付与する。
【0052】
図9は、図8中の効果部品でsetLocationイベントが発生した場合を示す図である。図9において、図5の画像部品501が、最初に配置されていた領域901からsetLocationイベントの引数で与えられた最終到達座標の領域903に移動したことを示している。なお、setLocationイベント発生時には、効果部品801の効果属性により、図9中に破線矢印で示す軌跡を描いて、領域901から領域902を経由して領域903へ画像部品501が移動する。
【0053】
領域902では、画像部品501が、効果部品801と効果部品802の双方に領域的に包含される状態になる。このとき、部品関連属性設定部107によって、効果部品802にも画像部品501が登録される。すなわち、画像部品501は、効果部品801の表示効果により回転しながら移動しつつ、効果部品802の表示効果により点滅する表示となる。
【0054】
画像部品501が効果部品802内の領域902から出ると、部品関連属性設定部107によって、効果部品802から画像部品501が取り除かれるため、効果部品802の表示効果である点滅する効果は付与されなくなる。
【0055】
以上のように、この実施の形態1によれば、設計対象装置のUIを構成する部品の表示要素を示す表示属性、及び当該部品の配置属性を有する表示部品データ101と、表示効果を他の部品に与える効果部品と関連性のある部品が登録される部品関連属性、部品関連属性に登録された部品の表示属性又は配置属性を時間経過に伴って変更して得られる表示上の効果を定義した効果属性、及び、効果部品の配置属性を有する効果部品データ102とを有し、部品関連属性設定部107が、効果部品を配置した画面上の領域の内側で、かつはみ出さずに、当該効果部品上に他の部品が配置されると、当該部品を当該効果部品の部品関連属性に登録する。
このように、従来では、表示部品における属性として付与していた表示効果を効果属性として分離し、この効果属性及び表示部品と同様の配置属性を有する効果部品を設けたので、効果部品の配置される領域の内側で、かつはみ出さずに、当該効果部品上に部品を配置するだけで、この効果部品に規定される表示効果を当該部品に付与することができる。
これにより、バネの動きや重力を模擬した動き等の複雑な動きの表示効果であっても、容易に、且つ、複数の部品に一括して表示効果を付与したUIを設計できる。
【0056】
また、この実施の形態1によれば、配置属性編集部104によって、一度配置した効果部品の幅や高さを広げる等して他の表示部品を配置領域内に包含させれば、表示効果の付与対象となるUI部品を容易に追加することができ、開発工数を抑制できるという効果がある。なお、効果付与対象となるUI部品の数が増加するほどにこの効果は増大する。
【0057】
さらに、この実施の形態1によれば、効果属性編集部105によって、複数の表示部品を配置領域内に包含している効果部品の効果属性を変更することで、複数の表示部品に付与された表示効果を一括して差し替えることができ、開発工数を抑制できるという効果がある。なお、効果付与対象となるUI部品の数が増加するほどにこの効果は増大する。
【0058】
さらに、この実施の形態1によれば、配置属性編集部104によって、所望の効果定義を施した効果部品を複製して配置することで、同じ効果を容易に再利用でき、開発工数を抑制できるという効果がある。
【0059】
さらに、この実施の形態1によれば、配置属性編集部104によって、既に効果部品の配置領域内に包含されている表示部品を削除し、別の表示部品を追加し、追加した表示部品の配置属性を削除した表示部品と同じ配置属性に設定することで、同じ表示効果を、新しい表示部品に付与することができる。このため、効果付与後であっても容易に表示部品を差し替えることができ、開発工数を抑制できるという効果がある。なお、表示効果の差し替え対象となるUI部品の数が増加するほどにこの効果は増大する。
【0060】
さらに、この実施の形態1によれば、配置属性編集部104によって、効果部品を削除し、他の効果部品を配置して、配置属性の値を削除した上記効果部品の配置属性の値と同一にすることで、表示効果を容易に差し替えることができ、開発工数を抑制できる、という効果がある。なお、差し替え対象となるUI部品の数が増加するほどにこの効果は増大する。
【0061】
さらに、この実施の形態1によれば、効果部品は、表示部品と同様に画面上の前後関係の配置属性を有するため、異なるZ値を持つ複数の効果部品を重畳して配置することができる。なお、複数の効果部品が重畳された領域に包含される表示部品には、当該効果部品それぞれの表示効果が重畳して付与されるので、表示効果を容易に重畳することができ、開発工数を抑制することができるという効果がある。
また、表示効果の付与対象のUI部品が多数であっても効果部品の配置領域に包含するだけで、一括して効果を付与することができる。
さらに、効果部品に重畳することで表示効果の付与を視覚的に認知できるため、効果部品の重畳し忘れを防ぐことができる。
【0062】
実施の形態2.
図10は、この発明の実施の形態2によるUI設計装置の構成を示すブロック図である。図10において、図1と同一符号を付した構成部は同一又はこれに相当する機能を有するので説明を省略する。実施の形態2によるUI設計装置は、上記実施の形態1で図1を用いて説明した構成における部品関連属性設定部107の代わりに部品関連属性編集部1001を備える。
部品関連属性編集部1001は、効果部品102と表示部品101との間、効果部品間あるいは表示部品101間に論理的な親子関係を定義し、親となるUI部品の部品関連属性として子となるUI部品を登録する構成部である。
【0063】
部品関連属性編集部1001は、入力装置を用いて、表示部品101や効果部品102の部品関連属性を編集するGUIを提供することにより、ユーザが入力装置を用いて編集内容を入力し、この編集内容を表示部品101や効果部品102の部品関連属性に反映させる。
【0064】
なお、部品関連属性編集部1001は、配置属性編集部104と統合していてもよく、また、グラフィカルな表現を持つ編集部であってもよい。例えば、配置属性編集部104において、UI部品をドラッグして別のUI部品へドロップした際、部品関連属性編集部1001が、ドラッグしたUI部品を子とし、ドロップされたUI部品を親として、論理的な親子関係を構築し、部品関連属性に反映させるようにしてもよい。
【0065】
また、配置属性編集部104によって、既に効果部品102と親子関係が結ばれている表示部品101を削除し、別の新しい表示部品101を追加するにあたり、部品関連属性編集部1001が、新しい表示部品101について削除した表示部品101と同じ親子関係を結ぶだけで、同じ表示効果を、当該新しい表示部品101に付与することができる。このため、効果の付与後であっても容易に表示部品101を差し替えることができ、開発工数を抑制できる。
【0066】
さらに、複数の子部品を持つ効果部品102に対して、効果属性編集部105が、当該効果部品102の効果属性を変更すれば、一括して複数の子部品に付与された表示効果を差し替えることができる。これによっても、開発工数を抑制できる。
【0067】
さらに、この実施の形態2によれば、配置属性編集部104によって、効果部品102を削除し、別の新たな効果部品102を配置しその部品関連属性の値を削除した際、部品関連属性編集部1001が、新たな効果部品の部品関連属性を、削除した効果部品の部品関連属性の値と同一にすることで、表示効果を容易に差し替えることができ、開発工数を抑制できる。
【0068】
以上のように、この実施の形態2によれば、設計対象装置のUIを構成する部品の表示要素を示す表示属性、及び当該部品の配置属性を有する表示部品データ101と、表示効果を他の部品に与える効果部品と関連性のある部品が登録される部品関連属性、部品関連属性に登録された部品の表示属性又は配置属性を時間経過に伴って変更して得られる表示上の効果を定義した効果属性、及び、効果部品の配置属性を有する効果部品データ102とを有し、部品関連属性編集部1001が、効果部品を親とし、他の部品を子とする親子関係を定義して、当該部品関連属性の内容を編集する。
このように、部品関連属性編集部1001によって親子関係を定義するだけで、任意のUI部品を効果部品の部品関連属性に登録することができるため、効果部品102の画面上の領域に制限されることなく、当該効果部品102の効果付与の対象とすることができ、効果を付与する際の編集作業の自由度を飛躍的に高めることができる。
また、複数の表示効果を重畳する場合であっても、効果部品102を実際に重畳させる必要はなく、効果部品間の親子関係を結ぶだけで、子の効果部品には親の効果部品の効果が付与される。
従って、さらにその子のUI部品は、両方の効果部品の効果が重畳して付与されることから、重畳した効果を付与する自由度をさらに高めることができる。
これらによって、表示効果が付与されたUIを容易に実現でき、開発工数を抑制できるという、顕著な効果を奏するものである。
【0069】
また、この実施の形態2によれば、親子関係の順序を容易に変更することができることから、容易に表示効果の適用順序を変えることが可能であり、開発工数を抑制できる、という効果がある。
【0070】
さらに、この実施の形態2によれば、部品関連属性編集部1001によってUI部品と親子関係を結ぶだけで、任意の配置属性を持つ任意の複数のUI部品に対して容易に同じ表示効果を付与することができ、開発工数を抑制できる、という効果がある。
【0071】
さらに、この実施の形態2によれば、所望の効果定義を施した効果部品を複製して配置することで、同じ効果を容易に再利用でき、開発工数を抑制できる、という効果がある。
【0072】
実施の形態3.
図11は、この発明の実施の形態3によるUI設計装置の構成を示すブロック図である。図11において、図1と同一符号を付した構成部は同一又はこれに相当する機能を有するので説明を省略する。実施の形態3によるUI設計装置は、上記実施の形態1で図1を用いて説明した構成に加えて、実行部1101を備える。
【0073】
実行部1101は、上記実施の形態1及び上記実施の形態2で設計された内容を、シミュレーションしたり、設計対象のUIを構築した装置上で実行する構成部であり、入力部1102、視覚化部1103、イベント生成部1104及びイベントディスパッチ部1105を備える。
【0074】
なお、入力部1102、視覚化部1103、イベント生成部1104及びイベントディスパッチ部1105は、この発明の趣旨に従うUI設計用プログラムをコンピュータに実行させることで、ハードウエアとソフトウエアが協働した具体的な手段として実現することができる。
【0075】
入力部1102は、入力装置1102aを用いたユーザからの入力を受け付ける構成部である。入力装置1102aとしては、マウスやキーボード、タッチパネル等が挙げられる。視覚化部1103は、UIの表示内容を表示装置1103aの画面上に表示する構成部である。表示装置1103aとしては、液晶ディスプレイ等、様々なディスプレイが考えられる。
【0076】
イベント生成部1104は、各種のイベントを生成する構成部であり、イベントディスパッチ部1105は、イベント生成部1104で生成されたイベントに対応するイベントハンドラが定義されているUI部品を特定し、このイベントハンドラに定義される内容を実行する構成部である。
【0077】
次に動作について説明する。
先ず、実行部1101が起動すると、視覚化部1103は、UI部品格納部103から表示部品101を配置属性のZ値の小さい方から順に読み出して、表示属性の内容と配置属性の値とを取得する。
【0078】
視覚化部1103は、表示属性の内容と配置属性の値を取得した順に、表示属性の内容を配置属性の値に合わせて表示装置1103aの画面上に表示する。
例えば、視覚化部1103は、取得した表示属性の内容が画像ファイルであり、配置属性が座標(0,0)であると、当該画像ファイルをUI部品格納部103から読み出してビットマップに変換し、ビットマップの内容を表示装置1103aの画面上の座標(0,0)を示すメモリに転送することで、視覚化を行う。
【0079】
イベント生成部1104は、入力部1102を介して、ユーザからのキーイベントやタッチパネルのイベントを受信した場合、どのキーが押されたか、あるいは、どの座標がタッチされたかを引数とするユーザイベントを生成する。
また、イベント生成部1104は、別の装置からメッセージを受信した場合、そのメッセージ内容を引数とするシステムイベントを生成する。
さらに、イベント生成部1104は、タイマが発火した場合には、タイマイベントを生成する。また、UI部品がイベントの発生を指示した場合、内部イベントを生成する。
【0080】
イベントディスパッチ部1105は、イベント生成部1104が生成したイベントを受信し、そのイベントに対するイベントハンドラが定義されているUI部品を、UI部品格納部103から検索する。当該イベントに対するイベントハンドラが定義されているUI部品があれば、当該イベントハンドラに定義されている内容(アクション)を実行する。
なお、アクションがプログラミング言語で記述されている場合、イベントディスパッチ部1105が、アクションを示すプログラミング言語を解釈して実行してもよい。
【0081】
このように、イベントディスパッチ部1105は、効果部品102の効果定義をイベントハンドラとして解釈して、効果属性に定義されたイベントが発生した場合に、部品関連属性に登録されたUI部品に対して、当該効果属性の効果定義の処理を実行する。
従って、効果部品の部品関連属性に登録されたそれぞれのUI部品に対して、効果が付与される。また、イベントディスパッチ部1105は、効果の付与完了後、終了条件を満たしていなければ、再び効果定義の処理を実行する。
なお、イベントディスパッチ部1105は、イベント発生時の処理を実行する上で、必要に応じてUI部品格納部103に格納した各UI部品の属性値を更新する。
【0082】
イベントディスパッチ部1105の処理が終了すると、視覚化部1103が、UI部品格納部13の記憶内容を再び取得することにより、表示装置1103aの画面上に視覚化した表示内容を更新する。
実行部1101では、上述の処理が繰り返される。
【0083】
なお、実行部1101は、既存のUI設計装置における、イベントを契機とした動作を行う実行システムと同様のものでも構わない。
【0084】
以上のように、この実施の形態3によれば、UI設計対象装置で設計されたUIを実行する実行部1101を備えたので、UI実行時の動作を確認しつつ、UI設計を実施することができる。
【0085】
なお、上記実施の形態3では、実行部1101を上記実施の形態1の構成に適用した場合を示したが、上記実施の形態2の構成に適用しても構わない。
【符号の説明】
【0086】
101,201,502,504 表示部品、102,301,503,701,801,803 効果部品、103 UI部品格納部、104 配置属性編集部、105 効果属性編集部、106 表示属性編集部、107 部品関連属性設定部、501 画面、601,602,901,902,903 領域、1001 部品関連属性編集部、1101 実行部、1102 入力部、1102a 入力装置、1103 視覚化部、1103a 表示装置、1104 イベント生成部、1105 イベントディスパッチ部。
【技術分野】
【0001】
この発明は、画面にユーザインタフェース部品を配置して、アニメーション等の表示効果を定義することでユーザインタフェースを設計するユーザインタフェース設計装置に関するものである。
【背景技術】
【0002】
近年、バネを模擬した動きや、重力を模擬した動き、ふわふわした泡のような動き等、物理的な動きを表示効果としてユーザインタフェースに適用し、当該ユーザインタフェースを操作するユーザにリアリティのある操作感を与えるユーザインタフェースが増えてきている。このようなユーザインタフェースでは、個々のユーザインタフェース部品の動きが複雑なだけでなく、画面内に登場するユーザインタフェース部品の数も多く、その開発工数は増大している。
【0003】
例えば、特許文献1には、上述のようなユーザインタフェースを設計するユーザインタフェース設計装置が開示されている。この装置では、ユーザインタフェース設計者が、画面仕様に従って画面上に表示部品をレイアウトする配置編集部を用いて、表示要素を持つ表示部品を追加、削除し又は表示部品の属性を編集して画面にレイアウトすることで、ユーザインタフェースを設計する。
また、ユーザインタフェース設計者は、例えば、タイムラインエディタ等の表示効果編集部を使用して、ユーザインタフェース部品に表示効果を付与する。タイムラインエディタでは、ユーザインタフェース部品が持つ各種属性値について、時間に沿った変化を定義することで表示効果を付与する。
【0004】
特許文献1の装置では、3次元オブジェクトに、時間や動作等を定義したタイムラインオブジェクトをドラッグして設定し、簡単に動画を作成することができる。設定したタイムラインオブジェクトは、タイムラインオブジェクト編集部により動作の編集ができる。
タイムラインオブジェクトは、テンプレートとして用意されており、オブジェクト間の継承を行うことで、回転しながら移動するといった複合的な運動を3次元オブジェクトに与えることができる。
【先行技術文献】
【特許文献】
【0005】
【特許文献1】特開2007−025979号公報
【発明の概要】
【発明が解決しようとする課題】
【0006】
従来のユーザインタフェース設計装置のタイムラインエディタでは、ユーザインタフェース部品の属性ごとに時間軸が設定されており、時間軸上の特定の時刻(複数可)における属性値を定義していくことで、ユーザインタフェース部品にアニメーション等の効果を付与することができる。
このような編集方式では、ユーザインタフェース設計者が頭の中で思い描く動きを、時刻とその時刻での属性値という2次元空間に、頭の中や手作業等で分解し、手作業にて定義していく必要がある。
このため、バネの動きや重力を模擬した動き等の複雑な表示効果を定義するには、特殊なスキルが必要である上、スキルを持っていても、その作業は煩雑であるという問題があった。
【0007】
また、従来の編集方式では、表示効果は、ユーザインタフェース部品の属性として付与される。例えば、ユーザからの入力イベントを処理するイベントハンドラのアクションとして付与される。
ユーザから右ボタンの入力があれば右方向にバネ状の動きをしながら当該ユーザインタフェース部品が移動し、上ボタンの入力があれば上方向にバネ状の動きをしながら当該ユーザインタフェース部品が移動し、他の方向に対しても類似な動きをするユーザインタフェースを例に挙げる。このようなユーザインタフェースでは、それぞれの入力イベントのイベントハンドラごとにそれぞれの方向に応じたバネ状の動きを個別に定義していく必要がある。
【0008】
従来のユーザインタフェース設計装置では、ユーザインタフェース部品のそれぞれの動きの定義方法が煩雑な上、類似の表示効果をユーザインタフェース部品ごと、あるいはイベントハンドラごとに定義する必要があるため、ユーザインタフェース設計の工数が増大するという問題があった。
また、この工数の問題は、画面内に登場するユーザインタフェース部品の個数が増える程に顕著になる。
【0009】
この発明は、上記のような課題を解決するためになされたもので、効率良く、容易に、ユーザインタフェースを設計できるユーザインタフェース設計装置を得ることを目的とする。
【課題を解決するための手段】
【0010】
この発明に係るユーザインタフェース設計装置は、設計対象装置のユーザインタフェースを構成する部品の表示要素を示す表示属性、及び設計対象装置の画面上の当該部品の配置座標及び大きさを示す配置属性を有する表示部品データと、表示効果を他の部品に与える効果部品と関連性のある部品が登録される部品関連属性、部品関連属性に登録された部品の表示属性又は配置属性を時間経過に伴って変更して得られる表示効果を定義した効果属性、及び、設計対象装置の画面上の効果部品の配置座標及び大きさを示す配置属性を有する効果部品データとを格納するUI部品格納部と、表示部品データ及び効果部品データの配置属性を編集する配置属性編集部と、効果部品データの効果属性を編集する効果属性編集部と、表示部品データの表示属性を編集する表示属性編集部と、配置属性編集部による配置属性の編集で、効果部品を配置した画面上の領域の内側で、かつはみ出さずに、当該効果部品上に他の部品が配置されると、当該部品を当該効果部品の部品関連属性に登録する部品関連属性設定部とを備えるものである。
【発明の効果】
【0011】
この発明によれば、設計対象装置のユーザインタフェースを構成する部品の表示要素を示す表示属性、及び設計対象装置の画面上の当該部品の配置座標及び大きさを示す配置属性を有する表示部品データと、表示効果を他の部品に与える効果部品と関連性のある部品が登録される部品関連属性、部品関連属性に登録された部品の表示属性又は配置属性を、時間経過に伴って変更して得られる表示効果を定義した効果属性、及び、設計対象装置の画面上の効果部品の配置座標及び大きさを示す配置属性を有する効果部品データとを有し、効果部品を配置した画面上の領域の内側で、かつはみ出さずに、当該効果部品上に他の部品が配置されると、当該部品を当該効果部品の部品関連属性に登録する。このように構成することで、バネの動きや重力を模擬した動き等の複雑な動きの表示効果であっても、容易に、且つ、複数の部品に一括して表示効果を付与したユーザインタフェースを設計できるという顕著な効果を奏するものである。
【図面の簡単な説明】
【0012】
【図1】この発明の実施の形態1によるユーザインタフェース設計装置の構成を示すブロック図である。
【図2】表示部品のデータ内容の一例を示す図である。
【図3】効果部品のデータ内容の一例を示す図である。
【図4】部品関連属性設定部による処理の流れを示すフローチャートである。
【図5】表示部品の1つが効果部品に領域的に包含された場合を説明するための図である。
【図6】図5中の効果部品でsetLocationイベントが発生した場合を示す図である。
【図7】図5中の効果部品の幅と高さを編集した場合を示す図である。
【図8】効果部品を重畳させた場合を示す図である。
【図9】図8中の効果部品でsetLocationイベントが発生した場合を示す図である。
【図10】この発明の実施の形態2によるユーザインタフェース設計装置の構成を示すブロック図である。
【図11】この発明の実施の形態3によるユーザインタフェース設計装置の構成を示すブロック図である。
【発明を実施するための形態】
【0013】
実施の形態1.
図1は、この発明の実施の形態1によるユーザインタフェース設計装置の構成を示すブロック図である。図1において、実施の形態1によるユーザインタフェース(以下、UIと呼ぶ)設計装置は、表示部品101及び効果部品102を格納するUI部品格納部103、配置属性編集部104、効果属性編集部105、表示属性編集部106及び部品関連属性設定部107を備える。
【0014】
表示部品101は、表示属性、配置属性及び部品関連属性を有するUI部品データである。ここで、表示属性とは、UI部品の表示要素を示すデータであり、画像又は文字列、図形等がある。また、配置属性としては、画面上に表示したときのUI部品の座標、幅、高さ、UI部品間の前後関係を示すZ値及び表示の可否がある。部品関連属性とは、関連性を有するUI部品が登録される情報である。なお、表示部品101は、部品関連属性を有さない場合もある。
【0015】
表示部品101には、型があってもよい。すなわち、型の属性値には、当該表示部品101としての標準的な値が予め定義されており、配置属性編集部104によって画面上に配置される際に実体となる。この際、必要に応じて、配置属性編集部104が、予め定義された型の属性値を上書きすることができる。
上書きしない属性の値は、型の値を継承する。また、型の属性値は、配置属性編集部104によって編集することができる。なお、型の属性値を変更すると、その値は、その型を継承する全ての実体の属性にも反映される。
【0016】
また、同じ種類の表示部品には、予め座標、高さ、幅を特定したものを必要なだけ用意することも考えられるが、上述したように、これらを配置属性として変更可能なデータとしておき、設計時に、配置属性編集部104で編集できるようにする。このようにすることで、用意すべき表示部品101の数が少なくなるとともに、個々の表示部品101の汎用性が向上する。
【0017】
効果部品102は、配置属性、効果属性及び部品関連属性を有するUI部品データである。ここで、効果属性とは、UI部品に付与する表示効果が規定されたデータであり、イベント名及びこのイベント名が示すイベントの発生を契機として発現する表示効果を表す効果定義から構成されるデータである。
【0018】
表示効果は、UI部品の表示上の効果であり、例えば、時間経過に従って、UI部品の位置の移動や、UI部品の回転、アフィン変換、UI部品の表示要素の点滅、色の変更、アニメーション表示等がある。また、表示効果には、物理的な運動を模擬した動き(例えば、バネ状の動きや重力に引かれて落ちる動き)のように複雑に移動したり、ふわふわと泡のように様々に幅や高さが変わったりするものも含まれる。
【0019】
効果定義は、所定のイベントの発生を契機として動作するイベントシステムのイベントハンドラと考えてもよい。すなわち、UI実行時に当該イベントを受信すると、当該効果定義に定義した表示効果が発現する。
【0020】
なお、効果属性におけるイベントには、ユーザイベント、システムイベント及びタイマイベント等がある。ユーザイベントは、ユーザからのキー入力やタッチパネルへのタッチ等により発生するイベントである。また、システムイベントは、UIを実行している装置で発生するイベントであり、タイマイベントは、一定時間が経過したときに発生するイベントである。
【0021】
効果属性における効果定義は、予め定義された効果から選択して設定するようにしてもよいし、何らかのプログラミング言語で記述してもよい。予め定義された効果定義としては、例えば、ワイプ、ディゾルブ、スライドインといったアニメーションが考えられる。
【0022】
効果部品102には、型があってもよい。すなわち、型の属性値には、当該効果部品102としての標準的な値が予め定義されており、配置属性編集部104によって画面上に配置される際に実体となる。この際、必要に応じて、配置属性編集部104が、予め定義された型の属性値を上書きすることができる。
上書きしない属性の値は、型の値を継承する。また、型の属性値は、配置属性編集部104又は効果属性編集部105によって編集することができる。なお、型の属性値を変更すると、その値は、その型を継承する全ての実体の属性にも反映される。
【0023】
UI部品格納部103は、表示部品101及び効果部品102が格納される記憶部であり、配置属性編集部104、効果属性編集部105及び表示属性編集部106のいずれかの保存指示を契機として、表示部品101及び効果部品102の内容がデータとして格納される。例えば、配置属性編集部104によって追加又は編集された表示部品101又は効果部品102や、表示属性編集部106によって編集された表示部品101、効果属性編集部105によって編集された効果部品102の内容が格納される。
【0024】
また、UI部品格納部103は、配置属性編集部104からUI部品の削除が指示されると、そのUI部品に対応するデータを削除する。また、UI部品格納部103は、配置属性編集部104又は効果属性編集部105から読み出しが指示されると、当該指示に対応するUI部品のデータを取り出し、指示元の編集部に提供する。また、UI部品格納部103は、編集部104〜106のいずれかが編集後のUI部品を保存するよう指示すると、新しいデータとして、これまでのデータに上書きして保存する。
【0025】
配置属性編集部104は、表示部品101又は効果部品102の配置属性を編集する構成部である。例えば、配置属性編集部104は、キーボード又はマウス等のような入力装置(図示せず)を用いた設定入力により、表示部品101や効果部品102の配置に関する内容を編集することにより、設計対象のUI画面のレイアウトが編集される。なお、配置属性編集部104としては、既存のレイアウトエディタと同様なものであっても構わない。
【0026】
また、配置属性編集部104は、表示部品101又は効果部品102を、UI部品格納部103に追加又は削除することができる。なお、表示部品101又は効果部品102を追加する際は、表示部品101又は効果部品102に予め定義された配置属性のままで、UI部品格納部103に格納することもできるし、配置属性を編集した上で格納することもできる。
【0027】
配置属性編集部104は、UI部品格納部103から表示部品101や効果部品102を読み出し、当該UI部品の配置属性値を編集した上でUI部品格納部103に格納することもできる。
【0028】
また、配置属性編集部104は、UI部品格納部103から表示部品101や効果部品102を読み出し、当該UI部品の複製を作り、必要であれば、当該複製した部品の配置属性を編集した上で、UI部品格納部103に格納することもできる。
【0029】
さらに、配置属性編集部104は、表示部品101又は効果部品102を、配置属性や表示要素に従って、それらの外観とともにグラフィカルに表示するとともに、それらをマウス等の入力装置で直接操作し、配置属性をグラフィカルに編集するようにしてもよい。
例えば、配置属性編集部104が、表示部品101又は効果部品102の型を一覧する部品パレットと、左上隅を原点とする座標系を持ったレイアウト部分とを有する、GUI(Graphical User Interface)を提供する。ここで、上記レイアウト部分には、UI部品格納部103から読み出されたUI部品が、その配置属性に従って視覚化される。
この場合、UI設計者が、部品パレットからレイアウト部分に部品の型をマウス操作でドラッグしてドロップすると、これを受けて、配置属性編集部104が、UI部品を実体化させる。このUI部品は、UI部品格納部103に追加することができる。
また、このようにしてUI部品格納部103追加したUI部品を、ユーザがマウス操作でレイアウト部分上で移動させたり、広げたりすることで、当該UI部品の配置属性を視覚的に編集することができる。
【0030】
さらに、配置属性編集部104は、効果部品102の配置属性を編集する際に、続けて当該効果部品102の効果属性も編集できるように、効果属性編集部105を起動してもよい。
【0031】
効果属性編集部105は、効果部品102の効果属性を編集する構成部である。例えば、効果属性編集部105では、上記入力装置を用いた設定入力により、効果部品102の効果属性に関する内容を編集してUI部品格納部103に格納する。
また、効果属性編集部105は、入力装置を用いて、予め定義された効果属性の値からリストボックスの形式で選択するGUIを提供することにより、選択した効果属性の値を効果部品102の効果属性として設定するようにしてもよい。
さらに、プログラミング言語で効果属性を記述する場合のために、テキストエディタを装備してもよい。
【0032】
表示属性編集部106は、表示部品101の表示属性を編集する構成部である。例えば、表示属性編集部106では、上記入力装置を用いた設定入力により、効果部品102の効果属性に関する内容を編集してUI部品格納部103に格納する。
また、効果属性編集部105は、入力装置を用いて、表示部品101の表示属性を編集するGUIを提供することにより、ラベル部品であれば、表示文字列を編集でき、画像部品であれば、表示画像のファイル名を編集することができる。
【0033】
部品関連属性設定部107は、表示部品101及び効果部品102の少なくとも一方のUI部品間の関連性を、部品関連属性として設定する構成部である。
例えば、部品関連属性設定部107は、UIの実行時に適切なタイミングで、繰り返しUI部品格納部103に格納されている全ての各表示部品101及び効果部品102の配置属性を読み出す。その都度、任意の各効果部品102を配置する画面上の領域が、表示部品101又は別の効果部品102が配置される画面上の領域を包含する場合には、任意の効果部品102の部品関連属性として、上述の表示部品101又は別の効果部品102を登録する。
具体的には、表示部品101が、効果部品102の座標・幅・高さからなる領域の内側に存在し、かつその領域の外にはみ出さずに存在しており、さらにZ値を比較して効果部品102の上にあるかどうかを検査する。これらの条件を満たせば、当該効果部品102が当該表示部品101を領域的に包含していると判断し、当該効果部品102の部品関連属性として、領域的に包含している表示部品101を登録する。
同様にして、効果部品が別の効果部品を領域的に包含しているかどうかについても、上記と同様に検査を行い、一方が他方を領域的に包含している場合には、包含している側の部品関連属性として、領域的に包含されている効果部品を登録する。
また、部品関連属性に登録するUI部品が複数個あるときは、リスト形式で登録する。
【0034】
なお、配置属性編集部104、効果属性編集部105、表示属性編集部106及び部品関連属性設定部107は、この発明の趣旨に従うUI設計用プログラムをコンピュータに実行させることで、ハードウエアとソフトウエアが協働した具体的な手段として実現することができる。
また、表示部品101及び効果部品102を格納するUI部品格納部103は、上述のコンピュータが備える記憶装置(例えば、ハードディスク装置や外部記憶メディア等)あるいは上記コンピュータと通信接続可能な他のコンピュータの記憶装置に構築することができる。
【0035】
次に、各構成部における処理内容について説明する。
図2は、表示部品のデータ内容の一例を示す図である。図2では、表示部品201で規定されるUI部品の名前が「画像1」であり、UI部品の型が「画像部品」である。また、配置属性として、配置座標(10,10)と幅20、高さ20が設定されており、表示属性として、表示要素となる画像部品のファイル名“/tmp/sample.bmp”が定義されている。
【0036】
また、図3は、効果部品のデータ内容の一例を示す図である。図3では、効果部品301で規定されるUI部品の名前が「ふんわり移動部品」であり、部品の型が「移動効果部品」である。また、配置属性として、配置座標(0,0)で、幅200、高さ200が設定されている。このUI部品は、図2に示す画像部品「画像1」を領域的に包含している。つまり、このUI部品を配置する画面上の領域が、画像部品「画像1」が配置される画面上の領域を包含しているため、部品関連属性設定部107によって部品関連属性として「画像1」が登録されている。
【0037】
効果部品301に定義される効果属性は、設計対象のUIを実行している装置で内部的に発生するイベント“setLocation”を契機として、setLocationイベントの引数である、移動先の到達座標に徐々に近づいていくという効果を、部品関連属性に登録されているUI部品に付与する場合を示している。
【0038】
上述したように、効果部品301では、効果属性のイベント名として“setLocation”が定義してある。以下、効果部品301の効果定義を詳細に説明する。
図3では、効果定義がプログラム形式で定義してあり、1〜2行目では、setLocationイベントの引数である座標を取得し、X座標の値をtargetXという変数に、Y座標の値をtargetYという変数にコピーしていることを示している。
また、3〜4行目では、部品関連属性に登録されているUI部品を1つ取得して、そのUI部品の現在の座標を、変数x,yにコピーしていることを示している。$partsとは、部品関連属性に登録されているUI部品の1つへの参照を示している。
5〜6行目では、現在の位置から移動先の位置までの距離の1/6だけ近づいた座標を算出し、7〜8行目で、再びUI部品にセットしている。
これにより、$partsで参照するUI部品が、最終到達座標に少しだけ近づく。
この処理を部品関連属性に登録されている全てのUI部品に対して繰り返し、さらに、これらの処理を適切なタイミングで繰り返すことで、部品関連属性に登録されているUI部品に対して最終到達座標に向かって徐々に近づいていくという表示効果を付与することができる。
【0039】
また、効果部品には、図3に示すように終了条件を設定することもできる。ここでは、最終到達座標と、上述の表示効果を付与する対象のUI部品の座標とが一致した場合に、処理を終了することを示している。
【0040】
次に動作について説明する。
図4は、部品関連属性設定部による処理の流れを示すフローチャートである。
先ず、実施の形態1によるUI設計装置が起動すると、部品関連属性設定部107が起動して、ステップST401の処理に進む。
【0041】
ステップST401において、部品関連属性設定部107は、UI部品格納部103から未処理の効果部品102を1つ読み出す。
続いて、部品関連属性設定部107は、ステップST401で読み出した効果部品102における部品関連属性の登録内容を全て取り除く(ステップST402)。
【0042】
次に、部品関連属性設定部107は、UI部品格納部103から未処理の表示部品101を1つ読み出す(ステップST403)。
部品関連属性設定部107は、ステップST401でUI部品格納部103から読み出した効果部品102が、当該表示部品101を領域的に包含しているか否かを判定する(ステップST404)。各表示部品が、効果部品102の幅・高さからなる領域の内側に存在し、かつその領域の外にははみ出さずに存在し、さらに効果部品102の上にあるかどうかを検査する。これらの条件を全て満たしていれば、YESと判定する。そうでなければ、NOと判定する。これは、双方の配置属性から既存の方式を用いて容易に判定することができる。
【0043】
領域的に包含していると判定すると(ステップST404;YES)、部品関連属性設定部107は、ステップST405の処理に進み、領域的に包含していなければ(ステップST404;NO)、ステップST406の処理に進む。
【0044】
ステップST405において、部品関連属性設定部107は、ステップST401でUI部品格納部103から読み出した効果部品102の部品関連属性に、ステップST403でUI部品格納部103から読み出した表示部品101の名前を登録又は追加する。
【0045】
ステップST406では、部品関連属性設定部107が、UI部品格納部103に未処理の表示部品101があるか否かを判定する。ここで、未処理の表示部品101があれば(ステップST406;YES)、部品関連属性設定部107は、ステップST403の処理に戻り、ステップST403からステップST406までの処理を繰り返す。
【0046】
一方、未処理の表示部品101がないと判定すると(ステップST406;NO)、部品関連属性設定部107は、ステップST402からステップST406までのループを終了し、UI部品格納部103に未処理の効果部品102があるか否かを判定する(ステップST407)。
【0047】
ここで、未処理の効果部品102があれば(ステップST407;YES)、部品関連属性設定部107は、ステップST401の処理に戻り、ステップST401からステップST407までの処理を繰り返す。
また、未処理の効果部品102がなければ(ステップST407;NO)、ステップST401からステップST407までのループを終了する。
【0048】
図5は、表示部品の1つが効果部品に領域的に包含された場合を説明するための図であり、UI部品及び表示画面の概略を示している。図5において、UIを表示する画面501上に、画像部品(表示部品)502,504と効果部品503が配置されている。
効果部品503は、setLocationイベントとその引数である最終到達座標を受け取ったのを契機として、部品関連属性に登録された部品に対して、回転しながら終着点に近づいていく、という効果属性が定義されている。
また、効果部品503は、画像部品502を領域的に包含しているため、効果部品503の部品関連属性には、画像部品502が登録されている。
一方、画像部品504は、どの効果部品にも領域的に包含されていないため、どの効果部品の部品関連属性にも登録されていない。
【0049】
図6は、図5中の効果部品でsetLocationイベントが発生した場合を示す図である。図6において、図5の画像部品501が、最初に配置されていた領域601からsetLocationイベントの引数で与えられた最終到達座標の領域602に移動したことを示している。なお、setLocationイベント発生時には、効果部品503の効果属性により、図6中に破線矢印で示す軌跡を描いて領域601から領域602へ画像部品501が移動する。
【0050】
図7は、図5中の効果部品の幅と高さを編集した場合を示す図であり、配置属性編集部104によって効果部品503の幅と高さの値を大きくして効果部品701としたため、画像部品504が表示効果を付与する範囲に入った場合を示している。これにより、部品関連属性設定部107は、効果部品701の部品関連属性として、新たに画像部品504を登録する。
【0051】
図8は、効果部品を重畳させた場合を示す図である。図8において、効果部品801は、図5で示した効果部品503と同等のものである。また、効果部品802は、効果部品801に重畳させた効果部品であり、部品関連属性に登録されたUI部品に対して「点滅する」という表示効果を付与する。
【0052】
図9は、図8中の効果部品でsetLocationイベントが発生した場合を示す図である。図9において、図5の画像部品501が、最初に配置されていた領域901からsetLocationイベントの引数で与えられた最終到達座標の領域903に移動したことを示している。なお、setLocationイベント発生時には、効果部品801の効果属性により、図9中に破線矢印で示す軌跡を描いて、領域901から領域902を経由して領域903へ画像部品501が移動する。
【0053】
領域902では、画像部品501が、効果部品801と効果部品802の双方に領域的に包含される状態になる。このとき、部品関連属性設定部107によって、効果部品802にも画像部品501が登録される。すなわち、画像部品501は、効果部品801の表示効果により回転しながら移動しつつ、効果部品802の表示効果により点滅する表示となる。
【0054】
画像部品501が効果部品802内の領域902から出ると、部品関連属性設定部107によって、効果部品802から画像部品501が取り除かれるため、効果部品802の表示効果である点滅する効果は付与されなくなる。
【0055】
以上のように、この実施の形態1によれば、設計対象装置のUIを構成する部品の表示要素を示す表示属性、及び当該部品の配置属性を有する表示部品データ101と、表示効果を他の部品に与える効果部品と関連性のある部品が登録される部品関連属性、部品関連属性に登録された部品の表示属性又は配置属性を時間経過に伴って変更して得られる表示上の効果を定義した効果属性、及び、効果部品の配置属性を有する効果部品データ102とを有し、部品関連属性設定部107が、効果部品を配置した画面上の領域の内側で、かつはみ出さずに、当該効果部品上に他の部品が配置されると、当該部品を当該効果部品の部品関連属性に登録する。
このように、従来では、表示部品における属性として付与していた表示効果を効果属性として分離し、この効果属性及び表示部品と同様の配置属性を有する効果部品を設けたので、効果部品の配置される領域の内側で、かつはみ出さずに、当該効果部品上に部品を配置するだけで、この効果部品に規定される表示効果を当該部品に付与することができる。
これにより、バネの動きや重力を模擬した動き等の複雑な動きの表示効果であっても、容易に、且つ、複数の部品に一括して表示効果を付与したUIを設計できる。
【0056】
また、この実施の形態1によれば、配置属性編集部104によって、一度配置した効果部品の幅や高さを広げる等して他の表示部品を配置領域内に包含させれば、表示効果の付与対象となるUI部品を容易に追加することができ、開発工数を抑制できるという効果がある。なお、効果付与対象となるUI部品の数が増加するほどにこの効果は増大する。
【0057】
さらに、この実施の形態1によれば、効果属性編集部105によって、複数の表示部品を配置領域内に包含している効果部品の効果属性を変更することで、複数の表示部品に付与された表示効果を一括して差し替えることができ、開発工数を抑制できるという効果がある。なお、効果付与対象となるUI部品の数が増加するほどにこの効果は増大する。
【0058】
さらに、この実施の形態1によれば、配置属性編集部104によって、所望の効果定義を施した効果部品を複製して配置することで、同じ効果を容易に再利用でき、開発工数を抑制できるという効果がある。
【0059】
さらに、この実施の形態1によれば、配置属性編集部104によって、既に効果部品の配置領域内に包含されている表示部品を削除し、別の表示部品を追加し、追加した表示部品の配置属性を削除した表示部品と同じ配置属性に設定することで、同じ表示効果を、新しい表示部品に付与することができる。このため、効果付与後であっても容易に表示部品を差し替えることができ、開発工数を抑制できるという効果がある。なお、表示効果の差し替え対象となるUI部品の数が増加するほどにこの効果は増大する。
【0060】
さらに、この実施の形態1によれば、配置属性編集部104によって、効果部品を削除し、他の効果部品を配置して、配置属性の値を削除した上記効果部品の配置属性の値と同一にすることで、表示効果を容易に差し替えることができ、開発工数を抑制できる、という効果がある。なお、差し替え対象となるUI部品の数が増加するほどにこの効果は増大する。
【0061】
さらに、この実施の形態1によれば、効果部品は、表示部品と同様に画面上の前後関係の配置属性を有するため、異なるZ値を持つ複数の効果部品を重畳して配置することができる。なお、複数の効果部品が重畳された領域に包含される表示部品には、当該効果部品それぞれの表示効果が重畳して付与されるので、表示効果を容易に重畳することができ、開発工数を抑制することができるという効果がある。
また、表示効果の付与対象のUI部品が多数であっても効果部品の配置領域に包含するだけで、一括して効果を付与することができる。
さらに、効果部品に重畳することで表示効果の付与を視覚的に認知できるため、効果部品の重畳し忘れを防ぐことができる。
【0062】
実施の形態2.
図10は、この発明の実施の形態2によるUI設計装置の構成を示すブロック図である。図10において、図1と同一符号を付した構成部は同一又はこれに相当する機能を有するので説明を省略する。実施の形態2によるUI設計装置は、上記実施の形態1で図1を用いて説明した構成における部品関連属性設定部107の代わりに部品関連属性編集部1001を備える。
部品関連属性編集部1001は、効果部品102と表示部品101との間、効果部品間あるいは表示部品101間に論理的な親子関係を定義し、親となるUI部品の部品関連属性として子となるUI部品を登録する構成部である。
【0063】
部品関連属性編集部1001は、入力装置を用いて、表示部品101や効果部品102の部品関連属性を編集するGUIを提供することにより、ユーザが入力装置を用いて編集内容を入力し、この編集内容を表示部品101や効果部品102の部品関連属性に反映させる。
【0064】
なお、部品関連属性編集部1001は、配置属性編集部104と統合していてもよく、また、グラフィカルな表現を持つ編集部であってもよい。例えば、配置属性編集部104において、UI部品をドラッグして別のUI部品へドロップした際、部品関連属性編集部1001が、ドラッグしたUI部品を子とし、ドロップされたUI部品を親として、論理的な親子関係を構築し、部品関連属性に反映させるようにしてもよい。
【0065】
また、配置属性編集部104によって、既に効果部品102と親子関係が結ばれている表示部品101を削除し、別の新しい表示部品101を追加するにあたり、部品関連属性編集部1001が、新しい表示部品101について削除した表示部品101と同じ親子関係を結ぶだけで、同じ表示効果を、当該新しい表示部品101に付与することができる。このため、効果の付与後であっても容易に表示部品101を差し替えることができ、開発工数を抑制できる。
【0066】
さらに、複数の子部品を持つ効果部品102に対して、効果属性編集部105が、当該効果部品102の効果属性を変更すれば、一括して複数の子部品に付与された表示効果を差し替えることができる。これによっても、開発工数を抑制できる。
【0067】
さらに、この実施の形態2によれば、配置属性編集部104によって、効果部品102を削除し、別の新たな効果部品102を配置しその部品関連属性の値を削除した際、部品関連属性編集部1001が、新たな効果部品の部品関連属性を、削除した効果部品の部品関連属性の値と同一にすることで、表示効果を容易に差し替えることができ、開発工数を抑制できる。
【0068】
以上のように、この実施の形態2によれば、設計対象装置のUIを構成する部品の表示要素を示す表示属性、及び当該部品の配置属性を有する表示部品データ101と、表示効果を他の部品に与える効果部品と関連性のある部品が登録される部品関連属性、部品関連属性に登録された部品の表示属性又は配置属性を時間経過に伴って変更して得られる表示上の効果を定義した効果属性、及び、効果部品の配置属性を有する効果部品データ102とを有し、部品関連属性編集部1001が、効果部品を親とし、他の部品を子とする親子関係を定義して、当該部品関連属性の内容を編集する。
このように、部品関連属性編集部1001によって親子関係を定義するだけで、任意のUI部品を効果部品の部品関連属性に登録することができるため、効果部品102の画面上の領域に制限されることなく、当該効果部品102の効果付与の対象とすることができ、効果を付与する際の編集作業の自由度を飛躍的に高めることができる。
また、複数の表示効果を重畳する場合であっても、効果部品102を実際に重畳させる必要はなく、効果部品間の親子関係を結ぶだけで、子の効果部品には親の効果部品の効果が付与される。
従って、さらにその子のUI部品は、両方の効果部品の効果が重畳して付与されることから、重畳した効果を付与する自由度をさらに高めることができる。
これらによって、表示効果が付与されたUIを容易に実現でき、開発工数を抑制できるという、顕著な効果を奏するものである。
【0069】
また、この実施の形態2によれば、親子関係の順序を容易に変更することができることから、容易に表示効果の適用順序を変えることが可能であり、開発工数を抑制できる、という効果がある。
【0070】
さらに、この実施の形態2によれば、部品関連属性編集部1001によってUI部品と親子関係を結ぶだけで、任意の配置属性を持つ任意の複数のUI部品に対して容易に同じ表示効果を付与することができ、開発工数を抑制できる、という効果がある。
【0071】
さらに、この実施の形態2によれば、所望の効果定義を施した効果部品を複製して配置することで、同じ効果を容易に再利用でき、開発工数を抑制できる、という効果がある。
【0072】
実施の形態3.
図11は、この発明の実施の形態3によるUI設計装置の構成を示すブロック図である。図11において、図1と同一符号を付した構成部は同一又はこれに相当する機能を有するので説明を省略する。実施の形態3によるUI設計装置は、上記実施の形態1で図1を用いて説明した構成に加えて、実行部1101を備える。
【0073】
実行部1101は、上記実施の形態1及び上記実施の形態2で設計された内容を、シミュレーションしたり、設計対象のUIを構築した装置上で実行する構成部であり、入力部1102、視覚化部1103、イベント生成部1104及びイベントディスパッチ部1105を備える。
【0074】
なお、入力部1102、視覚化部1103、イベント生成部1104及びイベントディスパッチ部1105は、この発明の趣旨に従うUI設計用プログラムをコンピュータに実行させることで、ハードウエアとソフトウエアが協働した具体的な手段として実現することができる。
【0075】
入力部1102は、入力装置1102aを用いたユーザからの入力を受け付ける構成部である。入力装置1102aとしては、マウスやキーボード、タッチパネル等が挙げられる。視覚化部1103は、UIの表示内容を表示装置1103aの画面上に表示する構成部である。表示装置1103aとしては、液晶ディスプレイ等、様々なディスプレイが考えられる。
【0076】
イベント生成部1104は、各種のイベントを生成する構成部であり、イベントディスパッチ部1105は、イベント生成部1104で生成されたイベントに対応するイベントハンドラが定義されているUI部品を特定し、このイベントハンドラに定義される内容を実行する構成部である。
【0077】
次に動作について説明する。
先ず、実行部1101が起動すると、視覚化部1103は、UI部品格納部103から表示部品101を配置属性のZ値の小さい方から順に読み出して、表示属性の内容と配置属性の値とを取得する。
【0078】
視覚化部1103は、表示属性の内容と配置属性の値を取得した順に、表示属性の内容を配置属性の値に合わせて表示装置1103aの画面上に表示する。
例えば、視覚化部1103は、取得した表示属性の内容が画像ファイルであり、配置属性が座標(0,0)であると、当該画像ファイルをUI部品格納部103から読み出してビットマップに変換し、ビットマップの内容を表示装置1103aの画面上の座標(0,0)を示すメモリに転送することで、視覚化を行う。
【0079】
イベント生成部1104は、入力部1102を介して、ユーザからのキーイベントやタッチパネルのイベントを受信した場合、どのキーが押されたか、あるいは、どの座標がタッチされたかを引数とするユーザイベントを生成する。
また、イベント生成部1104は、別の装置からメッセージを受信した場合、そのメッセージ内容を引数とするシステムイベントを生成する。
さらに、イベント生成部1104は、タイマが発火した場合には、タイマイベントを生成する。また、UI部品がイベントの発生を指示した場合、内部イベントを生成する。
【0080】
イベントディスパッチ部1105は、イベント生成部1104が生成したイベントを受信し、そのイベントに対するイベントハンドラが定義されているUI部品を、UI部品格納部103から検索する。当該イベントに対するイベントハンドラが定義されているUI部品があれば、当該イベントハンドラに定義されている内容(アクション)を実行する。
なお、アクションがプログラミング言語で記述されている場合、イベントディスパッチ部1105が、アクションを示すプログラミング言語を解釈して実行してもよい。
【0081】
このように、イベントディスパッチ部1105は、効果部品102の効果定義をイベントハンドラとして解釈して、効果属性に定義されたイベントが発生した場合に、部品関連属性に登録されたUI部品に対して、当該効果属性の効果定義の処理を実行する。
従って、効果部品の部品関連属性に登録されたそれぞれのUI部品に対して、効果が付与される。また、イベントディスパッチ部1105は、効果の付与完了後、終了条件を満たしていなければ、再び効果定義の処理を実行する。
なお、イベントディスパッチ部1105は、イベント発生時の処理を実行する上で、必要に応じてUI部品格納部103に格納した各UI部品の属性値を更新する。
【0082】
イベントディスパッチ部1105の処理が終了すると、視覚化部1103が、UI部品格納部13の記憶内容を再び取得することにより、表示装置1103aの画面上に視覚化した表示内容を更新する。
実行部1101では、上述の処理が繰り返される。
【0083】
なお、実行部1101は、既存のUI設計装置における、イベントを契機とした動作を行う実行システムと同様のものでも構わない。
【0084】
以上のように、この実施の形態3によれば、UI設計対象装置で設計されたUIを実行する実行部1101を備えたので、UI実行時の動作を確認しつつ、UI設計を実施することができる。
【0085】
なお、上記実施の形態3では、実行部1101を上記実施の形態1の構成に適用した場合を示したが、上記実施の形態2の構成に適用しても構わない。
【符号の説明】
【0086】
101,201,502,504 表示部品、102,301,503,701,801,803 効果部品、103 UI部品格納部、104 配置属性編集部、105 効果属性編集部、106 表示属性編集部、107 部品関連属性設定部、501 画面、601,602,901,902,903 領域、1001 部品関連属性編集部、1101 実行部、1102 入力部、1102a 入力装置、1103 視覚化部、1103a 表示装置、1104 イベント生成部、1105 イベントディスパッチ部。
【特許請求の範囲】
【請求項1】
設計対象装置のユーザインタフェースを構成する部品の表示要素を示す表示属性、及び前記設計対象装置の画面上の当該部品の配置座標及び大きさを示す配置属性を有する表示部品データと、表示効果を他の部品に与える効果部品と関連性のある部品が登録される部品関連属性、前記部品関連属性に登録された前記部品の前記表示属性又は前記配置属性を時間経過に伴って変更して得られる表示効果を定義した効果属性、及び、前記設計対象装置の画面上の前記効果部品の配置座標及び大きさを示す配置属性を有する効果部品データとを格納するUI部品格納部と、
前記表示部品データ及び前記効果部品データの配置属性を編集する配置属性編集部と、
前記効果部品データの効果属性を編集する効果属性編集部と、
前記表示部品データの表示属性を編集する表示属性編集部と、
前記配置属性編集部による配置属性の編集で、前記効果部品を配置した前記画面上の領域の内側で、かつはみ出さずに、当該効果部品上に他の部品が配置されると、当該部品を当該効果部品の部品関連属性に登録する部品関連属性設定部とを備えたユーザインタフェース設計装置。
【請求項2】
設計対象装置のユーザインタフェースを構成する部品の表示要素を示す表示属性、及び前記設計対象装置の画面上の当該部品の配置座標及び大きさを示す配置属性を有する表示部品データと、表示効果を他の部品に与える効果部品と関連性のある部品が登録される部品関連属性、前記部品関連属性に登録された前記部品の前記表示属性又は前記配置属性を時間経過に伴って変更して得られる表示効果を定義した効果属性、及び、前記設計対象装置の画面上の前記効果部品の配置座標及び大きさを示す配置属性を有する効果部品データとを格納するUI部品格納部と、
前記表示部品データ及び前記効果部品データの配置属性を編集する配置属性編集部と、
前記効果部品データの効果属性を編集する効果属性編集部と、
前記表示部品データの表示属性を編集する表示属性編集部と、
前記効果部品を親とし、前記他の部品を子とする親子関係を定義して、当該部品関連属性の内容を編集する部品関連属性編集部とを備えたユーザインタフェース設計装置。
【請求項3】
請求項1または請求項2記載のユーザインタフェース設計対象装置で設計したユーザインタフェースを実行する実行部を備えたユーザインタフェース設計装置。
【請求項1】
設計対象装置のユーザインタフェースを構成する部品の表示要素を示す表示属性、及び前記設計対象装置の画面上の当該部品の配置座標及び大きさを示す配置属性を有する表示部品データと、表示効果を他の部品に与える効果部品と関連性のある部品が登録される部品関連属性、前記部品関連属性に登録された前記部品の前記表示属性又は前記配置属性を時間経過に伴って変更して得られる表示効果を定義した効果属性、及び、前記設計対象装置の画面上の前記効果部品の配置座標及び大きさを示す配置属性を有する効果部品データとを格納するUI部品格納部と、
前記表示部品データ及び前記効果部品データの配置属性を編集する配置属性編集部と、
前記効果部品データの効果属性を編集する効果属性編集部と、
前記表示部品データの表示属性を編集する表示属性編集部と、
前記配置属性編集部による配置属性の編集で、前記効果部品を配置した前記画面上の領域の内側で、かつはみ出さずに、当該効果部品上に他の部品が配置されると、当該部品を当該効果部品の部品関連属性に登録する部品関連属性設定部とを備えたユーザインタフェース設計装置。
【請求項2】
設計対象装置のユーザインタフェースを構成する部品の表示要素を示す表示属性、及び前記設計対象装置の画面上の当該部品の配置座標及び大きさを示す配置属性を有する表示部品データと、表示効果を他の部品に与える効果部品と関連性のある部品が登録される部品関連属性、前記部品関連属性に登録された前記部品の前記表示属性又は前記配置属性を時間経過に伴って変更して得られる表示効果を定義した効果属性、及び、前記設計対象装置の画面上の前記効果部品の配置座標及び大きさを示す配置属性を有する効果部品データとを格納するUI部品格納部と、
前記表示部品データ及び前記効果部品データの配置属性を編集する配置属性編集部と、
前記効果部品データの効果属性を編集する効果属性編集部と、
前記表示部品データの表示属性を編集する表示属性編集部と、
前記効果部品を親とし、前記他の部品を子とする親子関係を定義して、当該部品関連属性の内容を編集する部品関連属性編集部とを備えたユーザインタフェース設計装置。
【請求項3】
請求項1または請求項2記載のユーザインタフェース設計対象装置で設計したユーザインタフェースを実行する実行部を備えたユーザインタフェース設計装置。
【図1】
【図2】
【図3】
【図4】
【図5】
【図6】
【図7】
【図8】
【図9】
【図10】
【図11】
【図2】
【図3】
【図4】
【図5】
【図6】
【図7】
【図8】
【図9】
【図10】
【図11】
【公開番号】特開2011−232861(P2011−232861A)
【公開日】平成23年11月17日(2011.11.17)
【国際特許分類】
【出願番号】特願2010−100869(P2010−100869)
【出願日】平成22年4月26日(2010.4.26)
【出願人】(000006013)三菱電機株式会社 (33,312)
【Fターム(参考)】
【公開日】平成23年11月17日(2011.11.17)
【国際特許分類】
【出願日】平成22年4月26日(2010.4.26)
【出願人】(000006013)三菱電機株式会社 (33,312)
【Fターム(参考)】
[ Back to top ]