JP7670418B2

JP7670418B2 - UI component creation device, UI component creation method, and program

Info

Publication number: JP7670418B2
Application number: JP2023056723A
Authority: JP
Inventors: 和哉小井沼; 裕一郎川本; 健太渡辺; 仁之岡田
Original assignee: NTT TechnoCross Corp
Current assignee: NTT TechnoCross Corp
Priority date: 2023-03-30
Filing date: 2023-03-30
Publication date: 2025-04-30
Anticipated expiration: 2043-03-30
Also published as: JP2024143823A

Description

本開示は、ＵＩ部品作成装置、ＵＩ部品作成方法及びプログラムに関する。 This disclosure relates to a UI component creation device, a UI component creation method, and a program.

Ｗｅｂサーバから提供されるＷｅｂページ上に付箋やボタン等といったＵＩ（ユーザインタフェース）部品を重畳表示させる技術が従来から知られている（非特許文献１）。この非特許文献１では、編集ツールと呼ばれるプログラムを利用して、対象のＷｅｂページに重畳表示させたいＵＩ部品を作成することができる。 Technology for superimposing UI (user interface) components such as sticky notes and buttons on a web page provided by a web server has been known for some time (Non-Patent Document 1). In this Non-Patent Document 1, a program called an editing tool can be used to create the UI components that are to be superimposed on the target web page.

BizFront/SmartUI | NTTテクノクロス，インターネット＜ＵＲＬ：https://www.ntt-tx.co.jp/products/bizfront/sui/＞BizFront/SmartUI | NTT Technocross, Internet <URL: https://www.ntt-tx.co.jp/products/bizfront/sui/>

しかしながら、対象のＷｅｂページに重畳表示させたいＵＩ部品の表示態様を確認したい場合、上記の非特許文献１に記載されている技術では、編集ツールを一度閉じた後にＷｅｂブラウザで対象のＷｅｂページを開く必要がある。 However, if you want to check the display state of a UI component that you want to superimpose on a target web page, the technology described in the above non-patent document 1 requires you to close the editing tool once and then open the target web page in a web browser.

本開示は、上記の点に鑑みてなされたもので、Ｗｅｂページ上に重畳表示されるＵＩ部品の作成を支援できる技術を提供する。 This disclosure has been made in consideration of the above points, and provides a technology that can assist in the creation of UI components that are superimposed on a web page.

本開示の一態様によるＵＩ部品作成装置は、ＵＩ上に重畳表示されるＵＩ部品を表す拡張ＵＩ部品を作成するためのＵＩ部品作成装置であって、前記ＵＩを定義する第１の定義情報に基づいて、前記ＵＩ部品の種類毎に、前記ＵＩ部品の表示態様を特定する特定部と、前記拡張ＵＩ部品の種類を指定するためのユーザ操作に応じて、前記指定された種類のＵＩ部品の表示態様と同一又は類似する表示態様の拡張ＵＩ部品を作成対象として画面上に表示する表示制御部と、前記拡張ＵＩ部品を作成するためのユーザ操作に応じて、前記ＵＩの識別情報と、前記拡張ＵＩ部品を定義する第２の定義情報とを対応付けた情報を作成する作成部と、を有する。 A UI part creation device according to one aspect of the present disclosure is a UI part creation device for creating extended UI parts representing UI parts superimposed on a UI, and includes: an identification unit that identifies the display mode of the UI part for each type of UI part based on first definition information that defines the UI; a display control unit that displays on a screen an extended UI part having a display mode identical or similar to the display mode of the specified type of UI part as a creation target in response to a user operation for specifying the type of the extended UI part; and a creation unit that creates information that associates identification information of the UI with second definition information that defines the extended UI part in response to a user operation for creating the extended UI part.

Ｗｅｂページ上に重畳表示されるＵＩ部品の作成を支援できる技術が提供される。 Technology is provided that can assist in the creation of UI components that are superimposed on web pages.

本実施形態に係る業務支援システムの全体構成の一例を示す図である。1 is a diagram illustrating an example of an overall configuration of a business support system according to an embodiment of the present invention. 本実施形態に係る作成者端末の機能構成の一例を示す図である。FIG. 4 is a diagram illustrating an example of a functional configuration of a creator terminal according to the present embodiment. 本実施形態に係る利用者端末の機能構成の一例を示す図である。FIG. 2 is a diagram illustrating an example of a functional configuration of a user terminal according to the present embodiment. 本実施形態に係る拡張ＵＩ作成処理の一例を示すフローチャートである。10 is a flowchart illustrating an example of an extended UI creation process according to the embodiment. 拡張ＵＩ作成画面の一例を示す図（その１）である。FIG. 13 is a diagram showing an example of an extended UI creation screen (part 1). Ｗｅｂページ選択画面の一例を示す図である。FIG. 13 is a diagram showing an example of a web page selection screen. Ｗｅｂページ画面の一例を示す図である。FIG. 11 is a diagram showing an example of a web page screen. 拡張ＵＩ作成画面の一例を示す図（その２）である。FIG. 2 is a diagram showing an example of an extended UI creation screen (part 2). プルダウンリストに関する拡張ＵＩ部品作成欄の一例を示す図である。13 is a diagram illustrating an example of an extended UI part creation field related to a pull-down list. 本実施形態に係る拡張ＵＩ表示処理の一例を示すフローチャートである。10 is a flowchart illustrating an example of an extended UI display process according to the embodiment. 拡張ＵＩが重畳表示されたＷｅｂページ画面の一例を示す図である。FIG. 11 is a diagram showing an example of a web page screen on which an extended UI is superimposed.

以下、本発明の一実施形態について説明する。以下では、Ｗｅｂサーバとして何等かの業務に関するＷｅｂページを提供する業務システムを想定し、そのＷｅｂページにおける入力等を支援するためのＵＩ部品を重畳表示させることが可能な業務支援システム１について説明する。ただし、業務システムは一例であって、Ｗｅｂページを提供するＷｅｂサーバであれば業務システムに限られるものではない。 One embodiment of the present invention will be described below. In the following, a business system that serves as a web server to provide web pages related to some business will be assumed, and a business support system 1 that can superimpose UI components to support input, etc. on the web page will be described. However, the business system is only one example, and the business system is not limited to a web server that provides web pages.

なお、以下では、Ｗｅｂページ上に重畳表示されるＵＩ部品のことを「拡張ＵＩ部品」ともいい、またこれらの拡張ＵＩ部品によって実現されるＵＩ（例えば、１つ以上の拡張ＵＩ部品が配置され、Ｗｅｂページ上に重畳表示されるレイヤ）のことを「拡張ＵＩ」ともいう。以下では、一例として、拡張ＵＩ部品としては、ＨＴＭＬ（HyperText Markup Language）情報で定義されるフォーム部品（例えば、ボタン、テキストボックス、パスワードボックス、ラジオボタン、チェックボックス、プルダウンリスト（又は、プルダウンメニュー、ドロップダウンリスト、ドロップダウンメニュー等と呼ばれることもある。）、リストボックス、テキストエリア等）を想定する。ただし、拡張ＵＩ部品はＨＴＭＬ情報で定義されるフォーム部品に限定されるものではない。 In the following, UI components superimposed on a Web page are also referred to as "extended UI components", and a UI realized by these extended UI components (for example, a layer in which one or more extended UI components are arranged and superimposed on a Web page) is also referred to as an "extended UI". In the following, as an example, extended UI components are assumed to be form components defined by HTML (HyperText Markup Language) information (for example, buttons, text boxes, password boxes, radio buttons, check boxes, pull-down lists (also sometimes called pull-down menus, drop-down lists, drop-down menus, etc.), list boxes, text areas, etc.). However, extended UI components are not limited to form components defined by HTML information.

＜全体構成例＞
本実施形態に係る業務支援システム１の全体構成例を図１に示す。図１に示すように、本実施形態に係る業務支援システム１には、作成者端末１０と、利用者端末２０と、業務システム３０とが含まれる。また、作成者端末１０、利用者端末２０及び業務システム３０は、例えば、社内ＬＡＮ（Local Area Network）等を含むネットワーク４０を介して通信可能に接続される。 <Overall configuration example>
An example of the overall configuration of a business support system 1 according to this embodiment is shown in Fig. 1. As shown in Fig. 1, the business support system 1 according to this embodiment includes a creator terminal 10, a user terminal 20, and a business system 30. The creator terminal 10, the user terminal 20, and the business system 30 are communicatively connected via a network 40 including, for example, an in-house LAN (Local Area Network) or the like.

作成者端末１０は、拡張ＵＩを作成する者（以下、作成者ともいう。）が利用する各種端末である。作成者端末１０には、業務システム３０から提供されるＷｅｂページを表示可能なＷｅｂブラウザ１１０と、拡張ＵＩを作成するための編集ツール１２０とがインストールされている。なお、作成者端末１０としては、例えば、ＰＣ（パーソナルコンピュータ）、タブレット端末、スマートフォン等を利用することができる。 The creator terminal 10 is a terminal used by a person who creates an extended UI (hereinafter, also referred to as a creator). A web browser 110 capable of displaying web pages provided by the business system 30 and an editing tool 120 for creating an extended UI are installed on the creator terminal 10. Note that, for example, a PC (personal computer), a tablet terminal, a smartphone, etc. can be used as the creator terminal 10.

利用者端末２０は、業務システム３０から提供されたＷｅｂページ上で何等かの業務を行う者（以下、利用者ともいう。）が利用する各種端末である。利用者端末２０には、業務システム３０から提供されるＷｅｂページを表示可能なＷｅｂブラウザ２１０と、Ｗｅｂブラウザ２１０によって表示されたＷｅｂページ上に拡張ＵＩを重畳表示させる表示ツール２２０とがインストールされている。なお、利用者端末２０としては、例えば、ＰＣ、タブレット端末、スマートフォン等を利用することができる。 The user terminal 20 is a terminal used by a person (hereinafter, also referred to as a user) who performs some kind of business on a web page provided by the business system 30. A web browser 210 capable of displaying the web page provided by the business system 30 and a display tool 220 that superimposes an extended UI on the web page displayed by the web browser 210 are installed on the user terminal 20. Note that, for example, a PC, a tablet terminal, a smartphone, etc. can be used as the user terminal 20.

業務システム３０は、Ｗｅｂサーバとして機能を有し、何等かの業務（例えば、経費精算や報告書作成等）に関する各種Ｗｅｂページを作成者端末１０及び利用者端末２０に提供する。業務システム３０としては、例えば、汎用サーバ等を利用することができる。 The business system 30 functions as a web server and provides various web pages related to some business (e.g., expense settlement, report creation, etc.) to the creator terminal 10 and the user terminal 20. For example, a general-purpose server can be used as the business system 30.

なお、図１に示す業務支援システム１の全体構成は一例であって、これに限られるものではない。例えば、図１に示す業務支援システム１では、作成者端末１０、利用者端末２０及び業務システム３０がいずれも１台のみ図示されているが、作成者端末１０、利用者端末２０及び業務システム３０はそれぞれ複数台存在してもよい。 Note that the overall configuration of the business support system 1 shown in FIG. 1 is an example and is not limited to this. For example, in the business support system 1 shown in FIG. 1, only one creator terminal 10, one user terminal 20, and one business system 30 are shown, but there may be multiple creator terminals 10, multiple user terminals 20, and multiple business systems 30.

＜機能構成例＞
≪作成者端末１０≫
本実施形態に係る作成者端末１０の機能構成例を図２に示す。図２に示すように、本実施形態に係る作成者端末１０は、表示制御部１２１と、入力受付部１２２と、画面取得部１２３と、表示態様特定部１２４と、ルールファイル作成部１２５とを有する。これら各部は、例えば、作成者端末１０にインストールされた編集ツール１２０が、ＣＰＵ（Central Processing Unit）等のプロセッサに実行させる処理により実現される。また、本実施形態に係る作成者端末１０は、記憶部１２６を有する。記憶部１２６は、例えば、ＨＤＤ（Hard Disk Drive）、ＳＳＤ（Solid State Drive）、フラッシュメモリ等の記憶装置により実現される。 <Functional configuration example>
<Creator terminal 10>
An example of the functional configuration of the creator terminal 10 according to this embodiment is shown in Fig. 2. As shown in Fig. 2, the creator terminal 10 according to this embodiment has a display control unit 121, an input receiving unit 122, a screen acquisition unit 123, a display mode specification unit 124, and a rule file creation unit 125. Each of these units is realized, for example, by a process executed by a processor such as a CPU (Central Processing Unit) by an editing tool 120 installed in the creator terminal 10. The creator terminal 10 according to this embodiment also has a storage unit 126. The storage unit 126 is realized, for example, by a storage device such as a HDD (Hard Disk Drive), an SSD (Solid State Drive), or a flash memory.

表示制御部１２１は、拡張ＵＩを作成するための各種画面（後述する拡張ＵＩ作成画面、Ｗｅｂページ選択画面等）をディスプレイ等の表示装置上に表示する。 The display control unit 121 displays various screens for creating an extended UI (such as an extended UI creation screen and a web page selection screen, which will be described later) on a display device such as a display.

入力受付部１２２は、表示制御部１２１によって表示された各種画面上での各種入力操作（例えば、マウス等のポインティングデバイスによる各種操作、キーボードによる各種操作、タッチパネルによる各種操作等）を受け付ける。 The input reception unit 122 receives various input operations (e.g., various operations using a pointing device such as a mouse, various operations using a keyboard, various operations using a touch panel, etc.) on various screens displayed by the display control unit 121.

画面取得部１２３は、Ｗｅｂブラウザ１１０によって表示されているＷｅｂページの画面情報を取得する。ここで、画面情報には、ＷｅｂページのＵＲＬ（Uniform Resource Locator）と、当該Ｗｅｂページを画面キャプチャしたキャプチャ画像（より正確には、当該Ｗｅｂブラウザ１１０によって表示されている当該Ｗｅｂページの画面を画面キャプチャしたキャプチャ画像）と、当該ＷｅｂページのＨＴＭＬ情報等の画面定義情報とが含まれる。 The screen acquisition unit 123 acquires screen information of a web page displayed by the web browser 110. Here, the screen information includes the URL (Uniform Resource Locator) of the web page, a screen capture image of the web page (more precisely, a screen capture image of the web page displayed by the web browser 110), and screen definition information such as HTML information of the web page.

表示態様特定部１２４は、画面取得部１２３によって取得された画面情報に含まれる画面定義情報を用いて、当該ＷｅｂページのＵＩ部品（例えば、ボタン、テキストボックス、パスワードボックス、ラジオボタン、チェックボックス、プルダウンリスト、リストボックス、テキストエリア等といったフォーム部品）の表示態様を特定する。ここで、表示態様とは、ＵＩ部品の色、大きさ（高さ及び幅）、ＵＩ部品で利用されているフォント種類等といった見た目のことである。ただし、これ以外にも、表示態様は、例えば、装飾やデザイン等といった様々な見た目を表すものであってもよい。 The display mode identification unit 124 uses the screen definition information included in the screen information acquired by the screen acquisition unit 123 to identify the display mode of the UI components of the web page (e.g., form components such as buttons, text boxes, password boxes, radio buttons, check boxes, pull-down lists, list boxes, text areas, etc.). Here, the display mode refers to the appearance of the UI components, such as their color, size (height and width), and the type of font used in the UI components. However, in addition to this, the display mode may also represent various other appearances, such as decoration and design.

ルールファイル作成部１２５は、表示制御部１２１によって表示された拡張ＵＩ作成画面上で拡張ＵＩが作成された場合、その拡張ＵＩをＷｅｂページ上に重畳表示させるための条件が定義されたルールファイルを作成する。ここで、ルールファイルには、例えば、拡張ＵＩを重畳させるＷｅｂページ（以下、対象Ｗｅｂページともいう。）のＵＲＬと、当該拡張ＵＩの定義する情報（以下、拡張ＵＩ定義情報ともいう。）とが含まれる。また、拡張ＵＩ定義情報には、例えば、拡張ＵＩに含まれる各拡張ＵＩ部品をそれぞれ定義するＨＴＭＬ情報と、拡張ＵＩ上における各拡張ＵＩ部品それぞれの表示位置（表示座標）とが含まれる。なお、ルールファイルには、複数のＵＲＬと、これら複数のＵＲＬの各々に対応する複数の拡張ＵＩ定義情報とが含まれていてもよい。 When an extended UI is created on the extended UI creation screen displayed by the display control unit 121, the rule file creation unit 125 creates a rule file that defines conditions for superimposing and displaying the extended UI on a web page. Here, the rule file includes, for example, the URL of the web page (hereinafter also referred to as the target web page) on which the extended UI is to be superimposed, and information defining the extended UI (hereinafter also referred to as extended UI definition information). In addition, the extended UI definition information includes, for example, HTML information defining each extended UI part included in the extended UI, and the display position (display coordinates) of each extended UI part on the extended UI. Note that the rule file may include multiple URLs and multiple pieces of extended UI definition information corresponding to each of these multiple URLs.

また、ルールファイル作成部は、ルールファイルを各利用者端末２０に配布する。このとき、ルールファイルの配布方法は特定の方法に限定されるものではなく、任意の方法で配布すればよい。例えば、ルールファイル作成部は、ネットワーク４０を介して各利用者端末２０にルールファイルを送信してもよいし、各利用者端末２０がアクセス可能なファイルサーバ等にルールファイルを保存してもよいし、各利用者に配布されるＵＳＢメモリ等といった外部記録媒体に保存してもよい。 The rule file creation unit also distributes the rule file to each user terminal 20. At this time, the method of distributing the rule file is not limited to a specific method, and any method may be used. For example, the rule file creation unit may transmit the rule file to each user terminal 20 via the network 40, may store the rule file on a file server or the like that is accessible to each user terminal 20, or may store the rule file on an external recording medium such as a USB memory that is distributed to each user.

記憶部１２６は、拡張ＵＩを作成するために必要な情報（例えば、対象ＷｅｂページのＵＲＬ、キャプチャ画像、画面定義情報等）を記憶したり、ルールファイルを記憶したりする。 The memory unit 126 stores information required to create an extended UI (e.g., the URL of the target web page, a captured image, screen definition information, etc.) and stores rule files.

≪利用者端末２０≫
本実施形態に係る利用者端末２０の機能構成例を図３に示す。図３に示すように、本実施形態に係る利用者端末２０は、ＵＲＬ取得部２２１と、拡張ＵＩ定義情報取得部２２２と、表示制御部２２３と、入力受付部２２４とを有する。これら各部は、例えば、利用者端末２０にインストールされた表示ツール２２０が、ＣＰＵ等のプロセッサに実行させる処理により実現される。また、本実施形態に係る利用者端末２０は、記憶部２２５を有する。記憶部２２５は、ＨＤＤ、ＳＳＤ、フラッシュメモリ等の記憶装置により実現される。 <User terminal 20>
An example of the functional configuration of the user terminal 20 according to this embodiment is shown in Fig. 3. As shown in Fig. 3, the user terminal 20 according to this embodiment has a URL acquisition unit 221, an extended UI definition information acquisition unit 222, a display control unit 223, and an input reception unit 224. Each of these units is realized, for example, by a process executed by a processor such as a CPU by a display tool 220 installed in the user terminal 20. The user terminal 20 according to this embodiment also has a storage unit 225. The storage unit 225 is realized by a storage device such as an HDD, an SSD, or a flash memory.

ＵＲＬ取得部２２１は、Ｗｅｂブラウザ２１０によって表示されるＷｅｂページのＵＲＬを取得する。 The URL acquisition unit 221 acquires the URL of the web page displayed by the web browser 210.

拡張ＵＩ定義情報取得部２２２は、記憶部２２５に記憶されているルールファイルを参照して、ＵＲＬ取得部２２１によって取得されたＵＲＬが対象ＷｅｂページのＵＲＬであるか否かを判定する。そして、拡張ＵＩ定義情報取得部２２２は、当該ＵＲＬが対象ＷｅｂページのＵＲＬであると判定した場合、当該ＵＲＬに対応付けられている拡張ＵＩ定義情報をルールファイルから取得する。 The extended UI definition information acquisition unit 222 refers to the rule file stored in the memory unit 225 to determine whether the URL acquired by the URL acquisition unit 221 is the URL of the target web page. If the extended UI definition information acquisition unit 222 determines that the URL is the URL of the target web page, it acquires the extended UI definition information associated with the URL from the rule file.

表示制御部２２３は、拡張ＵＩ定義情報取得部２２２によって取得された拡張ＵＩ定義情報を用いて、Ｗｅｂブラウザ２１０によって表示されているＷｅｂページ上に拡張ＵＩを重畳表示させる。すなわち、表示制御部２２３は、例えば、当該拡張ＵＩ定義情報に含まれる各拡張ＵＩ部品のＨＴＭＬ情報をレンダリングし、その拡張ＵＩ部品に対応する表示位置に表示させる。このとき、表示制御部２２３は、例えば、操作及び表示を透過する透過レイヤを当該Ｗｅｂページ上に設定した上でその透過レイヤ上に拡張ＵＩ部品を配置してもよいし、各拡張ＵＩ部品の各々を含む範囲の各透過レイヤを当該Ｗｅｂページ上にそれぞれ設定した上でそれら各透過レイヤ上に各拡張ＵＩ部品をそれぞれ配置してもよい。 The display control unit 223 uses the extended UI definition information acquired by the extended UI definition information acquisition unit 222 to superimpose the extended UI on the web page displayed by the web browser 210. That is, the display control unit 223 renders HTML information of each extended UI part included in the extended UI definition information, for example, and displays it at a display position corresponding to the extended UI part. At this time, the display control unit 223 may, for example, set a transparent layer on the web page that allows the operation and display to be transparent and then place the extended UI part on the transparent layer, or may set each transparent layer on the web page in a range that includes each of the extended UI parts, and then place each extended UI part on each transparent layer.

入力受付部２２４は、表示制御部２２３によって表示された拡張ＵＩでの各種入力操作（例えば、マウス等のポインティングデバイスによる各種操作、キーボードによる各種操作、タッチパネルによる各種操作等）を受け付ける。 The input reception unit 224 receives various input operations (e.g., various operations using a pointing device such as a mouse, various operations using a keyboard, various operations using a touch panel, etc.) in the extended UI displayed by the display control unit 223.

記憶部２２５は、Ｗｅｂブラウザ２１０によって表示されているＷｅｂページ上に拡張ＵＩを重畳表示させるために必要な情報（例えば、作成者端末１０から配布されたルールファイル等）を記憶する。 The storage unit 225 stores information (e.g., a rule file distributed from the creator terminal 10) necessary to superimpose the extended UI on the web page displayed by the web browser 210.

＜拡張ＵＩ作成処理の例＞
以下、本実施形態に係る拡張ＵＩ作成処理の一例について、図４を参照しながら説明する。以下では、作成者によって編集ツール１２０が起動されたものとする。また、Ｗｅｂブラウザ１１０によって１つ以上のＷｅｂページが表示されているものとする。 <Example of Extended UI Creation Process>
An example of an extended UI creation process according to the present embodiment will be described below with reference to Fig. 4. In the following, it is assumed that the creator has started up the editing tool 120. It is also assumed that one or more web pages are being displayed by the web browser 110.

まず、表示制御部１２１は、拡張ＵＩ作成画面を表示する（ステップＳ１０１）。例えば、表示制御部１２１は、図５に示す拡張ＵＩ作成画面１０００を表示する。 First, the display control unit 121 displays an extended UI creation screen (step S101). For example, the display control unit 121 displays the extended UI creation screen 1000 shown in FIG. 5.

図５に示す拡張ＵＩ作成画面１０００には、「画面の追加」ボタン１０１０と、キャプチャ画像表示欄１０２０と、「部品の追加」ボタン１０３０と、拡張ＵＩ一覧１０４０と、「テスト実行」ボタン１０５０と、「保存」ボタン１０６０とが含まれる。 The extended UI creation screen 1000 shown in FIG. 5 includes an "Add screen" button 1010, a capture image display field 1020, an "Add part" button 1030, an extended UI list 1040, a "Test run" button 1050, and a "Save" button 1060.

「画面の追加」ボタン１０１０は、後述するＷｅｂページ選択画面を表示するためのボタンである。キャプチャ画像表示欄１０２０は、後述するＷｅｂページ選択画面で選択された対象Ｗｅｂページのキャプチャ画像が表示される表示欄である。「部品の追加」ボタン１０３０は、キャプチャ画像表示欄１０２０上に後述する拡張ＵＩ部品作成欄を配置するためのボタンである。拡張ＵＩ一覧１０４０は、キャプチャ画像表示欄１０２０に配置されている拡張ＵＩ部品作成欄で作成された拡張ＵＩ部品の名称や種類等の一覧を表示する表示欄である。「テスト実行」ボタン１０５０は、キャプチャ画像表示欄１０２０に配置されている拡張ＵＩ部品作成欄で作成された拡張ＵＩ部品の表示テストを実行するためのボタンである。「保存」ボタン１０６０は、Ｗｅｂページ選択画面で選択された対象ＷｅｂページのＵＲＬと、各拡張ＵＩ部品作成欄で作成された拡張ＵＩ部品を当該対象Ｗｅｂページに表示させるための拡張ＵＩ定義情報とをルールファイルに保存するためのボタンである。 The "Add Screen" button 1010 is a button for displaying a web page selection screen described later. The capture image display field 1020 is a display field in which a capture image of a target web page selected on a web page selection screen described later is displayed. The "Add Part" button 1030 is a button for placing an extended UI part creation field described later on the capture image display field 1020. The extended UI list 1040 is a display field for displaying a list of the names and types of extended UI parts created in the extended UI part creation field arranged in the capture image display field 1020. The "Test" button 1050 is a button for performing a display test of the extended UI parts created in the extended UI part creation field arranged in the capture image display field 1020. The "Save" button 1060 is a button for saving in a rule file the URL of the target web page selected on the web page selection screen and extended UI definition information for displaying the extended UI parts created in each extended UI part creation field on the target web page.

以下では、図５に示す拡張ＵＩ作成画面１０００上で作成者によって「画面の追加」ボタン１０１０が押下されたものとして説明を続ける。 The following explanation will assume that the creator has pressed the "Add Screen" button 1010 on the extended UI creation screen 1000 shown in Figure 5.

入力受付部１２２は、「画面の追加」ボタン１０１０の押下操作（つまり、Ｗｅｂページ選択画面の表示操作）を受け付ける（ステップＳ１０２）。 The input reception unit 122 receives the operation of pressing the "Add screen" button 1010 (i.e., the operation of displaying the web page selection screen) (step S102).

画面取得部１２３は、入力受付部１２２によってＷｅｂページ選択画面の表示操作が受け付けられると、Ｗｅｂブラウザ１１０によって表示されているＷｅｂページのＵＲＬと、当該Ｗｅｂページを画面キャプチャしたキャプチャ画像とを取得する（ステップＳ１０３）。このとき、例えば、当該Ｗｅｂブラウザ１１０がタブブラウザであり、複数のタブの各々にＷｅｂページが表示されている場合、画面取得部１２３は、各タブにそれぞれ表示されている各ＷｅｂページのＵＲＬとキャプチャ画像を取得する。また、例えば、作成者端末１０上で複数のＷｅｂブラウザ１１０が起動している場合、画面取得部１２３は、複数のＷｅｂブラウザ１１０の各々に関して、当該Ｗｅｂブラウザ１１０によって表示されているＷｅｂページのＵＲＬとキャプチャ画像とを取得する。 When the input receiving unit 122 receives a display operation of the web page selection screen, the screen acquisition unit 123 acquires the URL of the web page displayed by the web browser 110 and a capture image of the web page (step S103). At this time, for example, if the web browser 110 is a tab browser and a web page is displayed in each of multiple tabs, the screen acquisition unit 123 acquires the URL and capture image of each web page displayed in each tab. Also, for example, if multiple web browsers 110 are running on the creator terminal 10, the screen acquisition unit 123 acquires the URL and capture image of the web page displayed by the web browser 110 for each of the multiple web browsers 110.

なお、上記のステップＳ１０３ではＷｅｂページのＵＲＬとキャプチャ画像のみが取得されるものとしたが、これは一例であって、例えば、上記のステップＳ１０３でＷｅｂページの画面情報（つまり、ＵＲＬ、キャプチャ画像、画面定義情報等）が取得されてもよい。 Note that in the above step S103, only the URL and capture image of the web page are acquired, but this is just one example. For example, the screen information of the web page (i.e., the URL, capture image, screen definition information, etc.) may also be acquired in the above step S103.

次に、表示制御部１２１は、Ｗｅｂページ選択画面を表示する（ステップＳ１０４）。例えば、表示制御部１２１は、図６に示すＷｅｂページ選択画面２０００を表示する。 Next, the display control unit 121 displays a web page selection screen (step S104). For example, the display control unit 121 displays the web page selection screen 2000 shown in FIG. 6.

図６に示すＷｅｂページ選択画面２０００には、Ｗｅｂブラウザ選択欄２０１０と、Ｗｅｂページ画面選択欄２０２０と、「選択した画面を追加」ボタン２０３０と、「閉じる」ボタン２０４０とが含まれる。 The web page selection screen 2000 shown in FIG. 6 includes a web browser selection field 2010, a web page screen selection field 2020, an "Add selected screen" button 2030, and a "Close" button 2040.

Ｗｅｂブラウザ選択欄２０１０は、作成者端末１０上で複数のＷｅｂブラウザ１１０が起動している場合に対象Ｗｅｂページの選択対象となるＷｅｂブラウザ１１０を選択するための選択欄である。図６に示す例では、「Ｗｅｂブラウザ１」が選択されている場合を表している。Ｗｅｂページ画面選択欄２０２０は、Ｗｅｂブラウザ１１０の各タブに表示されているＷｅｂページの中から対象ＷｅｂページとするＷｅｂページを選択するための選択欄である。図６に示す例では、２行目のＷｅｂページ（報告書作成ページ）が選択されている場合を表している。 The web browser selection field 2010 is a selection field for selecting a web browser 110 from which to select a target web page when multiple web browsers 110 are running on the creator terminal 10. The example shown in FIG. 6 represents the case where "Web Browser 1" is selected. The web page screen selection field 2020 is a selection field for selecting a web page to be the target web page from among the web pages displayed in each tab of the web browser 110. The example shown in FIG. 6 represents the case where the web page in the second row (report creation page) is selected.

ここで、Ｗｅｂページ画面選択欄２０２０には、Ｗｅｂブラウザ１１０の各タブに表示されているＷｅｂページのＷｅｂページ名やＵＲＬの他に、上記のステップＳ１０３で取得されたキャプチャ画像（を縮小した画像）が表示される。例えば、Ｗｅｂページ画面選択欄２０２０の１行目には、当該Ｗｅｂブラウザ１１０の１つ目のタブに表示されているＷｅｂページのＷｅｂページ名「経費精算ページ」と、当該ＷｅｂページのＵＲＬ「ｈｔｔｐｓ：／／ｗｗｗ．ｈｏｇｅｈｏｇｅ．ｃｏ．ｊｐ／ｅｘ／」と、当該Ｗｅｂページのキャプチャ画像（を縮小した画像）２０２１とが表示されている。同様に、Ｗｅｂページ画面選択欄２０２０の２行目には、当該Ｗｅｂブラウザ１１０の２つ目のタブに表示されているＷｅｂページのＷｅｂページ名「報告書作成ページ」と、当該ＷｅｂページのＵＲＬ「ｈｔｔｐｓ：／／ｗｗｗ．ｈｏｇｅｈｏｇｅ．ｃｏ．ｊｐ／ｒｅｐｏｒｔ／」と、当該Ｗｅｂページのキャプチャ画像（を縮小した画像）２０２２とが表示されている。 Here, in the web page screen selection field 2020, in addition to the web page names and URLs of the web pages displayed in each tab of the web browser 110, the capture image (reduced image) acquired in step S103 above is displayed. For example, the first line of the web page screen selection field 2020 displays the web page name "Expense Settlement Page" of the web page displayed in the first tab of the web browser 110, the URL of the web page "https://www.hogehoge.co.jp/ex/", and a capture image (reduced image) 2021 of the web page. Similarly, the second line of the web page screen selection field 2020 displays the name of the web page displayed in the second tab of the web browser 110, "Report Creation Page," the URL of the web page, "https://www.hogehoge.co.jp/report/," and a captured image (reduced image) 2022 of the web page.

このように、Ｗｅｂページ画面選択欄２０２０には、選択対象となる各Ｗｅｂページのキャプチャ画像が表示される。これにより、例えば、Ｗｅｂページ名やＵＲＬのみが表示される場合と比較して、作成者は、自身が選択したい所望のＷｅｂページを視覚的に容易に特定することが可能となる。すなわち、対象のＷｅｂページに重畳表示されるＵＩ部品を作成するために複数のＷｅｂページの中から対象のＷｅｂページを選択する場合に、上記の非特許文献１に記載されている技術のようにＷｅｂページ名やＵＲＬから対象のＷｅｂページを選択する必要がないため、所望のＷｅｂページを視覚的に容易に特定及び選択することが可能となる。 In this way, the web page screen selection field 2020 displays a captured image of each web page to be selected. This allows the creator to visually and easily identify the desired web page that he or she wishes to select, compared to, for example, when only the web page name or URL is displayed. In other words, when selecting a target web page from among multiple web pages to create a UI component to be superimposed on the target web page, it is not necessary to select the target web page from the web page name or URL as in the technology described in Non-Patent Document 1 above, and therefore the desired web page can be visually and easily identified and selected.

「選択した画面を追加」ボタン２０３０は、Ｗｅｂページ画面選択欄２０２０で選択れているＷｅｂページを対象Ｗｅｂページとして、拡張ＵＩ作成画面１０００に戻るためのボタンである。「閉じる」ボタン２０４０は、Ｗｅｂページ選択画面２０００を閉じるためのボタンである。なお、「×」ボタン２０５０でもＷｅｂページ選択画面２０００を閉じることができる。また、「ページ情報を取得」ボタン２０６０は、Ｗｅｂブラウザ１１０によって表示されているＷｅｂページのＵＲＬやキャプチャ画像等を取得し直してＷｅｂブラウザ選択欄２０１０を更新するためのボタンである。 The "Add selected screen" button 2030 is a button for returning to the extended UI creation screen 1000 with the web page selected in the web page screen selection field 2020 as the target web page. The "Close" button 2040 is a button for closing the web page selection screen 2000. The web page selection screen 2000 can also be closed with the "X" button 2050. The "Get page information" button 2060 is a button for re-obtaining the URL, capture image, etc. of the web page displayed by the web browser 110 and updating the web browser selection field 2010.

以下では、図６に示すＷｅｂページ選択画面２０００のＷｅｂページ画面選択欄２０２０で２行目のＷｅｂページ（Ｗｅｂページ名「報告書作成ページ」、ＵＲＬ「ｈｔｔｐｓ：／／ｗｗｗ．ｈｏｇｅｈｏｇｅ．ｃｏ．ｊｐ／ｒｅｐｏｒｔ／」）が選択された上で、作成者によって「選択した画面を追加」ボタン２０３０が押下されたものとして説明を続ける。また、Ｗｅｂブラウザ１１０によって表示されている当該Ｗｅｂページ（Ｗｅｂページ名「報告書作成ページ」）の画面は、例えば、図７に示すＷｅｂページ画面３０００であるものとする。図７に示すＷｅｂページ画面３０００には、報告書の記載項目の１つである「件名」を入力するための「件名」入力欄３０１０と、報告書の記載項目の１つである「実施目的」を入力するための「実施目的」入力欄３０２０と、報告書の記載項目の１つである「実施内容」を入力するための「実施内容」入力欄３０３０と、報告書を提出するためのボタンである「送信」ボタン３０４０と、報告書の提出を中止するためのボタンである「中止」ボタン３０５０とが含まれている。 In the following explanation, it is assumed that the web page in the second line (web page name "Report Creation Page", URL "https://www.hogehoge.co.jp/report/") is selected in the web page screen selection field 2020 of the web page selection screen 2000 shown in FIG. 6, and the creator presses the "Add selected screen" button 2030. In addition, it is assumed that the screen of the web page (web page name "Report Creation Page") displayed by the web browser 110 is, for example, the web page screen 3000 shown in FIG. 7. The web page screen 3000 shown in FIG. 7 includes a "Subject" input field 3010 for inputting the "Subject", which is one of the items to be described in the report, an "Implementation Objective" input field 3020 for inputting the "Implementation Objective", which is one of the items to be described in the report, an "Implementation Content" input field 3030 for inputting the "Implementation Content", which is one of the items to be described in the report, a "Send" button 3040 for submitting the report, and a "Cancel" button 3050 for canceling the submission of the report.

入力受付部１２２は、「選択した画面を追加」ボタン２０３０の押下操作（つまり、対象Ｗｅｂページの選択操作）を受け付ける（ステップＳ１０５）。 The input receiving unit 122 receives the operation of pressing the "Add selected screen" button 2030 (i.e., the operation of selecting the target web page) (step S105).

次に、画面取得部１２３は、上記のステップＳ１０５で受け付けた選択操作によって選択された対象Ｗｅｂページの画面定義情報（例えば、ＨＴＭＬ情報等）を取得する（ステップＳ１０６）。なお、例えば、上記のステップＳ１０３で対象Ｗｅｂページの画面定義情報を含む画面情報が取得された場合、本ステップは実行されなくてもよい。 Next, the screen acquisition unit 123 acquires screen definition information (e.g., HTML information, etc.) of the target Web page selected by the selection operation received in step S105 above (step S106). Note that, for example, if screen information including the screen definition information of the target Web page is acquired in step S103 above, this step does not need to be executed.

次に、表示態様特定部１２４は、上記のステップＳ１０６で取得された画面定義情報を解析し、ＵＩ部品の種類毎に、そのＵＩ部品の表示態様を特定する（ステップＳ１０７）。すなわち、表示態様特定部１２４は、ＵＩ部品の種類毎に、対象Ｗｅｂページに含まれる各ＵＩ部品の表示態様を特定する。 Next, the display mode identification unit 124 analyzes the screen definition information acquired in step S106 above, and identifies the display mode of each UI part for each type of UI part (step S107). That is, the display mode identification unit 124 identifies the display mode of each UI part included in the target web page for each type of UI part.

ここで、表示態様特定部１２４は、例えば、ＨＴＭＬ情報である画面定義情報に定義されているフォームタグを解析し、フォーム部品の種類（例えば、ボタン、テキストボックス、パスワードボックス、ラジオボタン、チェックボックス、プルダウンリスト、リストボックス、テキストエリア等）毎に、各フォーム部品の表示態様を特定する。これは、例えば、フォームタグに定義されているｉｎｐｕｔタグやｔｅｘｔａｒｅａタグ、ｓｅｌｅｃｔタグ等を解析し、フォーム部品の背景色、文字のフォント、文字色等といった表示態様を特定すればよい。 Here, the display mode identification unit 124 analyzes, for example, form tags defined in screen definition information, which is HTML information, and identifies the display mode of each form component for each type of form component (for example, button, text box, password box, radio button, check box, pull-down list, list box, text area, etc.). This can be done, for example, by analyzing input tags, textarea tags, select tags, etc. defined in the form tags, and identifying the display modes of the form components, such as the background color, character font, character color, etc.

なお、例えば、対象Ｗｅｂページの画面定義情報に定義されていない種類のフォーム部品に関しては、表示態様特定部１２４は、その種類に応じて予め設定されたデフォルトの表示態様を特定してもよいし、その種類に類似する種類のＵＩ部品の表示態様を特定してもよい。ここで、互いに類似する種類のＵＩ部品の例としては、例えば、プルダウンリストとリストボックス等が挙げられる。また、他の例としては、例えば、ラジオボタンとチェックボックス等が挙げられる。ただし、例えば、互いに類似するＵＩ部品が予め設定されていてもよい。 For example, with respect to a type of form part that is not defined in the screen definition information of the target web page, the display mode identification unit 124 may identify a default display mode that is preset according to the type, or may identify a display mode of a UI part of a type similar to that type. Examples of UI parts of similar types include pull-down lists and list boxes. Other examples include radio buttons and check boxes. However, for example, UI parts that are similar to each other may be preset.

次に、表示制御部１２１は、拡張ＵＩ作成画面を表示すると共に、対象Ｗｅｂページのキャプチャ画像を当該拡張ＵＩ作成画面上に表示する（ステップＳ１０８）。例えば、表示制御部１２１は、図８に示す拡張ＵＩ作成画面１０００を表示する。 Next, the display control unit 121 displays the extended UI creation screen and also displays a captured image of the target web page on the extended UI creation screen (step S108). For example, the display control unit 121 displays the extended UI creation screen 1000 shown in FIG. 8.

図８に示す拡張ＵＩ作成画面１０００のキャプチャ画像表示欄１０２０には、対象Ｗｅｂページのキャプチャ画像１０２１が表示されている。また、当該キャプチャ画像１０２１上には、当該対象Ｗｅｂページに対する拡張ＵＩの表示位置を決定するための座標平面（例えば、ｘｙ座標平面）が設定されている。作成者は、例えば、「部品の追加」ボタン１０３０を押下することで、拡張ＵＩ部品作成欄を当該キャプチャ画像１０２１上に配置することができる。また、この拡張ＵＩ部品作成欄は、例えば、ドラッグアンドドロップ操作等により、当該キャプチャ画像１０２１上の任意の位置に移動させることができる。これにより、作成者は、キャプチャ画像１０２１が表す対象Ｗｅｂページ上の任意の位置（表示位置、表示座標）に拡張ＵＩ部品を配置することが可能となる。図８に示す例では、拡張ＵＩ部品作成欄１１１０と、拡張ＵＩ部品作成欄１１２０とがキャプチャ画像１０２１上に配置されている場合を表している。 In the capture image display field 1020 of the extended UI creation screen 1000 shown in FIG. 8, a capture image 1021 of the target Web page is displayed. In addition, a coordinate plane (e.g., an xy coordinate plane) for determining the display position of the extended UI for the target Web page is set on the capture image 1021. The creator can place the extended UI component creation field on the capture image 1021, for example, by pressing the "add component" button 1030. In addition, the extended UI component creation field can be moved to any position on the capture image 1021, for example, by a drag-and-drop operation. This allows the creator to place the extended UI component at any position (display position, display coordinates) on the target Web page represented by the capture image 1021. The example shown in FIG. 8 shows a case where the extended UI component creation field 1110 and the extended UI component creation field 1120 are placed on the capture image 1021.

ここで、拡張ＵＩ部品作成欄１１１０には編集ボタン１１１１が含まれており、作成者は当該編集ボタン１１１１を押下することにより、その拡張ＵＩ部品作成欄１１１０で作成する拡張ＵＩ部品の種類、名称（識別情報）、当該種類の拡張ＵＩ部品に対してテキストや画像等（以下、テキスト等という。）を設定可能な場合にはテキスト等を設定することができる。図８に示す例では、拡張ＵＩ部品作成欄１１１０で作成する拡張ＵＩ部品の種類としてボタンを表す「Ｂｕｔｔｏｎ」、名称として「ボタン１」が設定されており、それぞれ種類表示欄１１１２、名称表示欄１１１３に表示されている。また、拡張ＵＩ部品作成欄１１１０には、ボタンを表し、かつ、テキストとして「雛形選択」が設定された拡張ＵＩ部品１１１４が表示されている。このとき、拡張ＵＩ部品１１１４は、その種類に応じて、上記のステップＳ１０７で特定された表示態様で表示される。すなわち、図８に示す例では、図７に示すＷｅｂページ画面３０００の「送信」ボタン３０４０や「中止」ボタン３０５０と同様の表示態様で拡張ＵＩ部品１１１４が表示される。これにより、作成者は、実際に拡張ＵＩを対象Ｗｅｂページ上に重畳表示したときと同様の表示態様（同一又は類似する表示態様）で拡張ＵＩ部品を作成することが可能となる。なお、キャプチャ画像１０２１上に設定された座標平面における拡張ＵＩ部品１１１４の表示座標が対象Ｗｅｂページにおける表示位置となる。 Here, the extended UI part creation field 1110 includes an edit button 1111, and by pressing the edit button 1111, the creator can set the type and name (identification information) of the extended UI part to be created in the extended UI part creation field 1110, and if text or an image (hereinafter referred to as text) can be set for the extended UI part of that type, set the text, etc. In the example shown in FIG. 8, the type of the extended UI part to be created in the extended UI part creation field 1110 is set to "Button", which represents a button, and the name is set to "Button 1", which are displayed in the type display field 1112 and the name display field 1113, respectively. In addition, the extended UI part creation field 1110 displays an extended UI part 1114 that represents a button and has "template selection" set as text. At this time, the extended UI part 1114 is displayed in the display mode specified in step S107 above according to its type. That is, in the example shown in FIG. 8, the extended UI part 1114 is displayed in the same display mode as the "Send" button 3040 and the "Cancel" button 3050 on the Web page screen 3000 shown in FIG. 7. This allows the creator to create an extended UI part in the same display mode (the same or similar display mode) as when the extended UI is actually superimposed on the target Web page. Note that the display coordinates of the extended UI part 1114 on the coordinate plane set on the captured image 1021 become the display position on the target Web page.

同様に、拡張ＵＩ部品作成欄１１２０には編集ボタン１１２１が含まれており、作成者は当該編集ボタン１１２１を押下することにより、その拡張ＵＩ部品作成欄１１２０で作成する拡張ＵＩ部品の種類、名称（識別情報）、当該種類の拡張ＵＩ部品に対してテキスト等を設定可能な場合にはテキスト等を設定することができる。図８に示す例では、拡張ＵＩ部品作成欄１１２０で作成する拡張ＵＩ部品の種類としてテキストボックスを表す「Ｔｅｘｔ」、名称として「テキスト１」が設定されており、それぞれ種類表示欄１１２２、名称表示欄１１２３に表示されている。また、拡張ＵＩ部品作成欄１１２０には、テキストボックスを表し、かつ、テキストとして「実施内容は必ず入力して下さい。」が設定された拡張ＵＩ部品１１２４が表示されている。このとき、拡張ＵＩ部品１１２４は、その種類に応じて、上記のステップＳ１０７で特定された表示態様で表示される。これにより、作成者は、実際に拡張ＵＩを対象Ｗｅｂページ上に重畳表示したときと同様の表示態様（同一又は類似する表示態様）で拡張ＵＩ部品を作成することが可能となる。なお、キャプチャ画像１０２１上に設定された座標平面における拡張ＵＩ部品１１２４の表示座標が対象Ｗｅｂページにおける表示位置となる。 Similarly, the extended UI part creation field 1120 includes an edit button 1121, and the creator can press the edit button 1121 to set the type, name (identification information), and text, etc., of the extended UI part to be created in the extended UI part creation field 1120, if such a type can be set for the extended UI part of that type. In the example shown in FIG. 8, "Text" representing a text box is set as the type of extended UI part to be created in the extended UI part creation field 1120, and "Text 1" is set as the name, and are displayed in the type display field 1122 and name display field 1123, respectively. In addition, the extended UI part creation field 1120 displays an extended UI part 1124 representing a text box and with "Please enter the implementation details" set as the text. At this time, the extended UI part 1124 is displayed in the display mode specified in step S107 above according to its type. This allows the creator to create an extended UI part in the same display format (the same or a similar display format) as when the extended UI is actually superimposed on the target web page. Note that the display coordinates of the extended UI part 1124 in the coordinate plane set on the captured image 1021 become the display position on the target web page.

このように、作成者は、対象Ｗｅｂページのキャプチャ画像上に様々な拡張ＵＩ部品を配置することで拡張ＵＩを作成することができる。また、このとき、拡張ＵＩ部品は、その種類に応じて、対象Ｗｅｂページと同様の表示態様で表示される。このため、例えば、編集ツール１２０を一度閉じた後にＷｅｂブラウザ１１０で対象Ｗｅｂページを開くことなく、作成者は、対象Ｗｅｂページに重畳表示される拡張ＵＩ部品の表示態様を確認することが可能となる。 In this way, the creator can create an extended UI by placing various extended UI parts on a captured image of the target web page. In addition, at this time, the extended UI parts are displayed in the same display mode as the target web page depending on their type. Therefore, for example, the creator can check the display mode of the extended UI parts superimposed on the target web page without having to close the editing tool 120 once and then open the target web page in the web browser 110.

ここで、図８に示す拡張ＵＩ作成画面１０００には、作成者によって選択された拡張ＵＩ部品作成欄で作成される拡張ＵＩに対してより詳細な設定を行うことが可能な詳細設定欄１０７０が含まれる。この詳細設定欄１０７０では、例えば、拡張ＵＩ部品の表示態様（見た目、外観）や配置方法を変更したり、拡張ＵＩ部品に対して動作設定を行ったりすることができる。これにより、例えば、拡張ＵＩ部品の表示対象をより詳細に設定したり、動的に動作する拡張ＵＩ部品を配置したりすることが可能となる。 Here, the extended UI creation screen 1000 shown in FIG. 8 includes a detailed settings field 1070 that allows the creator to make more detailed settings for the extended UI created in the extended UI part creation field selected by the creator. In this detailed settings field 1070, for example, the display mode (appearance, external appearance) and placement method of the extended UI part can be changed, and operation settings can be made for the extended UI part. This makes it possible, for example, to set the display target of the extended UI part in more detail, and to place extended UI parts that operate dynamically.

なお、図８に示す例では、一例として、拡張ＵＩ部品の種類として「ボタン」が設定された拡張ＵＩ部品作成欄と、「テキストボックス」が設定された拡張ＵＩ部品作成欄とを表しているが、拡張ＵＩ部品作成欄では、任意の種類（例えば、ボタン、テキストボックス、パスワードボックス、ラジオボタン、チェックボックス、プルダウンリスト、リストボックス、テキストエリア等）を設定することが可能である。例えば、一例として、拡張ＵＩ部品の種類として「プルダウンリスト」が設定された拡張ＵＩ部品作成欄１１３０を図９に示す。図９に示す拡張ＵＩ部品作成欄１１３０には、編集ボタン１１３１と、プルダウンリストを表す種類「Ｌｉｓｔ」が表示された種類表示欄１１３２と、その名称「プルダウンリスト１」が表示された名称表示欄１１３３と、テキスト「選択項目１」が設定された拡張ＵＩ部品１１３４とが含まれている。 Note that the example shown in FIG. 8 shows an extended UI part creation field in which "button" is set as the type of extended UI part, and an extended UI part creation field in which "text box" is set, but any type (e.g., button, text box, password box, radio button, check box, pull-down list, list box, text area, etc.) can be set in the extended UI part creation field. For example, FIG. 9 shows an extended UI part creation field 1130 in which "pull-down list" is set as the type of extended UI part. The extended UI part creation field 1130 shown in FIG. 9 includes an edit button 1131, a type display field 1132 in which the type "List" representing the pull-down list is displayed, a name display field 1133 in which the name "pull-down list 1" is displayed, and an extended UI part 1134 in which the text "selection item 1" is set.

以下では、図８に示す拡張ＵＩ作成画面１０００で拡張ＵＩ部品作成欄１１１０及び１１２０により拡張ＵＩ部品をそれぞれ作成した上で、作成者によって「保存」ボタン１０６０が押下されたものとして説明を続ける。 In the following explanation, we will assume that the creator creates extended UI components in the extended UI component creation fields 1110 and 1120 on the extended UI creation screen 1000 shown in Figure 8, and then presses the "Save" button 1060.

入力受付部１２２は、「保存」ボタン１０６０の押下操作（つまり、拡張ＵＩの作成操作）を受け付ける（ステップＳ１０９）。 The input reception unit 122 receives the operation of pressing the "Save" button 1060 (i.e., the operation of creating an extended UI) (step S109).

ルールファイル作成部１２５は、入力受付部１２２によって拡張ＵＩの作成操作が受け付けられると、ルールファイルを作成し、記憶部１２６に保存する（ステップＳ１１０）。すなわち、ルールファイル作成部１２５は、対象ＷｅｂページのＵＲＬと、拡張ＵＩ部品作成欄１１１０及び１１２０によりそれぞれ作成された各拡張ＵＩ部品で構成される拡張ＵＩの拡張ＵＩ定義情報とを対応付けたルールファイルを作成し、このルールファイルを記憶部１２６に保存する。これにより、対象ＷｅｂページのＵＲＬと、各拡張ＵＩ部品のＨＴＭＬ情報及び表示位置が含まれる拡張ＵＩ定義情報とが対応付けられたルールファイル（つまり、（ＵＲＬ，拡張ＵＩ定義情報）と表されるルールファイル）が作成及び保存される。 When the input receiving unit 122 receives an operation to create an extended UI, the rule file creating unit 125 creates a rule file and stores it in the memory unit 126 (step S110). That is, the rule file creating unit 125 creates a rule file that associates the URL of the target web page with extended UI definition information of an extended UI composed of each extended UI component created by the extended UI component creation columns 1110 and 1120, respectively, and stores this rule file in the memory unit 126. As a result, a rule file (i.e., a rule file expressed as (URL, extended UI definition information)) in which the URL of the target web page is associated with extended UI definition information including the HTML information and display position of each extended UI component is created and stored.

ただし、例えば、ルールファイルが既に記憶部１２６に存在する場合、ルールファイル作成部１２５は、このルールファイルに対して、対象ＷｅｂページのＵＲＬと、各拡張ＵＩ定義情報とを対応付けた情報（ＵＲＬ，拡張ＵＩ定義情報）を追加してもよい。 However, for example, if a rule file already exists in the memory unit 126, the rule file creation unit 125 may add information (URL, extended UI definition information) that associates the URL of the target web page with each piece of extended UI definition information to this rule file.

＜拡張ＵＩ表示処理の例＞
以下、本実施形態に係る拡張ＵＩ表示処理の一例について、図１０を参照しながら説明する。この拡張ＵＩ表示処理は、例えば、Ｗｅｂブラウザ２１０によって或るＵＲＬにアクセスし、そのＵＲＬのＷｅｂページの表示が開始された場合に実行される。なお、以下では、利用者端末２０の記憶部２２５には、作成者端末１０から配布されたルールファイルが保存されているものとする。 <Example of Extended UI Display Process>
An example of the extended UI display process according to this embodiment will be described below with reference to Fig. 10. This extended UI display process is executed, for example, when a URL is accessed by the web browser 210 and the display of the web page of the URL is started. In the following, it is assumed that the rule file distributed from the creator terminal 10 is stored in the storage unit 225 of the user terminal 20.

ＵＲＬ取得部２２１は、当該Ｗｅｂブラウザ２１０によって表示されるＷｅｂページのＵＲＬを取得する（ステップＳ２０１）。 The URL acquisition unit 221 acquires the URL of the web page displayed by the web browser 210 (step S201).

次に、拡張ＵＩ定義情報取得部２２２は、記憶部２２５に記憶されているルールファイルを参照して、上記のステップＳ２０１で取得されたＵＲＬが対象ＷｅｂページのＵＲＬであるか否かを判定する（ステップＳ２０２）。すなわち、拡張ＵＩ定義情報取得部２２２は、上記のステップＳ２０１で取得されたＵＲＬがルールファイルに含まれているか否かを判定する。 Next, the extended UI definition information acquisition unit 222 refers to the rule file stored in the storage unit 225 and determines whether the URL acquired in step S201 above is the URL of the target web page (step S202). That is, the extended UI definition information acquisition unit 222 determines whether the URL acquired in step S201 above is included in the rule file.

上記のステップＳ２０２で当該ＵＲＬが対象ＷｅｂページのＵＲＬであると判定されなかった場合（ステップＳ２０２でＮＯ）、利用者端末２０は、拡張ＵＩ表示処理を終了する。この場合、Ｗｅｂブラウザ２１０によって表示されるＷｅｂページには、拡張ＵＩは重畳表示されない。 If it is not determined in step S202 above that the URL is the URL of the target web page (NO in step S202), the user terminal 20 ends the extended UI display process. In this case, the extended UI is not superimposed on the web page displayed by the web browser 210.

一方で、上記のステップＳ２０２で当該ＵＲＬが対象ＷｅｂページのＵＲＬであると判定された場合（ステップＳ２０２でＹＥＳ）、拡張ＵＩ定義情報取得部２２２は、当該ＵＲＬに対応付けられている拡張ＵＩ定義情報を当該ルールファイルから取得する（ステップＳ２０３）。 On the other hand, if it is determined in step S202 above that the URL is the URL of the target web page (YES in step S202), the extended UI definition information acquisition unit 222 acquires the extended UI definition information associated with the URL from the rule file (step S203).

そして、表示制御部２２３は、上記のステップＳ２０３で取得された拡張ＵＩ定義情報を用いて、Ｗｅｂブラウザ２１０によって表示されているＷｅｂページ上に拡張ＵＩを重畳表示させる（ステップＳ２０４）。すなわち、表示制御部２２３は、例えば、当該拡張ＵＩ定義情報に含まれる各拡張ＵＩ部品のＨＴＭＬ情報をレンダリングし、そのＨＴＭＬ情報に対応する表示位置に、レンダリングされた拡張ＵＩ部品を重畳表示させる。これにより、対象Ｗｅｂページ上に拡張ＵＩが重畳表示される。例えば、一例として、図７に示すＷｅｂページ画面３０００上に、図８に示す拡張ＵＩ作成画面１０００で作成された拡張ＵＩを重畳表示させた場合のＷｅｂページ画面３０００を図１１に示す。図８に示すＷｅｂページ画面３０００では、拡張ＵＩ部品作成欄１１１０で作成された拡張ＵＩ部品４０１０と、拡張ＵＩ部品作成欄１１２０で作成された拡張ＵＩ部品４０２０とが重畳表示されている。これにより、業務システム３０から提供されたＷｅｂページ上で何等かの業務を行う際に、それらの拡張ＵＩ部品によって利用者の業務を支援することが可能となる。例えば、拡張ＵＩ部品によって誤入力を注意喚起したり、入力例を提示したり、雛形を利用可能にしたりすることで、利用者の業務を支援することができる。 Then, the display control unit 223 uses the extended UI definition information acquired in step S203 to superimpose the extended UI on the Web page displayed by the Web browser 210 (step S204). That is, the display control unit 223 renders, for example, HTML information of each extended UI part included in the extended UI definition information, and superimposes the rendered extended UI part at a display position corresponding to the HTML information. As a result, the extended UI is superimposed on the target Web page. For example, FIG. 11 shows a Web page screen 3000 in which the extended UI created in the extended UI creation screen 1000 shown in FIG. 8 is superimposed on the Web page screen 3000 shown in FIG. 7. In the Web page screen 3000 shown in FIG. 8, the extended UI part 4010 created in the extended UI part creation field 1110 and the extended UI part 4020 created in the extended UI part creation field 1120 are superimposed. This makes it possible for the extended UI parts to support the user's work when performing some kind of work on a web page provided by the business system 30. For example, the extended UI parts can support the user's work by alerting the user to input errors, presenting input examples, and making templates available.

＜変形例＞
上記の実施形態では、Ｗｅｂページの画面定義情報はＨＴＭＬ情報であるものとしたが、ＣＳＳ（Cascading Style Sheets）等のスタイルシート情報を取得可能な場合には、ＨＴＭＬ情報に加えて、スタイルシート情報も画面定義情報としてもよい。これにより、ＷｅｂページのＵＩ部品の表示態様がスタイルシートで指定されている場合であっても、拡張ＵＩ作成画面上で拡張ＵＩを作成する際に、拡張ＵＩ部品の表示態様を当該ＷｅｂページのＵＩ部品と同様にすることが可能となる。 <Modification>
In the above embodiment, the screen definition information of the Web page is HTML information, but if style sheet information such as CSS (Cascading Style Sheets) can be acquired, the style sheet information may be used as the screen definition information in addition to the HTML information. This makes it possible to make the display mode of the extended UI parts the same as the UI parts of the Web page when creating an extended UI on the extended UI creation screen, even if the display mode of the UI parts of the Web page is specified by a style sheet.

＜まとめ＞
以上のように、本実施形態に係る作成者端末１０では、Ｗｅｂページ上に重畳表示される拡張ＵＩを構成する拡張ＵＩ部品を作成する際に、当該拡張ＵＩ部品の表示態様を当該Ｗｅｂページと同様の表示態様で作成することができる。このため、例えば、Ｗｅｂブラウザ１１０を立ち上げることなく、拡張ＵＩの表示態様を確認することが可能となり、拡張ＵＩの作成を効率的に行うことが可能となる。 <Summary>
As described above, in the creator terminal 10 according to the present embodiment, when creating an extended UI part that constitutes an extended UI that is superimposed on a Web page, the display mode of the extended UI part can be created in the same display mode as the Web page. Therefore, for example, it is possible to check the display mode of the extended UI without launching the Web browser 110, and it is possible to efficiently create the extended UI.

また、本実施形態に係る作成者端末１０では、拡張ＵＩが重畳表示されるＷｅｂページを一覧から選択する際に、それらのＷｅｂページのキャプチャ画像（を縮小した画像）も同時に表示される。このため、例えば、Ｗｅｂページの名称やＵＲＬのみが表示される場合と比較して、作成者は、所望のＷｅｂページを容易に選択することが可能となる。 In addition, in the creator terminal 10 according to this embodiment, when a web page on which the extended UI is superimposed is selected from the list, the captured image (reduced image) of that web page is also displayed at the same time. This allows the creator to easily select the desired web page, compared to when, for example, only the name or URL of the web page is displayed.

本発明は、具体的に開示された上記の実施形態に限定されるものではなく、特許請求の範囲の記載から逸脱することなく、種々の変形や変更、既知の技術との組み合わせ等が可能である。 The present invention is not limited to the specifically disclosed embodiments above, and various modifications, changes, and combinations with known technologies are possible without departing from the scope of the claims.

以上の実施形態に関し、更に以下の付記項を開示する。
（付記項１）
ＵＩ上に重畳表示されるＵＩ部品を表す拡張ＵＩ部品を作成するためのＵＩ部品作成装置であって、
ブラウザによって表示されている複数のＵＩの各々のキャプチャ画像を取得する取得部と、
前記拡張ＵＩ部品を重畳表示するＵＩの候補として、前記複数のＵＩの各々のキャプチャ画像を画面上に選択可能に表示する表示制御部と、
前記候補を選択するユーザ操作に応じて、前記候補として選択されたＵＩの識別情報と、前記ＵＩ上に重畳表示される拡張ＵＩ部品を定義する定義情報とを対応付けた情報を作成する作成部と、
を有するＵＩ部品作成装置。
（付記項２）
前記表示制御部は、
前記拡張ＵＩ部品を重畳表示するＵＩの候補として、前記複数のＵＩの各々の識別情報と、前記複数のＵＩの各々の名称と、前記複数のＵＩの各々のキャプチャ画像とを前記画面上に選択可能に表示する、付記項１に記載のＵＩ部品作成装置。
（付記項３）
前記表示制御部は、
前記ブラウザによって表示されている複数のＵＩの各々のキャプチャ画像を前記取得部によって再取得するための操作部品を前記画面上に表示する、付記項１又は２に記載のＵＩ部品作成装置。
（付記項４）
ＵＩ上に重畳表示されるＵＩ部品を表す拡張ＵＩ部品を作成するためのコンピュータが、
ブラウザによって表示されている複数のＵＩの各々のキャプチャ画像を取得する取得手順と、
前記拡張ＵＩ部品を重畳表示するＵＩの候補として、前記複数のＵＩの各々のキャプチャ画像を画面上に選択可能に表示する表示制御手順と、
前記候補を選択するユーザ操作に応じて、前記候補として選択されたＵＩの識別情報と、前記ＵＩ上に重畳表示される拡張ＵＩ部品を定義する定義情報とを対応付けた情報を作成する作成手順と、
を実行するＵＩ部品作成方法。
（付記項５）
ＵＩ上に重畳表示されるＵＩ部品を表す拡張ＵＩ部品を作成するためのコンピュータに、
ブラウザによって表示されている複数のＵＩの各々のキャプチャ画像を取得する取得手順と、
前記拡張ＵＩ部品を重畳表示するＵＩの候補として、前記複数のＵＩの各々のキャプチャ画像を画面上に選択可能に表示する表示制御手順と、
前記候補を選択するユーザ操作に応じて、前記候補として選択されたＵＩの識別情報と、前記ＵＩ上に重畳表示される拡張ＵＩ部品を定義する定義情報とを対応付けた情報を作成する作成手順と、
を実行させるプログラム。 The following supplementary items are further disclosed regarding the above-described embodiment.
(Additional Note 1)
A UI part creation device for creating an extended UI part representing a UI part to be superimposed on a UI, comprising:
an acquisition unit that acquires a capture image of each of a plurality of UIs displayed by a browser;
a display control unit that displays a capture image of each of the plurality of UIs on a screen in a selectable manner as candidates for a UI on which the extended UI component is superimposed;
a creating unit that creates information that associates identification information of a UI selected as a candidate with definition information that defines an extended UI part to be superimposed and displayed on the UI in response to a user operation that selects the candidate;
A UI component creation device having the above structure.
(Additional Note 2)
The display control unit is
A UI component creation device as described in appendix 1, which displays identification information of each of the multiple UIs, the name of each of the multiple UIs, and a captured image of each of the multiple UIs in a selectable manner on the screen as candidates for UIs on which the extended UI component is superimposed.
(Additional Note 3)
The display control unit is
3. The UI part creation device according to claim 1, further comprising: displaying, on the screen, an operation part for reacquiring, by the acquisition unit, a capture image of each of a plurality of UIs displayed by the browser.
(Additional Note 4)
A computer for creating an extended UI part representing a UI part to be superimposed on a UI,
an acquisition step of acquiring a capture image of each of a plurality of UIs displayed by the browser;
a display control step of displaying, on a screen, a capture image of each of the plurality of UIs selectably as a candidate for a UI on which the extended UI component is superimposed;
a creating step of creating information that associates identification information of a UI selected as a candidate with definition information that defines an extended UI part that is superimposed and displayed on the UI in response to a user operation to select the candidate;
A method for creating a UI component that executes the above.
(Additional Note 5)
A computer for creating an extended UI part representing a UI part to be superimposed on a UI,
an acquisition step of acquiring a capture image of each of a plurality of UIs displayed by the browser;
a display control step of displaying, on a screen, a capture image of each of the plurality of UIs selectably as a candidate for a UI on which the extended UI component is superimposed;
a creating step of creating information that associates identification information of a UI selected as a candidate with definition information that defines an extended UI part that is superimposed and displayed on the UI in response to a user operation to select the candidate;
A program that executes the following.

１業務支援システム
１０作成者端末
２０利用者端末
３０業務システム
４０ネットワーク
１１０Ｗｅｂブラウザ
１２０編集ツール
１２１表示制御部
１２２入力受付部
１２３画面取得部
１２４表示態様特定部
１２５ルールファイル作成部
１２６記憶部
２１０Ｗｅｂブラウザ
２２０表示ツール
２２１ＵＲＬ取得部
２２２拡張ＵＩ定義情報取得部
２２３表示制御部
２２４入力受付部
２２５記憶部 REFERENCE SIGNS LIST 1 Business support system 10 Creator terminal 20 User terminal 30 Business system 40 Network 110 Web browser 120 Editing tool 121 Display control unit 122 Input reception unit 123 Screen acquisition unit 124 Display mode specification unit 125 Rule file creation unit 126 Storage unit 210 Web browser 220 Display tool 221 URL acquisition unit 222 Extended UI definition information acquisition unit 223 Display control unit 224 Input reception unit 225 Storage unit

Claims

A UI part creation device for creating an extended UI part representing a UI part to be superimposed on a UI, comprising:
a specification unit that specifies a display mode of the UI component for each type of the UI component based on first definition information that defines the UI;
a display control unit that displays, in response to a user operation for specifying a type of the extended UI part, an extended UI part having a display mode that is the same as or similar to a display mode of the specified type of UI part on a screen as a creation target;
a creating unit that creates information in which identification information of the UI is associated with second definition information that defines the extended UI component in response to a user operation for creating the extended UI component;
A UI component creation device having the above structure.

the first definition information is HTML information that defines the UI,
The identification unit is
The UI component creating device according to claim 1 , wherein a display mode of the UI component is specified for each type of the UI component by analyzing a form tag included in the HTML information.

The UI component creation device according to claim 1 or 2, wherein the display mode includes the color, height, and width of the UI component, and, if text can be set in the UI component, the font type of the text.

A computer for creating an extended UI part representing a UI part to be superimposed on a UI,
a specification step of specifying a display mode of the UI component for each type of the UI component based on first definition information that defines the UI;
a display control procedure for displaying, on a screen as a creation target, an extended UI part having a display mode identical to or similar to a display mode of the specified type of UI part in response to a user operation for specifying a type of the extended UI part;
a creating step of creating information in which identification information of the UI is associated with second definition information that defines the extended UI component in response to a user operation for creating the extended UI component;
A method for creating a UI component that executes the above.

A computer for creating an extended UI part representing a UI part to be superimposed on a UI,
a specification step of specifying a display mode of the UI component for each type of the UI component based on first definition information that defines the UI;
a display control procedure for displaying, on a screen as a creation target, an extended UI part having a display mode identical to or similar to a display mode of the specified type of UI part in response to a user operation for specifying a type of the extended UI part;
a creating step of creating information in which identification information of the UI is associated with second definition information that defines the extended UI component in response to a user operation for creating the extended UI component;
A program that executes the following.