JP2024030005A - Screen design information generation system, screen design information generation method, and computer program - Google Patents

Abstract

An object of the present invention is to provide a screen design information generation system that can efficiently create screen design information for a screen page including screen components. [Solution] A screen design information generation system 1 that generates screen design information for a screen page, in which the screen page includes at least one screen component associated with a predetermined event, and existing screen page management information is , the configuration information between screen parts included in an existing screen page and a series of processes to be executed when a predetermined event occurs are stored in association with each other, and the processor selects the screen page to be created (111). , obtain the configuration information between the screen parts included in the obtained screen page to be created, and based on the existing screen page management information, determine whether a predetermined event has occurred for the screen parts included in the screen page to be created. 110). [Selection diagram] Figure 1

Description

The present invention relates to a screen design information generation system, a screen design information generation method, and a computer program.

For example, screen pages known as web pages are produced every day, such as online shops, reservation pages, news sites, and pages provided by production management systems. Among the screen pages, there are pages that include screen components that are operated by the user. When a user operates a screen component, an event occurs, and a predetermined series of processes are called and executed.

Note that Patent Document 1 or Patent Document 2 is known as a technique for efficiently creating software, although it is not a technique for creating a screen page including screen components.

Patent No. 5456707 Patent No. 4846483

It takes time to consider and define a series of processes that are called every time a user operates a screen component, and it takes time to create source code for a series of processes. ) is low.

In Patent Document 1, probability information is generated based on terms associated with functions, and a traceability matrix indicating the relationship between functions and sources is created. Even if Patent Document 1 could be used to improve the efficiency of screen page creation, it would only be possible to analyze the source code of the screen page based on words. However, in reality, a user interface that is easier to use and more intuitively usable is desired, and it is known that there is a tacit understanding of screen design (design of user interface). A series of processes to be called when a certain event occurs is often determined depending on the screen configuration, such as the display position of the screen component and its positional relationship with other screen components. Therefore, it is not possible to understand the structure between screen parts only by the name of the screen parts, and therefore a series of processes cannot be extracted.

Patent Document 2 specifies a component category, searches a repository, and recommends components whose execution coverage exceeds a threshold to a developer. Even if Patent Document 2 could be used to improve the efficiency of creating screen pages, it would only be possible to categorize screen component names and event names and search for source code for one process to be searched. However, in reality, when a certain event occurs, multiple processes are often executed in a predetermined order. With the technique of Patent Document 2, it is not possible to grasp the configuration between screen components, and it is also not possible to extract processes by considering the order of execution.

The present invention has been made in view of the above-mentioned problems, and its objects are a screen design information generation system, a screen design information generation method, and a screen design information generation system that can efficiently create screen design information of a screen page including screen components. Its purpose is to provide computer programs.

In order to solve the above problems, one aspect of the present invention is a screen design information generation system that generates screen design information of a screen page, and the screen page includes a screen associated with a predetermined event. at least one component including at least one processor and at least one memory used by the processor, the memory being configured to carry out a predetermined computer program for generating screen design information that defines operations regarding the screen page. and existing screen page management information regarding existing screen pages. The processor acquires a screen page to be created by executing a predetermined computer program, and stores a series of processes in association with each other in the screen page to be created. , and generates candidates for a series of processes to be called when a predetermined event occurs for a screen component included in the screen page to be created, based on the existing screen page management information.

According to the present invention, candidates for a series of processes to be called when a predetermined event occurs are generated by referring to existing screen page management information based on configuration information between screen components in a screen page to be created. Can be done.

FIG. 1 is a diagram showing an overview of a screen design information generation system. 1 is a diagram showing a hardware configuration of a screen design information generation system. FIG. 2 is a diagram showing an example of a computer program stored in the screen design information generation system. It is a diagram showing an example of information stored in the screen design information generation system. FIG. 2 is a diagram showing the relationship between functions and the overall flow of the screen design information generation system. This is an example of existing source code information. This is an example of existing screen configuration information (screen HTML information). This is an example of a screen displayed based on existing screen configuration information. This is an example of snippet information. This is an example of dependency information between snippets. This is an example of log information. This is an example of coverage information. This is an example of information that manages similarity between snippets. This is an example of screen component information. This is an example of information indicating usage status of a snippet. This is an example of information showing a list of flow candidates. This is an example of configuration information (screen HTML information) of a newly created screen. This is an example of a screen displayed based on newly created screen configuration information. This is an example of event flow candidate information. It is an example of the information provided to the user of the screen design information generation system. This is an example of source code information newly created using information on event flow candidates. It is a flowchart which shows the process of extracting a snippet from existing source code. It is a flowchart which shows the process of analyzing a log. It is a flowchart which shows the process which determines a degree of similarity. 3 is a flowchart illustrating processing for extracting screen component information. 12 is a flowchart illustrating a process for creating usage status of a snippet. 3 is a flowchart illustrating processing for generating flow candidates. 3 is a flowchart illustrating processing for generating a screen component flow. It is a flowchart of the process of displaying a flow candidate on a computer terminal. 3 is a flowchart illustrating processing for generating source code information.

Embodiments of the present invention will be described below based on the drawings. This embodiment discloses a system and method that enable efficient creation of presentation layer application programs (hereinafter referred to as applications). When an event occurs due to an operation on a screen component, the presentation layer application executes a predetermined series of processes such as search, data acquisition, screen creation, and screen update.

In this embodiment, existing source code is divided and linked to events and screen components to generate code (snippets). In this embodiment, the screen events and screen components (screen parts) associated with the snippet are compared with the events, character string information, and positional relationships of the screen parts of the new screen to be created. Create an event flow consisting of one or more snippets for screen events. The user can create a new screen by referring to the event flow.

As a result, according to this embodiment, when there are many screen parts on a screen, there is no need to consider the implicit relationships between screen parts and create an event flow from scratch, and it is relatively easy to create a new screen ( (including display and internal processing).

In this embodiment, the source code of a screen similar to the new screen to be created can be extracted and reused using existing source code information with a proven track record, allowing the user to efficiently create a new screen. be able to.

In this embodiment, as described later, the source code of the existing system and the screen configuration of the existing system are analyzed, and then the new system screen is created using the analysis results regarding the existing system screen and events. Supports the generation of event flows that are applied to

In the preparation stage, the source code used in the existing system is analyzed to find the configuration information and appearance probability between screen components, extract multiple snippets from the source code, and determine the execution order of the extracted snippets. Generate event flow candidates by taking this into account. In the new screen generation support stage, the screen configuration information of the new screen is compared with the screen configuration information of the existing system, snippets related to similar screen configurations are extracted, and each snippet is specified based on the dependencies of the extracted snippets. Generate an event flow by arranging them in this order.

When extracting snippets from existing source code, the degree of similarity between snippets may be determined, and snippets that are similar by a predetermined value or more may be integrated. If multiple snippets corresponding to the combination of screen configuration and event are detected, the snippet that has been executed more often than other snippets can be selected.

In this embodiment, terms are defined as follows. However, it is possible to define other than the definition below.

“Existing source code” is source code in which a series of processes linked to screen components and events are described in an existing system (existing software).

"Snippet dependency relationship" is information obtained by extracting dependency relationships using the structural information of the source code when dividing snippets from the source code. Dependencies include, for example, chronological order, error flow, and the like.

"Coverage" is information about whether or not each line of source code is passed during operation.

A "snippet" is a combination of code snippets, event information, and screen components (screen HTML information) that are divided from some point of view. Snippet corresponds to "code snippet". Snippets that are the same or similar by more than a predetermined value are integrated into one snippet based on the snippet usage information.

"Snippet similarity" indicates the degree to which snippets are similar to each other. For example, all the snippets extracted from the source code can be arranged on the vertical and horizontal axes of a table and managed by writing the degree of similarity in the cells.

"Snippet usage information" is information that manages usage status for each snippet. The snippet usage information includes information that organizes the amount of usage of snippets, similar snippets, related events, and related screen components. When snippet integration occurs, event information and screen component information are written together.

The "flow candidate list" is a list of event flow candidates that can be extracted from existing systems (screens of existing systems) created in the past.

An "event flow" is a series of processes that are called when an event occurs. The event flow is an example of "screen design information". An event occurs when a user operates a screen component such as a "search button," "page switching button," "screen update button," or "edit button," for example.

"New screen HTML" is a computer program that defines the screen configuration of a new screen for which screen design information is to be created.

A “flow” is an event flow selected from event flow candidates and created based on the selected event flow.

A first embodiment will be described using FIGS. 1 to 30. FIG. 1 shows an overview of a screen design information generation system 1.

The screen design information generation system 1 is electrically connected to the existing software asset storage section 10. The existing software asset storage unit 10 stores existing source code information 101 and screen HTML (Hyper Text Markup Language) information 102 of existing screen pages regarding information processing systems (existing systems) created in the past. Hereinafter, this may be referred to as the existing source code 101 and the existing screen HTML 102.

The screen design information generation system 1 is configured on a computer as described later with reference to FIG. The screen design information generation system 1 includes, for example, a snippet extraction unit 151, a log analysis unit 152, a snippet similarity determination unit 153, a screen component information extraction unit 154, a snippet usage status creation unit 155, a flow candidate generation unit 110, and a screen component flow. A generation unit 157 is provided as a function. The screen design information generation system 1 does not need to include all of the functions shown in FIG. Furthermore, the screen design information generation system 1 can also include functions not shown in FIG. 1, as will be described later with reference to FIGS. 2 to 5.

In FIG. 1, a schematic operation of the screen design information generation system 1 will be explained. The detailed operation will be described later with reference to FIG. 5 and FIGS. 22 to 30.

The existing software asset storage unit 10 is a repository that stores source code, screen HTML information, etc. of an existing system. The existing source code execution log 105 stored in the existing software asset storage unit 10 is analyzed by the log analysis unit 152, and the analysis result is input to the snippet usage status creation unit 155.

The snippet extraction unit 151 divides the process associated with an event from the existing source code 101 and converts it into snippets. There are multiple methods for extracting snippets from existing source code 101.

For example, by focusing on comments in existing source code, a source code fragment of a process (predetermined process) associated with an event can be extracted as a snippet. For example, by focusing on a function in the existing source code, a source code piece in the existing source code can be extracted as a snippet. For example, source code fragments within the existing source code can be extracted as snippets by focusing on the dependency relationships of variables within the existing source code.

One or more snippets 103 (see FIG. 5) can be obtained from existing source code 101 using any one, more than one, or all of the methods described above. The extracted snippet 103 is information that combines a source code piece, event information, and screen HTML information.

As described below, the multiple extracted snippets may include snippets that are dependent on each other. By using structural information in the source code, it is possible to detect which snippet is executed after which snippet. For example, a case will be described in which a shopper (user of a service provided by a screen page) selects a product on the product purchase screen and operates the "Add to Cart" button.

When the shopper operates the "Add to Cart" button, which is one of the screen components to be operated by the shopper, an event called "Add to Cart" occurs. When this event occurs, a process (first process) is executed to obtain the number of products selected by the shopper from the product list on the product purchase screen, and then a process (first process) that calls a service that updates cart information ( 2nd process) is performed.

This execution order (dependency between snippets) can be detected from structural information written in the existing source code from which to extract. Therefore, in the screen design information generation system 1, when a screen component called "Product List" and a screen component called "Add to Cart" button exist on the same screen, if an "Add to Cart" event occurs, the A candidate event flow is generated that causes a snippet of one process to be executed and then a snippet of a second process to be executed. A programmer (user of the screen design information generation system 1) can efficiently create source code for a new screen by referring to event flow candidates proposed by the screen design information generation system 1. The newly created source code and the screen HTML information corresponding to the source code are stored in the existing software asset storage unit 10 as the existing source code 101 and the existing screen HTML information 102.

The log analysis unit 152 analyzes the execution log 105 of the source code 101. For example, the log analysis unit 152 calculates, for each snippet, how many times each line of the source code has been passed (or executed) when the source code is executed. Any method other than analyzing the execution log 105 may be used as long as it is possible to calculate the usage amount (number of uses, execution record) of the snippet 103. The usage amount of the snippet 103 can be used as information indicating how many existing systems the snippet has been used in the past. In this embodiment, snippets that are used more frequently are provided to the programmer from among the snippet candidates extracted from the positional relationship of the screen components and the attributes of the screen components.

The snippet similarity determination unit 153 determines the similarity between the snippets extracted by the snippet extraction unit 151. Snippets (including identical snippets) whose similarity is greater than or equal to a predetermined value are integrated as one snippet.

The screen component information extraction unit 154 extracts screen component information for all screen components from the existing screen HTML information 102. The screen component information includes, for example, positional relationships with other screen components existing on the same screen and attribute information of the screen component. The positional relationship between screen information can be determined, for example, from a DOM (Document Object Model) or from the coordinates of screen components on the screen. The attribute information of the screen component includes, for example, the type of the screen component, the label (name) of the screen component, or both. Types of screen parts include, for example, "buttons" and "tables." Examples of "label" include "search" and "add to cart."

The snippet usage status creation unit 155 creates information 109 (described later in FIG. 15) regarding the usage status of grouped and integrated snippets. The snippet usage information 109 stores, for example, the number of times a snippet is used (coverage), an event corresponding to the snippet, other snippets executed before the snippet, screen components related to the snippet, and the like.

The flow candidate generation unit 110 generates event flows that can be extracted from the screen of the existing system. The flow candidate generation unit 110 generates event flow candidates by extracting snippets that match the conditions and arranging them in a predetermined order. An event flow candidate only needs to include at least one snippet, and does not necessarily need to include multiple snippets. Some event flow candidates include only one snippet.

For example, the flow candidate generation unit 110 generates conditions for snippets constituting an event flow (events, attributes (names) of screen components corresponding to the event, positional relationships between the screen components corresponding to the event and other screen components on the same screen). Among the snippets that satisfy ), the snippets whose usage amount is greater than or equal to a predetermined value are selected as snippets that constitute event flow candidates.

For example, if snippets A and B are associated with the event "button click" and snippet A is used more than snippet B, then snippet A is selected. Furthermore, if there is a high probability that snippet C will occur after snippet B, an event flow candidate (A→C) in which snippet C is executed next to snippet A is generated. If the probability that snippet C will be executed is low, only snippet A is selected, and an event flow candidate that includes only snippet A is generated.

The screen component flow generation unit 157 selects event flow candidates that match the new screen HTML information 111, and provides the selected event flow candidates to the programmer by displaying them on a computer terminal.

FIG. 2 shows the hardware configuration of the screen design information generation system 1. The screen design information generation system 1 is configured as a computer including, for example, a processor 11, a memory 12, a storage device 13, a user interface section 14, and a communication section 15. In the figure, the processor is shown as "CPU" and the user interface is shown as "UI".

The memory 12 is a main storage device and stores predetermined computer programs for implementing predetermined functions 151 to 158, 160. The storage device 13 is an auxiliary storage device, and stores management information, databases, etc. used when implementing predetermined functions 151 to 158, 160. Processor 11 is an example of a "processor". Memory 12 and storage device 13 are examples of "memory". The storage contents of the memory 12 and the storage device 13 will be described later with reference to FIGS. 3 and 4.

The user interface unit 14 is a device that exchanges information with a programmer who is a user of the screen design information generation system 1. The user interface section 14 is connected to an input device 2 such as a keyboard and an output device 3 such as a monitor display. Information from the input device 2 is input to the screen design information generation system 1 via the user interface section 14. Information from the screen design information generation system 1 is output to the output device 3 via the user interface section 14.

The communication unit 15 is a communication device for the screen design information generation system 1 to communicate with other information devices. The communication unit 15 is connected to other information devices via the communication network CN so as to be able to communicate bidirectionally.

Other information devices include, for example, a computer terminal 4 and a storage system 5. The computer terminal 4 is a terminal used by a programmer and can also be called a user terminal. Using the computer terminal 4, the programmer registers the generated source code in the screen design information generation system 1 by using the screen design information generation support service provided by the screen design information generation system 1. The computer terminal 4 includes, for example, a processor, a memory, a user interface section, and a communication section (all not shown). A plurality of computer terminals 4 can be connected to one screen design information generation system 1. The plurality of computer terminals 4 can jointly create screen design information for a new screen, or can each create screen design information for a new screen separately.

The storage system 5 is configured like a file sharing system including, for example, a flash memory, a hard disk, a magnetic tape, a magneto-optical disk, and the like. Part or all of the information stored in the storage device 13 may be stored in the storage system 5. Although not shown, a configuration may be adopted in which a plurality of screen design information generation systems 1 share one storage system 5.

The storage medium MM is a nonvolatile memory or a volatile memory backed up by a battery, and can be connected to the screen design information generation system 1. The storage medium MM can read computer programs or data from the memory 12 or the storage device 13 of the screen design information generation system 1 and store them non-temporarily. It is also possible to connect the storage medium MM to another computer (not shown) and transfer the computer program and data stored in the storage medium MM to the memory or storage device (none of which is shown) of the other computer.

FIG. 3 shows an example of a computer program stored in memory 12. The memory 12 includes, for example, a snippet extraction unit 151, a log analysis unit 152, a similarity determination unit 153, a screen component information extraction unit 154, a snippet usage status creation unit 155, a flow candidate generation unit 156, a screen component flow generation unit 157, Predetermined computer programs for realizing each function such as a flow candidate display section 158 and a source code generation section 160 are stored.

The snippet extraction unit 151 has a function of extracting snippet information 103 (also referred to as snippet 103) from existing source code information 101 from a predetermined viewpoint. The log analysis unit 152 analyzes the log information 105 of the existing source code information 101 and outputs coverage information 106.

The snippet similarity determination unit 153 determines the similarity of each extracted snippet and generates snippet similarity information 107. The similarity of snippets is calculated, for example, by comparing character strings or token strings included in the snippets. As described later in FIG. 13, the snippet similarity information 107 is configured by, for example, arranging the snippets to be compared vertically and horizontally in a table, and storing the similarity in each cell where the vertical column and horizontal row intersect. .

The screen component information extraction unit 154 extracts the screen component information 108 by analyzing the existing HTML information 102. For each screen component in the existing HTML information 102, the screen component information extraction unit 154 acquires, for example, the positional relationship with other screen components existing on the same screen and the attributes (type, label, etc.) of the screen component, and Screen component information 108 is extracted. The snippet usage status creation unit 155 creates snippet usage status information 109.

The flow candidate generation unit 156 generates event flow candidates and outputs event flow candidate list information 110.

The flow candidate display unit 158 has a function of transmitting event flow candidates for a screen to be newly created to the computer terminal 4 and displaying them on the screen of the computer terminal 4. The source code generation unit 160 has a function for a programmer to create source code using event flow candidates. The source code of a new screen created by the programmer using the computer terminal 4 is stored in the screen design information generation system 1 as part of the existing source code information 101.

FIG. 4 shows an example of information stored in the storage device 13. The storage device 13 stores, for example, existing source code information 101, existing screen HTML information 102, snippet information 103, snippet dependency information 104, log information 105, coverage information 106, snippet similarity information 107, screen component information 108, and snippet usage. Status information 109, flow candidate list information 110, new screen HTML information 111, event flow candidate information 112, and output source code information 120 are stored. Hereinafter, the word "information" may be omitted so that snippet information is abbreviated as "snippet."

Coverage information 106 is information indicating the usage amount of the extracted snippet. The flow candidate list information 110 is information showing a list of event flow candidates extracted from existing screen information (information consisting of existing source code and existing screen HTML). The output source code information 120 is source code created by a programmer based on the event flow candidate information 112.

FIG. 5 shows the relationship between functions and the overall flow of the screen design information generation system 1. The main flow is a snippet extraction section 151, a snippet usage status creation section 155, a flow candidate generation section 156, a screen component flow generation section 157, a flow candidate display section 158, and a source code generation section 160 in the center of the drawing.

The snippet extraction unit 151 extracts the snippet 103 from the source code 101 of the existing system. Furthermore, the snippet extracting unit 151 extracts dependencies 104 between snippets by analyzing the structural information of the existing source code 101.

The snippet similarity determining unit 153 calculates the similarity of each snippet 103 and outputs a snippet similarity 107.

The log analysis unit 152 analyzes the log 105 and generates coverage 106. The screen component extraction unit 154 analyzes the existing screen HTML 102 and extracts the screen component 108.

The snippet usage status creation unit 155 creates a snippet usage status 109 based on the snippet 103, the snippet dependency relationship 104, the snippet similarity 107, the coverage 106, and the screen component 108.

The flow candidate generation unit 156 generates a flow candidate list 110 based on the snippet usage status 109. The screen component flow generation unit 157 generates event flow candidates 112 based on the new screen HTML 111 and the flow candidate list 110.

The flow candidate display section 158 provides the event flow candidates 112 to the programmer via the user interface section 14 . The source code generation unit 160 generates the source code 120 of the new screen HTML 111 based on the event flow selected by the programmer from among the event flow candidates and the initial values input by the programmer.

FIG. 6 is an example of existing source code information 101. A plurality of snippets 101000, 101001, 101002, 101003, 101004, 101005, 101006, and 101007 can be extracted from the source code example 1010 based on dependencies of comments, functions, and variables. The snippet shown in FIG. 6 is an illustrative example, and the present disclosure is not limited to the snippet shown in FIG. 6.

FIG. 7 is an example 1020 of the existing screen HTML information 102. The example 1020 of the existing screen HTML that controls the drawing of the existing screen includes multiple screen components 102000, 102001, 102002, 102003, 102004, 102005, 102006, 102010, 102011, 102012, 102013, 102020, 102021, 102030, 102031 is include. As shown in FIG. 7, the existing screen HTML example 1020 includes, for example, a screen component that shows an input field for text or numbers, a screen component that shows a table, a screen component that shows a button to switch the table to the previous or next page, and a screen component that shows a button for switching the table to the previous or next page. It includes a screen component that shows an add button, a screen component that shows an add to cart button, etc. The screen component shown in FIG. 7 is an illustrative example, and the present disclosure is not limited to the screen component shown in FIG. 7.

FIG. 8 is an example screen 1021 displayed using the existing screen HTML information 102. The screen example 1021 is roughly divided into a product selection screen and a product list.

The product selection screen includes screen components 102110, 102111, 102112, 102113, 102114, 102115, and 102116. These screen components correspond to screen components 102000, 102001, 102002, 102003, 102004, 102005, and 102006 of the existing screen HTML example 1020 shown in FIG.

The product list includes a table 10213, details 10214, and images 10215. Table 10213 includes screen components 102120, 102121, 102123, 102130, 102131, 102132, 102133, 102134, and 102135. In the table 10213, rows 202136 and 102137 of a plurality of products are displayed.

Details 10214 includes screen components 102140 and 102141, and one row 102142 is displayed.

At the top of the screen example 1021, an "Add to Favorites" button 102160 and an "Add to Cart" button 102161 are displayed.

FIG. 9 shows an example 1030 of snippet information 103. An example 1030 of the snippet information (snippet) 103 includes, for example, a snippet identifier (snippet ID) 103001, a screen name 103002, a screen component 103003, an event 103004, a source code 103005, a line number 103006, and a code fragment 103007.

The snippet ID 103001 is information that uniquely identifies each snippet managed by the screen design information generation system 1. The screen name 103002 is the name of the screen corresponding to the snippet. The screen name includes, for example, "Product Search Screen."

Screen component 103003 is information indicating a screen component corresponding to the snippet. Event 103004 is information that specifies an event corresponding to a snippet. When the screen component 103003 is operated, an event 103004 occurs.

Source code 103005 is information indicating the original source code from which the snippet was extracted. The line number 103006 specifies the range of the snippet by the line number of the source code 103005. Code fragment 103007 shows the content of the snippet.

In example 1030 of FIG. 9, three rows 103051, 103052, 103053 are shown representing three snippets. Note that the descriptions in each figure are used for explanation within each figure, and consistency with other figures is not considered. Even if the written content in one diagram does not exactly match the written content in another diagram, a person skilled in the art can realize the screen design information generation system 1 of the present disclosure.

FIG. 10 is an example 1040 of information 104 indicating dependencies between snippets. An example 1040 of the snippet dependency information 104 includes, for example, the ID 104001 (previous snippet ID) of the snippet to be executed first, the ID 104002 (later snippet ID) of the snippet to be executed next, the previous snippet ID and the later snippet ID. It has relationship 104003. The relationship 104003 between snippets includes, for example, "order (chronological order)" and "error flow."

FIG. 11 is an example 1050 of the log information 105. The log information example 1050 includes, for example, a source code 105001 and an executed line 105002. The log information example 1050 shows three lines 105051, 105052, and 105053.

FIG. 12 is an example 1060 of coverage information 106. The coverage information example 1060 includes, for example, a snippet ID 106001 and a coverage value 106002. The coverage information example 1060 shows three rows 106051, 106052, and 106053.

FIG. 13 is an example 1070 of snippet similarity information 107 that manages the similarity between snippets. In the snippet similarity information example 1070, for example, the IDs of each snippet are arranged vertically 107001 to 107007 and horizontally 107051 to 107057 in the table, and the similarity is stored at the intersection of the row and column. In example 1070, the degree of similarity is expressed with a decimal point, but it may also be an integer. The snippet similarity example 1070 indicates that snippets with high degrees of similarity are similar to each other, and snippets with low degrees of similarity are dissimilar to each other.

FIG. 14 is an example 1080 of the screen component information 108. The screen component information example 1080 is specified by, for example, information 108001 that specifies the screen on which the screen component is provided, information 108002 that specifies the type of screen component, positional relationship 108003 with other screen components that exist on the same screen, and information 108002. The attribute 108004 of the screen component is provided.

The positional relationship with other screen parts 108003 is, for example, the type of other screen parts such as a "table", or the positional relationship with other screen parts (such as being in the same DOM and located on the upper side). The attribute 108004 of the screen component is, for example, a label name.

FIG. 15 is an example of information 109 indicating usage status of a snippet. An example 1090 of the snippet usage information 109 includes, for example, a snippet ID 109001, a snippet usage amount 109002, a similar snippet ID 109003, information 109004 that specifies the event in which the snippet is called, information 109005 about the snippet that occurs after the snippet, There is information 109006 about screen components within the same screen, and information 109007 about the target screen component. The snippet usage information example 1090 shows three lines 109051, 109052, and 109053.

The event 109004 stores, for example, the type of event related to a snippet and the probability that the snippet will be called when the event occurs. Information on a snippet that occurs after a snippet (denoted as "subsequent occurrence" in FIG. 15) 109005 includes, for example, the ID of a snippet that may be executed after the snippet identified by snippet ID 109001, and its The relationship between the occurrence probability and occurrence is shown.The relationship between occurrence includes occurrence in chronological order and occurrence due to error processing.

Information 109006 about screen components within the same screen stores, for example, the types of other screen components within the same screen, the probability that a snippet is associated with an event that is called, the positional relationship within the screen, and the like. The target screen component information 109007 stores information about the screen component related to the occurrence of the event 109004, that is, for example, the type and label name of the screen component.

FIG. 16 is an example 1100 of information 110 showing a list of flow candidates. An example of flow candidate list information 1100 includes, for example, an ID 110001 that specifies an event flow, an event 110002, a flow 110003, a screen component 110004 within the same screen, a target screen component 110005, and a priority level 110006.

The event 110002 is information that specifies the event that is the origin of the event flow. Flow (event flow) 110003 is information indicating one or more snippets that are called when an event occurs, along with their execution order. The screen component 110004 in the same screen is information indicating the type of other screen component in the same screen as the target screen component 110005 that causes the event 110002.

Priority 110006 is information indicating the priority when the event flow specified by ID 110001 is selected. Although only one row 110051 is shown in FIG. 16, many event flows are actually extracted and managed.

Therefore, there may be multiple event flows 110003 that are executed when a specific event occurs in the arrangement of a specific screen component. If multiple event flows 110003 are detected, the screen design information generation system 1 selects the event flow with the higher priority 110006. The screen design information generation system 1 may select only one event flow with the highest priority and propose it to the programmer, or select a predetermined number of event flows in descending order of priority and propose it to the programmer. It's okay.

FIG. 17 is an example 1110 of configuration information (screen HTML information) 111 of a newly created screen. The screen example 1110 includes a plurality of screen components 111000, 111001, 111002, 111003, 111004, 111005, 111010, 111011, 111012, 111013, 111020, 111030, 111031, such as various buttons, input fields, and tables. ing.

FIG. 18 is an example screen 1111 displayed by the newly created screen HTML information 111. In the screen example 1111, the user searches for a product in the upper area, and the search results are displayed in a table in the lower area. Users add their favorite products from the search results to their "favorites" or add products they wish to purchase to their "cart." The user here is a person who uses the service (online shop, etc.) provided by the new screen HTML information example 1111.

Screen example 1111 includes screen components 111110, 111111, 111112, 111113, 111114, 111115 for searching for products, screen components 111120, 111121, 111122, 111123 for switching and displaying search results, and screen component 11113 for a table. , 111130, 111131, 111132, 111133, a screen component 111140 for adding to the user's favorites, and a screen component 111141 for adding to the user's cart. Note that when the user operates the add to cart button 111141, the screen switches to a product purchase screen (not shown).

FIG. 19 is an example 1120 of event flow candidate information 112. The example of event flow candidate information 1120 includes, for example, an event flow ID 112001, a screen where an event occurs 112002, a screen component where an event occurs 112003, event content 112004, and event flow content 112005. In the example 1120 of event flow candidate information, one row 112051 is shown.

FIG. 20 is an example 31 of information provided to a user (programmer) who uses the screen design information generation system 1. The output screen example 31 is transmitted from the user interface unit 14 to the output device 3 and displayed. Alternatively, the output screen example 31 is transmitted to the computer terminal 4 via the communication unit 15 and displayed on the terminal screen.

The output screen example 31 includes an event information display section 311 that shows information about events, an event flow candidate list display section 312 that shows a list of event flow candidates, a snippet display section 313 that shows information about snippets, and a button 314. .

The event information display section 311 includes, for example, a screen 31100, a screen component 31101, and an event 31102. In the event information display section 311, one row 31151 is shown. A screen 31100 indicates the type of screen where an event occurs. Screen component 31101 indicates the type of screen component that generates an event. The event 31102 indicates the type of operation (user operation) that causes the event.

The event flow candidate list display section 312 includes, for example, a selection section 31200 for selecting an event flow, an event flow ID 31201 that identifies the event flow, and an event flow 31202 that schematically indicates the content of the event. In the event flow 31202, only one or more snippet IDs and the execution order among multiple snippets can be described.

The snippet display section 313 displays details of the snippets constituting the event flow selected by the selection section 31200. In the snippet display section 313, snippet IDs 31300 and 31301 and snippet contents (source code fragments) 31350 and 31351 are displayed.

The programmer creates a source code to be used in the new screen HTML by referring to the information of the event flow candidates displayed on the output device 3 (or the terminal screen of the computer terminal 4).

FIG. 21 is an example 1200 of source code information 120 newly created using information on event flow candidates. The example source code information 1200 includes a plurality of source code fragments 120000 to 120007.

Source code fragments 120001 and 120002 in the upper part of FIG. 21 were created using the event flow provided to the programmer in FIG. Similarly, for other source code fragments, the programmer efficiently creates new source code by using the event flow (not shown) provided from the screen design information generation system 1 based on the new screen HTML and the event. be able to.

FIG. 22 shows a process in which the snippet extraction unit 151 extracts the snippet 103 from the existing source code 101.

Step 15100: The snippet extraction unit 151 reads all files of the existing source code information 101.

Step 15101: Start of loop 1. The snippet extraction unit 151 executes the following predetermined steps on all files of the existing source code information 101.

Step 15102: The snippet extraction unit 151 acquires the screen name of the file of the existing source code information 101.

Step 15103: Start of loop 2. The snippet extraction unit 151 executes the following predetermined steps for all screen components of the file in step 15101.

Step 15104: Start of loop 3. The snippet extraction unit 151 executes the following predetermined steps for all processed events of the screen component in step 15103.

Step 15105: The snippet extraction unit 151 acquires the processing line for the event in step 15104 from the file in step 15101.

Step 15106: The snippet extraction unit 151 divides the processing line obtained in step 15105 according to specific conditions.

Step 15107: Start of loop 4. The snippet extraction unit 151 executes the following predetermined steps for each of the divided processing line groups in step 15106.

Step 15108: The snippet extraction unit 151 adds a column to the snippet information 103, adds an arbitrary ID to the ID column 103001, the screen name from step 15102 to the screen name column 103002, and the screen component information from step 15103 to the screen component column 103003. , the event in step 15104 is placed in the event column 103004, the path of the file selected in step 15101 is placed in the source column 103005, the number of the line divided in step 15106 is placed in the line number column 103006, and the character string of the line is placed in the code fragment column 103007. Write each. After this step, loop 4 ends.

Step 15109: Start of loop 5. The snippet extraction unit 151 combines the divided processing lines in step 15106.

Step 15110: The snippet extraction unit 151 adds the value of column 103001 set in step 15108 corresponding to the processing row group of step 15106 to the pre-ID column 104001 and post-ID column 104002 of the snippet dependency relationship information 104, to the relation column 1004003, and If the relationship is an order relationship, write the value "Order"; if the relationship is error handling, write the value "Error". Thereafter, loops are completed in the order of loop 5, loop 3, loop 2, and loop 1, and the process ends normally.

FIG. 23 shows a process in which the log analysis unit 152 analyzes the log 105.

Step 15200: The log analysis unit 152 reads all columns of the snippet information 103.

Step 15201: The log analysis unit 152 reads all columns of the log information 105.

Step 15202: Start of loop 1. The log analysis unit 152 executes the following predetermined steps on all lines of the snippet information 103.

Step 15203: The log analysis unit 152 compares the value of the source column 103005 and the value of the source code column 106001 of the row selected in step 15202, and acquires rows with the same values from the log information 105.

Step 15204: Start of loop 2. The log analysis unit 152 executes the following predetermined steps on all lines of the log information 105 acquired in step 15201.

Step 15205: The log analysis unit 152 compares the row number column 10300 in step 15202 with the row execution matrix 106002 in step 15204, and calculates the number of matching rows. After this, loop 2 ends.

Step 15206: The log analysis unit 152 adds one column to the coverage information 106, sets the value of the ID column 103001 of the row obtained in step 15202 in the ID column 106001, and sets the sum of the number of rows calculated in step 15205 in the value column 106002. Output to. After this, loop 1 ends. This process then ends normally.

FIG. 24 shows a process in which the similarity determination unit 153 determines the degree of similarity.

Step 15300: The similarity determination unit 153 reads each line of the snippet information 103.

Step 15301: Start of loop 1. The similarity determination unit 153 executes the following predetermined steps for all row combinations of the snippet information 103.

Step 15302: The similarity determination unit 153 calculates the sum of the number of matching lines in the code fragment sequence 103007 divided by the sum of the number of lines for the two lines obtained in step 15301.

Step 15303: The similarity determination unit 153 writes the percentage calculated in step 15302 into the cell of the snippet similarity information 1070 that corresponds to the value of the ID column 103001 of the two rows obtained in step 15301. After this, loop 1 ends. Then, this process ends normally.

FIG. 25 shows a process in which the screen component extraction unit 154 extracts screen component information.

Step 15400: The screen component extraction unit 154 reads all files of the existing screen HTML information 102.

Step 15401: Start of loop 1. The screen component extraction unit 154 executes the following predetermined steps on all files read in step 15400.

Step 15402: The screen component extraction unit 154 extracts screen components from the file selected in step 15401.

Step 15403: Start of loop 2. The screen component extraction unit 154 executes the following predetermined steps for all screen components extracted in step 15402.

Step 15404: The screen component extraction unit 154 extracts the attributes of the screen component selected in step 15403 from the file selected in step 15401.

Step 15405: The screen component extraction unit 154 adds one line to the screen component information 108, and enters the screen name of the file selected in step 15401 in the screen column 108001 and the name of the screen component selected in step 15403 in the screen component column 108002. , writes the attributes of the screen component acquired in step 15404 into the screen component attribute column 108004.

Step 15406: Start of loop 3. The screen component extraction unit 154 executes the following predetermined steps for all combinations of components.

Step 15407: The screen component extraction unit 154 identifies the relationship between the two screen components selected in step 15406 based on the information of the file selected in step 15401.

Step 15408: The screen component extraction unit 154 writes the relationship between screen components calculated in step 15407 to the screen component column 108003 of the same screen in the row added in step 15404 of the screen component information 108. After this, loop 3, loop 2, and loop 1 are completed in this order. Then, this process ends normally.

FIG. 26 shows a process in which the snippet usage status creating unit 155 creates a snippet usage status.

Step S15500: The snippet usage status creation unit 155 acquires all lines of the snippet information 103.

Step S15501: For the rows of the snippet information 103 acquired in step 15500, the snippet similarity score is such that the row and column have the same value as the value of the ID column 103001 for all combinations of rows. If the cell of information 107 is obtained and its value is 1, the two IDs of ID column 103001 are put into the same group.

Step S15502: Start of loop 1. The snippet usage status creation unit 155 executes the following predetermined steps for all the groups compiled in step 15501.

Step S15503: The snippet usage status creation unit 155 writes one line in the snippet usage status information 109 for the group selected in step 15502.

Step S15504: The snippet usage status creation unit 155 calculates the sum of the values 106002 of the rows of the coverage information 106 that have the same ID column 106001 as the value of the ID column 103001 of the group selected in step 15502, and calculates the sum of the values 106002 of the rows of the coverage information 106 that are the same as the value of the ID column 103001 of the group selected in step 15502. It is written in the usage amount column 109002 in the row of usage status information 109.

Step S15505: The snippet usage status creation unit 155 determines if the value of a cell in the snippet similarity information 107 that has the same value in the row or column as the value in the ID column 103001 of the group selected in step 15502 is equal to or higher than a certain threshold. , if the same value is in a row, get the column value, if the same value is in a column, get the row value, and add the obtained row or column value to the similarity of the row of the snippet usage information 109 added in step 15503 Write to snippet column 109003.

Step S15506: The snippet usage status creation unit 155 obtains the value of the event column 103003 of the row of the snippet information 103 that has the same value in the ID column 103001 as the value of the ID column 103001 of the group selected in step 15502, and The proportion of each event is calculated and written in the event column 109004 in the row of the snippet usage information 109 added in step 15503.

Step S15507: The snippet usage status creation unit 155 creates an ID column 104002 and a relationship column 104003 after the row of the snippet dependency relationship information 104 in which the value of the ID column 103001 of the group selected in step 15502 is the same as the value of the previous ID column 104001. information is written in the subsequent occurrence column 109005 of the row of the snippet usage information 109 added in step 15503.

Step S15508: The snippet usage status creation unit 155 selects the screen component information 108 that has the same values as the screen name column 103002 and the screen component column 103003 of the group selected in step 15502 in the screen column 108001 and the screen component column 108002. , calculate the proportion of each value in that group and add it to the values of the screen component column 108003 and target screen component column 108004 of the same screen, and add it to the row of the snippet usage information 109 added in step 15503. Write to screen component string 109006 and target screen component string 109007 of the same screen. After this, loop 1 ends and the process ends normally.

FIG. 27 shows a process in which the flow candidate generation unit 156 generates flow candidates.

Step S15600: The flow candidate generation unit 156 reads each line of the snippet usage information 109.

Step S15601: The flow candidate generation unit 156 acquires the value of the event column 109004 of the row acquired in step S15600.

Step S15602: Start of loop 1. The flow candidate generation unit 156 executes the following predetermined steps for all the values obtained in step 15601.

Step S15603: Start of loop 2. The flow candidate generation unit 156 executes the following predetermined steps for all the values obtained in step 15602 and step 15606.

Step S15604: The flow candidate generation unit 156 extracts rows of the snippet usage information 109 in which the numerical value of the ratio included in the value in step 15603 exceeds a certain threshold.

Step S15605: For the row extracted in step 15604, if a similar snippet is specified in the similar snippet column 109003, the flow candidate generation unit 156 selects a row with a larger value in the usage amount column 109002.

Step S15606: The flow candidate generation unit 156 acquires the next snippet ID from the subsequent occurrence column 109005 if the value exceeds a certain threshold, and holds it as a flow along with its relationship. After this, loop 2 ends.

Step S15607: The flow candidate generation unit 156 determines whether there is no snippet ID value that satisfies the conditions in all steps 15606 of loop 2 and whether there are any unprocessed values remaining in step 15603. If the determination is "yes", the process returns to step 15603. If the determination is "no", the process advances to step S15608.

Step S15608: The flow candidate generation unit 156 adds one line to the flow candidate list information 110, creates a serial number in the ID column 110001, creates the event acquired in step 15601 in the event column 110002, and creates it in step 15606 in the flow column 110003. For the flow, the value acquired from the screen component column 109006 of the same screen is written into the screen component column 110004 of the same screen, and the value acquired from the target screen component column 109007 is written into the target screen component column 110005, respectively. After this, loop 1 ends. Then, this process ends normally.

FIG. 28 shows a process in which the screen component flow generation unit 157 generates a screen component flow.

Step 15700: The screen component flow generation unit 157 reads all lines of the flow candidate list information 110.

Step 15701: Start of loop 1. The screen component flow generation unit 157 executes the following predetermined steps for all rows of the flow candidate list information 110 acquired in step 15700.

Step 15702: The screen component flow generation unit 157 generates the screen name column 103002 of the row having the ID column 103001 of the snippet information 103, which has the same value as all the ID values of the flow column 110003 of the flow candidate list information 110 selected in step 15701. All screen components of the file of new HTML information 102 corresponding to the value of are read.

Step 15703: Start of loop 2. The screen component flow generation unit 157 executes the following predetermined steps for all events of all screen components acquired in step 15702.

Step 15704: The screen component flow generation unit 157 compares the event selected in step 15703 with the value of the event column 112004 of the row selected in step 15702.

Step 15705: The screen component flow generation unit 157 determines whether the values compared in step 15704 match.

Step 15706: The screen component flow generation unit 157 sets the column number in the ID column 112001 of the event flow candidate information 112, the screen name acquired in step 15702 in the screen column 112002, and the screen component acquired in step 15702 in the screen component column 112003. The event name obtained in step 15703 is output to the event column 112004, and the value of the flow column 110003 of the row of the flow candidate list information 110 selected in step 15701 is output to the event flow column 112005. After this, Loop 2 ends, and then Loop 1 ends as well. Then, this process ends normally.

FIG. 29 shows a process in which the flow candidate display unit 158 displays flow candidates on the computer terminal 4.

Step S15800: The flow candidate display unit 158 acquires all lines of the event flow candidate information 112.

Step S15801: The flow candidate display unit 158 determines that the value of the ID column 103001 of the snippet information 103 is Obtain the values of ID column 103001 and code fragment column 103007 in the same row.

Step S15802: The flow candidate display unit 158 displays all rows of the event flow candidate information 112 acquired in step 15800 and the values of the ID column 103001 and code fragment column 103007 acquired in step 15801 on the output device 3.

FIG. 30 shows a process in which the source code generation unit 160 generates source code information.

Step 16000: The source code generation unit 160 obtains from the input device 2 the ID 31201 of the event flow candidate selected in the selection column 31200 for the event flow candidate displayed on the output device 3 in Step 15802.

Step 16001: The source code generation unit 160 generates a snippet ID containing the event flow value in the event flow column 112005 of the row of event flow candidate information 112 that has the same value in the ID column 112001 as the ID obtained in step 16000. In contrast, a character string is generated in which the ID column 103001 of the snippet information 103 is replaced with the value of the code fragment column 103007 in the same line.

Step 16002: The source code generation unit 160 outputs the character string created in step 16001 to the output source code information 120.

According to this embodiment configured in this way, when there are multiple screen parts in a new screen to be created, it is necessary to create an event flow from scratch by considering the implicit relationships between the screen parts. It is possible to efficiently create design information (event flow) for new screens.

In this example, the source code fragments of screens similar to the new screen to be created can be extracted and reused using existing source code information with a proven track record, allowing programmers to efficiently create new screens. can.

Note that the present invention is not limited to the above-described embodiments, and includes various modifications. The above embodiments have been described in detail to explain the present invention in an easy-to-understand manner, and are not necessarily limited to those having all the configurations described. Further, a part of the configuration of one embodiment can be replaced with the configuration of another embodiment. Moreover, the configuration of another embodiment can be added to the configuration of one embodiment. Further, other configurations can be added, deleted, or replaced with a part of the configuration of each embodiment.

Each component of the present invention can be selected arbitrarily, and inventions having selected configurations are also included in the present invention. Furthermore, the configurations described in the claims can be combined in combinations other than those specified in the claims.

1: Screen design information generation system, 2: Input device, 3: Output device, 4: Computer terminal, 5: Storage system, 101: Existing source code information, 102: Existing screen HTML, 103: Snippet information, 104: Snippet dependence Relationship information, 105: Log information, 106: Coverage information, 108: Screen component information, 109: Snippet usage status information, 110: Flow candidate list information, 111: New screen HTML information, 112: Event flow candidate information, 120: Output Source code information, 151: Snippet extraction unit, 152: Log analysis unit, 153: Snippet similarity determination unit, 154: Screen component information extraction unit, 155: Snippet usage status creation unit, 156: Flow candidate generation unit, 157: Screen Component flow generation unit, 158: Flow candidate display unit, 160: Source code generation unit

Claims (8)

A screen design information generation system that generates screen design information for a screen page,
The screen design information includes a series of processes that are called in response to an event,
The screen page includes at least one screen component associated with an event,
at least one processor;
at least one memory used by the processor;
Equipped with
The memory stores at least a predetermined computer program that generates the screen design information regarding the screen page,
By executing the predetermined computer program, the processor:
Generating snippet information in which a code snippet extracted from the existing source code, event information regarding the event, and screen component information regarding the event are associated;
Extracting screen component information indicating the positional relationship and attributes of each screen component from the existing screen configuration information corresponding to the existing source code,
Generating snippet usage status information indicating the usage status of the snippet based on the snippet information, the screen component information, and the dependency relationship between the snippet information extracted from the structure information of the existing source code,
A screen design information generation system that generates screen design information candidates for executing the code snippets in a predetermined order based on the snippet usage status information and stores the screen design information candidates in the memory. By executing the predetermined computer program, the processor:
When a new screen page to be created is acquired, screen parts information indicating events occurring on the new screen page and the positional relationship and attributes of screen parts included in the new screen page is extracted;
2. The screen design information generation system according to claim 1, wherein candidates for screen design information matching the event and screen component information extracted from the new screen page are selected using the snippet usage information. By executing the predetermined computer program, the processor:
3. The screen design information generation system according to claim 2, wherein the selected screen design information candidate is provided to a predetermined computer terminal. The screen design information according to claim 3, wherein the processor receives screen design information created by the predetermined computer terminal based on the screen design information candidates from the predetermined computer terminal, and stores the screen design information in the memory. generation system. By executing the predetermined computer program, the processor:
Calculating the degree of similarity between the generated snippet information,
Integrating the snippet information for which the calculated similarity is greater than or equal to a predetermined value as one snippet information,
The usage status of the snippet is determined based on the dependency relationship between the snippet information, the screen component information, and the snippet information extracted from the structure information of the existing source code, and the other snippet information integrated as the one snippet information. Generates snippet usage information showing the
2. The screen design information generation system according to claim 1, wherein candidates for screen design information for executing the code snippets in a predetermined order are generated based on the snippet usage status information and stored in the memory. By executing the predetermined computer program, the processor:
Extracting the execution results of the generated snippet information,
Generating snippet usage status information indicating the usage status of the snippet based on the dependency relationship among the snippet information extracted from the snippet information, the screen component information, and the structure information of the existing source code, and the execution record of the snippet. death,
2. The screen design information generation system according to claim 1, wherein candidates for screen design information for executing the code snippets in a predetermined order are generated based on the snippet usage status information and stored in the memory. A screen design information generation method for generating screen design information of a screen page by a screen design information generation system, the method comprising:
The screen design information includes a series of processes that are called in response to an event,
The screen page includes at least one screen component associated with an event,
The screen design information generation system includes at least one processor and at least one memory used by the processor,
The memory stores at least a predetermined computer program that generates the screen design information regarding the screen page,
By executing the predetermined computer program, the processor:
Generating snippet information in which a code snippet extracted from the existing source code, event information regarding the event, and screen component information regarding the event are associated;
Extracting screen component information indicating the positional relationship and attributes of each screen component from the existing screen configuration information corresponding to the existing source code,
Generating snippet usage status information indicating the usage status of the snippet based on the snippet information, the screen component information, and the dependency relationship between the snippet information extracted from the structure information of the existing source code,
A screen design information generation method that generates screen design information candidates for executing the code snippets in a predetermined order based on the snippet usage status information and stores the screen design information candidates in the memory. A computer program that causes a computer to function as a screen design information generation system that generates screen design information for a screen page, the computer program comprising:
The screen design information includes a series of processes that are called in response to an event,
The screen page includes at least one screen component associated with an event,
a function of generating snippet information in which a code snippet extracted from an existing source code, event information related to the event, and screen component information related to the event are associated;
a function for extracting screen component information indicating the positional relationship and attributes of each screen component from existing screen configuration information corresponding to the existing source code;
a function of generating snippet usage status information indicating the usage status of the snippet based on the snippet information, the screen component information, and the dependency relationship between the snippet information extracted from the structure information of the existing source code;
A computer program that causes the computer to realize a function of generating screen design information candidates for executing the code snippets in a predetermined order based on the snippet usage status information and storing them in a memory.

Images