UI widget creation device, UI widget creation method and program

Abstract

To provide a UI component creation apparatus, method, and program for supporting creation of UI components to be overlaid and displayed on a web page.SOLUTION: In a business support system in which a creator terminal, a user terminal, and a business system 3 are communicatively connected via a network, a UI component creator terminal for creating an extended UI component representing a UI component overlaid and displayed on a UI is provided with: a specifying unit 124 for specifying a display mode of the UI component for each type of the UI component based on first definition information for defining the UI; a display control unit 121 for displaying on a screen an extended UI component having a display mode that is the same as or similar to the display mode of the specified type of the UI component as a creation target in response to a user operation for specifying the type of the extended UI component; and a creation unit 125 for creating information in which identification information on the UI is associated with second definition information for defining the extended UI component in response to a user operation for creating the extended UI component.SELECTED DRAWING: Figure 2

Description

[Technical field]

[0001] The present disclosure relates to a UI widget creating device, a UI widget creating method, and a program. [Background technology]

[0002] A technique 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 Non-Patent Document 1, a program called an editing tool can be used to create the UI components to be superimposed on the target web page. [Prior art documents] [Non-patent literature]

[0003] [Non-Patent Document 1] BizFront / SmartUI | NTT Technocross, Internet<URL:https: / / www.ntt-tx.co.jp / products / bizfront / sui / > Summary of the Invention [Problem to be solved by the invention]

[0004] However, if you want to check the display mode of a UI widget 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.

[0005] The present disclosure has been made in consideration of the above points, and provides a technique that can assist in creating UI widgets that are superimposed on a Web page. [Means for solving the problem]

[0006] A UI widget creation device according to one embodiment of the present disclosure is a UI widget creation device for creating an extended UI widget representing a UI widget superimposed on a UI, and has: an identification unit that identifies a display mode of the UI widget for each type of UI widget based on first definition information that defines the UI; a display control unit that displays on a screen an extended UI widget having a display mode that is identical or similar to the display mode of a UI widget of the specified type as a creation target in response to a user operation for specifying the type of extended UI widget; and a creation unit that creates information that associates identification information of the UI with second definition information that defines the extended UI widget in response to a user operation for creating the extended UI widget. Effect of the Invention

[0007] A technology is provided that can assist in the creation of UI widgets that are superimposed on a web page. [Brief description of the drawings]

[0008] [Figure 1] 1 is a diagram illustrating an example of an overall configuration of a business support system according to an embodiment of the present invention. [Diagram 2] FIG. 4 is a diagram illustrating an example of a functional configuration of a creator terminal according to the present embodiment. [Diagram 3] FIG. 2 is a diagram illustrating an example of a functional configuration of a user terminal according to the present embodiment. [Figure 4] 11 is a flowchart illustrating an example of an extended UI creation process according to the present embodiment. [Diagram 5] FIG. 13 is a diagram showing an example of an extended UI creation screen (part 1). [Figure 6] FIG. 13 is a diagram illustrating an example of a Web page selection screen. [Figure 7] FIG. 13 is a diagram illustrating an example of a Web page screen. [Figure 8] FIG. 2 is a diagram showing an example of an extended UI creation screen (part 2). [Figure 9] 13 is a diagram showing an example of an extension UI widget creation field related to a pull-down list. FIG. [Figure 10] 13 is a flowchart illustrating an example of an extended UI display process according to the embodiment. [Figure 11] FIG. 13 is a diagram showing an example of a Web page screen on which an extended UI is superimposed. DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS

[0009] An 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 and display UI widgets for supporting input and the like on the web page will be described. However, the business system is merely an example, and is not limited to the business system as long as it is a web server that provides web pages.

[0010] In the following, UI widgets that are superimposed on a Web page are also referred to as "extended UI widgets," and the UI realized by these extended UI widgets (for example, a layer in which one or more extended UI widgets are arranged and superimposed on a Web page) is also referred to as the "extended UI." In the following, as an example, extended UI widgets are assumed to be form widgets 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 widgets are not limited to form widgets defined by HTML information.

[0011] <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. Furthermore, 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.

[0012] 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 a business system 30 and an editing tool 120 for creating an extended UI are installed in 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.

[0013] The user terminal 20 is a terminal of any kind 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 for superimposing and displaying an extended UI on the web page displayed by the web browser 210 are installed in the user terminal 20. Note that, for example, a PC, a tablet terminal, a smartphone, etc. can be used as the user terminal 20.

[0014] 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. As the business system 30, for example, a general-purpose server or the like can be used.

[0015] 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.

[0016] <Example of functional configuration> <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 identification unit 124, and a rule file creation unit 125. Each of these units is realized, for example, by a process executed by an editing tool 120 installed in the creator terminal 10, which is executed by a processor such as a CPU (Central Processing Unit). 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 an HDD (Hard Disk Drive), an SSD (Solid State Drive), or a flash memory.

[0017] 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.

[0018] The input receiving unit 122 receives various input operations on various screens displayed by the display control unit 121 (for example, various operations using a pointing device such as a mouse, various operations using a keyboard, various operations using a touch panel, etc.).

[0019] Screen acquisition unit 123 acquires screen information of a Web page displayed by Web browser 110. Here, the screen information includes the URL (Uniform Resource Locator) of the Web page, a capture image of the Web page (more precisely, a capture image of the Web page displayed by Web browser 110), and screen definition information such as HTML information of the Web page.

[0020] The display mode specification unit 124 specifies the display mode of UI parts (e.g., form parts such as buttons, text boxes, password boxes, radio buttons, check boxes, pull-down lists, list boxes, text areas, etc.) of the Web page by using the screen definition information included in the screen information acquired by the screen acquisition unit 123. Here, the display mode refers to the appearance of the UI parts, such as the color, size (height and width), and font type used in the UI parts. However, in addition to this, the display mode may also represent various appearances, such as decoration and design.

[0021] 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 a Web page (hereinafter also referred to as a 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 widget included in the extended UI, and the display position (display coordinates) of each extended UI widget 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 the multiple URLs.

[0022] 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 in a file server or the like accessible to each user terminal 20, or may store the rule file in an external recording medium such as a USB memory or the like distributed to each user.

[0023] Storage unit 126 stores information necessary for creating an extended UI (for example, the URL of a target Web page, a captured image, screen definition information, etc.) and stores rule files.

[0024] <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, SSD, or flash memory.

[0025] The URL acquisition unit 221 acquires the URL of the Web page displayed by the Web browser 210 .

[0026] The extended UI definition information acquisition unit 222 determines whether the URL acquired by the URL acquisition unit 221 is the URL of the target Web page by referring to the rule file stored in the storage unit 225. Then, when 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.

[0027] The display control unit 223 uses the extended UI definition information acquired by the extended UI definition information acquisition unit 222 to superimpose and display 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 widget included in the extended UI definition information, for example, and displays the information at a display position corresponding to the extended UI widget. At this time, the display control unit 223 may, for example, set a transparent layer that transmits operations and displays on the Web page and then arrange the extended UI widget on the transparent layer, or may set each transparent layer on the Web page within a range that includes each extended UI widget, and then arrange each extended UI widget on each transparent layer.

[0028] The input receiving unit 224 receives various input operations in the extended UI displayed by the display control unit 223 (for example, various operations using a pointing device such as a mouse, various operations using a keyboard, various operations using a touch panel, etc.).

[0029] Storage unit 225 stores information necessary for superimposing and displaying an extended UI on a Web page displayed by Web browser 210 (for example, a rule file distributed from creator terminal 10, etc.).

[0030] <Example of extended UI creation process> An example of an extended UI creation process according to this 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.

[0031] First, the display control unit 121 displays an extended UI creation screen (step S101). For example, the display control unit 121 displays an extended UI creation screen 1000 shown in FIG.

[0032] The extended UI creation screen 1000 shown in FIG. 5 includes an “Add screen” button 1010, a captured image display field 1020, an “Add part” button 1030, an extended UI list 1040, a “Test run” button 1050, and a “Save” button 1060.

[0033] The "Add Screen" button 1010 is a button for displaying a Web page selection screen, which will be described later. The capture image display field 1020 is a display field in which a capture image of a target Web page selected on the Web page selection screen, which will be described later, is displayed. The "Add Component" button 1030 is a button for arranging an extended UI widget creation field, which will be described later, on the capture image display field 1020. The extended UI list 1040 is a display field in which a list of names, types, etc. of extended UI widgets created in the extended UI widget creation field arranged in the capture image display field 1020 is displayed. The "Test" button 1050 is a button for executing a display test of the extended UI widgets created in the extended UI widget 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 widgets created in each extended UI widget creation field on the target Web page.

[0034] In the following, the explanation will be continued on the assumption that the creator presses the "Add Screen" button 1010 on the extended UI creation screen 1000 shown in FIG.

[0035] The input receiving unit 122 receives a pressing operation of the "Add screen" button 1010 (that is, an operation to display the Web page selection screen) (Step S102).

[0036] When the input receiving unit 122 receives a display operation of the Web page selection screen, the screen acquiring 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 a plurality of tabs, the screen acquiring unit 123 acquires the URL and capture image of each Web page displayed in each tab. Also, for example, if a plurality of Web browsers 110 are running on the creator terminal 10, the screen acquiring unit 123 acquires the URL and capture image of the Web page displayed by the Web browser 110 for each of the plurality of Web browsers 110.

[0037] 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, the capture image, the screen definition information, etc.) may also be acquired in the above step S103.

[0038] Next, the display control unit 121 displays a Web page selection screen (step S104). For example, the display control unit 121 displays a Web page selection screen 2000 shown in FIG.

[0039] 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.

[0040] The Web browser selection field 2010 is a selection field for selecting a Web browser 110 from which a target Web page is to be selected 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.

[0041] Here, in the web page screen selection field 2020, in addition to the web page name and URL of the web page displayed in each tab of the web browser 110, the capture image (reduced image) acquired in the above step S103 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 web page name "Report Creation Page" of the web page displayed in the second tab of the web browser 110, the URL of the web page "https: / / www.hogehoge.co.jp / report / ", and a capture image (reduced image) 2022 of the web page.

[0042] 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, a case in which only the web page name and URL are displayed. That is, when selecting a target web page from among multiple web pages to create a UI widget 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, so that the desired web page can be visually and easily identified and selected.

[0043] 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.

[0044] In the following, the explanation will be continued assuming that the web page (web page name "Report Creation Page", URL "https: / / www.hogehoge.co.jp / report / ") in the second line 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. Also, the screen of the web page (web page name "Report Creation Page") displayed by the web browser 110 is, for example, web page screen 3000 shown in Fig. 7. Web page screen 3000 shown in Figure 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.

[0045] The input receiving unit 122 receives a pressing operation of the "Add selected screen" button 2030 (that is, a selection operation of the target Web page) (Step S105).

[0046] 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 accepted in the above step S105 (step S106). Note that, for example, if screen information including the screen definition information of the target Web page is acquired in the above step S103, this step may not be executed.

[0047] 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 widget for each type of UI widget (step S107). That is, the display mode identification unit 124 identifies the display mode of each UI widget included in the target Web page for each type of UI widget.

[0048] Here, the display mode specification unit 124 analyzes form tags defined in screen definition information, which is HTML information, for example, and specifies 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 specifying display modes such as the background color, character font, character color, etc. of the form components.

[0049] For example, for a form part of a type not defined in the screen definition information of the target Web page, the display mode specification unit 124 may specify a default display mode preset according to the type, or may specify a display mode of a UI part of a type similar to the 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 similar to each other may be preset.

[0050] 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.

[0051] A capture image 1021 of a target Web page is displayed in a capture image display field 1020 of an extended UI creation screen 1000 shown in FIG. 8. A coordinate plane (e.g., an xy coordinate plane) for determining a display position of an extended UI for the target Web page is set on the capture image 1021. The creator can place an extended UI widget creation field on the capture image 1021 by, for example, pressing an "add part" button 1030. The extended UI widget creation field can be moved to an arbitrary position on the capture image 1021 by, for example, a drag-and-drop operation. This allows the creator to place an extended UI widget at an arbitrary 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 an extended UI widget creation field 1110 and an extended UI widget creation field 1120 are placed on the capture image 1021.

[0052] Here, the extended UI widget 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 widget to be created in the extended UI widget creation field 1110, and if text, images, etc. (hereinafter referred to as text, etc.) can be set for the extended UI widget of the type in question, set the text, etc. In the example shown in FIG. 8, "Button" representing a button is set as the type of extended UI widget to be created in the extended UI widget creation field 1110, and "Button 1" is set as the name, and are displayed in the type display field 1112 and name display field 1113, respectively. In addition, the extended UI widget creation field 1110 displays an extended UI widget 1114 representing a button and having "template selection" set as text. At this time, the extended UI widget 1114 is displayed in the display mode specified in the above step S107 according to its type. That is, in the example shown in Fig. 8, the extended UI widget 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 widget in the same display mode (the same or a 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 widget 1114 on the coordinate plane set on the captured image 1021 become the display position on the target Web page.

[0053] Similarly, the extended UI widget creation field 1120 includes an edit button 1121, and by pressing the edit button 1121, the creator can set the type and name (identification information) of the extended UI widget to be created in the extended UI widget creation field 1120, and if text can be set for the extended UI widget of the type, set the text. In the example shown in FIG. 8, "Text" representing a text box is set as the type of extended UI widget to be created in the extended UI widget creation field 1120, and "Text 1" is set as the name, and are displayed in the type display field 1122 and the name display field 1123, respectively. Also, the extended UI widget creation field 1120 displays an extended UI widget 1124 representing a text box and having "Please enter the implementation details" set as the text. At this time, the extended UI widget 1124 is displayed in the display mode specified in the above step S107 according to its type. This allows the creator to create an extended UI widget in the same display mode (the same or similar display mode) as when the extended UI is actually superimposed on the target Web page. The display coordinates of the extended UI widget 1124 on the coordinate plane set on the captured image 1021 become the display position on the target Web page.

[0054] In this way, the creator can create an extended UI by placing various extended UI widgets on the captured image of the target Web page. In addition, at this time, the extended UI widget is displayed in the same display mode as the target Web page according to its type. Therefore, for example, the creator can check the display mode of the extended UI widget superimposed on the target Web page without closing the editing tool 120 and then opening the target Web page in the Web browser 110.

[0055] 8 includes a detailed setting field 1070 in which the creator can make more detailed settings for the extended UI created in the extended UI widget creation field selected by the creator. In this detailed setting field 1070, for example, the display mode (appearance, external appearance) and arrangement method of the extended UI widget can be changed, and operation settings can be made for the extended UI widget. This makes it possible, for example, to make more detailed settings for the display target of the extended UI widget, and to arrange extended UI widgets that operate dynamically.

[0056] 8 shows an extended UI widget creation field in which "button" is set as the type of extended UI widget, and an extended UI widget 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 widget creation field. For example, FIG. 9 shows an extended UI widget creation field 1130 in which "pull-down list" is set as the type of extended UI widget. The extended UI widget creation field 1130 shown in FIG. 9 includes an edit button 1131, a type display field 1132 in which a type "List" representing a pull-down list is displayed, a name display field 1133 in which the name "pull-down list 1" is displayed, and an extended UI widget 1134 in which the text "selection item 1" is set.

[0057] In the following, it is assumed that the creator creates extended UI widgets in the extended UI widget creation fields 1110 and 1120 on the extended UI creation screen 1000 shown in FIG. 8, and then presses the "Save" button 1060.

[0058] The input receiving unit 122 receives a pressing operation of the "Save" button 1060 (that is, an operation for creating an extended UI) (step S109).

[0059] 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 storage 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 the extended UI configured with each extended UI widget created by the extended UI widget creation columns 1110 and 1120, respectively, and stores this rule file in the storage unit 126. As a result, a rule file (that is, a rule file represented as (URL, extended UI definition information)) in which the URL of the target Web page is associated with extended UI definition information including HTML information and display positions of each extended UI widget is created and stored.

[0060] However, for example, if a rule file already exists in memory unit 126, 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.

[0061] <Example of extended UI display processing> 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 certain URL is accessed by the Web browser 210 and the display of the Web page of the URL starts. 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.

[0062] The URL acquisition unit 221 acquires the URL of the Web page displayed by the Web browser 210 (Step S201).

[0063] 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 the above step S201 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 the above step S201 is included in the rule file.

[0064] If it is not determined in step S202 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.

[0065] 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).

[0066] 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 widget included in the extended UI definition information, and superimposes the rendered extended UI widget 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 widget 4010 created in the extended UI widget creation field 1110 and the extended UI widget 4020 created in the extended UI widget creation field 1120 are superimposed. As a result, when performing some business on the Web page provided by the business system 30, the extended UI widgets can be used to support the user's business. For example, extended UI components can assist users in their work by alerting them to input errors, showing input examples, and making templates available.

[0067] <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 UI widget of the Web page the same as that of the UI widget of the Web page when creating an extended UI on the extended UI creation screen, even if the display mode of the UI widget of the Web page is specified by a style sheet.

[0068] <Summary> As described above, in the creator terminal 10 according to the present embodiment, when creating an extended UI widget that constitutes an extended UI that is superimposed on a Web page, the display mode of the extended UI widget can be created in the same display mode as the Web page. This makes it possible to check the display mode of the extended UI without launching the Web browser 110, for example, and to efficiently create the extended UI.

[0069] In addition, in the creator terminal 10 according to the present embodiment, when a Web page on which an extended UI is superimposed is selected from the list, the captured image (reduced image) of the Web page is also displayed at the same time. Therefore, the creator can easily select a desired Web page, compared to when, for example, only the name or URL of the Web page is displayed.

[0070] The present invention is not limited to the above-described embodiments specifically disclosed, and various modifications, changes, combinations with known technologies, etc. are possible without departing from the scope of the claims.

[0071] The following supplementary items are further disclosed regarding the above-described embodiment. (Additional note 1) A UI widget creation device for creating an extended UI widget representing a UI widget 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 widget is superimposed; a creating unit that creates information that associates identification information of a UI selected as the candidate with definition information that defines an extended UI widget to be superimposed on the UI in response to a user operation that selects the candidate; A UI component creation device having the above configuration. (Additional note 2) The display control unit is The UI widget creation device described in appended claim 1, wherein identification information of each of the multiple UIs, the name of each of the multiple UIs, and a capture image of each of the multiple UIs are displayed on the screen in a selectable manner as candidates for UIs on which the extended UI widget is superimposed. (Additional note 3) The display control unit is 3. The UI widget creation device according to claim 1, further comprising: displaying, on the screen, an operation component 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 widget representing a UI widget to be superimposed on a UI, an acquisition step of acquiring a capture image of each of the 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 widget is to be superimposed; a creating step of creating information that associates identification information of a UI selected as the candidate with definition information that defines an extended UI widget to be superimposed on the UI in response to a user operation to select the candidate; How to create a UI widget that performs the above. (Additional note 5) A computer for creating an extended UI widget representing a UI widget to be superimposed on a UI, an acquisition step of acquiring a capture image of each of the 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 widget is to be superimposed; a creating step of creating information that associates identification information of a UI selected as the candidate with definition information that defines an extended UI widget to be superimposed on the UI in response to a user operation to select the candidate; A program that executes the following. [Explanation of symbols]

[0072] 1. Business Support System 10 Creator Terminal 20 User terminal 30 Business Systems 40 Network 110 Web Browser 120 Editing Tools 121 Display control unit 122 Input reception section 123 Screen acquisition section 124 Display mode specification unit 125 Rule File Creation Department 126 Storage section 210 Web Browser 220 Display Tools 221 URL acquisition part 222 Extended UI definition information acquisition unit 223 Display control section 224 Input reception section 225 Storage section

Claims

1. 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.

2. 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.

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

4. 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.

5. 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.

Images