(57)【要約】【課題】重なっている複数のＵＩオブジェクトに対する編集ミスを抑制する。【解決手段】ＵＩ開発支援装置１０は、ＵＩ編集部１１、操作入力部１２、および、表示部１４を備える。ＵＩ編集部１１は、ＵＩの編集処理を実行し、ＵＩ編集画面１４０を生成する。表示部１４は、ＵＩ編集画面１４０を表示する。操作入力部１２は、ＵＩの編集に対する操作を受け付ける。ＵＩ編集部１１は、ＵＩ編集画面１４０において重なっている複数のＵＩオブジェクトがあると、操作入力部１２による所定の操作に応じて、重なっている複数のＵＩオブジェクトの一覧をＵＩ編集画面１４０内に表示させる。【選択図】図１
2019040380.tif 000002
【特許請求の範囲】
【請求項１】
ユーザインタフェースの編集処理を実行し、生成した編集画面を表示器に表示させるユーザインタフェース編集部と、
前記ユーザインタフェースの編集に対する操作を受け付ける操作入力部と、
を備え、
前記ユーザインタフェース編集部は、
前記編集画面において重なっている複数のユーザインタフェースオブジェクトがあると、前記操作入力部への一覧表示用の操作に応じて、前記重なっている複数のユーザインタフェースオブジェクトの一覧を前記編集画面内に表示させる、
ユーザインタフェース開発支援装置。
【請求項２】
前記操作入力部は、前記編集画面内で位置を指示するポインタの操作を受け付け、
前記ユーザインタフェース編集部は、
前記ポインタの位置が前記最表層のユーザインタフェースオブジェクトに重なっていれば、前記一覧を表示させる、
請求項１に記載のユーザインタフェース開発支援装置。
【請求項３】
前記ユーザインタフェース編集部は、
前記一覧内の複数のユーザインタフェースオブジェクトの１つを選択する操作入力を前記操作入力部から受け付けると、選択されたユーザインタフェースオブジェクトを、編集対象となる前記最表層のユーザインタフェースオブジェクトとして表示させる、
請求項１または請求項２に記載のユーザインタフェース開発支援装置。
【請求項４】
前記ユーザインタフェース編集部は、
前記一覧内の複数のユーザインタフェースオブジェクトに対して位置または形状の統一化の操作入力を前記操作入力部から受け付けると、前記一覧内の複数のユーザインタフェースオブジェクトの位置または形状を統一する、
請求項１乃至請求項３のいずれかに記載のユーザインタフェース開発支援装置。
【請求項５】
前記ユーザインタフェース編集部は、
前記一覧内の複数のユーザインタフェースオブジェクトに対して属性の統一化の操作入力を前記操作入力部から受け付けると、前記一覧内の複数のユーザインタフェースオブジェクトの属性を統一する、
請求項１乃至請求項４のいずれかに記載のユーザインタフェース開発支援装置。
【請求項６】
前記ユーザインタフェース編集部は、
前記一覧内の複数のユーザインタフェースオブジェクトの位置関係を変化させる操作入力を前記操作入力部から受け付けると、前記一覧内での複数のユーザインタフェースオブジェクトの位置関係を変化させるとともに、前記編集画面において重なっている複数のユーザインタフェースオブジェクトにおける前記最表層のユーザインタフェースオブジェクトをこの変化に応じて設定する、
請求項１乃至請求項５のいずれかに記載のユーザインタフェース開発支援装置。
【請求項７】
ユーザインタフェースの編集処理を実行し、編集画面を生成するユーザインタフェース編集処理と、
前記編集画面を表示する表示処理と、
前記ユーザインタフェースの編集に対する操作を受け付ける操作入力処理と、
を有し、
前記ユーザインタフェース編集処理では、
前記編集画面において重なっている複数のユーザインタフェースオブジェクトがあると、前記操作入力部による所定の操作に応じて、前記重なっている複数のユーザインタフェースオブジェクトの一覧を前記編集画面内に表示させる、
ユーザインタフェース開発支援方法。
【請求項８】
ユーザインタフェースの編集処理を実行し、編集画面を生成するユーザインタフェース編集処理と、
前記編集画面を表示する表示処理と、
前記ユーザインタフェースの編集に対する操作を受け付ける操作入力処理と、
を、情報処理装置に実行させるユーザインタフェース開発支援プログラムであって、
前記ユーザインタフェース編集処理において、
前記編集画面において重なっている複数のユーザインタフェースオブジェクトがあると、前記操作入力部による所定の操作に応じて、前記重なっている複数のユーザインタフェースオブジェクトの一覧を前記編集画面内に表示させる処理を、前記情報処理装置に実行させる、
ユーザインタフェース開発支援プログラム。
【発明の詳細な説明】
【技術分野】
【０００１】
この発明は、プログラマによるユーザインタフェースの開発を支援する技術に関する。
【背景技術】
【０００２】
現在、ファクトリーオートメーション（ＦＡ）のシステムにおいては、一般的に、ユーザインタフェース（ＵＩ）を備えた表示器が用いられている。表示器は、ＦＡシステム内の各装置の状態を表示する機能、各装置に対する設定データや命令データ等の操作入力を受け付ける機能を有する。
【０００３】
このため、表示画像には、例えば、特許文献１に示すような、操作入力を受け付けるボタン、装置の状態を示すランプ、および、計測値等を表示する表示枠等のＵＩオブジェクトのうち、必要なものが表示されている。
【０００４】
これらのＵＩオブジェクトは、ＵＩ画面上での配置位置、大きさ、色等のプロパティが設定されている。
【０００５】
そして、このようなＵＩの開発では、プログラマは、ＵＩ編集画面上にＵＩオブジェクトを配置し、当該ＵＩオブジェクトに対してプロパティを設定する。
【先行技術文献】
【特許文献】
【０００６】
【特許文献１】特開２０１５−１５３０７３号公報
【発明の概要】
【発明が解決しようとする課題】
【０００７】
ＵＩ編集画面によっては、複数のＵＩオブジェクトが重なる場合がある。例えば、複数のＵＩオブジェクトの重なりは、次の場合に生じる。
【０００８】
同じ工程を有する複数の製造ラインに対するＵＩを作成する場合、製造ライン毎にＵＩを作成するよりも、複数の製造ラインに対するＵＩを同時に作成する方が、作業が容易になる。また、同じ工程の製造ラインであれば、ＵＩは類似するものである方が使い勝手がよい。したがって、プログラマは、ＵＩ編集画面において製造ライン毎のＵＩオブジェクトを重ねて編集することになる。
【０００９】
そして、この場合、ＵＩ編集画面において、重なっている複数のＵＩオブジェクトの内、１つのＵＩオブジェクトによって、他のＵＩオブジェクトが隠れてしまう。このため、プログラマは、他のＵＩオブジェクトを容易に視認できない。
【００１０】
一方で、製造ライン毎のＵＩオブジェクトの色が異なっていたり、それぞれに設定する制御が異なる等、製造ラインのＵＩオブジェクト毎に、プロパティが異なることがある。
【００１１】
ここで、上述のように、隠れているＵＩオブジェクトが存在すると、隠れているＵＩオブジェクトのプロパティを編集し忘れる等の編集ミスが生じ、所望とするＵＩを作成できないことがある。
【００１２】
したがって、本発明の目的は、重なっている複数のＵＩオブジェクトに対する編集ミスを抑制するＵＩ開発支援技術を提供することにある。
【課題を解決するための手段】
【００１３】
このユーザインタフェース開発支援装置は、ユーザインタフェース編集部、表示部、および、操作入力部を備える。ユーザインタフェース編集部は、ユーザインタフェースの編集処理を実行し、生成した編集画面を表示器に表示させる。操作入力部は、ユーザインタフェースの編集に対する操作を受け付ける。ユーザインタフェース編集部は、編集画面において重なっている複数のユーザインタフェースオブジェクトがあると、操作入力部による一覧表示用の操作に応じて、重なっている複数のユーザインタフェースオブジェクトの一覧を編集画面内に表示させる。
【００１４】
この構成では、複数のユーザインタフェースオブジェクトが画面上に重なり、最表層のユーザインタフェースオブジェクトしか視認できない場合であっても、重なっている複数のユーザインタフェースオブジェクトが並べて表示される。
【００１５】
また、このユーザインタフェース開発支援装置では、操作入力部は、編集画面内で位置を指示するポインタの操作を受け付ける。ユーザインタフェース編集部は、ポインタの位置が最表層のユーザインタフェースオブジェクトに重なっていれば、一覧を表示させる。
【００１６】
この構成では、ユーザインタフェースオブジェクトにポインタを重ねるだけで、重なっている複数のユーザインタフェースオブジェクトが並べて表示される。
【００１７】
また、このユーザインタフェース開発支援装置では、ユーザインタフェース編集部は、一覧内の複数のユーザインタフェースオブジェクトの１つを選択する操作入力を操作入力部から受け付けると、選択されたユーザインタフェースオブジェクトを、編集対象となる最表層のユーザインタフェースオブジェクトとして表示させる。
【００１８】
この構成では、最表層ではないユーザインタフェースオブジェクトが最表層に表示され、編集可能になる。
【００１９】
また、このユーザインタフェース開発支援装置では、ユーザインタフェース編集部は、一覧内の複数のユーザインタフェースオブジェクトに対して位置または形状の統一化の操作入力を操作入力部から受け付けると、一覧内の複数のユーザインタフェースオブジェクトの位置または形状を統一する。
【００２０】
この構成では、重なっている複数のユーザインタフェースオブジェクトの位置または形状の統一化が容易な操作で行われる。
【００２１】
また、このユーザインタフェース開発支援装置では、ユーザインタフェース編集部は、一覧内の複数のユーザインタフェースオブジェクトに対して属性の統一化の操作入力を操作入力部から受け付けると、一覧内の複数のユーザインタフェースオブジェクトの属性を統一する。
【００２２】
この構成では、重なっている複数のユーザインタフェースオブジェクトの属性の統一化が容易な操作で行われる。
【００２３】
また、このユーザインタフェース開発支援装置では、ユーザインタフェース編集部は、一覧内の複数のユーザインタフェースオブジェクトの位置関係を変化させる操作入力を操作入力部から受け付けると、一覧内での複数のユーザインタフェースオブジェクトの位置関係を変化させるとともに、編集画面において重なっている複数のユーザインタフェースオブジェクトにおける最表層のユーザインタフェースオブジェクトをこの変化に応じて設定する。
【００２４】
この構成では、重なっている複数のユーザインタフェースオブジェクトの順番が容易に変更され、且つ、最表層のユーザインタフェースオブジェクトにもこの順番の変化が反映される。
【発明の効果】
【００２５】
この発明によれば、複数のＵＩオブジェクトが重なっていても、編集ミスを抑制できる。
【図面の簡単な説明】
【００２６】
【図１】本発明の実施形態に係るユーザインタフェース開発支援装置の機能ブロック図である。
【図２】本発明の実施形態に係るＵＩ編集画面の一例を示す図である。
【図３】複数のＵＩオブジェクトの一覧の生成方法を示すフローチャートである。
【図４】複数のＵＩオブジェクトの一覧の第１表示態様を示す図である。
【図５】複数のＵＩオブジェクトの一覧の第２表示態様を示す図である。
【図６】複数のＵＩオブジェクトの一覧表示の解除方法を示すフローチャートである。
【図７】複数のＵＩオブジェクトの一覧表示の解除時のＵＩ編集画面の状態を示す図である。
【図８】本編集対象のＵＩオブジェクトの切り替え方法を示すフローチャートである。
【図９】編集対象のＵＩオブジェクトの切り替えの作業時のＵＩ編集画面の状態を示す図である。
【図１０】重なっている複数のＵＩオブジェクトの属性の統一化の方法を示すフローチャートである。
【図１１】重なっている複数のＵＩオブジェクトの属性の統一化の作業時のＵＩ編集画面の状態を示す図である。
【図１２】重なっている複数のＵＩオブジェクトの順番の変更の方法を示すフローチャートである。
【図１３】重なっている複数のＵＩオブジェクトの順番の変更の作業時のＵＩ編集画面の状態を示す図である。
【図１４】重なっている複数のＵＩオブジェクトの順番の変更後のＵＩ編集画面の状態を示す図である。
【発明を実施するための形態】
【００２７】
本発明の実施形態に係るユーザインタフェース開発支援技術について、図を参照して説明する。図１は、本発明の実施形態に係るユーザインタフェース開発支援装置の機能ブロック図である。
【００２８】
図１に示すように、ＵＩ（ユーザインタフェース）開発支援装置１０は、ＵＩ（ユーザインタフェース）編集部１１、操作入力部１２、通信制御部１３、および、表示部１４を備える。ＵＩ開発支援装置１０は、パーソナルコンピュータ等の情報処理装置によって実現される。
【００２９】
ＵＩ編集部１１は、演算部１１１と記憶部１１２とを備える。演算部１１１は、ＣＰＵ等によって実現され、記憶部１１２は、ハードディスク等の記憶媒体、半導体メモリ等によって実現されている。記憶部１１２は、ＵＩ（ユーザインタフェース）編集プログラム２１０を記憶している。ＵＩ編集プログラム２１０は、操作入力部１２からの操作入力に応じてＵＩ（ユーザインタフェース）オブジェクトの作成、画面内での配置、属性の設定等を行うことで、ＵＩ画面を生成、編集するプログラムである。演算部１１１は、ＵＩ編集プログラム２１０を読み出して実行することによって、ＵＩ画面の生成、編集を実行する。ＵＩ編集部１１は、編集中のＵＩ画面すなわちＵＩ編集画面１４０を、表示部１４に表示させる。
【００３０】
操作入力部１２は、例えば、マウスやキーボードからなり、プログラマ等のＵＩ開発支援装置１０の操作者から操作入力を受け付ける。操作入力部１２は、受け付けた操作内容を、演算部１１１に出力する。
【００３１】
通信制御部１３は、ＰＬＣ（プログラマブルロジックコントローラ）等の制御装置との通信制御を実行する。
【００３２】
表示部１４は、例えば、液晶ディスプレイ等であり、ＵＩ編集部１１で編集されたＵＩ編集画面１４０を表示する。
【００３３】
図２は、ＵＩ編集画面の一例を示す図である。図２に示すように、ＵＩ編集画面１４０は、メインウィンドウ１４１と属性表示ウィンドウ１４２とポインタ４１とを含む。メインウィンドウ１４１と属性表示ウィンドウ１４２とは並んで表示されている。
【００３４】
メインウィンドウ１４１は、画面編集領域１４１１とツールバー１４１２とを有する。画面編集領域１４１１は、メインウィンドウ１４１の中央の略全域を占めている。
【００３５】
画面編集領域１４１１には、ＵＩオブジェクト５１、５２等の作成したＵＩオブジェクトが配置されている。ＵＩオブジェクトとは、ボタン、ランプ等を表す図形、数値を表示するための枠等である。
【００３６】
ツールバー１４１２は、これらＵＩオブジェクトの作成に用いるツールが配置されており、例えば、プログラマは、ツールバー１４１２のツールを選択して、画面編集領域１４１１に所定の処理を実行することで、ＵＩオブジェクトの作成を実現する。
【００３７】
属性表示ウィンドウ１４２には、画面編集領域１４１１において、その時点で選択されているＵＩオブジェクトの各種の属性が配置されている。属性とは、ＵＩオブジェクトの名称、種類、ＵＩオブジェクトに設定された変数、図形の形、色、大きさ、配置位置等を含む。
【００３８】
（一覧表示）
図３は、複数のＵＩオブジェクトの一覧の生成方法を示すフローチャートである。図４は、複数のＵＩオブジェクトの一覧の第１表示態様を示す図である。図５は、複数のＵＩオブジェクトの一覧の第２表示態様を示す図である。
【００３９】
ＵＩ編集部１１は、図３に示す処理を実行することによって、ＵＩ編集画面１４０の画面編集領域１４１１内に複数のＵＩオブジェクトが重なっている場合に、図４または図５に示すような複数のＵＩオブジェクトの一覧を生成し、ＵＩ編集画面１４０内に配置する。
【００４０】
まず、ＵＩ編集部１１は、ＵＩ編集画面１４０におけるポインタ４１の位置（座標）を検出する（Ｓ１０１）。
【００４１】
ＵＩ編集部１１は、画面編集領域１４１１におけるポインタ４１の位置がＵＩオブジェクトに重なっているか否かを検出する（Ｓ１０２）。これは、例えば、画面編集領域１４１１におけるＵＩオブジェクトの領域は、二次元の座標で記憶されている。ＵＩ編集部１１は、ポインタ４１の位置座標が当該二次元の座標で定義されるＵＩオブジェクトの領域内にあれば、ポインタとＵＩオブジェクトとが重なっていると判定する。このポインタ４１をＵＩオブジェクトに重ねる操作が、一覧表示用の操作に対応する。
【００４２】
ＵＩ編集部１１は、ポインタ４１がＵＩオブジェクトの領域内に無ければ（Ｓ１０２：ＮＯ）、次のポインタ４１への操作入力まで待機する。
【００４３】
図４に示すように、ＵＩ編集部１１は、ポインタ４１がＵＩオブジェクトに重なっていれば（Ｓ１０２：ＹＥＳ）、当該ＵＩオブジェクトに対して、他のＵＩオブジェクトが重なっているか否かを検出する（Ｓ１０３）。例えば、ＵＩ編集部１１は、新たなＵＩオブジェクトの編集、登録時に、既にあるＵＩオブジェクトとの重なりを検出する。そして、ＵＩ編集部１１は、重なっている複数のＵＩオブジェクトを、そのＺ方向の位置関係とともに記憶しておく。これにより、その後の編集では、ＵＩ編集部１１は、ＵＩオブジェクトの重なり、Ｚ方向の位置関係、すなわち、最表層のＵＩオブジェクトから裏側に順次並ぶＵＩオブジェクトの位置関係を検出できる。
【００４４】
ＵＩ編集部１１は、画面編集領域１４１１においてポインタ４１が重なるＵＩオブジェクトに対して、複数のＵＩオブジェクトが重なっていれば（Ｓ１３０：ＹＥＳ）、重なっているＵＩオブジェクトの一覧５００を生成し（Ｓ１０４）、図４に示すように、ＵＩ編集画面１４０内に配置する。
【００４５】
一覧５００には、ポインタ４１が重なるＵＩオブジェクト５１と、このＵＩオブジェクト５１に重なるＵＩオブジェクト５２およびＵＩオブジェクト５３とが含まれている。また、一覧５００では、ＵＩオブジェクト５１、ＵＩオブジェクト５２、ＵＩオブジェクト５３は、ＵＩ編集プログラム２１０によって設定されている表層側から順に合わせて、配置される。
【００４６】
このような処理によって、プログラマは、ＵＩ編集画面１４０においてＵＩオブジェクトにポインタを重ねるだけで、このＵＩオブジェクトによってＵＩ編集画面１４０では隠れている他のＵＩオブジェクトを、容易に視認できる。これにより、プログラマは、隠れているＵＩオブジェクトの編集のし忘れ等の編集ミスを抑制できる。また、プログラマは、表層からの複数のＵＩオブジェクトの並び順を把握できる。
【００４７】
この際、図４に示すように、ＵＩ編集部１１は、ＵＩオブジェクト５２を、より表層側のＵＩオブジェクト５１に部分的に重ね、ＵＩオブジェクト５２の一部を敢えて視認できないように配置する。同様に、ＵＩ編集部１１は、ＵＩオブジェクト５３を、より表層側のＵＩオブジェクト５２に部分的に重ね、ＵＩオブジェクト５３の一部を敢えて視認できないように配置する。これにより、プログラマは、ＵＩオブジェクト５１、５２、５３の表層からの順を、より分かり易く視認できる。
【００４８】
さらに、図４に示すように、ＵＩ編集部１１は、表層側から裏側に向けて、ＵＩオブジェクトを徐々に小さく表示するように設定する。これにより、プログラマは、ＵＩオブジェクト５１、５２、５３の表層からの順を、より直感的に理解し易い。
【００４９】
また、ＵＩ編集部１１は、ポインタ４１が重ねられたＵＩオブジェクト５１に近接させて一覧５００を配置する。これにより、プログラムは、ＵＩ編集画面１４０内のどのＵＩオブジェクトに他のＵＩオブジェクトが隠れているかを視認し易い。
【００５０】
なお、ＵＩ編集部１１は、図５に示すような一覧の設定を行うこともできる。図５は、複数のＵＩオブジェクトの一覧の第２表示態様を示す図である。
【００５１】
図５に示す表示態様では、ＵＩ編集部１１は、ＵＩオブジェクト５１、５２、５３をＵＩ編集画面１４０の縦方向に順に並べる一覧５００を生成して、ＵＩ編集画面１４０内に配置する。この設定であっても、図４と同様に、ＵＩオブジェクトによってＵＩ編集画面１４０では隠れている他のＵＩオブジェクトを、容易に視認できる。また、プログラマは、表層からの複数のＵＩオブジェクトの並び順を把握できる。さらに、図５の表示態様では、重なる複数のＵＩオブジェクトの大きさを変更することなく、表層側からの並びを分かり易く表示できる。
【００５２】
なお、上述の説明では、ポインタ４１がＵＩオブジェクト５１に重なったことを検出して、一覧５００を配置する態様を示した。しかしながら、操作入力部１２としてキーボード等を備えており、当該キーボードにおいて所定のキー入力等が行われた時に、一覧５００を配置することも可能である。この場合、所定のキー入力等が一覧表示用の操作となる。
【００５３】
（一覧表示の解除）
ＵＩ編集部１１は、一覧５００の表示解除を次のように行う。
【００５４】
図６は、複数のＵＩオブジェクトの一覧表示の解除方法を示すフローチャートである。図７は、複数のＵＩオブジェクトの一覧表示の解除時のＵＩ編集画面の状態を示す図である。
【００５５】
ＵＩ編集部１１は、上述の状態においてＵＩオブジェクトの一覧５００を表示させる（Ｓ２０１）。この間、ＵＩ編集部１１は、ポインタ４１の位置を検出している（Ｓ２０２）。ＵＩ編集部１１は、ポインタ４１がＵＩオブジェクト５１に重なっているか否かを検出する（Ｓ２０３）。これは、上述の図３に示すフローチャートの方法によって実現できる。
【００５６】
ＵＩ編集部１１は、ポインタ４１とＵＩオブジェクト５１とが重なっていれば（Ｓ２０３：ＮＯ）、一覧５００の配置を継続させる（Ｓ２０１）。
【００５７】
ＵＩ編集部１１は、ポインタ４１とＵＩオブジェクト５１とが重なっていなければ（Ｓ２０３：ＹＥＳ）、ポインタ４１が解除用領域にあるか否かを検出する（Ｓ２０４）。
【００５８】
解除用領域とは、例えば、図７に示すように、ＵＩオブジェクト５１の領域に対して所定距離で広げた領域ＺＣよりも外側の領域である。
【００５９】
ＵＩ編集部１１は、ポインタ４１が解除用領域になければ（Ｓ２０４：ＮＯ）、一覧５００の配置を継続させる（Ｓ２０１）。
【００６０】
ＵＩ編集部１１は、ポインタ４１が解除用領域にあれば（Ｓ２０４：ＹＥＳ）、ＵＩ編集画面１４０から一覧５００を削除し、一覧表示を解除する（Ｓ２０５）。
【００６１】
このような処理によって、プログラマは、ポインタ４１の移動だけで、一覧５００の表示を解除でき、通常のＵＩ編集画面１４０による編集を復帰できる。
【００６２】
なお、上述の説明では、ポインタ４１が解除用領域に入ることを条件として、一覧５００の表示を解除したが、さらに、一覧５００の表示の解除に遅延時間を設けてもよい。具体的には、ＵＩ編集部１１は、ポインタ４１が解除用領域内に入ることを検出し、遅延時間分に相当する時間に亘ってポインタ４１が解除用領域から外れない場合に、一覧５００の表示を解除する。
【００６３】
（編集対象のＵＩオブジェクトの変更）
ＵＩ編集部１１は、編集対象のＵＩオブジェクトを次のように切り替えする。
【００６４】
図８は、本編集対象のＵＩオブジェクトの切り替え方法を示すフローチャートである。図９は、編集対象のＵＩオブジェクトの切り替えの作業時のＵＩ編集画面の状態を示す図である。
【００６５】
ＵＩ編集部１１は、上述の状態においてＵＩオブジェクトの一覧５００を表示させる（Ｓ３０１）。この間、ＵＩ編集部１１は、ポインタ４１の位置を検出している（Ｓ３０２）。
【００６６】
ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクトと重なっているか否かを検出する（Ｓ３０３）。ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクトと重なっていなければ（Ｓ３０３：ＮＯ）、ＵＩオブジェクトの一覧５００の表示を継続する。
【００６７】
ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクトと重なっていれば（Ｓ３０３：ＹＥＳ）、ポインタ４１が重なるＵＩオブジェクトに応じて、ＵＩ編集画面１４０の更新を行う（Ｓ３０４）。
【００６８】
具体的には、ＵＩ編集部１１は、ポインタ４１が重なるＵＩオブジェクトを、ＵＩ編集画面１４０における最表層のＵＩオブジェクトに切り替える。これに伴い、属性表示ウィンドウ１４２の表示も、切り替え後の最表層のＵＩオブジェクトに対応する内容に切り替える。例えば、図９の例であれば、ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクト５２に重なっていれば、ＵＩ編集画面１４０の最表層に表示されているＵＩオブジェクト５１をＵＩオブジェクト５２に切り替える。これに伴い、ＵＩ編集部１１は、属性表示ウィンドウ１４２の表示を、ＵＩオブジェクト５１に対応する内容から、ＵＩオブジェクト５２に対応する内容に切り替える。そして、ＵＩ編集部１１は、ＵＩオブジェクト５１に換えて、ＵＩオブジェクト５２の編集を可能にする。
【００６９】
このような処理によって、プログラマは、重なっている複数のＵＩオブジェクトにおける編集対象のＵＩオブジェクトを容易に切り替えることができる。
【００７０】
（編集対象のＵＩオブジェクトの変更）
ＵＩ編集部１１は、重なっている複数のＵＩオブジェクトの属性の統一化を次のように実行する。
【００７１】
図１０は、重なっている複数のＵＩオブジェクトの属性の統一化の方法を示すフローチャートである。図１１は、重なっている複数のＵＩオブジェクトの属性の統一化の作業時のＵＩ編集画面の状態を示す図である。
【００７２】
ＵＩ編集部１１は、上述の状態においてＵＩオブジェクトの一覧５００を表示させる（Ｓ４０１）。この間、ＵＩ編集部１１は、ポインタ４１の位置を検出している（Ｓ４０２）。
【００７３】
ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクトと重なっているか否かを検出する（Ｓ４０３）。ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクトと重なっていなければ（Ｓ４０３：ＮＯ）、ＵＩオブジェクトの一覧５００の表示を継続する。
【００７４】
ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクトと重なっていれば（Ｓ４０３：ＹＥＳ）、操作入力部１２から統一化の操作を受け付けているか否かを検出する（Ｓ４０４）。ＵＩ編集部１１は、統一化の操作を受け付けていなければ（Ｓ４０４：ＮＯ）、ＵＩオブジェクトの一覧５００の表示を継続する。
【００７５】
ＵＩ編集部１１は、統一化の操作を受け付けると（Ｓ４０４：ＹＥＳ）、操作内容に応じて、一覧５００に含まれる複数のＵＩオブジェクト、すなわち、ＵＩ編集画面１４０において重なっている複数のＵＩオブジェクトの属性の統一化を行う（Ｓ４０５）。そして、ＵＩ編集部１１は、統一内容に応じて、ＵＩ編集画面１４０の構成を更新する（Ｓ４０６）。
【００７６】
例えば、図１１の例であれば、一覧５００に含まれるＵＩオブジェクト５１、ＵＩオブジェクト５２、および、ＵＩオブジェクト５３は、サイズと中心位置が異なる。
【００７７】
ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクト５１に重なっており、統一化の操作（例えば、操作入力部１２であるマウスの右クリック等）に応じて、統一化の項目が記載されたコンテキストメニューを配置する。ＵＩ編集部１１は、さらに、コンテキストメニューにおいて、サイズと位置の統一の項目を選択する操作を受け付けると、ＵＩオブジェクト５１とともに一覧５００に含まれる複数のＵＩオブジェクト５２、５３のサイズと位置を、ＵＩオブジェクト５１のサイズと位置に統一する。これにより、ＵＩオブジェクト５１、ＵＩオブジェクト５２、および、ＵＩオブジェクト５３のサイズと中心位置は、ＵＩオブジェクト５１のサイズと中心位置に統一される。
【００７８】
なお、図１１に示す例において、属性の統一が選択されれば、ＵＩ編集部１１は、ＵＩオブジェクト５１、ＵＩオブジェクト５２、および、ＵＩオブジェクト５３における変更可能な属性を統一する。
【００７９】
また、この統一化の処理に応じて、ＵＩ編集部１１は、メインウィンドウ１４１のみでなく、属性表示ウィンドウ１４２の内容も変更する。
【００８０】
これにより、プログラマは、重なっている複数のＵＩオブジェクトの属性の統一化を容易に行うことができる。
【００８１】
（ＵＩオブジェクトの順番の変更）
ＵＩ編集部１１は、重なっている複数のＵＩオブジェクトの順番の変更を次のように実行する。
【００８２】
図１２は、重なっている複数のＵＩオブジェクトの順番の変更の方法を示すフローチャートである。図１３は、重なっている複数のＵＩオブジェクトの順番の変更の作業時のＵＩ編集画面の状態を示す図である。図１４は、重なっている複数のＵＩオブジェクトの順番の変更後のＵＩ編集画面の状態を示す図である。
【００８３】
ＵＩ編集部１１は、上述の状態においてＵＩオブジェクトの一覧５００を表示させる（Ｓ５０１）。この間、ＵＩ編集部１１は、ポインタ４１の位置を検出している（Ｓ５０２）。
【００８４】
ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクトと重なっているか否かを検出する（Ｓ５０３）。ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクトと重なっていなければ（Ｓ５０３：ＮＯ）、ＵＩオブジェクトの一覧５００の表示を継続する。
【００８５】
ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクトと重なっていれば（Ｓ５０３：ＹＥＳ）、操作入力部１２からＵＩオブジェクトの順番変更の操作を受け付けているか否かを検出する（Ｓ５０４）。ＵＩ編集部１１は、順番変更の操作を受け付けていなければ（Ｓ５０４：ＮＯ）、ＵＩオブジェクトの一覧５００の表示を継続する。
【００８６】
ＵＩ編集部１１は、順番変更の操作を受け付けると（Ｓ５０４：ＹＥＳ）、操作内容に応じて、一覧５００に含まれる複数のＵＩオブジェクト、すなわち、ＵＩ編集画面１４０において重なっている複数のＵＩオブジェクトの表示順番を変更する（Ｓ５０５）。そして、ＵＩ編集部１１は、変更内容に応じて、ＵＩ編集画面１４０の構成を更新する（Ｓ５０６）。
【００８７】
例えば、図１３の例であれば、一覧５００では、ＵＩオブジェクト５１、ＵＩオブジェクト５２、および、ＵＩオブジェクト５３は、この順で並んでいる。
【００８８】
ＵＩ編集部１１は、ポインタ４１が一覧５００内のＵＩオブジェクト５２に重なっており、図１３に示すように、ＵＩオブジェクト５２をＵＩオブジェクト５１よりも表層側に移動させる順番変更の操作（例えば、操作入力部１２であるマウスのドラッグ＆ドロップ等）を受け付ける。この順番変更の操作の受付によって、ＵＩ編集部１１は、図１４に示すように、一覧５００にて、表層側からＵＩオブジェクト５２、ＵＩオブジェクト５１、ＵＩオブジェクト５３の順に並ぶように、ＵＩオブジェクトの順番を変更する。さらに、ＵＩ編集部１１は、画面編集領域１４１１において、図１３に示すＵＩオブジェクト５１を配置する構成から、図１４に示すＵＩオブジェクト５２を配置する構成に変更する。これと同時に、ＵＩ編集部１１は、メインウィンドウ１４１のみでなく、属性表示ウィンドウ１４２の内容も、ＵＩオブジェクト５１の内容からＵＩオブジェクト５２の内容に変更する。
【００８９】
これにより、プログラマは、重なっている複数のＵＩオブジェクトの順番の変更を容易に行うことができる。
【００９０】
なお、上述の説明では、重なっている複数のＵＩオブジェクトがグループ化されていない態様を示したが、重なっている複数のＵＩオブジェクトがグループ化されていても、上述の処理を適用することができる。すなわち、グループ化されている複数のＵＩオブジェクトが少なくとも部分的に互いに重なっている時に、上述の処理と同様に、一覧表示、一覧表示の解除、編集対象の変更等を行うことができる。
【００９１】
また、ＵＩオブジェクトは、操作入力の受け付けを行うものに限らず、単に表示されるものも含まれる。
【００９２】
また、上述の複数の処理は、個別に実行されるものでなくてもよく、上述の複数の処理は、組み合わせて実行されてもよい。
【符号の説明】
【００９３】
１０：ＵＩ開発支援装置
１１：ＵＩ編集部
１２：操作入力部
１３：通信制御部
１４：表示部
４１：ポインタ
５１、５２、５３：ＵＩオブジェクト
１１１：演算部
１１２：記憶部
１４０：ＵＩ編集画面
１４１：メインウィンドウ
１４２：属性表示ウィンドウ
２１０：ＵＩ編集プログラム
５００：一覧
１４１１：画面編集領域
１４１２：ツールバー
【図１】
2019040380.tif 000003
【図２】
2019040380.tif 000004
【図３】
2019040380.tif 000005
【図４】
2019040380.tif 000006
【図５】
2019040380.tif 000007
【図６】
2019040380.tif 000008
【図７】
2019040380.tif 000009
【図８】
2019040380.tif 000010
【図９】
2019040380.tif 000011
【図１０】
2019040380.tif 000012
【図１１】
2019040380.tif 000013
【図１２】
2019040380.tif 000014
【図１３】
2019040380.tif 000015
【図１４】
2019040380.tif 000016