JP7215176B2 - Display comparison program, apparatus and method - Google Patents

Description

The disclosed technology relates to a display comparison program, a display comparison device, and a display comparison method.

Conventionally, creators of content such as web pages and applications need to verify whether the created content is correctly displayed on various browser screens. Visually performing this verification is a heavy load, so techniques such as a cross-browser display test that compares the arrangement of HTML (Hyper Text Markup Language) elements that make up content have been developed.

For example, there has been proposed a correction candidate determination device that streamlines correction work for ensuring compatibility between multiple browsers for display data that includes multiple display elements. This device specifies the relative positional relationship of the display areas of each display element in the display result by each of a plurality of browsers for a display element group included in other display elements. In addition, this device compares the relative positional relationship of each display area specified for each browser for each display element group. Then, display element groups for which the positional relationship specified for one of the browsers is different from the positional relationship specified for the other browser are determined to be candidates for the correction portion in the display data.

Also, an incompatibility detection device has been proposed that efficiently detects incompatibility between a plurality of browsers regarding the display of display data. This device acquires display area information indicating display areas of a plurality of display elements included in display data in respective display results of a plurality of browsers regarding the same display data. In addition, this device specifies, for each browser, a combination of display elements that are horizontally arranged side by side among the plurality of display elements, based on the display area information acquired for the browser. Then, this device detects a display element included in a combination that is specified with respect to one browser and not specified with respect to any other browser as an incompatible part between browsers.

JP 2016-18254 A JP 2016-66227 A

In recent years, browsers are widely used not only in personal computers (PCs) but also in various mobile terminals, but creating web content for various devices is a heavy burden. Therefore, in recent years, a technique called "responsive design" that displays one HTML document on various devices has been widely used, as is called "one source multiple use."

When such a responsive design HTML document is displayed in a multi-device environment, even if it is displayed normally on any screen, the display layout may change due to the difference in screen size. Therefore, it may not be possible to appropriately detect incompatibility between browsers simply by comparing the arrangement relationships of HTML elements as in the conventional technology.

As one aspect, the technology disclosed herein aims to enable detection of incompatibility of HTML documents displayed in a multi-device environment, and to compare displays on multiple browsers with different screen sizes.

As one aspect, the disclosed technology expresses each element included in an HTML document displayed in each of two browsers with different screen sizes in a hierarchical structure, and also displays the position and size of each element on the screen. Acquire each of the hierarchical structure information including the information of Also, in the hierarchical structure of the entire HTML document indicated by the hierarchical structure information, according to the hierarchy to which the partial structure included in the hierarchical structure information belongs, based on a standard of matching degree of arrangement of elements between the two browsers. Then, for each of the elements included in the partial structure, it is compared whether or not the arrangement when displayed on each of the two browsers matches . Then, an element whose arrangement is different between the two browsers exceeding the standard is output as an incompatible element when the HTML document is displayed on each of the two browsers.

As one aspect, it is possible to detect incompatibility of HTML documents displayed in a multi-device environment, and to compare displays on multiple browsers with different screen sizes.

FIG. 10 is a diagram for explaining layout change when an HTML document is displayed in a multi-device environment; It is a figure which shows an example of the hierarchical structure information of an HTML document. It is a figure for demonstrating the change of the horizontal and vertical arrangement of an HTML element. It is a figure for demonstrating the change of the space|interval and size of an HTML element. 1 is a functional block diagram of a display comparison device according to first and second embodiments; FIG. FIG. 4 is a diagram showing an example of an arrangement matching criterion DB according to the first embodiment; FIG. FIG. 4 is a diagram for explaining a comparison of layouts between HTML elements; FIG. 4 is a diagram for explaining the vertical positional relationship between HTML elements; FIG. 4 is a diagram for explaining the horizontal positional relationship between HTML elements; FIG. 10 is a diagram for explaining a case of comparing degrees of matching of angles between HTML elements; 1 is a block diagram showing a schematic configuration of a computer functioning as a display comparison device according to first and second embodiments; FIG. 6 is a flowchart showing an example of display comparison processing in the first embodiment; FIG. 10 is a diagram for explaining comparison of HTML elements based on placement matching criteria according to hierarchy; FIG. 11 is a diagram showing an example of an arrangement matching criterion DB in the second embodiment; FIG. 10 is a flowchart showing an example of display comparison processing in the second embodiment; FIG. 10 is a diagram showing another example of an arrangement matching criterion DB;

An example of an embodiment according to technology disclosed herein will be described below with reference to the drawings.

Before describing the details of each embodiment, compatibility and display layout characteristics when displaying a responsive design HTML document in a multi-device environment will be described.

As shown in Figure 1, HTML documents created with responsive design can be displayed on devices with different screen sizes, such as desktop PCs, tablet PCs, and mobile terminals. automatically changed. Therefore, when the arrangement of individual HTML elements is compared, there are some HTML elements with different arrangement relationships, but the screens displayed on each device are all normal displays. That is, the screens displayed on each device are compatible with each other.

In this way, it may not be possible to appropriately detect display incompatibility between browsers in a multi-device environment simply by comparing the arrangement relationships of HTML elements.

Here, although the arrangement of displayed HTML elements changes between browsers having different screen sizes, the trend of change in the arrangement position differs between the upper hierarchy and the lower hierarchy of the HTML document. Specifically, as shown in FIG. 2, the layout relationship between HTML elements belonging to the upper hierarchy is likely to change greatly according to the screen size, and it is difficult to find regularity in the trend of change. . For example, the layout of HTML elements belonging to the highest layer is devised so that the entire screen is easy to see, so various arrangements are adopted according to the screen size. In the example of FIG. 1, the layout relationship of "header", "div", and "text" differs greatly among desktop PCs, tablet PCs, and mobile terminals.

On the other hand, the layout relationship between HTML elements belonging to the lower hierarchy is difficult to change even if the screen size is different, and even if the layout changes, the change is often regular. As the regularity of change, for example, as shown in FIG. 3, horizontal HTML elements are changed vertically, and vertically aligned HTML elements are changed horizontally. However, if the order of the HTML elements is changed, it is considered to be incompatible. Further, as the regularity of change, for example, as shown in FIG. 4, there is a case where the interval or size of HTML elements is changed. However, it is assumed that there is no compatibility between the case where the HTML elements are evenly arranged and the case where the intervals between the HTML elements vary.

Therefore, in each of the following embodiments, by changing the criterion for determining whether or not the layout relationship of HTML elements is consistent between browsers according to the hierarchy to which the HTML elements belong, the layout relationship of HTML elements can be set more appropriately. Compare to

<First embodiment>
The display comparison device 10 according to the first embodiment functionally includes an acquisition unit 12, a comparison unit 14, and an output unit 16, as shown in FIG. Also, in a predetermined storage area of the display comparison device 10, an arrangement matching reference database (DB) 20 is stored.

The acquisition unit 12 acquires each piece of hierarchical structure information that expresses each HTML element included in the HTML document displayed by each of the two browsers having different display screen sizes in a hierarchical structure. The hierarchical structure information includes at least information indicating the parent-child relationship of HTML elements and attribute information indicating the position and size of each HTML element on the screen.

The parent-child relationship between HTML elements can be represented by a tree structure in which each HTML element is represented by a node and the nodes representing the HTML elements in the parent-child relationship are connected to each other, as shown in FIG. 2, for example. The attribute information includes the coordinates (x, y) of the reference position (for example, upper left corner) of the rectangle and the size (Δx, Δy ). As such hierarchical structure information, for example, DOM (Document Object Model) information that internally expresses an HTML document can be used. The acquisition unit 12 transfers the acquired hierarchical structure information to the comparison unit 14 .

The comparison unit 14 determines whether or not the arrangement of HTML elements between browsers matches according to the hierarchy to which the partial structure belongs in the hierarchical structure of the entire HTML document indicated by the hierarchical structure information passed from the acquisition unit 12 . Determine placement matching criteria for judging.

A partial structure in this embodiment is a structure that includes one node and a child node that is directly connected to that node as a parent node in the hierarchical structure information. For example, in the example of FIG. 2, when focusing on the node "text", the node "text" and the child nodes "item 1" and "item 2" directly connected to the node "text" as a parent node are one part. structure.

Specifically, for each partial structure to be processed, the comparison unit 14 identifies the hierarchy to which the partial structure belongs based on the hierarchical structure information, and stores the layout matching criteria according to the identified hierarchy in the layout matching criteria DB 20. Get from

As shown in FIG. 6, the layout matching criteria DB 20 stores layout matching criteria according to hierarchy. In the layout matching standard DB 20, as a layout matching standard, the lower the hierarchy to which the partial structure belongs, the higher the matching degree is defined for the layout of the HTML elements displayed between the two browsers. That is, different criteria are defined as placement matching criteria depending on whether the partial structure belongs to a higher hierarchy related to the structure of the entire HTML document or to a lower hierarchy that is a local structure.

For example, as shown in FIG. 6, in the upper hierarchy, it is possible to define a placement matching criterion for comparing whether or not the vertical and horizontal positional relationships between HTML elements corresponding to child nodes included in the partial structure match. can. On the other hand, in the lower hierarchy, it is possible to define a placement matching criterion for comparing at least one of distance and angle between HTML elements corresponding to child nodes included in the partial structure.

The comparison unit 14 compares the layout of each HTML element corresponding to a child node included in the substructure to be processed, when displayed on each of the two browsers, based on the determined layout matching criteria.

Specifically, as shown in FIG. 7, the comparison unit 14 determines whether or not the arrangement of the HTML element 2 viewed from the HTML element 1 matches between the case of display by the browser A and the case of display by the browser B. Compare Note that the HTML element i displayed by the browser X is hereinafter referred to as "HTML element iX". Also, when describing an HTML element without distinguishing between browsers that display it, it is simply written as "HTML element i".

For example, a case will be described in which the layout matching criteria defined for the upper hierarchy in the layout matching criteria DB 20 shown in FIG.

In this case, based on the position and size of each HTML element included in the hierarchical structure information, the comparison unit 14 divides the horizontal direction (x coordinate) and vertical direction (y coordinate) between HTML element 1 and HTML element 2. Determine the presence or absence of overlapping parts. As shown in FIG. 8, when there is an overlapping portion in the horizontal direction but no overlapping portion in the vertical direction, the comparison unit 14 determines that the HTML element 1 and the HTML element 2 are arranged vertically. As shown in FIG. 9, when there is no overlap in the horizontal direction but there is an overlap in the vertical direction, the comparison unit 14 determines that the HTML element 1 and the HTML element 2 are arranged in a left-right relationship. .

The comparison unit 14 determines whether the HTML element 2 is on the upper side when viewed from the HTML element 1 based on the determination result of the above-described vertical and horizontal relationship and the coordinates of the reference positions (for example, the upper left corner) of the HTML element 1 and the HTML element 2. , below, left, or right. The comparison unit 14 compares whether or not the specified result displayed by the browser A and the case displayed by the browser B are the same. If they are the same, the layout relationship between HTML element 1 and HTML element 2 matches between browsers A and B, and if they are different, the comparison result is that the layout relationship does not match.

Also, for example, a case will be described in which the placement matching criteria defined for the lower layers in the placement matching criteria DB 20 shown in FIG. 6, that is, the matching degrees of angles between HTML elements are compared.

In this case, as shown in FIG. 10, the comparison unit 14 determines the angle θ Ask for _A. Similarly, the comparison unit 14 obtains the angle θ _B between the reference direction and the vector from the reference position of the HTML element 1-B to the reference position of the HTML element 2-B. For example, the reference direction can be the vertical direction when the positional relationship between the HTML element 1 and the HTML element 2 is vertical, and the horizontal direction when the positional relationship is horizontal.

Then, the comparison unit 14 compares the difference between θ _A and θ _B (|θ _A −θ _B |) with a predetermined threshold value θ _th . When |θ _A −θ _B |<θ _th , the layout relationship between HTML element 1 and HTML element 2 matches between browsers A and B, and when |θ _A −θ _B |≧θ _th will result in a comparison result that the arrangement relationship does not match.

The comparison unit 14 transfers the comparison result to the output unit 16 .

Based on the comparison results passed from the comparison unit 14, the output unit 16 outputs HTML elements whose layout differs between the two browsers beyond the layout matching criteria when the HTML document is displayed on each of the two browsers. Output the list recorded as incompatible elements. For example, the list may contain information such as the element name of the incompatible elements, which placement matching criteria were not met, and so on. It should be noted that the output is not limited to the case of outputting a list recording incompatible elements, and a list recording whether or not each HTML element is compatible may be output.

The display comparison device 10 according to the first embodiment can be realized by a computer 40 shown in FIG. 11, for example. The computer 40 includes a CPU (Central Processing Unit) 41 , a memory 42 as a temporary storage area, and a nonvolatile storage section 43 . The computer 40 also includes an input/output device 44 such as an input unit and a display unit, and an R/W (Read/Write) unit 45 that controls reading and writing of data to and from a storage medium 49 . The computer 40 also has a communication I/F 46 connected to a network such as the Internet. The CPU 41 , memory 42 , storage unit 43 , input/output device 44 , R/W unit 45 and communication I/F 46 are connected to each other via bus 47 .

The storage unit 43 can be realized by a HDD (Hard Disk Drive), SSD (Solid State Drive), flash memory, or the like. A display comparison program 50 for causing the computer 40 to function as the display comparison device 10 is stored in the storage unit 43 as a storage medium. The display comparison program 50 has an acquisition process 52 , a comparison process 54 and an output process 56 . The storage unit 43 also has an information storage area 60 in which information forming the arrangement matching reference DB 20 is stored.

The CPU 41 reads out the display comparison program 50 from the storage unit 43, develops it in the memory 42, and sequentially executes the processes of the display comparison program 50. FIG. The CPU 41 operates as the acquisition unit 12 shown in FIG. 5 by executing the acquisition process 52 . Further, the CPU 41 operates as the comparison unit 14 shown in FIG. 5 by executing the comparison process 54 . Further, the CPU 41 operates as the output unit 16 shown in FIG. 5 by executing the output process 56 . Further, the CPU 41 reads information from the information storage area 60 and develops the arrangement matching criteria DB 20 in the memory 42 . As a result, the computer 40 executing the display comparison program 50 functions as the display comparison device 10 . Note that the CPU 41 that executes the program is hardware.

The function realized by the display comparison program 50 can also be realized by, for example, a semiconductor integrated circuit, more specifically an ASIC (Application Specific Integrated Circuit) or the like.

Next, operation of the display comparison device 10 according to the first embodiment will be described. When an HTML document is input to the display comparison device 10, the display comparison processing shown in FIG. 12 is executed in the display comparison device 10. FIG. The display comparison process is an example of the display comparison method of technology disclosed herein.

In step S12, the acquisition unit 12 receives the input HTML document, and has a hierarchical structure representing each HTML element included in the HTML document displayed on each of the browser A and the browser B having different display screen sizes. Get each of the information. For example, the acquisition unit 12 uses Selenium WebDriver or the like to obtain DOM information including information indicating the parent-child relationship of HTML elements as shown in FIG. 2 and information indicating the position and size of each HTML element on the screen. , browser A and browser B. Although the tree structure is the same for both browsers A and B, there are also HTML elements whose position and size on the screen differ depending on the browser. The acquisition unit 12 transfers the acquired hierarchical structure information to the comparison unit 14 .

Next, in step S<b>14 , the comparison unit 14 sets a node to be processed in the tree structure indicating the HTML document indicated by the hierarchical structure information passed from the acquisition unit 12 . The processing target node that is set first can be, for example, the root node (the node "HTML" in the example of FIG. 2).

Next, in step S16, the comparison unit 14 extracts a partial structure whose parent node is the processing target node set in step S14.

Next, in step S18, the comparison unit 14 identifies the hierarchy to which the partial structure extracted in step S16 belongs based on the hierarchical structure information, and extracts the layout matching criteria corresponding to the identified hierarchy from the layout matching criteria DB 20. get.

Next, in step S20, the comparison unit 14 displays the layout relationship between HTML elements corresponding to the child nodes included in the partial structure on the browser A based on the layout matching criteria acquired in step S18. , and when displayed on browser B.

Next, in step S22, the comparison unit 14 determines whether or not the arrangement between the HTML elements corresponding to the child nodes included in the partial structure exceeds the arrangement matching criterion, that is, whether or not the arrangement is different. . If the arrangement matching criterion is exceeded, the process proceeds to step S24, and if not exceeded, the process proceeds to step S26.

In step S24, the output unit 16 records information on HTML elements corresponding to child nodes included in the partial structure extracted in step S16 in the incompatible element list.

Next, in step S26, the comparison unit 14 determines that, among the nodes included in the hierarchical structure information, a node having a child node, that is, a node other than the terminal node, and an unprocessed node that is not set as a node to be processed. Determine if it exists. If there is an unprocessed node, the process returns to step S14, and if there is no unprocessed node, the process moves to step S28.

In step S28, the output unit 16 outputs the incompatible element list and ends the display comparison process.

Regarding the above processing, a case where browser A is a browser for a desktop PC and browser B is a browser for a tablet PC, and the arrangement of HTML elements in the HTML document represented by the tree structure shown in FIG. 2 is compared will be described. .

For example, since a partial structure including the node "HTML" and its child nodes "header", "text", and "div" belongs to the upper hierarchy as shown in FIG. From the DB 20, the placement matching criteria stored in association with the upper hierarchy are acquired. Then, as shown in the upper diagram of FIG. 13, the layout relationship among the HTML elements "header", "body", and "div" corresponding to the child nodes included in the partial structure is used as the layout match criteria for the upper hierarchy. are compared based on For example, it is assumed that the placement matching criteria for upper layers are criteria for comparing whether or not the top, bottom, left, and right positional relationships between HTML elements match. In this case, since the relationship that "div" and "text" are positioned below "header" holds true in both browsers A and B, it can be determined that the layouts of the HTML elements match.

Also, for example, a partial structure including the node "text" and its child nodes "item 1" and "item 2" belongs to the lower hierarchy as shown in FIG. , the arrangement matching criteria stored in association with the lower hierarchy are obtained. Then, as shown in the lower diagram of FIG. 13, the layout relationships between the HTML elements "item 1" and "item 2" corresponding to the child nodes included in the partial structure are compared based on the layout matching criteria for the lower hierarchy. be. For example, let us say that the placement matching criterion for the lower hierarchy is a criterion for comparing the degree of matching of angles between HTML elements. In this case, there is no difference between the angle θ A of “item 2” viewed from “item 1” in browser _A and the angle θ _B of “item 2” viewed from “item 1” in browser B, and the HTML element It can be determined that an arrangement between the two matches.

As described above, according to the display comparison apparatus according to the first embodiment, the arrangement according to the hierarchy to which the partial structure belongs in the hierarchical structure information of the HTML document displayed by each of the two browsers having different display screen sizes. Determine match criteria. Then, based on the determined layout matching criteria, the layout relationships between the HTML elements included in the partial structure are compared for each of the two browsers. As a result, it is possible to detect incompatibility of HTML documents displayed in a multi-device environment, and to compare the arrangement of HTML elements when displayed on a plurality of browsers with different screen sizes.

In addition, by setting the layout matching criteria according to the hierarchy to a criterion that requires a higher degree of matching in the lower hierarchy, layouts that are permissible according to browsers, such as HTML documents created with responsive design, can be used. Changes can be taken into account to appropriately determine alignment matches.

<Second embodiment>
Next, a second embodiment will be described. In the first embodiment, the case where the HTML document is composed of the upper hierarchy and the lower hierarchy was explained. A case will be described where it is configured with a hierarchy.

In the display comparison device according to the second embodiment, the same components as those of the display comparison device 10 according to the first embodiment are denoted by the same reference numerals, and detailed description thereof will be omitted.

As shown in FIG. 5 , the display comparison device 210 according to the second embodiment functionally includes an acquisition unit 12 , a comparison unit 214 and an output unit 16 . Also, in a predetermined storage area of the display comparison device 210, an arrangement matching reference DB 220 is stored.

FIG. 14 shows an example of the arrangement matching criteria DB 220. As shown in FIG. In the example of FIG. 14, in the upper hierarchy, a layout matching criterion is defined for comparing whether or not the vertical and horizontal positional relationships between HTML elements corresponding to child nodes included in the partial structure match. Also, in the middle layer, after converting the vertical and horizontal arrangement of HTML elements corresponding to child nodes included in the partial structure, a layout matching standard is defined for comparing at least one of distance and angle between HTML elements. there is In the lower hierarchy, a placement matching standard is defined for comparing at least one of distance and angle between HTML elements without converting the vertical and horizontal arrangement of HTML elements corresponding to child nodes included in the partial structure. there is

The comparison unit 214 determines a placement matching criterion according to the hierarchy to which the partial structure belongs, like the comparison unit 14 in the first embodiment. Then, the comparison unit 214 compares the layout of each of the HTML elements corresponding to the child nodes included in the substructure to be processed, when displayed on each of the two browsers, based on the determined layout matching criteria.

As described above, when displaying an HTML document created with a responsive design to support a multi-device environment, HTML elements belonging to the same partial structure are converted from horizontal to vertical or vice versa. may be allowed.

Therefore, if the determined arrangement matching criteria allow horizontal and vertical alignment conversion, the comparison unit 214 determines whether the horizontal and vertical alignment of the HTML elements is converted and when the HTML elements are not converted. Compare placements. When converting the horizontal and vertical arrangement of HTML elements, specifically, the comparison unit 214 converts the arrangement of HTML elements when displayed in one browser from horizontal to vertical or from vertical to horizontal, Compare the degree of matching with the arrangement of HTML elements when displayed in a browser. The comparison unit 214 determines that the layout of the HTML elements matches between the browsers if the layout matching criteria are satisfied in either the case of converting the vertical and horizontal arrangement of the HTML elements or the case of not converting them.

The display comparison device 10 according to the second embodiment can be realized by a computer 40 shown in FIG. 11, for example. A display comparison program 250 for causing the computer 40 to function as the display comparison device 210 is stored in the storage unit 43 of the computer 40 . The display comparison program 250 has an acquisition process 52 , a comparison process 254 and an output process 56 . The storage unit 43 also has an information storage area 60 in which information forming the arrangement matching reference DB 220 is stored.

The CPU 41 reads out the display comparison program 250 from the storage unit 43, develops it in the memory 42, and sequentially executes the processes of the display comparison program 250. FIG. The CPU 41 operates as the comparison unit 214 shown in FIG. 5 by executing the comparison process 254 . Other processes are the same as those of the display comparison program 50 according to the first embodiment. Thereby, the computer 40 executing the display comparison program 250 functions as the display comparison device 210 .

Note that the function realized by the display comparison program 250 can also be realized by, for example, a semiconductor integrated circuit, more specifically an ASIC or the like.

Next, operation of the display comparison device 210 according to the second embodiment will be described. When the HTML document is input to the display comparison device 210, the display comparison processing shown in FIG. 15 is executed in the display comparison device 210. FIG. In addition, in the display comparison processing in the second embodiment, the same processing as the display comparison processing in the first embodiment is denoted by the same reference numeral, and detailed description thereof is omitted. Also, the display comparison process is an example of the display comparison method of technology disclosed herein.

After steps S12 to S18, the process proceeds to step S219. In step S219, the comparison unit 214 converts the horizontal and vertical alignment of the HTML elements when displayed on one of the browsers, if the arrangement matching criteria acquired in step S18 permits horizontal and vertical alignment conversion. Specifically, the comparison unit 214 changes the arrangement of HTML elements to Convert side-by-side to vertical or vertical-to-side-by-side.

Next, in step S220, the comparing unit 214, based on the placement matching criteria acquired in step S18, uses two browser Compare the arrangement when displayed in each of the . At this time, if the alignment matching criteria permit vertical-horizontal conversion, the comparison unit 214 displays the layout of the HTML elements indicated by the hierarchical structure information acquired in step S12, i.e., the layout when vertical-horizontal conversion is not performed. compare between Further, the comparison unit 214 compares the arrangement of the HTML elements whose vertical and horizontal arrangement is converted when displayed on one browser and the arrangement of the HTML elements when displayed on the other browser.

Next, in step S222, the comparison unit 214 determines whether or not the arrangement between the HTML elements corresponding to the child nodes included in the partial structure exceeds the arrangement matching criterion, that is, whether or not the arrangement is different. . At this time, the comparison unit 214 determines that the layout of the HTML elements is different between browsers if the layout match criteria are exceeded in both cases of the vertical and horizontal arrangement of the HTML elements being converted and not being converted. .

Thereafter, steps S24 to S28 are executed in the same manner as in the first embodiment.

As described above, according to the display comparison apparatus according to the second embodiment, as in the first embodiment, the portion of the hierarchical structure information of the HTML document displayed by each of the two browsers having different display screen sizes is displayed. A placement matching criterion is determined according to the hierarchy to which the structure belongs. Then, based on the determined layout matching criteria, the layout relationships between the HTML elements included in the partial structure are compared for each of the two browsers. If the determined layout matching criteria allow the vertical and horizontal conversion of HTML elements, even if the horizontal and vertical orientation of the HTML elements is converted when displayed on one browser, when displayed on the other browser. Compare with the arrangement of HTML elements in As a result, the same effects as in the first embodiment can be obtained, and the layout can be appropriately arranged in consideration of changes in the layout that are allowed according to the browser, such as HTML documents created with responsive design. match can be determined.

Note that the arrangement matching criteria stored in the arrangement matching criteria DB according to the hierarchy are not limited to the example of FIG. 6 of the first embodiment and the example of FIG. 14 of the second embodiment. Any layout matching criterion may be used as long as the conditions to be considered are strict.

For example, as a placement matching standard, a placement matching standard for comparing at least one of distance and angle between HTML elements corresponding to child nodes included in a partial structure in all layers can be defined. In this case, the threshold value for judging the degree of matching may be determined as a value that requires a higher degree of matching in the case of the lower hierarchy than in the case of the upper hierarchy.

Also, for example, a placement matching standard for comparing the degree of matching of angles between HTML elements is defined in the upper layer, and a placement matching standard for comparing the degree of matching of both distance and angle between HTML elements is defined in the lower layer. good too.

In addition to the placement matching criteria according to the hierarchy in the first and second embodiments, the placement matching criteria may be changed according to the type of HTML element corresponding to the child node of the partial structure. FIG. 16 shows an example of the placement matching criteria DB 320 in this case. In the example of FIG. 16, the placement matching criteria are made different between the upper layer and the lower layer, and the placement matching criteria are also made different according to whether the HTML element type is image or text. Here, an example is shown in which alignment matching is determined more strictly for text than for images. Note that the types of HTML elements are not limited to images and text, and may include other types.

Further, in the above-described embodiment, a case has been described in which a hierarchy to which a partial structure belongs is determined from hierarchical structure information (tree structure), but the present invention is not limited to this. The larger the ratio of the partial structure to the HTML document, the easier it is for the layout of HTML elements to change between browsers with different display sizes, as in the upper hierarchy of the above embodiment. Therefore, the placement matching criteria may be specified according to the size of the partial structure or the ratio of the partial structure to the HTML document.

Further, in the above-described embodiment, the display comparison program has been pre-stored (installed) in the storage unit, but the present invention is not limited to this. The program according to the technology disclosed herein can also be provided in a form stored in a storage medium such as a CD-ROM, DVD-ROM, USB memory, or the like.

The following additional remarks are further disclosed regarding each of the above embodiments.

(Appendix 1)
Acquiring each piece of hierarchical structure information that expresses each element included in an HTML document displayed in each of two browsers having different screen sizes in a hierarchical structure,
In the hierarchical structure of the entire HTML document indicated by the hierarchical structure information, the two browsers for each of the elements included in the partial structure based on a criterion according to the hierarchy to which the partial structure included in the hierarchical structure information belongs. A display comparison program for causing a computer to perform a process including comparing the arrangement when displayed on each of the .

(Appendix 2)
for causing the computer to execute a process further comprising: outputting elements that exceed the standard and are arranged differently between the two browsers as incompatible elements when the HTML document is displayed on each of the two browsers; The display comparison program according to Supplementary Note 1 of .

(Appendix 3)
The display comparison according to appendix 1 or appendix 2, wherein, as the criterion, the lower the hierarchy to which the partial structure belongs, the higher the degree of matching for the arrangement of elements displayed between the two browsers. program.

(Appendix 4)
As the criteria, different criteria are used at least when the partial structure belongs to a higher hierarchy related to the structure of the entire HTML document and when the partial structure belongs to a lower hierarchy that is a local structure of the HTML document. The display comparison program according to any one of Appendices 1 to 3.

(Appendix 5)
As the criteria, in the upper layer, the matching degree of vertical and horizontal positional relationships between elements included in the partial structure, and in the lower layer, the matching degree of at least one of distance and angle between elements included in the partial structure. Display comparison program according to appendix 4 using

(Appendix 6)
When at least one of the distance and angle between elements included in the partial structure is used as the criterion, the threshold for determining the degree of matching is set higher for the lower hierarchy than for the upper hierarchy. 6. The display comparison program of Claim 5, wherein is set to a value that requires a high degree of matching.

(Appendix 7)
When comparing the matching degree of at least one of the distance and angle between the elements, the arrangement of the elements when displayed in one of the two browsers is converted from horizontal to vertical or from vertical to horizontal. 7. The display comparison program according to appendix 5 or appendix 6, which compares the degrees of coincidence with each other.

(Appendix 8)
When classifying the hierarchical structure into the upper hierarchy, the lower hierarchy, and an intermediate hierarchy between the upper hierarchy and the lower hierarchy,
As the criteria,
In the upper hierarchy, the matching degree of vertical and horizontal positional relationships between elements included in the partial structure;
In the intermediate hierarchy, the arrangement of elements when displayed in one of the two browsers is allowed to be converted from horizontal to vertical or vice versa, and the partial structure is converted to degree of agreement of at least one of distances and angles between included elements;
In the lower hierarchy, the matching degree of at least one of the distance and angle between the elements included in the partial structure is used without converting the arrangement of the elements when displayed in one of the two browsers. Display comparison program as described.

(Appendix 9)
9. The display comparison program according to any one of Appendices 1 to 8, wherein the reference is changed according to the types of elements included in the partial structure.

(Appendix 10)
an acquisition unit that acquires each piece of hierarchical structure information in which each element included in an HTML document displayed by each of two browsers having different display screen sizes is expressed in a hierarchical structure;
In the hierarchical structure of the entire HTML document indicated by the hierarchical structure information, the two browsers for each of the elements included in the partial structure based on a criterion according to the hierarchy to which the partial structure included in the hierarchical structure information belongs. a comparison unit that compares the arrangement when displayed in each of
display comparison device including;

(Appendix 11)
11. The display comparison according to Supplementary Note 10, further comprising an output unit that outputs an element whose arrangement is different between the two browsers beyond the reference as an incompatible element when the HTML document is displayed on each of the two browsers. Device.

(Appendix 12)
Supplementary Note 10 or Supplementary Note 11, wherein the comparison unit uses, as the standard, a standard that requires a higher degree of matching for the arrangement of elements displayed between the two browsers as the hierarchy to which the partial structure belongs is lower. The display comparison device according to .

(Appendix 13)
The comparison unit uses, as the criteria, at least a case where the partial structure belongs to a higher hierarchy related to the structure of the entire HTML document and a case where the partial structure belongs to a lower hierarchy that is a local structure of the HTML document. 13. The display comparison device according to any one of appendices 10 to 12, using different criteria.

(Appendix 14)
The comparison unit uses, as the criteria, the matching degree of vertical and horizontal positional relationships between elements included in the partial structure in the upper hierarchy, and the distance and angle between elements included in the partial structure in the lower hierarchy. 14. The display comparison device according to claim 13, using at least one degree of matching.

(Appendix 15)
When at least one of a distance and an angle between elements included in the partial structure is used as the criterion, the comparison unit sets a threshold value for determining the degree of matching to the lower layer than the upper layer. 15. The display comparison device according to appendix 14, wherein a higher degree of matching is required in the case of hierarchy.

(Appendix 16)
When comparing at least one of the distance and angle between the elements, the comparison unit converts the arrangement of the elements when displayed in one of the two browsers from horizontal to vertical or vertical. 16. The display comparison device according to appendix 14 or appendix 15, which converts from a row to a horizontal row and compares the degree of matching.

(Appendix 17)
When classifying the hierarchical structure into the upper hierarchy, the lower hierarchy, and an intermediate hierarchy between the upper hierarchy and the lower hierarchy,
The comparison unit, as the reference,
In the upper hierarchy, the matching degree of vertical and horizontal positional relationships between elements included in the partial structure;
In the intermediate hierarchy, the arrangement of elements when displayed in one of the two browsers is allowed to be converted from horizontal to vertical or vice versa, and the partial structure is converted to degree of agreement of at least one of distances and angles between included elements;
In the lower hierarchy, the matching degree of at least one of the distance and the angle between the elements included in the partial structure is used without converting the arrangement of the elements when displayed in one of the two browsers. Display comparison device as described.

(Appendix 18)
18. The display comparison device according to any one of appendices 10 to 17, wherein the comparison unit varies the reference according to the types of elements included in the partial structure.

(Appendix 19)
Acquiring each piece of hierarchical structure information that expresses each element included in an HTML document displayed in each of two browsers having different screen sizes in a hierarchical structure,
In the hierarchical structure of the entire HTML document indicated by the hierarchical structure information, the two browsers for each of the elements included in the partial structure based on a criterion according to the hierarchy to which the partial structure included in the hierarchical structure information belongs. A display comparison method in which a computer performs a process including comparing the placement when displayed on each of the .

(Appendix 20)
Acquiring each piece of hierarchical structure information that expresses each element included in an HTML document displayed in each of two browsers having different screen sizes in a hierarchical structure,
In the hierarchical structure of the entire HTML document indicated by the hierarchical structure information, the two browsers for each of the elements included in the partial structure based on a criterion according to the hierarchy to which the partial structure included in the hierarchical structure information belongs. A storage medium storing a display comparison program for causing a computer to execute a process including comparing the arrangement when displayed in each of the.

10, 210 display comparison device 12 acquisition unit 14, 214 comparison unit 16 output unit 20, 220, 320 arrangement matching reference DB
40 computer 41 CPU
42 memory 43 storage unit 49 storage medium 50, 250 display comparison program

Claims (10)

Each element contained in the HTML document displayed by each of two browsers with different screen sizes is expressed in a hierarchical structure, and each hierarchical structure information including information on the position and size of each element on the screen is displayed. Acquired,
Based on a standard of matching degree of arrangement of elements between the two browsers according to the hierarchy to which the partial structure included in the hierarchical structure information belongs in the hierarchical structure of the entire HTML document indicated by the hierarchical structure information, comparing each of the elements included in the partial structure with respect to whether or not the arrangement when displayed on each of the two browsers matches ;
Outputting elements whose arrangement is different between the two browsers beyond the standard as incompatible elements when the HTML document is displayed on each of the two browsers.
A display comparison program for causing a computer to execute processing including: 2. The display comparison program according to claim 1 , wherein the lower the hierarchy to which the partial structure belongs, the higher the degree of matching required for arrangement of elements displayed between the two browsers. As the criteria, different criteria are used at least when the partial structure belongs to a higher hierarchy related to the structure of the entire HTML document and when the partial structure belongs to a lower hierarchy that is a local structure of the HTML document. The display comparison program according to claim 1 or 2 . As the criteria, in the upper layer, the matching degree of vertical and horizontal positional relationships between elements included in the partial structure, and in the lower layer, the matching degree of at least one of distance and angle between elements included in the partial structure. 4. The display comparison program according to claim 3 , using . When at least one of the distance and angle between elements included in the partial structure is used as the criterion, the threshold for determining the degree of matching is set higher for the lower hierarchy than for the upper hierarchy. 5. The display comparison program according to claim 4 , wherein is set to a value requiring a high degree of matching. When comparing the matching degree of at least one of the distance and angle between the elements, the arrangement of the elements when displayed in one of the two browsers is converted from horizontal to vertical or from vertical to horizontal. 6. The display comparison program according to claim 4 or 5 , wherein the degree of coincidence is compared. When classifying the hierarchical structure into the upper hierarchy, the lower hierarchy, and an intermediate hierarchy between the upper hierarchy and the lower hierarchy,
As the criteria,
In the upper hierarchy, the matching degree of vertical and horizontal positional relationships between elements included in the partial structure;
In the intermediate hierarchy, the arrangement of elements when displayed in one of the two browsers is allowed to be converted from horizontal to vertical or vice versa, and the partial structure is converted to degree of agreement of at least one of distances and angles between included elements;
7. In the lower hierarchy, a matching degree of at least one of distance and angle between elements included in the partial structure is used without converting arrangement of elements when displayed in one of the two browsers. The display comparison program described in . 8. The display comparison program according to any one of claims 1 to 7 , wherein the reference is made different according to the types of elements included in the partial structure. Each element contained in the HTML document displayed by each of two browsers with different screen sizes is expressed in a hierarchical structure, and each hierarchical structure information including information on the position and size of each element on the screen is displayed. an acquisition unit that acquires
Based on a standard of matching degree of arrangement of elements between the two browsers according to the hierarchy to which the partial structure included in the hierarchical structure information belongs in the hierarchical structure of the entire HTML document indicated by the hierarchical structure information, a comparison unit that compares whether or not the arrangement of each of the elements included in the partial structure matches when displayed on each of the two browsers;
an output unit configured to output an element whose layout is different between the two browsers beyond the standard as an incompatible element when the HTML document is displayed on each of the two browsers;
display comparison device including; Each element contained in the HTML document displayed by each of two browsers with different screen sizes is expressed in a hierarchical structure, and each hierarchical structure information including information on the position and size of each element on the screen is displayed. Acquired,
Based on a standard of matching degree of arrangement of elements between the two browsers according to the hierarchy to which the partial structure included in the hierarchical structure information belongs in the hierarchical structure of the entire HTML document indicated by the hierarchical structure information, comparing each of the elements included in the partial structure with respect to whether or not the arrangement when displayed on each of the two browsers matches ;
Outputting elements whose arrangement is different between the two browsers beyond the standard as incompatible elements when the HTML document is displayed on each of the two browsers.
A display comparison method in which a computer performs processing including:

Images