特開 2024-143823 ＵＩ部品作成装置、ＵＩ部品作成方法及びプログラム

(19)【発行国】日本国特許庁(JP)

(12)【公報種別】公開特許公報(A)

(11)【公開番号】P2024143823

(43)【公開日】2024-10-11

(54)【発明の名称】ＵＩ部品作成装置、ＵＩ部品作成方法及びプログラム

(51)【国際特許分類】

   G06F 8/38 20180101AFI20241003BHJP

   G06F 3/0484 20220101ALI20241003BHJP

【ＦＩ】

G06F8/38

G06F3/0484

【審査請求】有

【請求項の数】5

【出願形態】ＯＬ

(21)【出願番号】P 2023056723

(22)【出願日】2023-03-30

(71)【出願人】

【識別番号】000102717

【氏名又は名称】ＮＴＴテクノクロス株式会社

(74)【代理人】

【識別番号】100107766

【弁理士】

【氏名又は名称】伊東 忠重

(74)【代理人】

【識別番号】100070150

【弁理士】

【氏名又は名称】伊東 忠彦

(72)【発明者】

【氏名】小井沼 和哉

(72)【発明者】

【氏名】川本 裕一郎

(72)【発明者】

【氏名】渡辺 健太

(72)【発明者】

【氏名】岡田 仁之

【テーマコード（参考）】

5B376

5E555

【Ｆターム（参考）】

5B376BC21

5B376BC43

5B376FA16

5E555AA76

5E555AA79

5E555BA02

5E555BA05

5E555BA06

5E555BA14

5E555BA68

5E555BA69

5E555BB02

5E555BB05

5E555BB06

5E555BB14

5E555BC17

5E555BC18

5E555CA02

5E555CA12

5E555CA18

5E555CB02

5E555CB08

5E555CB33

5E555CB39

5E555CC05

5E555DB02

5E555DB20

5E555DB21

5E555DB25

5E555DB49

5E555DB53

5E555DC09

5E555DC25

5E555DC33

5E555DC35

5E555DC45

5E555DD06

5E555EA07

5E555FA00

(57)【要約】      （修正有）

【課題】Ｗｅｂページ上に重畳表示されるＵＩ部品の作成を支援するＵＩ部品作成装置、方法及びプログラムを提供する。
【解決手段】作成者端末、利用者端末及び業務システム３がネットワークを介して通信可能に接続される業務支援システムにおいて、ＵＩ上に重畳表示されるＵＩ部品を表す拡張ＵＩ部品を作成するためのＵＩ部品作成者端末は、ＵＩを定義する第１の定義情報に基づいて、ＵＩ部品の種類毎にＵＩ部品の表示態様を特定する特定部１２４と、拡張ＵＩ部品の種類を指定するためのユーザ操作に応じて、指定された種類のＵＩ部品の表示態様と同一又は類似する表示態様の拡張ＵＩ部品を作成対象として画面上に表示する表示制御部１２１と、拡張ＵＩ部品を作成するためのユーザ操作に応じて、ＵＩの識別情報と、拡張ＵＩ部品を定義する第２の定義情報とを対応付けた情報を作成する作成部１２５と、を有する。
【選択図】図２

【特許請求の範囲】

【請求項1】

ＵＩ上に重畳表示されるＵＩ部品を表す拡張ＵＩ部品を作成するためのＵＩ部品作成装置であって、
前記ＵＩを定義する第１の定義情報に基づいて、前記ＵＩ部品の種類毎に、前記ＵＩ部品の表示態様を特定する特定部と、
前記拡張ＵＩ部品の種類を指定するためのユーザ操作に応じて、前記指定された種類のＵＩ部品の表示態様と同一又は類似する表示態様の拡張ＵＩ部品を作成対象として画面上に表示する表示制御部と、
前記拡張ＵＩ部品を作成するためのユーザ操作に応じて、前記ＵＩの識別情報と、前記拡張ＵＩ部品を定義する第２の定義情報とを対応付けた情報を作成する作成部と、
を有するＵＩ部品作成装置。

【請求項2】

前記第１の定義情報は、前記ＵＩを定義するＨＴＭＬ情報であり、
前記特定部は、
前記ＨＴＭＬ情報に含まれるフォームタグを解析することで、前記ＵＩ部品の種類毎に、前記ＵＩ部品の表示態様を特定する、請求項１に記載のＵＩ部品作成装置。

【請求項3】

前記表示態様には、前記ＵＩ部品の色、高さ及び幅、前記ＵＩ部品にテキストが設定可能な場合には前記テキストのフォント種類、が含まれる、請求項１又は２に記載のＵＩ部品作成装置。

【請求項4】

ＵＩ上に重畳表示されるＵＩ部品を表す拡張ＵＩ部品を作成するためのコンピュータが、
前記ＵＩを定義する第１の定義情報に基づいて、前記ＵＩ部品の種類毎に、前記ＵＩ部品の表示態様を特定する特定手順と、
前記拡張ＵＩ部品の種類を指定するためのユーザ操作に応じて、前記指定された種類のＵＩ部品の表示態様と同一又は類似する表示態様の拡張ＵＩ部品を作成対象として画面上に表示する表示制御手順と、
前記拡張ＵＩ部品を作成するためのユーザ操作に応じて、前記ＵＩの識別情報と、前記拡張ＵＩ部品を定義する第２の定義情報とを対応付けた情報を作成する作成手順と、
を実行するＵＩ部品作成方法。

【請求項5】

ＵＩ上に重畳表示されるＵＩ部品を表す拡張ＵＩ部品を作成するためのコンピュータに、
前記ＵＩを定義する第１の定義情報に基づいて、前記ＵＩ部品の種類毎に、前記ＵＩ部品の表示態様を特定する特定手順と、
前記拡張ＵＩ部品の種類を指定するためのユーザ操作に応じて、前記指定された種類のＵＩ部品の表示態様と同一又は類似する表示態様の拡張ＵＩ部品を作成対象として画面上に表示する表示制御手順と、
前記拡張ＵＩ部品を作成するためのユーザ操作に応じて、前記ＵＩの識別情報と、前記拡張ＵＩ部品を定義する第２の定義情報とを対応付けた情報を作成する作成手順と、
を実行させるプログラム。

【発明の詳細な説明】

【技術分野】

【0001】

本開示は、ＵＩ部品作成装置、ＵＩ部品作成方法及びプログラムに関する。

【背景技術】

【0002】

Ｗｅｂサーバから提供されるＷｅｂページ上に付箋やボタン等といったＵＩ（ユーザインタフェース）部品を重畳表示させる技術が従来から知られている（非特許文献１）。この非特許文献１では、編集ツールと呼ばれるプログラムを利用して、対象のＷｅｂページに重畳表示させたいＵＩ部品を作成することができる。

【先行技術文献】

【非特許文献】

【0003】

【非特許文献1】BizFront/SmartUI | NTTテクノクロス，インターネット＜ＵＲＬ：https://www.ntt-tx.co.jp/products/bizfront/sui/＞

【発明の概要】

【発明が解決しようとする課題】

【0004】

しかしながら、対象のＷｅｂページに重畳表示させたいＵＩ部品の表示態様を確認したい場合、上記の非特許文献１に記載されている技術では、編集ツールを一度閉じた後にＷｅｂブラウザで対象のＷｅｂページを開く必要がある。

【0005】

本開示は、上記の点に鑑みてなされたもので、Ｗｅｂページ上に重畳表示されるＵＩ部品の作成を支援できる技術を提供する。

【課題を解決するための手段】

【0006】

本開示の一態様によるＵＩ部品作成装置は、ＵＩ上に重畳表示されるＵＩ部品を表す拡張ＵＩ部品を作成するためのＵＩ部品作成装置であって、前記ＵＩを定義する第１の定義情報に基づいて、前記ＵＩ部品の種類毎に、前記ＵＩ部品の表示態様を特定する特定部と、前記拡張ＵＩ部品の種類を指定するためのユーザ操作に応じて、前記指定された種類のＵＩ部品の表示態様と同一又は類似する表示態様の拡張ＵＩ部品を作成対象として画面上に表示する表示制御部と、前記拡張ＵＩ部品を作成するためのユーザ操作に応じて、前記ＵＩの識別情報と、前記拡張ＵＩ部品を定義する第２の定義情報とを対応付けた情報を作成する作成部と、を有する。

【発明の効果】

【0007】

Ｗｅｂページ上に重畳表示されるＵＩ部品の作成を支援できる技術が提供される。

【図面の簡単な説明】

【0008】

【図1】本実施形態に係る業務支援システムの全体構成の一例を示す図である。

【図2】本実施形態に係る作成者端末の機能構成の一例を示す図である。

【図3】本実施形態に係る利用者端末の機能構成の一例を示す図である。

【図4】本実施形態に係る拡張ＵＩ作成処理の一例を示すフローチャートである。

【図5】拡張ＵＩ作成画面の一例を示す図（その１）である。

【図6】Ｗｅｂページ選択画面の一例を示す図である。

【図7】Ｗｅｂページ画面の一例を示す図である。

【図8】拡張ＵＩ作成画面の一例を示す図（その２）である。

【図9】プルダウンリストに関する拡張ＵＩ部品作成欄の一例を示す図である。

【図10】本実施形態に係る拡張ＵＩ表示処理の一例を示すフローチャートである。

【図11】拡張ＵＩが重畳表示されたＷｅｂページ画面の一例を示す図である。

【発明を実施するための形態】

【0009】

以下、本発明の一実施形態について説明する。以下では、Ｗｅｂサーバとして何等かの業務に関するＷｅｂページを提供する業務システムを想定し、そのＷｅｂページにおける入力等を支援するためのＵＩ部品を重畳表示させることが可能な業務支援システム１について説明する。ただし、業務システムは一例であって、Ｗｅｂページを提供するＷｅｂサーバであれば業務システムに限られるものではない。

【0010】

なお、以下では、Ｗｅｂページ上に重畳表示されるＵＩ部品のことを「拡張ＵＩ部品」ともいい、またこれらの拡張ＵＩ部品によって実現されるＵＩ（例えば、１つ以上の拡張ＵＩ部品が配置され、Ｗｅｂページ上に重畳表示されるレイヤ）のことを「拡張ＵＩ」ともいう。以下では、一例として、拡張ＵＩ部品としては、ＨＴＭＬ（HyperText Markup Language）情報で定義されるフォーム部品（例えば、ボタン、テキストボックス、パスワードボックス、ラジオボタン、チェックボックス、プルダウンリスト（又は、プルダウンメニュー、ドロップダウンリスト、ドロップダウンメニュー等と呼ばれることもある。）、リストボックス、テキストエリア等）を想定する。ただし、拡張ＵＩ部品はＨＴＭＬ情報で定義されるフォーム部品に限定されるものではない。

【0011】

＜全体構成例＞
本実施形態に係る業務支援システム１の全体構成例を図１に示す。図１に示すように、本実施形態に係る業務支援システム１には、作成者端末１０と、利用者端末２０と、業務システム３０とが含まれる。また、作成者端末１０、利用者端末２０及び業務システム３０は、例えば、社内ＬＡＮ（Local Area Network）等を含むネットワーク４０を介して通信可能に接続される。

【0012】

作成者端末１０は、拡張ＵＩを作成する者（以下、作成者ともいう。）が利用する各種端末である。作成者端末１０には、業務システム３０から提供されるＷｅｂページを表示可能なＷｅｂブラウザ１１０と、拡張ＵＩを作成するための編集ツール１２０とがインストールされている。なお、作成者端末１０としては、例えば、ＰＣ（パーソナルコンピュータ）、タブレット端末、スマートフォン等を利用することができる。

【0013】

利用者端末２０は、業務システム３０から提供されたＷｅｂページ上で何等かの業務を行う者（以下、利用者ともいう。）が利用する各種端末である。利用者端末２０には、業務システム３０から提供されるＷｅｂページを表示可能なＷｅｂブラウザ２１０と、Ｗｅｂブラウザ２１０によって表示されたＷｅｂページ上に拡張ＵＩを重畳表示させる表示ツール２２０とがインストールされている。なお、利用者端末２０としては、例えば、ＰＣ、タブレット端末、スマートフォン等を利用することができる。

【0014】

業務システム３０は、Ｗｅｂサーバとして機能を有し、何等かの業務（例えば、経費精算や報告書作成等）に関する各種Ｗｅｂページを作成者端末１０及び利用者端末２０に提供する。業務システム３０としては、例えば、汎用サーバ等を利用することができる。

【0015】

なお、図１に示す業務支援システム１の全体構成は一例であって、これに限られるものではない。例えば、図１に示す業務支援システム１では、作成者端末１０、利用者端末２０及び業務システム３０がいずれも１台のみ図示されているが、作成者端末１０、利用者端末２０及び業務システム３０はそれぞれ複数台存在してもよい。

【0016】

＜機能構成例＞
≪作成者端末１０≫
本実施形態に係る作成者端末１０の機能構成例を図２に示す。図２に示すように、本実施形態に係る作成者端末１０は、表示制御部１２１と、入力受付部１２２と、画面取得部１２３と、表示態様特定部１２４と、ルールファイル作成部１２５とを有する。これら各部は、例えば、作成者端末１０にインストールされた編集ツール１２０が、ＣＰＵ（Central Processing Unit）等のプロセッサに実行させる処理により実現される。また、本実施形態に係る作成者端末１０は、記憶部１２６を有する。記憶部１２６は、例えば、ＨＤＤ（Hard Disk Drive）、ＳＳＤ（Solid State Drive）、フラッシュメモリ等の記憶装置により実現される。

【0017】

表示制御部１２１は、拡張ＵＩを作成するための各種画面（後述する拡張ＵＩ作成画面、Ｗｅｂページ選択画面等）をディスプレイ等の表示装置上に表示する。

【0018】

入力受付部１２２は、表示制御部１２１によって表示された各種画面上での各種入力操作（例えば、マウス等のポインティングデバイスによる各種操作、キーボードによる各種操作、タッチパネルによる各種操作等）を受け付ける。

【0019】

画面取得部１２３は、Ｗｅｂブラウザ１１０によって表示されているＷｅｂページの画面情報を取得する。ここで、画面情報には、ＷｅｂページのＵＲＬ（Uniform Resource Locator）と、当該Ｗｅｂページを画面キャプチャしたキャプチャ画像（より正確には、当該Ｗｅｂブラウザ１１０によって表示されている当該Ｗｅｂページの画面を画面キャプチャしたキャプチャ画像）と、当該ＷｅｂページのＨＴＭＬ情報等の画面定義情報とが含まれる。

【0020】

表示態様特定部１２４は、画面取得部１２３によって取得された画面情報に含まれる画面定義情報を用いて、当該ＷｅｂページのＵＩ部品（例えば、ボタン、テキストボックス、パスワードボックス、ラジオボタン、チェックボックス、プルダウンリスト、リストボックス、テキストエリア等といったフォーム部品）の表示態様を特定する。ここで、表示態様とは、ＵＩ部品の色、大きさ（高さ及び幅）、ＵＩ部品で利用されているフォント種類等といった見た目のことである。ただし、これ以外にも、表示態様は、例えば、装飾やデザイン等といった様々な見た目を表すものであってもよい。

【0021】

ルールファイル作成部１２５は、表示制御部１２１によって表示された拡張ＵＩ作成画面上で拡張ＵＩが作成された場合、その拡張ＵＩをＷｅｂページ上に重畳表示させるための条件が定義されたルールファイルを作成する。ここで、ルールファイルには、例えば、拡張ＵＩを重畳させるＷｅｂページ（以下、対象Ｗｅｂページともいう。）のＵＲＬと、当該拡張ＵＩの定義する情報（以下、拡張ＵＩ定義情報ともいう。）とが含まれる。また、拡張ＵＩ定義情報には、例えば、拡張ＵＩに含まれる各拡張ＵＩ部品をそれぞれ定義するＨＴＭＬ情報と、拡張ＵＩ上における各拡張ＵＩ部品それぞれの表示位置（表示座標）とが含まれる。なお、ルールファイルには、複数のＵＲＬと、これら複数のＵＲＬの各々に対応する複数の拡張ＵＩ定義情報とが含まれていてもよい。

【0022】

また、ルールファイル作成部は、ルールファイルを各利用者端末２０に配布する。このとき、ルールファイルの配布方法は特定の方法に限定されるものではなく、任意の方法で配布すればよい。例えば、ルールファイル作成部は、ネットワーク４０を介して各利用者端末２０にルールファイルを送信してもよいし、各利用者端末２０がアクセス可能なファイルサーバ等にルールファイルを保存してもよいし、各利用者に配布されるＵＳＢメモリ等といった外部記録媒体に保存してもよい。

【0023】

記憶部１２６は、拡張ＵＩを作成するために必要な情報（例えば、対象ＷｅｂページのＵＲＬ、キャプチャ画像、画面定義情報等）を記憶したり、ルールファイルを記憶したりする。

【0024】

≪利用者端末２０≫
本実施形態に係る利用者端末２０の機能構成例を図３に示す。図３に示すように、本実施形態に係る利用者端末２０は、ＵＲＬ取得部２２１と、拡張ＵＩ定義情報取得部２２２と、表示制御部２２３と、入力受付部２２４とを有する。これら各部は、例えば、利用者端末２０にインストールされた表示ツール２２０が、ＣＰＵ等のプロセッサに実行させる処理により実現される。また、本実施形態に係る利用者端末２０は、記憶部２２５を有する。記憶部２２５は、ＨＤＤ、ＳＳＤ、フラッシュメモリ等の記憶装置により実現される。

【0025】

ＵＲＬ取得部２２１は、Ｗｅｂブラウザ２１０によって表示されるＷｅｂページのＵＲＬを取得する。

【0026】

拡張ＵＩ定義情報取得部２２２は、記憶部２２５に記憶されているルールファイルを参照して、ＵＲＬ取得部２２１によって取得されたＵＲＬが対象ＷｅｂページのＵＲＬであるか否かを判定する。そして、拡張ＵＩ定義情報取得部２２２は、当該ＵＲＬが対象ＷｅｂページのＵＲＬであると判定した場合、当該ＵＲＬに対応付けられている拡張ＵＩ定義情報をルールファイルから取得する。

【0027】

表示制御部２２３は、拡張ＵＩ定義情報取得部２２２によって取得された拡張ＵＩ定義情報を用いて、Ｗｅｂブラウザ２１０によって表示されているＷｅｂページ上に拡張ＵＩを重畳表示させる。すなわち、表示制御部２２３は、例えば、当該拡張ＵＩ定義情報に含まれる各拡張ＵＩ部品のＨＴＭＬ情報をレンダリングし、その拡張ＵＩ部品に対応する表示位置に表示させる。このとき、表示制御部２２３は、例えば、操作及び表示を透過する透過レイヤを当該Ｗｅｂページ上に設定した上でその透過レイヤ上に拡張ＵＩ部品を配置してもよいし、各拡張ＵＩ部品の各々を含む範囲の各透過レイヤを当該Ｗｅｂページ上にそれぞれ設定した上でそれら各透過レイヤ上に各拡張ＵＩ部品をそれぞれ配置してもよい。

【0028】

入力受付部２２４は、表示制御部２２３によって表示された拡張ＵＩでの各種入力操作（例えば、マウス等のポインティングデバイスによる各種操作、キーボードによる各種操作、タッチパネルによる各種操作等）を受け付ける。

【0029】

記憶部２２５は、Ｗｅｂブラウザ２１０によって表示されているＷｅｂページ上に拡張ＵＩを重畳表示させるために必要な情報（例えば、作成者端末１０から配布されたルールファイル等）を記憶する。

【0030】

＜拡張ＵＩ作成処理の例＞
以下、本実施形態に係る拡張ＵＩ作成処理の一例について、図４を参照しながら説明する。以下では、作成者によって編集ツール１２０が起動されたものとする。また、Ｗｅｂブラウザ１１０によって１つ以上のＷｅｂページが表示されているものとする。

【0031】

まず、表示制御部１２１は、拡張ＵＩ作成画面を表示する（ステップＳ１０１）。例えば、表示制御部１２１は、図５に示す拡張ＵＩ作成画面１０００を表示する。

【0032】

図５に示す拡張ＵＩ作成画面１０００には、「画面の追加」ボタン１０１０と、キャプチャ画像表示欄１０２０と、「部品の追加」ボタン１０３０と、拡張ＵＩ一覧１０４０と、「テスト実行」ボタン１０５０と、「保存」ボタン１０６０とが含まれる。

【0033】

「画面の追加」ボタン１０１０は、後述するＷｅｂページ選択画面を表示するためのボタンである。キャプチャ画像表示欄１０２０は、後述するＷｅｂページ選択画面で選択された対象Ｗｅｂページのキャプチャ画像が表示される表示欄である。「部品の追加」ボタン１０３０は、キャプチャ画像表示欄１０２０上に後述する拡張ＵＩ部品作成欄を配置するためのボタンである。拡張ＵＩ一覧１０４０は、キャプチャ画像表示欄１０２０に配置されている拡張ＵＩ部品作成欄で作成された拡張ＵＩ部品の名称や種類等の一覧を表示する表示欄である。「テスト実行」ボタン１０５０は、キャプチャ画像表示欄１０２０に配置されている拡張ＵＩ部品作成欄で作成された拡張ＵＩ部品の表示テストを実行するためのボタンである。「保存」ボタン１０６０は、Ｗｅｂページ選択画面で選択された対象ＷｅｂページのＵＲＬと、各拡張ＵＩ部品作成欄で作成された拡張ＵＩ部品を当該対象Ｗｅｂページに表示させるための拡張ＵＩ定義情報とをルールファイルに保存するためのボタンである。

【0034】

以下では、図５に示す拡張ＵＩ作成画面１０００上で作成者によって「画面の追加」ボタン１０１０が押下されたものとして説明を続ける。

【0035】

入力受付部１２２は、「画面の追加」ボタン１０１０の押下操作（つまり、Ｗｅｂページ選択画面の表示操作）を受け付ける（ステップＳ１０２）。

【0036】

画面取得部１２３は、入力受付部１２２によってＷｅｂページ選択画面の表示操作が受け付けられると、Ｗｅｂブラウザ１１０によって表示されているＷｅｂページのＵＲＬと、当該Ｗｅｂページを画面キャプチャしたキャプチャ画像とを取得する（ステップＳ１０３）。このとき、例えば、当該Ｗｅｂブラウザ１１０がタブブラウザであり、複数のタブの各々にＷｅｂページが表示されている場合、画面取得部１２３は、各タブにそれぞれ表示されている各ＷｅｂページのＵＲＬとキャプチャ画像を取得する。また、例えば、作成者端末１０上で複数のＷｅｂブラウザ１１０が起動している場合、画面取得部１２３は、複数のＷｅｂブラウザ１１０の各々に関して、当該Ｗｅｂブラウザ１１０によって表示されているＷｅｂページのＵＲＬとキャプチャ画像とを取得する。

【0037】

なお、上記のステップＳ１０３ではＷｅｂページのＵＲＬとキャプチャ画像のみが取得されるものとしたが、これは一例であって、例えば、上記のステップＳ１０３でＷｅｂページの画面情報（つまり、ＵＲＬ、キャプチャ画像、画面定義情報等）が取得されてもよい。

【0038】

次に、表示制御部１２１は、Ｗｅｂページ選択画面を表示する（ステップＳ１０４）。例えば、表示制御部１２１は、図６に示すＷｅｂページ選択画面２０００を表示する。

【0039】

図６に示すＷｅｂページ選択画面２０００には、Ｗｅｂブラウザ選択欄２０１０と、Ｗｅｂページ画面選択欄２０２０と、「選択した画面を追加」ボタン２０３０と、「閉じる」ボタン２０４０とが含まれる。

【0040】

Ｗｅｂブラウザ選択欄２０１０は、作成者端末１０上で複数のＷｅｂブラウザ１１０が起動している場合に対象Ｗｅｂページの選択対象となるＷｅｂブラウザ１１０を選択するための選択欄である。図６に示す例では、「Ｗｅｂブラウザ１」が選択されている場合を表している。Ｗｅｂページ画面選択欄２０２０は、Ｗｅｂブラウザ１１０の各タブに表示されているＷｅｂページの中から対象ＷｅｂページとするＷｅｂページを選択するための選択欄である。図６に示す例では、２行目のＷｅｂページ（報告書作成ページ）が選択されている場合を表している。

【0041】

ここで、Ｗｅｂページ画面選択欄２０２０には、Ｗｅｂブラウザ１１０の各タブに表示されているＷｅｂページのＷｅｂページ名やＵＲＬの他に、上記のステップＳ１０３で取得されたキャプチャ画像（を縮小した画像）が表示される。例えば、Ｗｅｂページ画面選択欄２０２０の１行目には、当該Ｗｅｂブラウザ１１０の１つ目のタブに表示されているＷｅｂページのＷｅｂページ名「経費精算ページ」と、当該ＷｅｂページのＵＲＬ「ｈｔｔｐｓ：／／ｗｗｗ．ｈｏｇｅｈｏｇｅ．ｃｏ．ｊｐ／ｅｘ／」と、当該Ｗｅｂページのキャプチャ画像（を縮小した画像）２０２１とが表示されている。同様に、Ｗｅｂページ画面選択欄２０２０の２行目には、当該Ｗｅｂブラウザ１１０の２つ目のタブに表示されているＷｅｂページのＷｅｂページ名「報告書作成ページ」と、当該ＷｅｂページのＵＲＬ「ｈｔｔｐｓ：／／ｗｗｗ．ｈｏｇｅｈｏｇｅ．ｃｏ．ｊｐ／ｒｅｐｏｒｔ／」と、当該Ｗｅｂページのキャプチャ画像（を縮小した画像）２０２２とが表示されている。

【0042】

このように、Ｗｅｂページ画面選択欄２０２０には、選択対象となる各Ｗｅｂページのキャプチャ画像が表示される。これにより、例えば、Ｗｅｂページ名やＵＲＬのみが表示される場合と比較して、作成者は、自身が選択したい所望のＷｅｂページを視覚的に容易に特定することが可能となる。すなわち、対象のＷｅｂページに重畳表示されるＵＩ部品を作成するために複数のＷｅｂページの中から対象のＷｅｂページを選択する場合に、上記の非特許文献１に記載されている技術のようにＷｅｂページ名やＵＲＬから対象のＷｅｂページを選択する必要がないため、所望のＷｅｂページを視覚的に容易に特定及び選択することが可能となる。

【0043】

「選択した画面を追加」ボタン２０３０は、Ｗｅｂページ画面選択欄２０２０で選択れているＷｅｂページを対象Ｗｅｂページとして、拡張ＵＩ作成画面１０００に戻るためのボタンである。「閉じる」ボタン２０４０は、Ｗｅｂページ選択画面２０００を閉じるためのボタンである。なお、「×」ボタン２０５０でもＷｅｂページ選択画面２０００を閉じることができる。また、「ページ情報を取得」ボタン２０６０は、Ｗｅｂブラウザ１１０によって表示されているＷｅｂページのＵＲＬやキャプチャ画像等を取得し直してＷｅｂブラウザ選択欄２０１０を更新するためのボタンである。

【0044】

以下では、図６に示すＷｅｂページ選択画面２０００のＷｅｂページ画面選択欄２０２０で２行目のＷｅｂページ（Ｗｅｂページ名「報告書作成ページ」、ＵＲＬ「ｈｔｔｐｓ：／／ｗｗｗ．ｈｏｇｅｈｏｇｅ．ｃｏ．ｊｐ／ｒｅｐｏｒｔ／」）が選択された上で、作成者によって「選択した画面を追加」ボタン２０３０が押下されたものとして説明を続ける。また、Ｗｅｂブラウザ１１０によって表示されている当該Ｗｅｂページ（Ｗｅｂページ名「報告書作成ページ」）の画面は、例えば、図７に示すＷｅｂページ画面３０００であるものとする。図７に示すＷｅｂページ画面３０００には、報告書の記載項目の１つである「件名」を入力するための「件名」入力欄３０１０と、報告書の記載項目の１つである「実施目的」を入力するための「実施目的」入力欄３０２０と、報告書の記載項目の１つである「実施内容」を入力するための「実施内容」入力欄３０３０と、報告書を提出するためのボタンである「送信」ボタン３０４０と、報告書の提出を中止するためのボタンである「中止」ボタン３０５０とが含まれている。

【0045】

入力受付部１２２は、「選択した画面を追加」ボタン２０３０の押下操作（つまり、対象Ｗｅｂページの選択操作）を受け付ける（ステップＳ１０５）。

【0046】

次に、画面取得部１２３は、上記のステップＳ１０５で受け付けた選択操作によって選択された対象Ｗｅｂページの画面定義情報（例えば、ＨＴＭＬ情報等）を取得する（ステップＳ１０６）。なお、例えば、上記のステップＳ１０３で対象Ｗｅｂページの画面定義情報を含む画面情報が取得された場合、本ステップは実行されなくてもよい。

【0047】

次に、表示態様特定部１２４は、上記のステップＳ１０６で取得された画面定義情報を解析し、ＵＩ部品の種類毎に、そのＵＩ部品の表示態様を特定する（ステップＳ１０７）。すなわち、表示態様特定部１２４は、ＵＩ部品の種類毎に、対象Ｗｅｂページに含まれる各ＵＩ部品の表示態様を特定する。

【0048】

ここで、表示態様特定部１２４は、例えば、ＨＴＭＬ情報である画面定義情報に定義されているフォームタグを解析し、フォーム部品の種類（例えば、ボタン、テキストボックス、パスワードボックス、ラジオボタン、チェックボックス、プルダウンリスト、リストボックス、テキストエリア等）毎に、各フォーム部品の表示態様を特定する。これは、例えば、フォームタグに定義されているｉｎｐｕｔタグやｔｅｘｔａｒｅａタグ、ｓｅｌｅｃｔタグ等を解析し、フォーム部品の背景色、文字のフォント、文字色等といった表示態様を特定すればよい。

【0049】

なお、例えば、対象Ｗｅｂページの画面定義情報に定義されていない種類のフォーム部品に関しては、表示態様特定部１２４は、その種類に応じて予め設定されたデフォルトの表示態様を特定してもよいし、その種類に類似する種類のＵＩ部品の表示態様を特定してもよい。ここで、互いに類似する種類のＵＩ部品の例としては、例えば、プルダウンリストとリストボックス等が挙げられる。また、他の例としては、例えば、ラジオボタンとチェックボックス等が挙げられる。ただし、例えば、互いに類似するＵＩ部品が予め設定されていてもよい。

【0050】

次に、表示制御部１２１は、拡張ＵＩ作成画面を表示すると共に、対象Ｗｅｂページのキャプチャ画像を当該拡張ＵＩ作成画面上に表示する（ステップＳ１０８）。例えば、表示制御部１２１は、図８に示す拡張ＵＩ作成画面１０００を表示する。

【0051】

図８に示す拡張ＵＩ作成画面１０００のキャプチャ画像表示欄１０２０には、対象Ｗｅｂページのキャプチャ画像１０２１が表示されている。また、当該キャプチャ画像１０２１上には、当該対象Ｗｅｂページに対する拡張ＵＩの表示位置を決定するための座標平面（例えば、ｘｙ座標平面）が設定されている。作成者は、例えば、「部品の追加」ボタン１０３０を押下することで、拡張ＵＩ部品作成欄を当該キャプチャ画像１０２１上に配置することができる。また、この拡張ＵＩ部品作成欄は、例えば、ドラッグアンドドロップ操作等により、当該キャプチャ画像１０２１上の任意の位置に移動させることができる。これにより、作成者は、キャプチャ画像１０２１が表す対象Ｗｅｂページ上の任意の位置（表示位置、表示座標）に拡張ＵＩ部品を配置することが可能となる。図８に示す例では、拡張ＵＩ部品作成欄１１１０と、拡張ＵＩ部品作成欄１１２０とがキャプチャ画像１０２１上に配置されている場合を表している。

【0052】

ここで、拡張ＵＩ部品作成欄１１１０には編集ボタン１１１１が含まれており、作成者は当該編集ボタン１１１１を押下することにより、その拡張ＵＩ部品作成欄１１１０で作成する拡張ＵＩ部品の種類、名称（識別情報）、当該種類の拡張ＵＩ部品に対してテキストや画像等（以下、テキスト等という。）を設定可能な場合にはテキスト等を設定することができる。図８に示す例では、拡張ＵＩ部品作成欄１１１０で作成する拡張ＵＩ部品の種類としてボタンを表す「Ｂｕｔｔｏｎ」、名称として「ボタン１」が設定されており、それぞれ種類表示欄１１１２、名称表示欄１１１３に表示されている。また、拡張ＵＩ部品作成欄１１１０には、ボタンを表し、かつ、テキストとして「雛形選択」が設定された拡張ＵＩ部品１１１４が表示されている。このとき、拡張ＵＩ部品１１１４は、その種類に応じて、上記のステップＳ１０７で特定された表示態様で表示される。すなわち、図８に示す例では、図７に示すＷｅｂページ画面３０００の「送信」ボタン３０４０や「中止」ボタン３０５０と同様の表示態様で拡張ＵＩ部品１１１４が表示される。これにより、作成者は、実際に拡張ＵＩを対象Ｗｅｂページ上に重畳表示したときと同様の表示態様（同一又は類似する表示態様）で拡張ＵＩ部品を作成することが可能となる。なお、キャプチャ画像１０２１上に設定された座標平面における拡張ＵＩ部品１１１４の表示座標が対象Ｗｅｂページにおける表示位置となる。

【0053】

同様に、拡張ＵＩ部品作成欄１１２０には編集ボタン１１２１が含まれており、作成者は当該編集ボタン１１２１を押下することにより、その拡張ＵＩ部品作成欄１１２０で作成する拡張ＵＩ部品の種類、名称（識別情報）、当該種類の拡張ＵＩ部品に対してテキスト等を設定可能な場合にはテキスト等を設定することができる。図８に示す例では、拡張ＵＩ部品作成欄１１２０で作成する拡張ＵＩ部品の種類としてテキストボックスを表す「Ｔｅｘｔ」、名称として「テキスト１」が設定されており、それぞれ種類表示欄１１２２、名称表示欄１１２３に表示されている。また、拡張ＵＩ部品作成欄１１２０には、テキストボックスを表し、かつ、テキストとして「実施内容は必ず入力して下さい。」が設定された拡張ＵＩ部品１１２４が表示されている。このとき、拡張ＵＩ部品１１２４は、その種類に応じて、上記のステップＳ１０７で特定された表示態様で表示される。これにより、作成者は、実際に拡張ＵＩを対象Ｗｅｂページ上に重畳表示したときと同様の表示態様（同一又は類似する表示態様）で拡張ＵＩ部品を作成することが可能となる。なお、キャプチャ画像１０２１上に設定された座標平面における拡張ＵＩ部品１１２４の表示座標が対象Ｗｅｂページにおける表示位置となる。

【0054】

このように、作成者は、対象Ｗｅｂページのキャプチャ画像上に様々な拡張ＵＩ部品を配置することで拡張ＵＩを作成することができる。また、このとき、拡張ＵＩ部品は、その種類に応じて、対象Ｗｅｂページと同様の表示態様で表示される。このため、例えば、編集ツール１２０を一度閉じた後にＷｅｂブラウザ１１０で対象Ｗｅｂページを開くことなく、作成者は、対象Ｗｅｂページに重畳表示される拡張ＵＩ部品の表示態様を確認することが可能となる。

【0055】

ここで、図８に示す拡張ＵＩ作成画面１０００には、作成者によって選択された拡張ＵＩ部品作成欄で作成される拡張ＵＩに対してより詳細な設定を行うことが可能な詳細設定欄１０７０が含まれる。この詳細設定欄１０７０では、例えば、拡張ＵＩ部品の表示態様（見た目、外観）や配置方法を変更したり、拡張ＵＩ部品に対して動作設定を行ったりすることができる。これにより、例えば、拡張ＵＩ部品の表示対象をより詳細に設定したり、動的に動作する拡張ＵＩ部品を配置したりすることが可能となる。

【0056】

なお、図８に示す例では、一例として、拡張ＵＩ部品の種類として「ボタン」が設定された拡張ＵＩ部品作成欄と、「テキストボックス」が設定された拡張ＵＩ部品作成欄とを表しているが、拡張ＵＩ部品作成欄では、任意の種類（例えば、ボタン、テキストボックス、パスワードボックス、ラジオボタン、チェックボックス、プルダウンリスト、リストボックス、テキストエリア等）を設定することが可能である。例えば、一例として、拡張ＵＩ部品の種類として「プルダウンリスト」が設定された拡張ＵＩ部品作成欄１１３０を図９に示す。図９に示す拡張ＵＩ部品作成欄１１３０には、編集ボタン１１３１と、プルダウンリストを表す種類「Ｌｉｓｔ」が表示された種類表示欄１１３２と、その名称「プルダウンリスト１」が表示された名称表示欄１１３３と、テキスト「選択項目１」が設定された拡張ＵＩ部品１１３４とが含まれている。

【0057】

以下では、図８に示す拡張ＵＩ作成画面１０００で拡張ＵＩ部品作成欄１１１０及び１１２０により拡張ＵＩ部品をそれぞれ作成した上で、作成者によって「保存」ボタン１０６０が押下されたものとして説明を続ける。

【0058】

入力受付部１２２は、「保存」ボタン１０６０の押下操作（つまり、拡張ＵＩの作成操作）を受け付ける（ステップＳ１０９）。

【0059】

ルールファイル作成部１２５は、入力受付部１２２によって拡張ＵＩの作成操作が受け付けられると、ルールファイルを作成し、記憶部１２６に保存する（ステップＳ１１０）。すなわち、ルールファイル作成部１２５は、対象ＷｅｂページのＵＲＬと、拡張ＵＩ部品作成欄１１１０及び１１２０によりそれぞれ作成された各拡張ＵＩ部品で構成される拡張ＵＩの拡張ＵＩ定義情報とを対応付けたルールファイルを作成し、このルールファイルを記憶部１２６に保存する。これにより、対象ＷｅｂページのＵＲＬと、各拡張ＵＩ部品のＨＴＭＬ情報及び表示位置が含まれる拡張ＵＩ定義情報とが対応付けられたルールファイル（つまり、（ＵＲＬ，拡張ＵＩ定義情報）と表されるルールファイル）が作成及び保存される。

【0060】

ただし、例えば、ルールファイルが既に記憶部１２６に存在する場合、ルールファイル作成部１２５は、このルールファイルに対して、対象ＷｅｂページのＵＲＬと、各拡張ＵＩ定義情報とを対応付けた情報（ＵＲＬ，拡張ＵＩ定義情報）を追加してもよい。

【0061】

＜拡張ＵＩ表示処理の例＞
以下、本実施形態に係る拡張ＵＩ表示処理の一例について、図１０を参照しながら説明する。この拡張ＵＩ表示処理は、例えば、Ｗｅｂブラウザ２１０によって或るＵＲＬにアクセスし、そのＵＲＬのＷｅｂページの表示が開始された場合に実行される。なお、以下では、利用者端末２０の記憶部２２５には、作成者端末１０から配布されたルールファイルが保存されているものとする。

【0062】

ＵＲＬ取得部２２１は、当該Ｗｅｂブラウザ２１０によって表示されるＷｅｂページのＵＲＬを取得する（ステップＳ２０１）。

【0063】

次に、拡張ＵＩ定義情報取得部２２２は、記憶部２２５に記憶されているルールファイルを参照して、上記のステップＳ２０１で取得されたＵＲＬが対象ＷｅｂページのＵＲＬであるか否かを判定する（ステップＳ２０２）。すなわち、拡張ＵＩ定義情報取得部２２２は、上記のステップＳ２０１で取得されたＵＲＬがルールファイルに含まれているか否かを判定する。

【0064】

上記のステップＳ２０２で当該ＵＲＬが対象ＷｅｂページのＵＲＬであると判定されなかった場合（ステップＳ２０２でＮＯ）、利用者端末２０は、拡張ＵＩ表示処理を終了する。この場合、Ｗｅｂブラウザ２１０によって表示されるＷｅｂページには、拡張ＵＩは重畳表示されない。

【0065】

一方で、上記のステップＳ２０２で当該ＵＲＬが対象ＷｅｂページのＵＲＬであると判定された場合（ステップＳ２０２でＹＥＳ）、拡張ＵＩ定義情報取得部２２２は、当該ＵＲＬに対応付けられている拡張ＵＩ定義情報を当該ルールファイルから取得する（ステップＳ２０３）。

【0066】

そして、表示制御部２２３は、上記のステップＳ２０３で取得された拡張ＵＩ定義情報を用いて、Ｗｅｂブラウザ２１０によって表示されているＷｅｂページ上に拡張ＵＩを重畳表示させる（ステップＳ２０４）。すなわち、表示制御部２２３は、例えば、当該拡張ＵＩ定義情報に含まれる各拡張ＵＩ部品のＨＴＭＬ情報をレンダリングし、そのＨＴＭＬ情報に対応する表示位置に、レンダリングされた拡張ＵＩ部品を重畳表示させる。これにより、対象Ｗｅｂページ上に拡張ＵＩが重畳表示される。例えば、一例として、図７に示すＷｅｂページ画面３０００上に、図８に示す拡張ＵＩ作成画面１０００で作成された拡張ＵＩを重畳表示させた場合のＷｅｂページ画面３０００を図１１に示す。図８に示すＷｅｂページ画面３０００では、拡張ＵＩ部品作成欄１１１０で作成された拡張ＵＩ部品４０１０と、拡張ＵＩ部品作成欄１１２０で作成された拡張ＵＩ部品４０２０とが重畳表示されている。これにより、業務システム３０から提供されたＷｅｂページ上で何等かの業務を行う際に、それらの拡張ＵＩ部品によって利用者の業務を支援することが可能となる。例えば、拡張ＵＩ部品によって誤入力を注意喚起したり、入力例を提示したり、雛形を利用可能にしたりすることで、利用者の業務を支援することができる。

【0067】

＜変形例＞
上記の実施形態では、Ｗｅｂページの画面定義情報はＨＴＭＬ情報であるものとしたが、ＣＳＳ（Cascading Style Sheets）等のスタイルシート情報を取得可能な場合には、ＨＴＭＬ情報に加えて、スタイルシート情報も画面定義情報としてもよい。これにより、ＷｅｂページのＵＩ部品の表示態様がスタイルシートで指定されている場合であっても、拡張ＵＩ作成画面上で拡張ＵＩを作成する際に、拡張ＵＩ部品の表示態様を当該ＷｅｂページのＵＩ部品と同様にすることが可能となる。

【0068】

＜まとめ＞
以上のように、本実施形態に係る作成者端末１０では、Ｗｅｂページ上に重畳表示される拡張ＵＩを構成する拡張ＵＩ部品を作成する際に、当該拡張ＵＩ部品の表示態様を当該Ｗｅｂページと同様の表示態様で作成することができる。このため、例えば、Ｗｅｂブラウザ１１０を立ち上げることなく、拡張ＵＩの表示態様を確認することが可能となり、拡張ＵＩの作成を効率的に行うことが可能となる。

【0069】

また、本実施形態に係る作成者端末１０では、拡張ＵＩが重畳表示されるＷｅｂページを一覧から選択する際に、それらのＷｅｂページのキャプチャ画像（を縮小した画像）も同時に表示される。このため、例えば、Ｗｅｂページの名称やＵＲＬのみが表示される場合と比較して、作成者は、所望のＷｅｂページを容易に選択することが可能となる。

【0070】

本発明は、具体的に開示された上記の実施形態に限定されるものではなく、特許請求の範囲の記載から逸脱することなく、種々の変形や変更、既知の技術との組み合わせ等が可能である。

【0071】

以上の実施形態に関し、更に以下の付記項を開示する。
（付記項１）
ＵＩ上に重畳表示されるＵＩ部品を表す拡張ＵＩ部品を作成するためのＵＩ部品作成装置であって、
ブラウザによって表示されている複数のＵＩの各々のキャプチャ画像を取得する取得部と、
前記拡張ＵＩ部品を重畳表示するＵＩの候補として、前記複数のＵＩの各々のキャプチャ画像を画面上に選択可能に表示する表示制御部と、
前記候補を選択するユーザ操作に応じて、前記候補として選択されたＵＩの識別情報と、前記ＵＩ上に重畳表示される拡張ＵＩ部品を定義する定義情報とを対応付けた情報を作成する作成部と、
を有するＵＩ部品作成装置。
（付記項２）
前記表示制御部は、
前記拡張ＵＩ部品を重畳表示するＵＩの候補として、前記複数のＵＩの各々の識別情報と、前記複数のＵＩの各々の名称と、前記複数のＵＩの各々のキャプチャ画像とを前記画面上に選択可能に表示する、付記項１に記載のＵＩ部品作成装置。
（付記項３）
前記表示制御部は、
前記ブラウザによって表示されている複数のＵＩの各々のキャプチャ画像を前記取得部によって再取得するための操作部品を前記画面上に表示する、付記項１又は２に記載のＵＩ部品作成装置。
（付記項４）
ＵＩ上に重畳表示されるＵＩ部品を表す拡張ＵＩ部品を作成するためのコンピュータが、
ブラウザによって表示されている複数のＵＩの各々のキャプチャ画像を取得する取得手順と、
前記拡張ＵＩ部品を重畳表示するＵＩの候補として、前記複数のＵＩの各々のキャプチャ画像を画面上に選択可能に表示する表示制御手順と、
前記候補を選択するユーザ操作に応じて、前記候補として選択されたＵＩの識別情報と、前記ＵＩ上に重畳表示される拡張ＵＩ部品を定義する定義情報とを対応付けた情報を作成する作成手順と、
を実行するＵＩ部品作成方法。
（付記項５）
ＵＩ上に重畳表示されるＵＩ部品を表す拡張ＵＩ部品を作成するためのコンピュータに、
ブラウザによって表示されている複数のＵＩの各々のキャプチャ画像を取得する取得手順と、
前記拡張ＵＩ部品を重畳表示するＵＩの候補として、前記複数のＵＩの各々のキャプチャ画像を画面上に選択可能に表示する表示制御手順と、
前記候補を選択するユーザ操作に応じて、前記候補として選択されたＵＩの識別情報と、前記ＵＩ上に重畳表示される拡張ＵＩ部品を定義する定義情報とを対応付けた情報を作成する作成手順と、
を実行させるプログラム。

【符号の説明】

【0072】

１ 業務支援システム
１０ 作成者端末
２０ 利用者端末
３０ 業務システム
４０ ネットワーク
１１０ Ｗｅｂブラウザ
１２０ 編集ツール
１２１ 表示制御部
１２２ 入力受付部
１２３ 画面取得部
１２４ 表示態様特定部
１２５ ルールファイル作成部
１２６ 記憶部
２１０ Ｗｅｂブラウザ
２２０ 表示ツール
２２１ ＵＲＬ取得部
２２２ 拡張ＵＩ定義情報取得部
２２３ 表示制御部
２２４ 入力受付部
２２５ 記憶部

【図1】

【図2】

【図3】

【図4】

【図5】

【図6】

【図7】

【図8】

【図9】

【図10】

【図11】