JP6766779B2

JP6766779B2 - ユーザインタフェース開発支援装置、ユーザインタフェース開発支援方法、および、ユーザインタフェース開発支援プログラム

Info

Publication number: JP6766779B2
Application number: JP2017161708A
Authority: JP
Inventors: 慎太郎岩村; 大輔 ▲高▼橋
Original assignee: Omron Corp
Current assignee: Omron Corp
Priority date: 2017-08-25
Filing date: 2017-08-25
Publication date: 2020-10-14
Anticipated expiration: 2037-08-25
Also published as: EP3674887B1; US20210132755A1; EP3674887A4; US11709584B2; JP2019040380A; WO2019039197A1; CN111052070A; CN111052070B; EP3674887A1

Description

この発明は、プログラマによるユーザインタフェースの開発を支援する技術に関する。

現在、ファクトリーオートメーション（ＦＡ）のシステムにおいては、一般的に、ユーザインタフェース（ＵＩ）を備えた表示器が用いられている。表示器は、ＦＡシステム内の各装置の状態を表示する機能、各装置に対する設定データや命令データ等の操作入力を受け付ける機能を有する。

このため、表示画像には、例えば、特許文献１に示すような、操作入力を受け付けるボタン、装置の状態を示すランプ、および、計測値等を表示する表示枠等のＵＩオブジェクトのうち、必要なものが表示されている。

これらのＵＩオブジェクトは、ＵＩ画面上での配置位置、大きさ、色等のプロパティが設定されている。

そして、このようなＵＩの開発では、プログラマは、ＵＩ編集画面上にＵＩオブジェクトを配置し、当該ＵＩオブジェクトに対してプロパティを設定する。

特開２０１５−１５３０７３号公報

ＵＩ編集画面によっては、複数のＵＩオブジェクトが重なる場合がある。例えば、複数のＵＩオブジェクトの重なりは、次の場合に生じる。

同じ工程を有する複数の製造ラインに対するＵＩを作成する場合、製造ライン毎にＵＩを作成するよりも、複数の製造ラインに対するＵＩを同時に作成する方が、作業が容易になる。また、同じ工程の製造ラインであれば、ＵＩは類似するものである方が使い勝手がよい。したがって、プログラマは、ＵＩ編集画面において製造ライン毎のＵＩオブジェクトを重ねて編集することになる。

そして、この場合、ＵＩ編集画面において、重なっている複数のＵＩオブジェクトの内、１つのＵＩオブジェクトによって、他のＵＩオブジェクトが隠れてしまう。このため、プログラマは、他のＵＩオブジェクトを容易に視認できない。

一方で、製造ライン毎のＵＩオブジェクトの色が異なっていたり、それぞれに設定する制御が異なる等、製造ラインのＵＩオブジェクト毎に、プロパティが異なることがある。

ここで、上述のように、隠れているＵＩオブジェクトが存在すると、隠れているＵＩオブジェクトのプロパティを編集し忘れる等の編集ミスが生じ、所望とするＵＩを作成できないことがある。

したがって、本発明の目的は、重なっている複数のＵＩオブジェクトに対する編集ミスを抑制するＵＩ開発支援技術を提供することにある。

このユーザインタフェース開発支援装置は、ユーザインタフェース編集部、表示部、および、操作入力部を備える。ユーザインタフェース編集部は、ユーザインタフェースの編集処理を実行し、生成した編集画面を表示器に表示させる。操作入力部は、ユーザインタフェースの編集に対する操作を受け付ける。ユーザインタフェース編集部は、編集画面において重なっている複数のユーザインタフェースオブジェクトがあると、操作入力部による一覧表示用の操作に応じて、重なっている複数のユーザインタフェースオブジェクトの一覧を編集画面内に表示させる。

この構成では、複数のユーザインタフェースオブジェクトが画面上に重なり、最表層のユーザインタフェースオブジェクトしか視認できない場合であっても、重なっている複数のユーザインタフェースオブジェクトが並べて表示される。

また、このユーザインタフェース開発支援装置では、操作入力部は、編集画面内で位置を指示するポインタの操作を受け付ける。ユーザインタフェース編集部は、ポインタの位置が最表層のユーザインタフェースオブジェクトに重なっていれば、一覧を表示させる。

この構成では、ユーザインタフェースオブジェクトにポインタを重ねるだけで、重なっている複数のユーザインタフェースオブジェクトが並べて表示される。

また、このユーザインタフェース開発支援装置では、ユーザインタフェース編集部は、一覧内の複数のユーザインタフェースオブジェクトの１つを選択する操作入力を操作入力部から受け付けると、選択されたユーザインタフェースオブジェクトを、編集対象となる最表層のユーザインタフェースオブジェクトとして表示させる。

この構成では、最表層ではないユーザインタフェースオブジェクトが最表層に表示され、編集可能になる。

また、このユーザインタフェース開発支援装置では、ユーザインタフェース編集部は、一覧内の複数のユーザインタフェースオブジェクトに対して位置または形状の統一化の操作入力を操作入力部から受け付けると、一覧内の複数のユーザインタフェースオブジェクトの位置または形状を統一する。

この構成では、重なっている複数のユーザインタフェースオブジェクトの位置または形状の統一化が容易な操作で行われる。

また、このユーザインタフェース開発支援装置では、ユーザインタフェース編集部は、一覧内の複数のユーザインタフェースオブジェクトに対して属性の統一化の操作入力を操作入力部から受け付けると、一覧内の複数のユーザインタフェースオブジェクトの属性を統一する。

この構成では、重なっている複数のユーザインタフェースオブジェクトの属性の統一化が容易な操作で行われる。

また、このユーザインタフェース開発支援装置では、ユーザインタフェース編集部は、一覧内の複数のユーザインタフェースオブジェクトの位置関係を変化させる操作入力を操作入力部から受け付けると、一覧内での複数のユーザインタフェースオブジェクトの位置関係を変化させるとともに、編集画面において重なっている複数のユーザインタフェースオブジェクトにおける最表層のユーザインタフェースオブジェクトをこの変化に応じて設定する。

この構成では、重なっている複数のユーザインタフェースオブジェクトの順番が容易に変更され、且つ、最表層のユーザインタフェースオブジェクトにもこの順番の変化が反映される。

この発明によれば、複数のＵＩオブジェクトが重なっていても、編集ミスを抑制できる。

本発明の実施形態に係るユーザインタフェース開発支援装置の機能ブロック図である。本発明の実施形態に係るＵＩ編集画面の一例を示す図である。複数のＵＩオブジェクトの一覧の生成方法を示すフローチャートである。複数のＵＩオブジェクトの一覧の第１表示態様を示す図である。複数のＵＩオブジェクトの一覧の第２表示態様を示す図である。複数のＵＩオブジェクトの一覧表示の解除方法を示すフローチャートである。複数のＵＩオブジェクトの一覧表示の解除時のＵＩ編集画面の状態を示す図である。本編集対象のＵＩオブジェクトの切り替え方法を示すフローチャートである。編集対象のＵＩオブジェクトの切り替えの作業時のＵＩ編集画面の状態を示す図である。重なっている複数のＵＩオブジェクトの属性の統一化の方法を示すフローチャートである。重なっている複数のＵＩオブジェクトの属性の統一化の作業時のＵＩ編集画面の状態を示す図である。重なっている複数のＵＩオブジェクトの順番の変更の方法を示すフローチャートである。重なっている複数のＵＩオブジェクトの順番の変更の作業時のＵＩ編集画面の状態を示す図である。重なっている複数のＵＩオブジェクトの順番の変更後のＵＩ編集画面の状態を示す図である。

本発明の実施形態に係るユーザインタフェース開発支援技術について、図を参照して説明する。図１は、本発明の実施形態に係るユーザインタフェース開発支援装置の機能ブロック図である。

図１に示すように、ＵＩ（ユーザインタフェース）開発支援装置１０は、ＵＩ（ユーザインタフェース）編集部１１、操作入力部１２、通信制御部１３、および、表示部１４を備える。ＵＩ開発支援装置１０は、パーソナルコンピュータ等の情報処理装置によって実現される。

ＵＩ編集部１１は、演算部１１１と記憶部１１２とを備える。演算部１１１は、ＣＰＵ等によって実現され、記憶部１１２は、ハードディスク等の記憶媒体、半導体メモリ等によって実現されている。記憶部１１２は、ＵＩ（ユーザインタフェース）編集プログラム２１０を記憶している。ＵＩ編集プログラム２１０は、操作入力部１２からの操作入力に応じてＵＩ（ユーザインタフェース）オブジェクトの作成、画面内での配置、属性の設定等を行うことで、ＵＩ画面を生成、編集するプログラムである。演算部１１１は、ＵＩ編集プログラム２１０を読み出して実行することによって、ＵＩ画面の生成、編集を実行する。ＵＩ編集部１１は、編集中のＵＩ画面すなわちＵＩ編集画面１４０を、表示部１４に表示させる。

操作入力部１２は、例えば、マウスやキーボードからなり、プログラマ等のＵＩ開発支援装置１０の操作者から操作入力を受け付ける。操作入力部１２は、受け付けた操作内容を、演算部１１１に出力する。

通信制御部１３は、ＰＬＣ（プログラマブルロジックコントローラ）等の制御装置との通信制御を実行する。

表示部１４は、例えば、液晶ディスプレイ等であり、ＵＩ編集部１１で編集されたＵＩ編集画面１４０を表示する。

図２は、ＵＩ編集画面の一例を示す図である。図２に示すように、ＵＩ編集画面１４０は、メインウィンドウ１４１と属性表示ウィンドウ１４２とポインタ４１とを含む。メインウィンドウ１４１と属性表示ウィンドウ１４２とは並んで表示されている。

メインウィンドウ１４１は、画面編集領域１４１１とツールバー１４１２とを有する。画面編集領域１４１１は、メインウィンドウ１４１の中央の略全域を占めている。

画面編集領域１４１１には、ＵＩオブジェクト５１、５２等の作成したＵＩオブジェクトが配置されている。ＵＩオブジェクトとは、ボタン、ランプ等を表す図形、数値を表示するための枠等である。

ツールバー１４１２は、これらＵＩオブジェクトの作成に用いるツールが配置されており、例えば、プログラマは、ツールバー１４１２のツールを選択して、画面編集領域１４１１に所定の処理を実行することで、ＵＩオブジェクトの作成を実現する。

属性表示ウィンドウ１４２には、画面編集領域１４１１において、その時点で選択されているＵＩオブジェクトの各種の属性が配置されている。属性とは、ＵＩオブジェクトの名称、種類、ＵＩオブジェクトに設定された変数、図形の形、色、大きさ、配置位置等を含む。

（一覧表示）
図３は、複数のＵＩオブジェクトの一覧の生成方法を示すフローチャートである。図４は、複数のＵＩオブジェクトの一覧の第１表示態様を示す図である。図５は、複数のＵＩオブジェクトの一覧の第２表示態様を示す図である。

ＵＩ編集部１１は、図３に示す処理を実行することによって、ＵＩ編集画面１４０の画面編集領域１４１１内に複数のＵＩオブジェクトが重なっている場合に、図４または図５に示すような複数のＵＩオブジェクトの一覧を生成し、ＵＩ編集画面１４０内に配置する。

まず、ＵＩ編集部１１は、ＵＩ編集画面１４０におけるポインタ４１の位置（座標）を検出する（Ｓ１０１）。

ＵＩ編集部１１は、画面編集領域１４１１におけるポインタ４１の位置がＵＩオブジェクトに重なっているか否かを検出する（Ｓ１０２）。これは、例えば、画面編集領域１４１１におけるＵＩオブジェクトの領域は、二次元の座標で記憶されている。ＵＩ編集部１１は、ポインタ４１の位置座標が当該二次元の座標で定義されるＵＩオブジェクトの領域内にあれば、ポインタとＵＩオブジェクトとが重なっていると判定する。このポインタ４１をＵＩオブジェクトに重ねる操作が、一覧表示用の操作に対応する。

ＵＩ編集部１１は、ポインタ４１がＵＩオブジェクトに重なっていなければ（Ｓ１０２：ＮＯ）、次のポインタ４１への操作入力まで待機する。

図４に示すように、ＵＩ編集部１１は、ポインタ４１がＵＩオブジェクトに重なっていれば（Ｓ１０２：ＹＥＳ）、当該ＵＩオブジェクトに対して、他のＵＩオブジェクトが重なっているか否かを検出する（Ｓ１０３）。例えば、ＵＩ編集部１１は、新たなＵＩオブジェクトの編集、登録時に、既にあるＵＩオブジェクトとの重なりを検出する。そして、ＵＩ編集部１１は、重なっている複数のＵＩオブジェクトを、そのＺ方向の位置関係とともに記憶しておく。これにより、その後の編集では、ＵＩ編集部１１は、ＵＩオブジェクトの重なり、Ｚ方向の位置関係、すなわち、最表層のＵＩオブジェクトから裏側に順次並ぶＵＩオブジェクトの位置関係を検出できる。

ＵＩ編集部１１は、画面編集領域１４１１においてポインタ４１が重なるＵＩオブジェクトに対して、複数のＵＩオブジェクトが重なっていれば（Ｓ１０３：ＹＥＳ）、重なっているＵＩオブジェクトの一覧５００を生成し（Ｓ１０４）、図４に示すように、ＵＩ編集画面１４０内に配置する。

一覧５００には、ポインタ４１が重なるＵＩオブジェクト５１と、このＵＩオブジェクト５１に重なるＵＩオブジェクト５２およびＵＩオブジェクト５３とが含まれている。また、一覧５００では、ＵＩオブジェクト５１、ＵＩオブジェクト５２、ＵＩオブジェクト５３は、ＵＩ編集プログラム２１０によって設定されている表層側から順に合わせて、配置される。

このような処理によって、プログラマは、ＵＩ編集画面１４０においてＵＩオブジェクトにポインタを重ねるだけで、このＵＩオブジェクトによってＵＩ編集画面１４０では隠れている他のＵＩオブジェクトを、容易に視認できる。これにより、プログラマは、隠れているＵＩオブジェクトの編集のし忘れ等の編集ミスを抑制できる。また、プログラマは、表層からの複数のＵＩオブジェクトの並び順を把握できる。

この際、図４に示すように、ＵＩ編集部１１は、ＵＩオブジェクト５２を、より表層側のＵＩオブジェクト５１に部分的に重ね、ＵＩオブジェクト５２の一部を敢えて視認できないように配置する。同様に、ＵＩ編集部１１は、ＵＩオブジェクト５３を、より表層側のＵＩオブジェクト５２に部分的に重ね、ＵＩオブジェクト５３の一部を敢えて視認できないように配置する。これにより、プログラマは、ＵＩオブジェクト５１、５２、５３の表層からの順を、より分かり易く視認できる。

さらに、図４に示すように、ＵＩ編集部１１は、表層側から裏側に向けて、ＵＩオブジェクトを徐々に小さく表示するように設定する。これにより、プログラマは、ＵＩオブジェクト５１、５２、５３の表層からの順を、より直感的に理解し易い。

また、ＵＩ編集部１１は、ポインタ４１が重ねられたＵＩオブジェクト５１に近接させて一覧５００を配置する。これにより、プログラムは、ＵＩ編集画面１４０内のどのＵＩオブジェクトに他のＵＩオブジェクトが隠れているかを視認し易い。

なお、ＵＩ編集部１１は、図５に示すような一覧の設定を行うこともできる。図５は、複数のＵＩオブジェクトの一覧の第２表示態様を示す図である。

図５に示す表示態様では、ＵＩ編集部１１は、ＵＩオブジェクト５１、５２、５３をＵＩ編集画面１４０の縦方向に順に並べる一覧５００を生成して、ＵＩ編集画面１４０内に配置する。この設定であっても、図４と同様に、ＵＩオブジェクトによってＵＩ編集画面１４０では隠れている他のＵＩオブジェクトを、容易に視認できる。また、プログラマは、表層からの複数のＵＩオブジェクトの並び順を把握できる。さらに、図５の表示態様では、重なる複数のＵＩオブジェクトの大きさを変更することなく、表層側からの並びを分かり易く表示できる。

なお、上述の説明では、ポインタ４１がＵＩオブジェクト５１に重なったことを検出して、一覧５００を配置する態様を示した。しかしながら、操作入力部１２としてキーボード等を備えており、当該キーボードにおいて所定のキー入力等が行われた時に、一覧５００を配置することも可能である。この場合、所定のキー入力等が一覧表示用の操作となる。

（一覧表示の解除）
ＵＩ編集部１１は、一覧５００の表示解除を次のように行う。

図６は、複数のＵＩオブジェクトの一覧表示の解除方法を示すフローチャートである。図７は、複数のＵＩオブジェクトの一覧表示の解除時のＵＩ編集画面の状態を示す図である。

ＵＩ編集部１１は、上述の状態においてＵＩオブジェクトの一覧５００を表示させる（Ｓ２０１）。この間、ＵＩ編集部１１は、ポインタ４１の位置を検出している（Ｓ２０２）。ＵＩ編集部１１は、ポインタ４１がＵＩオブジェクト５１に重なっているか否かを検出する（Ｓ２０３）。これは、上述の図３に示すフローチャートの方法によって実現できる。

ＵＩ編集部１１は、ポインタ４１とＵＩオブジェクト５１とが重なっていれば（Ｓ２０３：ＮＯ）、一覧５００の配置を継続させる（Ｓ２０１）。

ＵＩ編集部１１は、ポインタ４１とＵＩオブジェクト５１とが重なっていなければ（Ｓ２０３：ＹＥＳ）、ポインタ４１が解除用領域にあるか否かを検出する（Ｓ２０４）。

解除用領域とは、例えば、図７に示すように、ＵＩオブジェクト５１の領域に対して所定距離で広げた領域ＺＣよりも外側の領域である。

ＵＩ編集部１１は、ポインタ４１が解除用領域になければ（Ｓ２０４：ＮＯ）、一覧５００の配置を継続させる（Ｓ２０１）。

ＵＩ編集部１１は、ポインタ４１が解除用領域にあれば（Ｓ２０４：ＹＥＳ）、ＵＩ編集画面１４０から一覧５００を削除し、一覧表示を解除する（Ｓ２０５）。

このような処理によって、プログラマは、ポインタ４１の移動だけで、一覧５００の表示を解除でき、通常のＵＩ編集画面１４０による編集に復帰できる。

なお、上述の説明では、ポインタ４１が解除用領域に入ることを条件として、一覧５００の表示を解除したが、さらに、一覧５００の表示の解除に遅延時間を設けてもよい。具体的には、ＵＩ編集部１１は、ポインタ４１が解除用領域内に入ることを検出し、遅延時間分に相当する時間に亘ってポインタ４１が解除用領域から外れない場合に、一覧５００の表示を解除する。

（編集対象のＵＩオブジェクトの変更）
ＵＩ編集部１１は、編集対象のＵＩオブジェクトを次のように切り替える。

図８は、本編集対象のＵＩオブジェクトの切り替え方法を示すフローチャートである。図９は、編集対象のＵＩオブジェクトの切り替えの作業時のＵＩ編集画面の状態を示す図である。

ＵＩ編集部１１は、上述の状態においてＵＩオブジェクトの一覧５００を表示させる（Ｓ３０１）。この間、ＵＩ編集部１１は、ポインタ４１の位置を検出している（Ｓ３０２）。

ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクトと重なっているか否かを検出する（Ｓ３０３）。ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクトと重なっていなければ（Ｓ３０３：ＮＯ）、ＵＩオブジェクトの一覧５００の表示を継続する。

ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクトと重なっていれば（Ｓ３０３：ＹＥＳ）、ポインタ４１が重なるＵＩオブジェクトに応じて、ＵＩ編集画面１４０の更新を行う（Ｓ３０４）。

具体的には、ＵＩ編集部１１は、ポインタ４１が重なるＵＩオブジェクトを、ＵＩ編集画面１４０における最表層のＵＩオブジェクトに切り替える。これに伴い、属性表示ウィンドウ１４２の表示も、切り替え後の最表層のＵＩオブジェクトに対応する内容に切り替える。例えば、図９の例であれば、ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクト５２に重なっていれば、ＵＩ編集画面１４０の最表層に表示されているＵＩオブジェクト５１をＵＩオブジェクト５２に切り替える。これに伴い、ＵＩ編集部１１は、属性表示ウィンドウ１４２の表示を、ＵＩオブジェクト５１に対応する内容から、ＵＩオブジェクト５２に対応する内容に切り替える。そして、ＵＩ編集部１１は、ＵＩオブジェクト５１に換えて、ＵＩオブジェクト５２の編集を可能にする。

このような処理によって、プログラマは、重なっている複数のＵＩオブジェクトにおける編集対象のＵＩオブジェクトを容易に切り替えることができる。

（編集対象のＵＩオブジェクトの変更）
ＵＩ編集部１１は、重なっている複数のＵＩオブジェクトの属性の統一化を次のように実行する。

図１０は、重なっている複数のＵＩオブジェクトの属性の統一化の方法を示すフローチャートである。図１１は、重なっている複数のＵＩオブジェクトの属性の統一化の作業時のＵＩ編集画面の状態を示す図である。

ＵＩ編集部１１は、上述の状態においてＵＩオブジェクトの一覧５００を表示させる（Ｓ４０１）。この間、ＵＩ編集部１１は、ポインタ４１の位置を検出している（Ｓ４０２）。

ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクトと重なっているか否かを検出する（Ｓ４０３）。ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクトと重なっていなければ（Ｓ４０３：ＮＯ）、ＵＩオブジェクトの一覧５００の表示を継続する。

ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクトと重なっていれば（Ｓ４０３：ＹＥＳ）、操作入力部１２から統一化の操作を受け付けているか否かを検出する（Ｓ４０４）。ＵＩ編集部１１は、統一化の操作を受け付けていなければ（Ｓ４０４：ＮＯ）、ＵＩオブジェクトの一覧５００の表示を継続する。

ＵＩ編集部１１は、統一化の操作を受け付けると（Ｓ４０４：ＹＥＳ）、操作内容に応じて、一覧５００に含まれる複数のＵＩオブジェクト、すなわち、ＵＩ編集画面１４０において重なっている複数のＵＩオブジェクトの属性の統一化を行う（Ｓ４０５）。そして、ＵＩ編集部１１は、統一内容に応じて、ＵＩ編集画面１４０の構成を更新する（Ｓ４０６）。

例えば、図１１の例であれば、一覧５００に含まれるＵＩオブジェクト５１、ＵＩオブジェクト５２、および、ＵＩオブジェクト５３は、サイズと中心位置が異なる。

ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクト５１に重なっており、統一化の操作（例えば、操作入力部１２であるマウスの右クリック等）に応じて、統一化の項目が記載されたコンテキストメニューを配置する。ＵＩ編集部１１は、さらに、コンテキストメニューにおいて、サイズと位置の統一の項目を選択する操作を受け付けると、ＵＩオブジェクト５１とともに一覧５００に含まれる複数のＵＩオブジェクト５２、５３のサイズと位置を、ＵＩオブジェクト５１のサイズと位置に統一する。これにより、ＵＩオブジェクト５１、ＵＩオブジェクト５２、および、ＵＩオブジェクト５３のサイズと中心位置は、ＵＩオブジェクト５１のサイズと中心位置に統一される。

なお、図１１に示す例において、属性の統一が選択されれば、ＵＩ編集部１１は、ＵＩオブジェクト５１、ＵＩオブジェクト５２、および、ＵＩオブジェクト５３における変更可能な属性を統一する。

また、この統一化の処理に応じて、ＵＩ編集部１１は、メインウィンドウ１４１のみでなく、属性表示ウィンドウ１４２の内容も変更する。

これにより、プログラマは、重なっている複数のＵＩオブジェクトの属性の統一化を容易に行うことができる。

（ＵＩオブジェクトの順番の変更）
ＵＩ編集部１１は、重なっている複数のＵＩオブジェクトの順番の変更を次のように実行する。

図１２は、重なっている複数のＵＩオブジェクトの順番の変更の方法を示すフローチャートである。図１３は、重なっている複数のＵＩオブジェクトの順番の変更の作業時のＵＩ編集画面の状態を示す図である。図１４は、重なっている複数のＵＩオブジェクトの順番の変更後のＵＩ編集画面の状態を示す図である。

ＵＩ編集部１１は、上述の状態においてＵＩオブジェクトの一覧５００を表示させる（Ｓ５０１）。この間、ＵＩ編集部１１は、ポインタ４１の位置を検出している（Ｓ５０２）。

ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクトと重なっているか否かを検出する（Ｓ５０３）。ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクトと重なっていなければ（Ｓ５０３：ＮＯ）、ＵＩオブジェクトの一覧５００の表示を継続する。

ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクトと重なっていれば（Ｓ５０３：ＹＥＳ）、操作入力部１２からＵＩオブジェクトの順番変更の操作を受け付けているか否かを検出する（Ｓ５０４）。ＵＩ編集部１１は、順番変更の操作を受け付けていなければ（Ｓ５０４：ＮＯ）、ＵＩオブジェクトの一覧５００の表示を継続する。

ＵＩ編集部１１は、順番変更の操作を受け付けると（Ｓ５０４：ＹＥＳ）、操作内容に応じて、一覧５００に含まれる複数のＵＩオブジェクト、すなわち、ＵＩ編集画面１４０において重なっている複数のＵＩオブジェクトの表示順番を変更する（Ｓ５０５）。そして、ＵＩ編集部１１は、変更内容に応じて、ＵＩ編集画面１４０の構成を更新する（Ｓ５０６）。

例えば、図１３の例であれば、一覧５００では、ＵＩオブジェクト５１、ＵＩオブジェクト５２、および、ＵＩオブジェクト５３は、この順で並んでいる。

ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクト５２に重なっており、図１３に示すように、ＵＩオブジェクト５２をＵＩオブジェクト５１よりも表層側に移動させる順番変更の操作（例えば、操作入力部１２であるマウスのドラッグ＆ドロップ等）を受け付ける。この順番変更の操作の受付によって、ＵＩ編集部１１は、図１４に示すように、一覧５００にて、表層側からＵＩオブジェクト５２、ＵＩオブジェクト５１、ＵＩオブジェクト５３の順に並ぶように、ＵＩオブジェクトの順番を変更する。さらに、ＵＩ編集部１１は、画面編集領域１４１１において、図１３に示すＵＩオブジェクト５１を配置する構成から、図１４に示すＵＩオブジェクト５２を配置する構成に変更する。これと同時に、ＵＩ編集部１１は、メインウィンドウ１４１のみでなく、属性表示ウィンドウ１４２の内容も、ＵＩオブジェクト５１の内容からＵＩオブジェクト５２の内容に変更する。

これにより、プログラマは、重なっている複数のＵＩオブジェクトの順番の変更を容易に行うことができる。

なお、上述の説明では、重なっている複数のＵＩオブジェクトがグループ化されていない態様を示したが、重なっている複数のＵＩオブジェクトがグループ化されていても、上述の処理を適用することができる。すなわち、グループ化されている複数のＵＩオブジェクトが少なくとも部分的に互いに重なっている時に、上述の処理と同様に、一覧表示、一覧表示の解除、編集対象の変更等を行うことができる。

また、ＵＩオブジェクトは、操作入力の受け付けを行うものに限らず、単に表示されるものも含まれる。

また、上述の複数の処理は、個別に実行されるものでなくてもよく、上述の複数の処理は、組み合わせて実行されてもよい。

１０：ＵＩ開発支援装置
１１：ＵＩ編集部
１２：操作入力部
１３：通信制御部
１４：表示部
４１：ポインタ
５１、５２、５３：ＵＩオブジェクト
１１１：演算部
１１２：記憶部
１４０：ＵＩ編集画面
１４１：メインウィンドウ
１４２：属性表示ウィンドウ
２１０：ＵＩ編集プログラム
５００：一覧
１４１１：画面編集領域
１４１２：ツールバー

Claims

ユーザインタフェースの編集処理を実行し、生成した編集画面を表示器に表示させるユーザインタフェース編集部と、
前記ユーザインタフェースの編集に対する操作を受け付ける操作入力部と、
を備え、
前記操作入力部は、前記編集画面内で位置を指示するポインタの操作を受け付け、
前記ユーザインタフェース編集部は、
前記編集画面において、前記ポインタの位置が複数のユーザインタフェースオブジェクトが重なっている最表層のユーザインタフェースオブジェクト上に移動された場合に、この最表層のユーザインタフェースオブジェクトに重なっている複数のユーザインタフェースオブジェクトの一覧を前記編集画面内に表示させ、
前記一覧を前記編集画面内に表示させた後、前記ポインタの位置が前記最表層のユーザインタフェースオブジェクトよりも大きく、この最表層のユーザインタフェースオブジェクト全体を囲むように設定した領域の外側である解除用領域に移動された場合に、前記編集画面における前記一覧の表示を削除させる、
ユーザインタフェース開発支援装置。
前記ユーザインタフェース編集部は、
前記一覧内の複数のユーザインタフェースオブジェクトの１つを選択する操作入力を前記操作入力部から受け付けると、選択されたユーザインタフェースオブジェクトを、編集対象となる前記最表層のユーザインタフェースオブジェクトとして表示させる、
請求項１に記載のユーザインタフェース開発支援装置。
前記ユーザインタフェース編集部は、
前記一覧内の複数のユーザインタフェースオブジェクトに対して位置または形状の統一化の操作入力を前記操作入力部から受け付けると、前記一覧内の複数のユーザインタフェースオブジェクトの位置または形状を統一する、
請求項１、または２に記載のユーザインタフェース開発支援装置。
前記ユーザインタフェース編集部は、
前記一覧内の複数のユーザインタフェースオブジェクトに対して属性の統一化の操作入力を前記操作入力部から受け付けると、前記一覧内の複数のユーザインタフェースオブジェクトの属性を統一する、
請求項１乃至請求項３のいずれかに記載のユーザインタフェース開発支援装置。
前記ユーザインタフェース編集部は、
前記一覧内の複数のユーザインタフェースオブジェクトの位置関係を変化させる操作入力を前記操作入力部から受け付けると、前記一覧内での複数のユーザインタフェースオブジェクトの位置関係を変化させるとともに、前記編集画面において重なっている複数のユーザインタフェースオブジェクトにおける前記最表層のユーザインタフェースオブジェクトをこの変化に応じて設定する、
請求項１乃至請求項４のいずれかに記載のユーザインタフェース開発支援装置。
ユーザインタフェースの編集処理を実行し、編集画面を生成するユーザインタフェース編集処理と、
前記編集画面を表示する表示処理と、
操作入力部で前記ユーザインタフェースの編集に対する操作を受け付ける操作入力処理と、
を情報処理装置が実行するユーザインタフェース開発支援方法であって、
前記操作入力処理は、前記操作入力部で前記編集画面内で位置を指示するポインタの操作を受け付ける処理を含み、
前記ユーザインタフェース編集処理は、
前記編集画面において、前記ポインタの位置が複数のユーザインタフェースオブジェクトが重なっている最表層のユーザインタフェースオブジェクト上に移動された場合に、この最表層のユーザインタフェースオブジェクトに重なっている複数のユーザインタフェースオブジェクトの一覧を前記編集画面内に表示させる第１処理と、
前記一覧を前記編集画面内に表示させた後、前記ポインタの位置が前記最表層のユーザインタフェースオブジェクトよりも大きく、この最表層のユーザインタフェースオブジェクト全体を囲むように設定した領域の外側である解除用領域に移動された場合に、前記編集画面における前記一覧の表示を削除させる第２処理と、を含む、
ユーザインタフェース開発支援方法。
ユーザインタフェースの編集処理を実行し、編集画面を生成するユーザインタフェース編集処理と、
前記編集画面を表示する表示処理と、
操作入力部で前記ユーザインタフェースの編集に対する操作を受け付ける操作入力処理と、
を、情報処理装置に実行させるユーザインタフェース開発支援プログラムであって、
前記操作入力処理は、前記操作入力部で前記編集画面内で位置を指示するポインタの操作を受け付ける処理を含み、
前記ユーザインタフェース編集処理は、
前記編集画面において、前記ポインタの位置が複数のユーザインタフェースオブジェクトが重なっている最表層のユーザインタフェースオブジェクト上に移動された場合に、この最表層のユーザインタフェースオブジェクトに重なっている複数のユーザインタフェースオブジェクトの一覧を前記編集画面内に表示させる第１処理と、
前記一覧を前記編集画面内に表示させた後、前記ポインタの位置が前記最表層のユーザインタフェースオブジェクトよりも大きく、この最表層のユーザインタフェースオブジェクト全体を囲むように設定した領域の外側である解除用領域に移動された場合に、前記編集画面における前記一覧の表示を削除させる第２処理と、を含む、
ユーザインタフェース開発支援プログラム。