(57)【要約】【課題】アニメーションによる変化前後のユーザインタフェース部品の関連付けを確実に行い、効率的にアニメーションを設定することのできるユーザインタフェース設計装置及びユーザインタフェース装置を得る。【解決手段】ＵＩ部品類似度計算部１０６は、ユーザインタフェース部品の複数の属性値を統合してインタフェース部品間の類似度の計算を行う。関連付け登録部１０７は、類似度の高いユーザインタフェース部品間の関連付けを行う。アニメーション設定部１０８は、関連付け登録部１０７において関連付けされたユーザインタフェース部品間にアニメーションを設定する。【選択図】図１
2014134921.tif 000002
【特許請求の範囲】
【請求項１】
ユーザインタフェース部品を作成すると共に、当該ユーザインタフェース部品の属性を設定するＵＩ部品編集部と、
前記ユーザインタフェース部品から複数の属性値を取得する属性値取得部と、
前記属性値取得部において取得した複数の属性値を統合して前記インタフェース部品間の類似度の計算を行うＵＩ部品類似度計算部と、
前記ＵＩ部品類似度計算部において計算した結果を基に遷移前後の画面に配置されたユーザインタフェース部品のうち類似度の高いユーザインタフェース部品間の関連付けを行う関連付け登録部と、
前記関連付け登録部において関連付けされたユーザインタフェース部品間にアニメーションを設定するアニメーション設定部とを備えたユーザインタフェース設計装置。
【請求項２】
属性値取得部は、複数の属性値のうち、アニメーションに関わらない属性の属性値を取得することを特徴とする請求項１のユーザインタフェース設計装置。
【請求項３】
ユーザインタフェース部品に別のユーザインタフェース部品を配置することで、階層的にユーザインタフェース部品を作成するＵＩ部品編集部を備え、
属性値取得部は、前記ユーザインタフェース部品の階層構造と階層構造毎のユーザインタフェース部品の各属性を属性値として取得することを特徴とする請求項１または請求項２記載のユーザインタフェース設計装置。
【請求項４】
取得する属性を指定するためのリストを格納する取得要素リスト格納部を備え、
属性値取得部は、前記取得要素リスト格納部に格納されたリストに記載された属性の属性値を取得することを特徴とする請求項１から請求項３のうちのいずれか１項記載のユーザインタフェース設計装置。
【請求項５】
関連付け登録部の登録結果を編集する関連付け編集部を備え、
アニメーション設定部は、前記関連付け登録部で関連付けられたユーザインタフェース部品間の情報に代えて前記関連付け編集部で編集されたユーザインタフェース部品間の情報を用いることを特徴とする請求項１から請求項４のうちのいずれか１項記載のユーザインタフェース設計装置。
【請求項６】
請求項１から請求項５のうちのいずれか１項記載のユーザインタフェース設計装置と、
前記ユーザインタフェース設計装置で設計された結果を実行する実行部と、
前記実行部の実行画面を表示する表示装置とを備えたユーザインタフェース装置。
【請求項７】
ユーザインタフェース部品を有する画面の遷移を行う画面遷移部と、
それぞれが属性を有する複数のユーザインタフェース部品から複数の属性値を取得する属性値取得部と、
前記属性値取得部において取得した複数の属性値を統合して前記インタフェース部品間の類似度の計算を行うＵＩ部品類似度計算部と、
前記ＵＩ部品類似度計算部において計算した結果を基に遷移前後の画面に配置されたユーザインタフェース部品のうち類似度の高いユーザインタフェース部品間の関連付けを行う関連付け登録部と、
前記画面遷移する場合の前記ユーザインタフェース部品間で実行されるアニメーションを、前記関連付け登録部において関連付けされたＵＩ部品間に生成するアニメーション生成部と、
前記生成されたアニメーションを実行するアニメーション実行部と、
前記アニメーション実行部の実行結果に基づいて前記ユーザインタフェース部品を描画する描画処理部と、
前記描画処理部の描画結果を表示する表示装置とを備えたユーザインタフェース装置。
【請求項８】
ユーザインタフェース部品を有する画面の遷移を行う画面遷移部と、
それぞれが属性を有する複数のユーザインタフェース部品から複数の属性値を取得する属性値取得部と、
前記属性値取得部において取得した複数の属性値を統合して前記インタフェース部品間の類似度の計算を行うＵＩ部品類似度計算部と、
前記ＵＩ部品類似度計算部において計算した結果を基に遷移前後の画面に配置されたユーザインタフェース部品のうち類似度の高いユーザインタフェース部品間の関連付けを行う関連付け登録部と、
前記画面遷移する場合の前記ユーザインタフェース部品間で実行されるアニメーションの情報を格納するアニメーション情報格納部と、
前記アニメーション情報格納部のアニメーション情報を用いてアニメーションを実行するアニメーション実行部と、
前記アニメーション実行部の実行結果に基づいて前記ユーザインタフェース部品を描画する描画処理部と、
前記描画処理部の描画結果を表示する表示装置とを備えたユーザインタフェース装置。
【発明の詳細な説明】
【技術分野】
【０００１】
この発明は、組み込み機器のユーザインタフェースを設計するユーザインタフェース設計装置及びユーザインタフェース設計装置で設計されたユーザインタフェースを実行するユーザインタフェース装置に関するものである。
【背景技術】
【０００２】
近年、情報機器において、操作時や表示画面の切り替え時に、位置や大きさ、色、形状などの変化を連続的に表示するアニメーションを用いることで、注目している部分の把握や直感的操作を容易にするユーザインタフェースが増えてきている。このようなアニメーションを行う際は、画面自体を切り替えるのではなく表示内容のみ変更する、つまり、１つの画面内にアニメーションによる変化前のユーザインタフェース部品と変化後のユーザインタフェース部品を全て配置しておき、画面遷移時に個々のユーザインタフェース部品に位置や表示・非表示を変更することでアニメーションを行うという方法が一般的である。
【０００３】
しかし、このような方法では画面遷移時にアニメーションを設定することが難しい場合がある。ユーザインタフェース設計においては、画面を別々に作成し画面遷移時には画面自体を切り替えるという表示方法を用いることがある。この方法は、複数の画面設計者の分業作業による開発工数の削減や１画面に配置するユーザインタフェース部品の抑制によるＲＡＭなどのメモリ使用量の削減が期待できる。もちろん、開発当初より画面遷移時にアニメーションを設定することが決まっている場合は、上記の変化前と変化後のユーザインタフェース部品を全て配置しておく方法でアニメーションを設定することは容易である。ところが、顧客からの仕様変更などにより、既に別々に作成した画面間の遷移時にアニメーションを設定したいという要求が出てくる場合がある。このように別々に作成した画面では、切り替え前の画面におけるあるユーザインタフェース部品が切り替え後の画面におけるどのユーザインタフェース部品であるか不明なため、アニメーションの始点、終点がはっきりせず、画面遷移時のアニメーションを設定することが難しい。
【０００４】
これを解決する１つの方法としては、別々に作成した画面上に配置されたユーザインタフェース部品を１つの画面上に統合し、その画面上で先に説明した方法と同様にアニメーションを行うという方法がある。しかし、いくつもの画面の切り替えをアニメーションで表現したい場合、その全ての画面のユーザインタフェース部品を１つの画面上に統合しなければならず、開発工数が増大してしまう。また、１画面上のユーザインタフェース部品の数が多くなるため、設計時には画面構成の変更などに対する編集が難しくなるという問題が発生し、実行時にはＲＡＭなどのメモリ使用量が増大してしまうという問題が発生する。
【０００５】
また、別の方法としては、画面を切り替える直前または直後に遷移前の画面のユーザインタフェース部品の配置から遷移後の画面のユーザインタフェース部品の配置へアニメーションを行うという方法がある。例えば、遷移前の画面でアニメーションを行う場合、１つ１つのユーザインタフェース部品に、アニメーションを遷移後の画面の位置、大きさなどと全く同じになるように設定する。しかし、一方の画面の画面構成に変更が生じると、アニメーションの設定も変更しなければならず開発工数が増大してしまう。
【０００６】
上述したように別々に作成した画面を統合したりせず、変更に柔軟に対応する方法として遷移前後の画面のユーザインタフェース部品同士を関連付け、画面遷移時には関連付けられた部品間でアニメーションを行うという方法がある。この具体的な方法として、アニメーションによる変化前後のユーザインタフェース部品に手動でＩＤを与えておき、同じＩＤのユーザインタフェース部品であるとみなす方法が考えられる。ただし、画面上のユーザインタフェース部品の数が多い場合や画面構成が変更されＩＤの付け替えを要する場合には、開発工数が増大してしまう。そのため、アニメーションによる変化前後のユーザインタフェース部品を自動的に関連付ける方法が望まれていた。
【０００７】
例えば、特許文献１に記載されたような構成をユーザインタフェース設計装置に適用することで、アニメーションによる変化前後のユーザインタフェース部品を自動的に関連付けることが可能なユーザインタフェース設計装置を実現することができる。すなわち、この装置では、ユーザインタフェース部品の形状から特徴量を抽出し、この特徴量をもってアニメーションによる変化前後のユーザインタフェース部品を自動的に関連付ける。
【先行技術文献】
【特許文献】
【０００８】
【特許文献１】特開２００６−５３９２９号公報
【発明の概要】
【発明が解決しようとする課題】
【０００９】
しかしながら、ユーザインタフェース部品はアニメーションによって形状を変化させることも多く、また１つの画面上に同じ形状の部品が多数配置される場合もあるため、形状によってユーザインタフェース部品を比較すると、関連付けが上手くいかない場合があるという問題点があった。
【００１０】
本発明は、上記のような問題点を解決するためになされたものであり、アニメーションによる変化前後のユーザインタフェース部品の関連付けを確実に行い、効率的にアニメーションを設定することのできるユーザインタフェース設計装置及びユーザインタフェース装置を得ることを目的とする。
【課題を解決するための手段】
【００１１】
この発明に係るユーザインタフェース設計装置は、ユーザインタフェース部品を作成すると共に、ユーザインタフェース部品の属性を設定するＵＩ部品編集部と、ユーザインタフェース部品から複数の属性値を取得する属性値取得部と、属性値取得部において取得した複数の属性値を統合してインタフェース部品間の類似度の計算を行うＵＩ部品類似度計算部と、ＵＩ部品類似度計算部において計算した結果を基に遷移前後の画面に配置されたユーザインタフェース部品のうち類似度の高いユーザインタフェース部品間の関連付けを行う関連付け登録部と、関連付け登録部において関連付けされたユーザインタフェース部品間にアニメーションを設定するアニメーション設定部とを備えたものである。
【発明の効果】
【００１２】
この発明のユーザインタフェース設計装置は、ユーザインタフェース部品の複数の属性値を統合してインタフェース部品間の類似度の計算を行い、類似度の高いユーザインタフェース部品間の関連付けを行うようにしたので、アニメーションによる変化前後のユーザインタフェース部品を関連付けが確実に行え、効率的にアニメーションを設定することができる。
【図面の簡単な説明】
【００１３】
【図１】この発明の実施の形態１によるユーザインタフェース設計装置を示すブロック図である。
【図２】この発明の実施の形態１によるユーザインタフェース設計装置の画面選択部のイメージを示す説明図である。
【図３】この発明の実施の形態１によるユーザインタフェース設計装置の属性値取得部の処理内容を示すフローチャートである。
【図４】この発明の実施の形態１によるユーザインタフェース設計装置の属性値取得部から出力される形式のイメージを示す説明図である。
【図５】この発明の実施の形態１によるユーザインタフェース設計装置の属性値取得処理の処理内容を示すフローチャートである。
【図６】この発明の実施の形態１によるユーザインタフェース設計装置のＵＩ部品類似度計算部の処理内容を示すフローチャートである。
【図７】この発明の実施の形態１によるユーザインタフェース設計装置のＵＩ部品類似度計算部から出力される形式のイメージを示す説明図である。
【図８】この発明の実施の形態１によるユーザインタフェース設計装置の類似度計算処理の処理内容を示すフローチャートである。
【図９】この発明の実施の形態２によるユーザインタフェース設計装置の属性値取得処理の処理内容を示すフローチャートである。
【図１０】階層的なユーザインタフェース部品作成のイメージを示す説明図である。
【図１１】この発明の実施の形態３によるユーザインタフェース設計装置の属性値取得処理の処理内容を示すフローチャートである。
【図１２】この発明の実施の形態４によるユーザインタフェース設計装置を示すブロック図である。
【図１３】この発明の実施の形態４によるユーザインタフェース設計装置の属性値取得処理の処理内容を示すフローチャートである。
【図１４】この発明の実施の形態５によるユーザインタフェース設計装置のユーザインタフェース設計装置を示すブロック図である。
【図１５】この発明の実施の形態５によるユーザインタフェース設計装置の関連付け編集部のイメージを示す説明図である。
【図１６】この発明の実施の形態６によるユーザインタフェース装置を示すブロック図である。
【図１７】この発明の実施の形態７によるユーザインタフェース装置を示すブロック図である。
【図１８】この発明の実施の形態８によるユーザインタフェース装置を示すブロック図である。
【発明を実施するための形態】
【００１４】
実施の形態１．
図１は、この発明の実施の形態１によるユーザインタフェース（ＵＩ）設計装置を示す構成図である。
図１に示すユーザインタフェース設計装置は、入力装置１０１、ＵＩ部品編集部１０２、ＵＩ部品格納部１０３、画面選択部１０４、属性値取得部１０５、ＵＩ部品類似度計算部１０６、関連付け登録部１０７、アニメーション設定部１０８、アニメーション情報格納部１０９を備える。
【００１５】
入力装置１０１は、ＵＩ部品編集部１０２や画面選択部１０４、あるいはアニメーション設定部１０８において、ユーザが入力を行うためのポインティングデバイスやキーボードといった入力装置である。ＵＩ部品編集部１０２では、ユーザインタフェース部品（以下、ＵＩ部品という）の位置や大きさといった属性の属性値を入力することでＵＩ部品を作成し、ＵＩ部品格納部１０３に格納する。ＵＩ部品格納部１０３には、ＵＩ部品編集部１０２において作成したＵＩ部品が格納される。各ＵＩ部品は、ＵＩ部品の表示などを決定する属性を有する。属性としては、例えば、ＵＩ部品の名前、種類、配置座標、大きさ、色、透明度、枠の幅、枠の色、角の丸み、拡縮方法、上下左右の反転の有無、タッチによるイベント配送の有無、ドラッグの可否、テキスト、テキストの文字サイズ、テキストのフォント、テキストの装飾（ボールド、イタリック、アンダーライン、取り消し線、影、枠、エンボス加工など）、テキストの文字色、テキストの揃え位置、テキストの省略方法、テキストの文字間、テキストの行間、画像の拡縮方法、画像の繰り返しの有無、データソースのパス、などでも構わない。また、属性にはイベントハンドラの名前、イベントハンドラの種類、イベントハンドラのガード条件、イベントハンドラのアクション、などのＵＩ部品の実行時の動作に関わる動作属性を含んでいても構わない。また、ＵＩ部品格納部１０３には、基本的な部品としてユーザインタフェース設計装置が提供するＵＩ部品や他者がＵＩ部品編集部１０２によって作成したＵＩ部品を予め格納していても良い。
【００１６】
画面選択部１０４では、画面遷移時にアニメーション効果を付与したい２つの画面を選択する。２つの画面は、アニメーションの始点である遷移前の画面とアニメーションの終点である遷移後の画面となる。
属性値取得部１０５では、ＵＩ部品格納部１０３に格納されているＵＩ部品の中で、画面選択部１０４で選択された２つの画面に配置されているＵＩ部品を取得し、取得した前記ＵＩ部品が持つ属性の属性値を取得する。
ＵＩ部品類似度計算部１０６では、属性値取得部１０５で取得した属性値を用いて類似度を計算する。計算は遷移前画面のＵＩ部品と遷移後画面のＵＩ部品の全組み合わせについて行う。組み合わせごとに各属性個別の属性類似度を計算し、さらに属性類似度を統合することでその組み合わせの類似度とする。
関連付け登録部１０７では、ＵＩ部品類似度計算部１０６の計算結果を基に実際にＵＩ部品を関連付ける。
アニメーション設定部１０８では、関連付け登録部１０７で関連付けされた部品間にアニメーションを設定する。設定されたアニメーション情報は、アニメーション情報格納部１０９に格納される。
【００１７】
次に、このような構成におけるＵＩの設計の流れについて、以下に説明する。
本設計装置の利用者である開発者は、まず、ＵＩ部品編集部１０２においてＵＩ部品を作成する。ＵＩ部品編集部１０２では、編集ウィンドウ上でＵＩ部品の外観を表示しながら、ＵＩ部品に対して位置や大きさといった属性の編集を行い、ＵＩ部品を作成する。作成したＵＩ部品はＵＩ部品格納部１０３に格納される。
【００１８】
次に、画面選択部１０４によって画面遷移時にアニメーションを設定する２つの画面を選択する。ここで選択した画面は以後、遷移前画面、遷移後画面として扱われる。２つの画面を選択するためには、例えば図２のようにダイアログを用いる方法がある。ここでは、ダイアログを用いる方法で画面を選択する際の流れを説明する。ここで、作成した各画面は画面名を持っており、画面名によって画面を一意に特定可能であるとする。ダイアログのテキストフィールドに遷移前画面、遷移後画面として選択したい画面名を入力する。または、テキストフィールド右側の参照ボタンを押下すると画面名のリストが表示され、そこから選択することでテキストフィールドに入力されるとしても良い。２つのテキストフィールドへ入力し、選択ボタンを押下することで画面の選択が完了する。なお、画面の選択方法はその他の方法であっても構わない。例えば、２つの画面を左右に並べて同時に編集できるエディタを用意し、左の画面を遷移前画面、右の画面を遷移後画面として選択する、または画面編集時に遷移前画面、遷移後画面として何らかの印をつけることで選択するなど他の方法で選択しても構わない。
【００１９】
次に、属性値取得部１０５によって遷移前画面と遷移後画面に存在するＵＩ部品が持つ属性の属性値を取得する。図３は属性値取得部１０５において属性値を取得する処理の流れを示すフローチャートである。
ステップＳＴ３０１からステップＳＴ３０５は画面選択部１０４で選択した遷移前画面に配置されたＵＩ部品が持つ属性の属性値を取得するためのループである。ステップＳＴ３０１とステップＳＴ３０５はそれぞれループの始端、終端を示している。このループは遷移前画面に配置された全てのＵＩ部品に関して処理が行われるまで繰り返される。ステップＳＴ３０２では、遷移前画面から１つのＵＩ部品を取得する。ステップＳＴ３０３では、取得したＵＩ部品が持つ属性の属性値を取得する。取得した属性値は、ステップＳＴ３０４で属性値データとして例えば図４のような形式で各ＵＩ部品ごとに出力される。
【００２０】
ステップＳＴ３０６からステップＳＴ３１０は画面選択部１０４で選択した遷移後画面に配置されたＵＩ部品が持つ属性の属性値を取得するためのループである。ステップＳＴ３０６とステップＳＴ３１０はそれぞれループの始端、終端を示している。このループは遷移後画面に配置された全てのＵＩ部品に関して処理が行われるまで繰り返される。ステップＳＴ３０７では、遷移後画面から１つのＵＩ部品を取得する。ステップＳＴ３０８では、取得したＵＩ部品が持つ属性の属性値を取得する。取得した属性値は、ステップＳＴ３０９で属性値データとして例えば図４のような形式で各ＵＩ部品ごとに出力される。図５は図３におけるステップＳＴ３０３、ステップＳＴ３０８の属性値取得処理を示すフローチャートである。ステップＳＴ５０１とステップＳＴ５０４はそれぞれループの始端、終端を示している。このループはＵＩ部品の全ての属性の属性値を取得するまで繰り返される。ステップＳＴ５０２では、属性値を取得する属性を選択する。ステップＳＴ５０３では、選択した属性から属性値を取得する。
【００２１】
次に、ＵＩ部品類似度計算部１０６によって属性値取得部１０５で取得した属性値の類似度を計算する。図６はＵＩ部品類似度計算部１０６において属性値の類似度を計算する処理の流れを示すフローチャートである。ステップＳＴ６０１からステップＳＴ６０７は遷移前画面に配置されたＵＩ部品が持つ属性の属性値データを取得するためのループである。ステップＳＴ６０１とステップＳＴ６０７はそれぞれループの始端、終端を示している。このループは遷移前画面に配置された全てのＵＩ部品に関して処理が行われるまで繰り返される。ステップＳＴ６０２では遷移前画面のＵＩ部品が持つ属性の属性値データを取得する。ステップＳＴ６０３からステップＳＴ６０６は遷移後画面に配置されたＵＩ部品が持つ属性の属性値データを取得するためのループである。ステップＳＴ６０４では遷移後画面のＵＩ部品が持つ属性の属性値データを取得する。ステップＳＴ６０５ではステップＳＴ６０２、ステップＳＴ６０４で取得した属性値データを用いて類似度の計算を行う。ステップＳＴ６０８では遷移前画面のＵＩ部品と遷移後画面のＵＩ部品の全ての組み合わせについてステップＳＴ６０５において計算した結果の類似度が例えば図７のような形式で出力される。
【００２２】
図８は、図６におけるステップＳＴ６０５の類似度計算処理を示すフローチャートである。ステップＳＴ８０１からステップＳＴ８０７はステップＳＴ６０２で取得した遷移前画面のＵＩ部品が持つ属性の属性値データとステップＳＴ６０４で取得した遷移後画面のＵＩ部品が持つ属性の属性値データの各属性について個別の属性類似度を計算するためのループである。ステップＳＴ８０１とステップＳＴ８０７はそれぞれループの始端、終端を示している。このループは全ての属性に関して処理が行われるまで繰り返される。ステップＳＴ８０２では、属性類似度を計算する属性を選択する。ステップＳＴ８０３では、選択した属性に関して遷移前画面部品から属性値を取得する。ステップＳＴ８０４では、選択した属性に関して遷移後画面部品から属性値を取得する。ステップＳＴ８０５では、遷移前後の画面のＵＩ部品の属性値を取得できたか判定する。もし、どちらかが属性値を取得できていなかった場合（ＳＴ８０５：ＮＯ）、類似度計算を行わない。ステップＳＴ８０６では、取得した属性値間の属性類似度を計算する。
【００２３】
ここで、類似度の計算は例えば属性値が完全に一致する場合は１とし、少しでも違う場合は０とするという方法で計算する。なお、類似度の計算はその他の方法で行っても構わない。例えば、属性値が数値の場合は差を計算し、属性値が文字列の場合は編集距離を計算し、それらの合計値を類似度とする方法やその他公知の類似度計算方法を用いても構わない。
【００２４】
ステップＳＴ８０８では、計算した全ての属性類似度を統合し、遷移前画面のＵＩ部品と遷移後画面のＵＩ部品の間の類似度を計算する。統合する方法としては例えば全ての属性類似度の平均をとるという方法がある。なお、属性類似度を統合する方法は、その他の方法で行っても構わない。例えば、全ての属性類似度を足し合わせる方法や特定の属性類似度に対して重みを変更可能な重みつき平均をとるという方法などその他の方法で構わない。
【００２５】
次に、関連付け登録部１０７によってＵＩ部品類似度計算部１０６において計算した類似度を基に遷移前画面のＵＩ部品と遷移後画面のＵＩ部品の間の関連付けを行う。関連付けは例えば以下の方法で行う。遷移前画面の１つのＵＩ部品に対し、ＵＩ部品類似度計算部１０６において計算した全組み合わせの類似度のうち、最も高いもしくは低い類似度を持つ組み合わせを選び、関連付けを行う。この時、類似度の計算方法によって類似度が高い場合と低い場合のどちらが似ているとみなすのか注意が必要である。ここでは便宜上類似度が高い場合に２つのＵＩ部品が似ているとみなすことにする。もし、全組み合わせの類似度のうち最も高い類似度をもつ組み合わせが複数存在した場合、先に出現した組み合わせで関連付けを行う。これを遷移前画面か遷移後画面のどちらかにおいて全てのＵＩ部品に関連付けが行われるまで繰り返す。なお、関連付けの他の方法を用いても構わない。例えば、閾値を設け閾値以上の類似度を持つ組み合わせの全てに関連付けを行うという方法や閾値を設け全組み合わせの最大類似度が閾値以下である場合、そのＵＩ部品には関連付けを行わないという方法などその他の方法であっても構わない。
【００２６】
次に、アニメーション設定部１０８によって関連付け登録部１０７において関連付けされたＵＩ部品間にアニメーションを設定する。アニメーションの設定は例えば以下の方法で行う。
設定画面上に遷移前後の画面が並んで表示されており、関連付けされている部品は破線で結ばれている。この破線を選択すると、アニメーション設定ダイアログが表示され、アニメーションに関する各種設定を変更することができる。なお、アニメーション設定の方法は他の方法でも構わない。例えば、表形式で、関連付けされたＵＩ部品の組み合わせが１列目に表示され、２列目以降にそのＵＩ部品の組み合わせに対するアニメーション設定を記入するという方法でも構わない。設定したアニメーションの情報はアニメーション情報格納部１０９に格納される。
【００２７】
このように、実施の形態１では、ＵＩ部品が持つ全ての属性で類似度計算を行い、その結果を統合することで、アニメーションによる変化の影響を吸収することが出来、遷移前後の画面のＵＩ部品を自動的に関連付けることが可能になる。すなわち、アニメーションを設定したいＵＩ部品は、アニメーションによって全ての属性値が変化してしまうとは考えられず、アニメーション前後で同一もしくは類似した属性値を保持していると考えられる。そこで、ＵＩ部品が持つ全属性の属性値を比較し、その結果を統合することでアニメーションによる変化の影響を吸収する。
【００２８】
以上説明したように、実施の形態１のユーザインタフェース設計装置によれば、ユーザインタフェース部品を作成すると共に、ユーザインタフェース部品の属性を設定するＵＩ部品編集部と、ユーザインタフェース部品から複数の属性値を取得する属性値取得部と、属性値取得部において取得した複数の属性値を統合してインタフェース部品間の類似度の計算を行うＵＩ部品類似度計算部と、ＵＩ部品類似度計算部において計算した結果を基に遷移前後の画面に配置されたユーザインタフェース部品のうち類似度の高いユーザインタフェース部品間の関連付けを行う関連付け登録部と、関連付け登録部において関連付けされたユーザインタフェース部品間にアニメーションを設定するためのアニメーション設定部とを備えたので、画面に配置されている部品の数が多い場合や画面構成の変更が生じた場合などにおいても効率的にアニメーションを設定することが可能となり、開発工数の抑制を図ることができる。
【００２９】
実施の形態２．
実施の形態２では、属性値取得部１０５の構成以外は実施の形態１と同様であるため、属性値取得部１０５以外の構成についてはその説明を省略する。また、図面上の構成は図１と同様であるため、図１を用いて説明する。
【００３０】
実施の形態２では、属性値取得部１０５においてＵＩ部品が持つ属性のなかでユーザインタフェース設計装置がサポートしているアニメーションに関わらない属性の属性値のみを取得することを特徴としている。アニメーションに関わらない属性とは、例えば移動アニメーションの場合はＵＩ部品の配置座標が変化するためＵＩ部品の配置座標以外の属性を指し、色変化アニメーションの場合はＵＩ部品やテキストの色が変化するためＵＩ部品やテキストの色以外の属性を指す。アニメーションは、移動アニメーションや色変化アニメーション以外にも、例えばＵＩ部品の高さや幅といった大きさを変化させる拡大縮小アニメーション、ＵＩ部品の表示状態を変化させる表示・非表示アニメーション、ＵＩ部品の透明度を変化させる透明度変化アニメーションなどがある。また、これ以外のアニメーションであっても構わない。さらに、ユーザインタフェース設計装置が複数のアニメーションをサポートしている場合、サポートしているアニメーション全てに関わらない属性を取得する。
【００３１】
図９は実施の形態２における属性値取得部１０５の属性値取得処理の処理内容を示すフローチャートである。図９において、図５と同一符号を付した処理は同一またはこれに相当した機能を有するので説明を省略する。ステップＳＴ９０１において、ステップＳＴ５０２で選択した属性がアニメーションに関わらない属性であるか判断する。もし、選択した属性がアニメーションに関わる属性であった場合（ＳＴ９０１：ＮＯ）、属性値を取得せずに再び属性の選択に戻る。取得しなかった属性値はＵＩ部品類似度計算部１０６における類似度の計算にも用いない。
【００３２】
選択した属性がアニメーションに関わらない属性であった場合は実施の形態１と同様に属性値を取得する。例えば、ユーザインタフェース設計装置が移動アニメーションと色変化アニメーション、拡大縮小アニメーションをサポートしているとする。この時、アニメーションに関わらない属性は、ＵＩ部品の名前、種類、配置座標、透明度、枠の幅、枠の色、角の丸み、拡縮方法、上下左右の反転の有無、タッチによるイベント配送の有無、ドラッグの可否、テキスト、テキストのフォント、テキストの装飾（ボールド、イタリック、アンダーライン、取り消し線、影、枠、エンボス加工など）、テキストの揃え位置、テキストの省略方法、テキストの文字間、テキストの行間、画像の拡縮方法、画像の繰り返しの有無、データソースのパス、イベントハンドラの名前、イベントハンドラの種類、イベントハンドラのガード条件、イベントハンドラのアクションなどでも構わない。
【００３３】
以上説明したように、実施の形態２のユーザインタフェース設計装置によれば、属性値取得部は、複数の属性値のうち、アニメーションに関わらない属性の属性値を取得するようにしたので、遷移前後で同じであるＵＩ部品は類似度が高く計算されやすくなり、関連付けの精度を向上させることができる。
【００３４】
実施の形態３．
実施の形態３では、図面上の構成は図１に示す実施の形態１と同様であるが、ＵＩ部品編集部１０２と属性値取得部１０５の構成が異なっている。このため、ＵＩ部品編集部１０２と属性値取得部１０５についてのみ説明を行う。すなわち、ＵＩ部品編集部１０２においてＵＩ部品を作成する際、ＵＩ部品内部に別のＵＩ部品を配置することで階層的にＵＩ部品を作成可能なユーザインタフェース設計装置である場合、属性値取得部１０５において取得する属性値としてＵＩ部品の階層構造も取得することを特徴とする。
【００３５】
実施の形態３におけるユーザインタフェース設計装置では、ＵＩ部品編集部１０２においてＵＩ部品の編集ウィンドウ上に別のＵＩ部品を配置することで、内部に別のＵＩ部品を階層的に含むＵＩ部品を作成することができる。階層的なＵＩ部品作成のイメージを図１０に示す。作成した階層的なＵＩ部品は他のＵＩ部品と同様にＵＩ部品格納部１０３に格納される。
【００３６】
アニメーションはその変化前後のＵＩ部品が同じであることを視覚的にわかりやすく表現するために用いられることが多いため、アニメーションによってある階層構造を持つＵＩ部品が全く別の階層構造のＵＩ部品に変化することは少ないと考えられる。そのため、階層的なＵＩ部品の階層構造と内部に配置されたＵＩ部品が持つ属性の属性値は、ＵＩ部品の類似度を測るうえで有効な指標として働く。
【００３７】
図１１は、実施の形態３における属性値取得部１０５の属性値取得処理の処理内容を示すフローチャートである。図１１において、図５と同一符号を付した処理は同一またはこれに相当した機能を有するので説明を省略する。ステップＳＴ５０１からステップＳＴ５０４の処理でＵＩ部品の属性値を取得した後、ステップＳＴ１１０１においてＵＩ部品が階層構造を持つかを判定する。ＵＩ部品が内部に別のＵＩ部品を含んでいる場合に階層構造を持つと判定する。もし、階層構造を持たないＵＩ部品であった場合（ステップＳＴ１１０１：ＮＯ）、処理を終了する。ＵＩ部品が階層構造を持つと判定された場合、ステップＳＴ１１０２においてＵＩ部品の階層構造を取得する。ステップＳＴ１１０３からステップＳＴ１１０６は、ＵＩ部品の内部に配置されたＵＩ部品を取得し、そのＵＩ部品が持つ属性の属性値を取得するためのループである。ステップＳＴ１１０３とステップＳＴ１１０６はそれぞれループの始端、終端を示している。このループはＵＩ部品の内部に配置された全てのＵＩ部品に関して処理が行われるまで繰り返される。ステップＳＴ１１０４では、ＵＩ部品の内部に配置されたＵＩ部品を取得する。ステップＳＴ１１０５では、属性値取得処理を行う。この属性値取得処理は現在説明している図１１で示す処理であり、ＵＩ部品の内部に配置されたＵＩ部品が階層構造を持たないＵＩ部品であるまで再帰的に処理を繰り返す。この処理で取得した階層構造や階層的に配置されたＵＩ部品の属性値は、属性値類似度計算処理において類似度計算に用いられる。
【００３８】
以上説明したように、実施の形態３のユーザインタフェース設計装置によれば、ユーザインタフェース部品に別のユーザインタフェース部品を配置することで、階層的にユーザインタフェース部品を作成するＵＩ部品編集部を備え、属性値取得部は、ユーザインタフェース部品の階層構造と階層構造毎のユーザインタフェース部品の各属性を属性値として取得するようにしたので、階層的に作成されたＵＩ部品の階層構造や内部に配置されたＵＩ部品が持つ属性の属性値を遡って取得し類似度計算に用いることで、同じ階層構造を持つＵＩ部品は類似度が高く計算されやすくなり、関連付けの精度を向上させることができる。
【００３９】
実施の形態４．
図１２は実施の形態４によるユーザインタフェース設計装置を表す構成図である。図１２において、入力装置１０１〜アニメーション情報格納部１０９における基本的な構成は、図１に示した実施の形態１と同様であるため、ここでの説明は省略する。
【００４０】
実施の形態４では、取得する属性を指定するリストを格納するための取得要素リスト格納部１２０１を備え、属性値取得部１０５において属性値を取得する際、取得要素リスト格納部１２０１に格納されているリストに記載されている属性の属性値を取得することを特徴とする。
【００４１】
設計するＵＩによっては、実施の形態１で例示したような属性の一部が画面遷移によって変化してしまう場合やＵＩ部品が関連付けに利用できる別の要素を持っている場合がある。その場合、他のＵＩ設計の場合と同様の属性の属性値で類似度を計算すると、ユーザが意図しない結果になる可能性がある。そこで、予め属性値を取得する属性を指定したリストを外部に格納しておき、属性値取得部１０５において属性値を取得する際、このリストを参照してリストに記載されている属性の属性値を取得するようにする。リストは、ユーザが予め作成しておき、取得要素リスト格納部１２０１に格納しておく。
【００４２】
実施の形態４における属性値取得部１０５の属性値処理の流れを図１３に示す。図１３において、図５と同一符号を付した処理は同一またはこれに相当した機能を有するので説明を省略する。
ステップＳＴ１３０１において、取得要素リスト格納部１２０１に格納されたリストを取得する。ステップＳＴ１３０２では、ステップＳＴ５０２で選択された属性がステップＳＴ１３０１で取得したリストに記載されているか判断する。もし、選択した属性が取得したリストに記載されていない属性であった場合（ステップＳＴ１３０２：ＮＯ）、属性値を取得せずに再び属性の選択に戻る。取得しなかった属性値はＵＩ部品類似度計算部１０６における類似度の計算にも用いない。選択した属性が取得したリストに記載されている属性であった場合、属性値を取得する。
【００４３】
以上説明したように、実施の形態４のユーザインタフェース設計装置によれば、取得する属性を指定するためのリストを格納する取得要素リスト格納部を備え、属性値取得部は、取得要素リスト格納部に格納されたリストに記載された属性の属性値を取得するようにしたので、属性を取得する際に外部から与えられたリストを参照することで、設計対象のＵＩで特に変化してしまう属性の除外を容易に行うことが可能になる。これにより、設計対象のＵＩに特化した関連付けが可能となり、関連付けの精度向上を期待することができる。
【００４４】
実施の形態５．
図１４は、実施の形態５によるユーザインタフェース設計装置を示す構成図である。図１４において、入力装置１０１〜アニメーション情報格納部１０９における基本的な構成は、図１に示した実施の形態１と同様であるため、ここでの説明は省略する。
実施の形態４では、遷移前後の画面に配置された部品間の関連付けを編集することができる関連付け編集部１４０１を備え、関連付け登録部１０７において関連付けが行われた後、関連付け編集部１４０１によってユーザが意図しない関連付けを手動で変更可能であることを特徴とする。
【００４５】
関連付けを自動で行った場合、画面に配置されているＵＩ部品数が多い場合や画面構成を変更する場合にも効率的に関連付けを行うことができる一方、ユーザが意図しない関連付けが行われてしまう可能性がある。そこで、関連付け編集部１４０１により、自動で関連付けを行った後に手動で編集する機会を設け、ユーザの意図しない関連付けに関して修正を可能にする。こうすることで、大部分の関連付けを自動的に行い関連付けを効率化しつつ、意図しない関連付けをなくすことができる。
【００４６】
関連付け編集部１４０１における編集方法は例えば以下に示す方法で行う。
図１５は、関連付け編集部１４０１によるイメージの一例である。編集画面１５０１上に遷移前の画面１５０２と遷移後の画面１５０３を並んで表示させ、関連付けされている部品を破線１５０４，１５０５で結ぶ。ユーザが意図しない関連付けがされている箇所は破線を付け替えることで別の関連付けに変更することができる。例えば、破線１５０５は現在ＵＩ部品１５０６とＵＩ部品１５０７が関連付けられていることを表しているが、ユーザはＵＩ部品１５０６とＵＩ部品１５０８を関連付けすることを望んでいるとする。この時、破線１５０５をＵＩ部品１５０６とＵＩ部品１５０８を結ぶように付け替えることで関連付けを修正する。なお、この編集方法は別の方法を用いても構わない。例えば、縦軸に遷移前画面のＵＩ部品、横軸に遷移後画面のＵＩ部品を表示した表を出力し、関連付けされている組み合わせは縦軸と横軸の交点に丸印が記載され、ユーザは意図しない組み合わせの交点から丸印を削除し、別の組み合わせの交点に丸印を記入するといった方法でも構わない。
【００４７】
以上説明したように、実施の形態５のユーザインタフェース設計装置によれば、関連付け登録部の登録結果を編集する関連付け編集部を備え、アニメーション設定部は、関連付け登録部で関連付けられたユーザインタフェース部品間の情報に代えて関連付け編集部で編集されたユーザインタフェース部品間の情報を用いるようにしたので、ユーザが意図しない関連付けの修正を行うことが可能となる。これにより、よりユーザの意図を反映した関連付けを行うことができる。
【００４８】
実施の形態６．
図１６は、実施の形態６によるＵＩ装置を表す構成図である。図１６において、図１と同一符号を付したブロックは同一またはこれに相当した機能を有するのでその説明を省略する。すなわち、実施の形態６は、図１に示した実施の形態１におけるユーザインタフェース設計装置に対して、実行部１６０１と表示装置１６０２とを備えたものである。
【００４９】
本実施の形態では、ユーザインタフェース設計装置で設計した内容を実行する（設計した内容をシミュレーションしたり、設計対象のユーザインタフェースを構築した装置上で実行したりする）実行部１６０１と、実行部１６０１の実行結果を表示するための表示装置１６０２を備え、実施の形態１から実施の形態５のうちのいずれかのユーザインタフェース設計装置で設計した内容が実行可能であることを特徴とする。
実行部１６０１は、ＵＩ部品格納部１０３からＵＩ部品を読み出し、表示装置１６０２上に出力する。表示装置１６０２上に出力した画面は、ユーザからのキー入力、タッチ入力などの入力やシステムからの通知などによって設計内容に従って画面遷移を行う。画面遷移などに伴いアニメーションを実行する場合、実行部１６０１は、関連付けされたＵＩ部品間に設定されたアニメーション情報をアニメーション情報格納部１０９から読み出して実行する。なお、アニメーション情報格納部１０９に格納されているアニメーション情報は実施の形態１から実施の形態５のうちのいずれかのユーザインタフェース設計装置で設計されたアニメーション情報を用いても構わない。
【００５０】
以上説明したように、実施の形態６のユーザインタフェース装置によれば、実施の形態１から実施の形態５のうちのいずれかのユーザインタフェース設計装置で設計された結果を実行する実行部と、実行部の実行画面を表示する表示装置とを備えたので、ＵＩ実行時の動作を確認しつつＵＩ設計を実施することが可能であり、開発工数の抑制を期待することができる。
【００５１】
実施の形態７．
図１７は実施の形態７によるユーザインタフェース装置を表す構成図である。
図において、入力装置１０１、ＵＩ部品格納部１０３、属性値取得部１０５、ＵＩ部品類似度計算部１０６、関連付け登録部１０７は、実施の形態１から実施の形態６のうちのいずれかの構成と同様であるため、ここでの説明は省略する。
本実施の形態では、表示装置１６０２上に表示されている画面の画面遷移を行うための遷移画面取得部１７０１、関連付け登録部１０７で関連付けされたＵＩ部品間のアニメーションを自動生成するためのアニメーション生成部１７０２、アニメーション生成部１７０２で生成されたアニメーションを実行するアニメーション実行部１７０３、アニメーション実行部１７０３の結果を受けて表示装置１６０２上に描画を行う描画処理部１７０４を備え、ＵＩを実行する際に遷移前後の画面に配置されたＵＩ部品間の関連付けを行い、アニメーションを自動生成してアニメーションを実行することを特徴とする。
【００５２】
このような構成におけるＵＩ実行における処理の流れについて、以下に説明する。ユーザからのキー入力、タッチ入力などの入力やシステムからの通知などによって画面遷移が発生する。画面遷移の実行を指示するための手段としてはイベントドリブンでも良いし、その他の方法でも構わない。遷移画面取得部１７０１では、遷移前画面である現在の画面と遷移後の画面を取得する。この２つの画面を用いて、属性値取得部１０５で画面に配置されたＵＩ部品が持つ属性の属性値を取得する。属性値取得部１０５、ＵＩ部品類似度計算部１０６、関連付け登録部１０７における処理は実施の形態１と同様であるため、ここでの説明は省略する。アニメーション生成部１７０２では、関連付け登録部１０７によって関連付けされたＵＩ部品間のアニメーションを自動生成する。このとき、自動生成するアニメーションは、例えばアニメーションにかかる時間は固定とし、遷移前画面のＵＩ部品が持つ属性の属性値と遷移後画面のＵＩ部品が持つ属性の属性値を線形補間するアニメーションとしても良く、また他のアニメーションであっても構わない。例えば、属性値の差によってアニメーションにかかる時間を変更する、最初に急激に変化して徐々に緩やかに変化するといったアニメーションであっても構わない。
【００５３】
アニメーション実行部１７０３では、画面に配置された全てのＵＩ部品に対し、前記アニメーション生成部１７０２において自動生成されたアニメーションを実行する。描画処理部１７０４では、実行されるアニメーションを考慮したうえで時系列に沿って中間画像を作成し、表示装置１６０２へ順次描画処理を行う。描画処理はアニメーションが完了するまで繰り返される。この時、割り込み処理を許容しても構わない。例えば、アニメーションによってＵＩ部品が変化している途中で特定のボタンを押すとアニメーションをスキップして遷移後画面を表示するという割り込みを設定しても良い。これらの処理は画面遷移が発生する度に繰り返される。
【００５４】
以上説明したように、実施の形態７のユーザインタフェース装置によれば、ユーザインタフェース部品を有する画面の遷移を行う画面遷移部と、それぞれが属性を有する複数のユーザインタフェース部品から複数の属性値を取得する属性値取得部と、属性値取得部において取得した複数の属性値を統合してインタフェース部品間の類似度の計算を行うＵＩ部品類似度計算部と、ＵＩ部品類似度計算部において計算した結果を基に遷移前後の画面に配置されたユーザインタフェース部品のうち類似度の高いユーザインタフェース部品間の関連付けを行う関連付け登録部と、画面遷移する場合のユーザインタフェース部品間で実行されるアニメーションを、関連付け登録部において関連付けされたＵＩ部品間に生成するアニメーション生成部と、生成されたアニメーションを実行するアニメーション実行部と、アニメーション実行部の実行結果に基づいてユーザインタフェース部品を描画する描画処理部と、描画処理部の描画結果を表示する表示装置とを備えたので、ユーザインタフェース設計時にＵＩ部品間の関連付け等を考慮することなくアニメーションを実行することが可能であり、開発工数を抑制することができる。
【００５５】
実施の形態８．
図１８は実施の形態８によるＵＩ装置を表す構成図である。図１８において、図１７と同一符号を付したブロックは同一またはこれに相当した機能を有するのでその説明を省略する。
実施の形態８では、アニメーション情報格納部１８０１を備え、画面遷移におけるアニメーションに関する情報を予め格納しておき、ＵＩを実行する際に実施の形態７と同様に関連付けＵＩ部品間において格納しておいたアニメーション情報を基にアニメーションを実行することを特徴とする。
【００５６】
アニメーション実行部１７０３において、画面に配置されたＵＩ部品に対しアニメーションを実行する際、アニメーション情報格納部１８０１からアニメーション情報を読み出して、その情報に基づいてアニメーションを実行する。アニメーション情報格納部１８０１に格納されている情報は、アニメーション実行時にＵＩ部品がどのようなアニメーションをするか記載されていればどのような形式であっても構わない。例えば、ＵＩ部品とアニメーションが対応付けてあり、ＵＩ部品がアニメーションを実行する場合は必ず対応付けてあるアニメーションを行うという形式や、テキストや画像といったＵＩ部品の種類によって対応するアニメーションを記載しておき、ＵＩ部品の種類によって実行するアニメーションが異なるという形式や、全てのＵＩ部品とその遷移先となるＵＩ部品の組み合わせを網羅的に記述し、各組み合わせにアニメーションを記載しておくという形式でも構わない。
【００５７】
以上説明したように、実施の形態８のユーザインタフェース装置によれば、ユーザインタフェース部品を有する画面の遷移を行う画面遷移部と、それぞれが属性を有する複数のユーザインタフェース部品から複数の属性値を取得する属性値取得部と、属性値取得部において取得した複数の属性値を統合してインタフェース部品間の類似度の計算を行うＵＩ部品類似度計算部と、ＵＩ部品類似度計算部において計算した結果を基に遷移前後の画面に配置されたユーザインタフェース部品のうち類似度の高いユーザインタフェース部品間の関連付けを行う関連付け登録部と、画面遷移する場合のユーザインタフェース部品間で実行されるアニメーションの情報を格納するアニメーション情報格納部と、アニメーション情報格納部のアニメーション情報を用いてアニメーションを実行するアニメーション実行部と、アニメーション実行部の実行結果に基づいてユーザインタフェース部品を描画する描画処理部と、描画処理部の描画結果を表示する表示装置とを備えたので、ＵＩ実行時に関連付けを行い、画面遷移時には予め設定しておいたアニメーションを実行することで、開発工数を抑制しつつユーザが望んだアニメーションを行うことが可能である。
【００５８】
なお、本願発明はその発明の範囲内において、各実施の形態の自由な組み合わせ、あるいは各実施の形態の任意の構成要素の変形、もしくは各実施の形態において任意の構成要素の省略が可能である。
【符号の説明】
【００５９】
１０１  入力装置、１０２  ＵＩ部品編集部、１０３  ＵＩ部品格納部、１０４  画面選択部、１０５  属性値取得部、１０６  ＵＩ部品類似度計算部、１０７  関連付け登録部、１０８  アニメーション設定部、１０９  アニメーション情報格納部、１２０１  取得要素リスト格納部、１４０１  関連付け編集部、１６０１  実行部、１６０２  表示装置、１７０１  遷移画面取得部、１７０２  アニメーション生成部、１７０３  アニメーション実行部、１７０４  描画処理部、１８０１  アニメーション情報格納部。
【図１】
2014134921.tif 000003
【図２】
2014134921.tif 000004
【図３】
2014134921.tif 000005
【図４】
2014134921.tif 000006
【図５】
2014134921.tif 000007
【図６】
2014134921.tif 000008
【図７】
2014134921.tif 000009
【図８】
2014134921.tif 000010
【図９】
2014134921.tif 000011
【図１０】
2014134921.tif 000012
【図１１】
2014134921.tif 000013
【図１２】
2014134921.tif 000014
【図１３】
2014134921.tif 000015
【図１４】
2014134921.tif 000016
【図１５】
2014134921.tif 000017
【図１６】
2014134921.tif 000018
【図１７】
2014134921.tif 000019
【図１８】
2014134921.tif 000020