JP2020113002A - Program, apparatus and method for display comparison - Google Patents
Program, apparatus and method for display comparison Download PDFInfo
- Publication number
- JP2020113002A JP2020113002A JP2019002848A JP2019002848A JP2020113002A JP 2020113002 A JP2020113002 A JP 2020113002A JP 2019002848 A JP2019002848 A JP 2019002848A JP 2019002848 A JP2019002848 A JP 2019002848A JP 2020113002 A JP2020113002 A JP 2020113002A
- Authority
- JP
- Japan
- Prior art keywords
- arrangement
- browsers
- elements
- hierarchical structure
- hierarchy
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Landscapes
- Document Processing Apparatus (AREA)
Abstract
Description
開示の技術は、表示比較プログラム、表示比較装置、及び表示比較方法に関する。 The disclosed technology relates to a display comparison program, a display comparison device, and a display comparison method.
従来、ウェブページやアプリケーションなどのコンテンツの作成者は、作成したコンテンツが様々なブラウザ画面上で正しく表示されるか否かを検証する必要がある。この検証を目視で行うことは負荷が大きいため、コンテンツを構成するＨＴＭＬ（Hyper Text Markup Language）要素の配置を比較するクロスブラウザ表示テストなどの技術が開発されている。 Conventionally, creators of content such as web pages and applications need to verify whether the created content is correctly displayed on various browser screens. Since performing this verification visually requires a large load, techniques such as a cross-browser display test for comparing the arrangement of HTML (Hyper Text Markup Language) elements that form the content have been developed.
例えば、複数の表示要素を含む表示データに関して複数のブラウザ間での互換性を確保するための修正作業を効率化する修正候補判定装置が提案されている。この装置は、他の表示要素に包含される表示要素群について、複数のブラウザのそれぞれによる表示結果における各表示要素の表示領域の相対的な位置関係を特定する。また、この装置は、表示要素群毎に、ブラウザ毎に特定された各表示領域の相対的な位置関係を相互に比較する。そして、いずれかのブラウザに関して特定された位置関係が他のブラウザに関して特定された位置関係と異なる表示要素群を、表示データにおける修正箇所の候補であると判定する。 For example, there has been proposed a correction candidate determination device that improves the efficiency of correction work for ensuring compatibility between a plurality of browsers with respect to display data including a plurality of display elements. This device specifies the relative positional relationship of the display areas of the display elements in the display results of each of the plurality of browsers for the display element group included in the other display elements. In addition, the device mutually compares the relative positional relationships of the display areas specified for each browser for each display element group. Then, the display element group in which the positional relationship specified with respect to one of the browsers is different from the positional relationship specified with respect to the other browser is determined to be a candidate for the correction location in the display data.
また、表示データの表示に関する複数のブラウザ間での非互換を効率的に検出する非互換検出装置が提案されている。この装置は、同一の表示データに関する複数のブラウザのそれぞれの表示結果における、表示データに含まれる複数の表示要素のそれぞれの表示領域を示す表示領域情報を取得する。また、この装置は、ブラウザ毎に、当該ブラウザに関して取得された表示領域情報に基づいて、複数の表示要素の中で水平方向に相互に並列する表示要素の組み合わせを特定する。そして、この装置は、いずれかのブラウザに関して特定され、他のいずれかのブラウザに関して特定されない組み合わせに含まれる表示要素を、ブラウザ間の非互換部分として検出する。 In addition, an incompatibility detection device that efficiently detects incompatibility between a plurality of browsers regarding display of display data has been proposed. This device acquires display area information indicating the display areas of the plurality of display elements included in the display data in the respective display results of the plurality of browsers regarding the same display data. In addition, this device specifies, for each browser, a combination of display elements that are parallel to each other in the horizontal direction among a plurality of display elements based on the display area information acquired for the browser. Then, the device detects a display element included in a combination that is specified with respect to any of the browsers and is not specified with respect to any of the other browsers, as an incompatible part between the browsers.
近年、ブラウザは、パーソナルコンピュータ（ＰＣ）だけでなく各種のモバイル端末でも広く利用されているが、様々なデバイス用にウェブコンテンツを作成するのは負荷が大きい。そこで、近年では、「ワンソース・マルチユース」と言われるように、一つのＨＴＭＬ文書を様々なデバイスで表示する「レスポンシブ・デザイン」という技術が広く用いられている。 In recent years, browsers are widely used not only in personal computers (PCs) but also in various mobile terminals, but creating web contents for various devices is a heavy load. Therefore, in recent years, a technique called "responsive design" for displaying one HTML document on various devices has been widely used, which is called "one source multi-use".
このようなレスポンシブ・デザインのＨＴＭＬ文書をマルチデバイス環境で表示する場合、いずれの画面においても正常に表示されているとしても、画面サイズの相違により、表示レイアウトが変化する可能性がある。したがって、従来技術のように、単にＨＴＭＬ要素の配置関係を比較するだけでは、ブラウザ間の非互換性を適切に検出することができない場合がある。 When displaying an HTML document of such a responsive design in a multi-device environment, even if the HTML document is normally displayed on any screen, the display layout may change due to the difference in screen size. Therefore, incompatibility between browsers may not be appropriately detected simply by comparing the arrangement relationship of HTML elements as in the conventional technique.
一つの側面として、開示の技術は、マルチデバイス環境で表示されるＨＴＭＬ文書の非互換性を検出可能に、画面サイズが異なる複数のブラウザでの表示を比較することを目的とする。 As one aspect, the disclosed technology aims to compare display in a plurality of browsers having different screen sizes so that incompatibility of HTML documents displayed in a multi-device environment can be detected.
一つの態様として、開示の技術は、表示する画面サイズが異なる２つのブラウザの各々で表示されるＨＴＭＬ文書に含まれる各要素を階層構造で表した階層構造情報の各々を取得する。また、前記階層構造情報が示す前記ＨＴＭＬ文書全体の階層構造における、前記階層構造情報に含まれる部分構造が属する階層に応じた基準に基づいて、前記部分構造に含まれる要素の各々について、前記２つのブラウザの各々で表示する場合の配置を比較する。 As one aspect, the disclosed technique acquires each piece of hierarchical structure information that represents each element included in an HTML document displayed by each of two browsers that display different screen sizes in a hierarchical structure. In addition, in the hierarchical structure of the entire HTML document indicated by the hierarchical structure information, based on the criterion according to the hierarchy to which the partial structure included in the hierarchical structure information belongs, each of the elements included in the partial structure is Compare the layout when displaying in each of the two browsers.
一つの側面として、マルチデバイス環境で表示されるＨＴＭＬ文書の非互換性を検出可能に、画面サイズが異なる複数のブラウザでの表示を比較することができる、という効果を有する。 As one aspect, it is possible to detect incompatibilities of HTML documents displayed in a multi-device environment and to compare displays on a plurality of browsers having different screen sizes.
以下、図面を参照して、開示の技術に係る実施形態の一例を説明する。 Hereinafter, an example of an embodiment according to the disclosed technology will be described with reference to the drawings.
各実施形態の詳細を説明する前に、マルチデバイス環境において、レスポンシブ・デザインのＨＴＭＬ文書を表示する場合における互換性、及び表示レイアウトの特徴について説明する。 Before describing the details of each embodiment, compatibility and display layout characteristics in displaying an HTML document of responsive design in a multi-device environment will be described.
図１に示すように、レスポンシブ・デザインで作成されたＨＴＭＬ文書は、デスクトップＰＣ、タブレットＰＣ、モバイル端末等の、それぞれ画面サイズの異なるデバイスで表示される際に、各画面サイズに合わせたレイアウトに自動で変更される。したがって、個々のＨＴＭＬ要素の配置を比較した場合には、配置関係に差異があるＨＴＭＬ要素も存在するが、各デバイスに表示された画面はいずれも正常な表示である。すなわち、各デバイスに表示された画面同士は互換性を有する。 As shown in FIG. 1, the HTML document created by the responsive design has a layout suitable for each screen size when displayed on a device such as a desktop PC, a tablet PC, and a mobile terminal having different screen sizes. It is changed automatically. Therefore, when the arrangements of the individual HTML elements are compared, some HTML elements differ in arrangement relationship, but the screens displayed on the respective devices are normal displays. That is, the screens displayed on each device are compatible with each other.
このように、ＨＴＭＬ要素の配置関係を単純に比較するだけでは、マルチデバイス環境における、ブラウザ間での表示の非互換性を適切に検出できない場合がある。 As described above, incompatibility of display between browsers in a multi-device environment may not be appropriately detected by simply comparing the layout relationships of HTML elements.
ここで、画面サイズが異なるブラウザ間では、表示されるＨＴＭＬ要素の配置は変化するが、ＨＴＭＬ文書の上位階層と下位階層とでは、その配置位置の変化の傾向は異なる。具体的には、図２に示すように、上位階層に属するＨＴＭＬ要素間の配置関係は、画面サイズに応じてレイアウトが大きく変化し易く、その変化の傾向に規則性を見出すことが困難である。例えば、最上位の層に属するＨＴＭＬ要素は、画面全体が見易くなるようにレイアウトが工夫されるため、画面サイズに応じて様々な配置が採用される。図１の例では、「ヘッダ」、「ｄｉｖ」、及び「本文」の配置関係は、デスクトップＰＣ用と、タブレットＰＣ用と、モバイル端末用とでそれぞれ大きく異なる。 Here, the arrangement of HTML elements to be displayed changes between browsers having different screen sizes, but the tendency of change in the arrangement position differs between the upper layer and the lower layer of the HTML document. Specifically, as shown in FIG. 2, the layout relationship between the HTML elements belonging to the upper layer is likely to change greatly in accordance with the screen size, and it is difficult to find regularity in the change tendency. .. For example, the layout of the HTML elements belonging to the uppermost 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 arrangement relationship of “header”, “div”, and “body” is greatly different for desktop PCs, tablet PCs, and mobile terminals.
一方、下位階層に属するＨＴＭＬ要素間の配置関係は、画面サイズが相違してもレイアウトが変化し難く、変化する場合でも、その変化に規則性がある場合が多い。変化の規則性としては、例えば、図３に示すように、横並びのＨＴＭＬ要素を縦並びに変化させることや、その逆に、縦並びのＨＴＭＬ要素を横並びに変化させる場合などがある。ただし、ＨＴＭＬ要素の並び順が入れ替わる場合には、互換性がないとみなす。また、変化の規則性としては、例えば、図４に示すように、ＨＴＭＬ要素の間隔やサイズを変化させる場合などがある。ただし、ＨＴＭＬ要素が均等に配置されている場合と、ＨＴＭＬ要素間の間隔にばらつきがある場合とでは、互換性がないとみなす。 On the other hand, the layout relationship between the HTML elements belonging to the lower layer is hard to change even if the screen size is different, and even if the layout changes, the change often has regularity. As the regularity of change, for example, as shown in FIG. 3, horizontally arranged HTML elements may be changed vertically, or conversely, vertically arranged HTML elements may be changed horizontally. However, when the arrangement order of the HTML elements is changed, it is considered that there is no compatibility. Further, as the regularity of change, for example, as shown in FIG. 4, there is a case where the intervals or sizes of HTML elements are changed. However, it is considered 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 the layout relationship of the HTML elements is the same between browsers according to the hierarchy to which the HTML element belongs, the layout relationship of the HTML elements is more appropriate. 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 illustrated in FIG. 5. In addition, an arrangement matching reference database (DB) 20 is stored in a predetermined storage area of the display comparison device 10.
取得部１２は、表示する画面サイズが異なる２つのブラウザの各々で表示されるＨＴＭＬ文書に含まれる各ＨＴＭＬ要素を階層構造で表した階層構造情報の各々を取得する。階層構造情報は、少なくとも、ＨＴＭＬ要素の親子関係を示す情報と、各ＨＴＭＬ要素の画面上での位置及びサイズなどを示す属性情報とを含む。 The acquisition unit 12 acquires each of the hierarchical structure information in which each HTML element included in the HTML document displayed by each of the two browsers having different screen sizes to be displayed is expressed 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.
ＨＴＭＬ要素の親子関係は、例えば図２に示すように、各ＨＴＭＬ要素をノードで表し、親子関係にあるＨＴＭＬ要素を示すノード同士を接続した木構造で表すことができる。また、属性情報としては、ＨＴＭＬ要素が配置される画面上の領域を矩形領域で表した場合の矩形の基準位置（例えば左上角）の座標（ｘ，ｙ）と、矩形のサイズ（Δｘ，Δｙ）とを含む情報とすることができる。このような階層構造情報としては、例えば、ＨＴＭＬ文書を内部で表現したＤＯＭ（Document Object Model）情報を用いることができる。取得部１２は、取得した階層構造情報を比較部１４へ受け渡す。 The parent-child relationship of HTML elements can be represented by a tree structure in which each HTML element is represented by a node and nodes indicating HTML elements in a parent-child relationship are connected to each other, as shown in FIG. 2, for example. As the attribute information, the coordinates (x, y) of the reference position (for example, the upper left corner) of the rectangle when the area on the screen where the HTML element is arranged is represented by the rectangular area, and the size of the rectangle (Δx, Δy). ) Can be information including and. As such hierarchical structure information, for example, DOM (Document Object Model) information internally expressing an HTML document can be used. The acquisition unit 12 transfers the acquired hierarchical structure information to the comparison unit 14.
比較部１４は、取得部１２から受け渡された階層構造情報が示すＨＴＭＬ文書全体の階層構造において、部分構造が属する階層に応じて、ブラウザ間でのＨＴＭＬ要素の配置が一致するか否かを判定するための配置一致基準を決定する。 In the hierarchical structure of the entire HTML document indicated by the hierarchical structure information passed from the acquisition unit 12, 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. A placement matching criterion for determining is determined.
本実施形態における部分構造とは、階層構造情報において、ある１つのノードと、そのノードを親ノードとして直結する子ノードとを含む構造である。例えば、図２の例で、ノード「本文」に着目した場合、ノード「本文」と、ノード「本文」を親ノードとして直結する子ノード「項目１」及び「項目２」とが、１つの部分構造となる。 The partial structure in this embodiment is a structure that includes one node and a child node that is directly connected to the node as a parent node in the hierarchical structure information. For example, when focusing on the node "body" in the example of FIG. 2, the node "body" and the child nodes "item 1" and "item 2" that are directly connected to each other with the node "body" as a parent node form one part. It becomes a structure.
具体的には、比較部１４は、処理対象の部分構造毎に、その部分構造が属する階層を、階層構造情報に基づいて特定し、特定した階層に応じた配置一致基準を、配置一致基準ＤＢ２０から取得する。 Specifically, the comparison unit 14 identifies, for each partial structure to be processed, the hierarchy to which the partial structure belongs, based on the hierarchical structure information, and obtains the layout matching criterion corresponding to the specified hierarchy from the layout matching criterion DB 20. To get from.
図６に示すように、配置一致基準ＤＢ２０には、階層に応じた配置一致基準が記憶されている。配置一致基準ＤＢ２０では、配置一致基準として、部分構造が属する階層が下位階層であるほど、２つのブラウザ間で表示されるＨＴＭＬ要素の配置について、高い一致度を要求する基準が定められる。すなわち、配置一致基準として、部分構造がＨＴＭＬ文書全体の構造に関連する上位階層に属する場合と、局所構造となる下位階層に属する場合とで、異なる基準が定められる。 As shown in FIG. 6, the placement matching criterion DB 20 stores the placement matching criterion according to the hierarchy. In the placement matching criterion DB 20, as the placement matching criterion, the lower the hierarchy to which the partial structure belongs, the higher the matching requirement for the placement of the HTML elements displayed between the two browsers. That is, as the placement matching criterion, different criteria are determined depending on whether the partial structure belongs to the upper hierarchy related to the structure of the entire HTML document or the lower hierarchy to be the local structure.
例えば、図６に示すように、上位階層では、部分構造に含まれる子ノードに相当するＨＴＭＬ要素間の上下左右の位置関係が一致するか否かを比較する配置一致基準を定めておくことができる。一方、下位階層では、部分構造に含まれる子ノードに相当するＨＴＭＬ要素間の距離及び角度の少なくとも一方の一致度を比較する配置一致基準を定めておくことができる。 For example, as shown in FIG. 6, in the upper layer, it is possible to set an arrangement matching criterion for comparing whether or not the vertical and horizontal positional relationships between the HTML elements corresponding to the child nodes included in the partial structure match. it can. On the other hand, in the lower layer, it is possible to set an arrangement matching criterion for comparing the matching degree of at least one of the distance and the angle between the HTML elements corresponding to the child nodes included in the partial structure.
比較部１４は、決定した配置一致基準に基づいて、処理対象の部分構造に含まれる子ノードに相当するＨＴＭＬ要素の各々について、２つのブラウザの各々で表示する場合の配置を比較する。 The comparison unit 14 compares the arrangements of the HTML elements corresponding to the child nodes included in the target partial structure to be displayed by the two browsers based on the determined arrangement matching criterion.
具体的には、図７に示すように、比較部１４は、ＨＴＭＬ要素１から見たＨＴＭＬ要素２の配置が、ブラウザＡで表示する場合とブラウザＢで表示する場合とで、一致するか否かを比較する。なお、以下では、ブラウザＸで表示されるＨＴＭＬ要素ｉを「ＨＴＭＬ要素ｉ−Ｘ」と表記する。また、表示するブラウザを区別することなくＨＴＭＬ要素について説明する場合には、単に「ＨＴＭＬ要素ｉ」と表記する。 Specifically, as shown in FIG. 7, the comparison unit 14 determines whether or not the layout of the HTML element 2 viewed from the HTML element 1 is the same when the browser A and the browser B display the same. Compare what. In addition, below, the HTML element i displayed by the browser X is described as "HTML element i-X." Further, in the case of describing the HTML element without distinguishing the browser to be displayed, it is simply expressed as “HTML element i”.
例えば、図６に示す配置一致基準ＤＢ２０で、上位階層について定められている配置一致基準、すなわち、ＨＴＭＬ要素間の上下左右の位置関係が一致するか否かを比較する場合について説明する。 For example, a case will be described in which the placement matching criterion DB 20 shown in FIG. 6 compares the placement matching criterion defined for the upper layer, that is, whether the positional relationship between the upper, lower, left, and right HTML elements matches.
この場合、比較部１４は、階層構造情報に含まれる各ＨＴＭＬ要素の位置及びサイズに基づいて、ＨＴＭＬ要素１とＨＴＭＬ要素２との間の横方向（ｘ座標）及び縦方向（ｙ座標）の重複部分の有無を判定する。図８に示すように、横方向に重複部分があり、縦方向に重複部分がない場合、比較部１４は、ＨＴＭＬ要素１とＨＴＭＬ要素２との配置は上下の関係であると判定する。また、図９に示すように、横方向に重複部分がなく、縦方向に重複部分がある場合、比較部１４は、ＨＴＭＬ要素１とＨＴＭＬ要素２との配置は左右の関係であると判定する。 In this case, the comparison unit 14 determines the horizontal direction (x coordinate) and the vertical direction (y coordinate) between the HTML element 1 and the HTML element 2 based on the position and size of each HTML element included in the hierarchical structure information. Determine whether there is an overlap. As shown in FIG. 8, when there is an overlapping portion in the horizontal direction and there is no overlapping portion in the vertical direction, the comparison unit 14 determines that the HTML element 1 and the HTML element 2 are arranged in a vertical relationship. Further, as shown in FIG. 9, when there is no overlapping portion in the horizontal direction and there is an overlapping portion in the vertical direction, the comparison unit 14 determines that the arrangement of the HTML element 1 and the HTML element 2 has a left-right relationship. ..
比較部１４は、上記の上下左右の関係の判定結果と、ＨＴＭＬ要素１及びＨＴＭＬ要素２の基準位置（例えば、左上角）の座標とに基づいて、ＨＴＭＬ要素１から見てＨＴＭＬ要素２が上、下、左、又は右のいずれに位置するかを特定する。比較部１４は、この特定結果が、ブラウザＡで表示する場合と、ブラウザＢで表示する場合とで同一か否かを比較する。同一の場合には、ＨＴＭＬ要素１とＨＴＭＬ要素２との配置関係は、ブラウザＡ及びＢ間で一致し、異なる場合には、配置関係が一致しない、という比較結果になる。 The comparison unit 14 determines that the HTML element 2 is higher than the HTML element 1 when viewed from the HTML element 1 based on the determination result of the above-described up/down/left/right relationship and the coordinates of the reference positions (for example, the upper left corner) of the HTML element 1 and the HTML element 2. , Bottom, left, or right. The comparison unit 14 compares whether or not this identification result is the same when displayed on the browser A and when displayed on the browser B. If they are the same, the layout relationship between the HTML element 1 and the HTML element 2 is the same between the browsers A and B, and if they are different, the layout relationship is not the same.
また、例えば、図６に示す配置一致基準ＤＢ２０で、下位階層について定められている配置一致基準、すなわち、ＨＴＭＬ要素間の角度の一致度を比較する場合について説明する。 Further, for example, a case will be described in which the placement matching criterion defined for the lower layer in the placement matching criterion DB 20 shown in FIG. 6, that is, the degree of matching of angles between HTML elements is compared.
この場合、比較部１４は、図１０に示すように、ＨＴＭＬ要素１−Ａの基準位置（例えば、左上角）からＨＴＭＬ要素２−Ａの基準位置へのベクトルと、基準方向とのなす角θＡを求める。同様に、比較部１４は、ＨＴＭＬ要素１−Ｂの基準位置からＨＴＭＬ要素２−Ｂの基準位置へのベクトルと、基準方向とのなす角θＢを求める。基準方向は、例えば、ＨＴＭＬ要素１とＨＴＭＬ要素２との位置関係が上下の場合には垂直方向、左右の場合には水平方向とすることができる。 In this case, as shown in FIG. 10, the comparison unit 14 forms an angle θ between the vector from the reference position of the HTML element 1-A (for example, the upper left corner) to the reference position of the HTML element 2-A and the reference direction. Ask for A. Similarly, the comparison unit 14 obtains the angle θ B formed by the vector from the reference position of the HTML element 1-B to the reference position of the HTML element 2-B and the reference direction. The reference direction can be, for example, a vertical direction when the positional relationship between the HTML element 1 and the HTML element 2 is vertical and a 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 θ th . When |θ A −θ B |<θ th , the arrangement relationship between the HTML element 1 and the HTML element 2 is the same between the browsers A and B, and when |θ A −θ B |≧θ th Results in a comparison that the arrangement relationships do not match.
比較部１４は、比較結果を出力部１６へ受け渡す。 The comparison unit 14 transfers the comparison result to the output unit 16.
出力部１６は、比較部１４から受け渡された比較結果に基づいて、配置一致基準を超えて２つのブラウザ間で配置が異なるＨＴＭＬ要素を、ＨＴＭＬ文書を２つのブラウザの各々で表示する場合における非互換要素として記録したリストを出力する。例えば、リストには、非互換要素の要素名、どの配置一致基準を満たさなかったか等の情報を含めることができる。なお、非互換要素を記録したリストを出力する場合に限定されず、各ＨＴＭＬ要素について、互換性の有無を記録したリストを出力するなどしてもよい。 In a case where the HTML document is displayed on each of the two browsers, an HTML element having a different layout between the two browsers that exceeds the layout matching criterion based on the comparison result passed from the comparison section 14 is output. Output the list recorded as an incompatible element. For example, the list may include information such as element names of incompatible elements and which alignment matching criteria were not met. It should be noted that the present invention is not limited to the case of outputting the list in which the incompatible elements are recorded, but a list in which the compatibility of each HTML element is recorded may be output.
第１実施形態に係る表示比較装置１０は、例えば図１１に示すコンピュータ４０で実現することができる。コンピュータ４０は、ＣＰＵ（Central Processing Unit）４１と、一時記憶領域としてのメモリ４２と、不揮発性の記憶部４３とを備える。また、コンピュータ４０は、入力部、表示部等の入出力装置４４と、記憶媒体４９に対するデータの読み込み及び書き込みを制御するＲ／Ｗ（Read/Write）部４５とを備える。また、コンピュータ４０は、インターネット等のネットワークに接続される通信Ｉ／Ｆ４６を備える。ＣＰＵ４１、メモリ４２、記憶部４３、入出力装置４４、Ｒ／Ｗ部４５、及び通信Ｉ／Ｆ４６は、バス４７を介して互いに接続される。 The display comparison device 10 according to the first embodiment can be realized by, for example, the computer 40 shown in FIG. 11. The computer 40 includes a CPU (Central Processing Unit) 41, a memory 42 as a temporary storage area, and a non-volatile storage unit 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 from and to the storage medium 49. The computer 40 also includes a communication I/F 46 connected to a network such as the Internet. The CPU 41, the memory 42, the storage unit 43, the input/output device 44, the R/W unit 45, and the communication I/F 46 are connected to each other via a bus 47.
記憶部４３は、ＨＤＤ（Hard Disk Drive）、ＳＳＤ（Solid State Drive）、フラッシュメモリ等によって実現できる。記憶媒体としての記憶部４３には、コンピュータ４０を、表示比較装置１０として機能させるための表示比較プログラム５０が記憶される。表示比較プログラム５０は、取得プロセス５２と、比較プロセス５４と、出力プロセス５６とを有する。また、記憶部４３は、配置一致基準ＤＢ２０を構成する情報が記憶される情報記憶領域６０を有する。 The storage unit 43 can be realized by an HDD (Hard Disk Drive), an SSD (Solid State Drive), a 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. Further, the storage unit 43 has an information storage area 60 in which the information forming the arrangement matching reference DB 20 is stored.
ＣＰＵ４１は、表示比較プログラム５０を記憶部４３から読み出してメモリ４２に展開し、表示比較プログラム５０が有するプロセスを順次実行する。ＣＰＵ４１は、取得プロセス５２を実行することで、図５に示す取得部１２として動作する。また、ＣＰＵ４１は、比較プロセス５４を実行することで、図５に示す比較部１４として動作する。また、ＣＰＵ４１は、出力プロセス５６を実行することで、図５に示す出力部１６として動作する。また、ＣＰＵ４１は、情報記憶領域６０から情報を読み出して、配置一致基準ＤＢ２０をメモリ４２に展開する。これにより、表示比較プログラム５０を実行したコンピュータ４０が、表示比較装置１０として機能することになる。なお、プログラムを実行するＣＰＵ４１はハードウェアである。 The CPU 41 reads the display comparison program 50 from the storage unit 43, expands it in the memory 42, and sequentially executes the processes of the display comparison program 50. The CPU 41 operates as the acquisition unit 12 illustrated in FIG. 5 by executing the acquisition process 52. Further, the CPU 41 operates as the comparison unit 14 illustrated 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 loads the arrangement matching reference DB 20 in the memory 42. As a result, the computer 40 that executes the display comparison program 50 functions as the display comparison device 10. The CPU 41 that executes the program is hardware.
なお、表示比較プログラム５０により実現される機能は、例えば半導体集積回路、より詳しくはＡＳＩＣ（Application Specific Integrated Circuit）等で実現することも可能である。 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, the 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 device 10 executes the display/comparison process shown in FIG. The display comparison process is an example of the display comparison method of the disclosed technique.
ステップＳ１２で、取得部１２が、入力されたＨＴＭＬ文書を受け取り、表示する画面サイズが異なるブラウザＡ及びブラウザＢの各々で表示されるＨＴＭＬ文書に含まれる各ＨＴＭＬ要素を階層構造で表した階層構造情報の各々を取得する。例えば、取得部１２は、Selenium WebDriverなどを用いて、図２に示すようなＨＴＭＬ要素の親子関係を示す情報と、各ＨＴＭＬ要素の画面上での位置及びサイズを示す情報とを含むＤＯＭ情報を、ブラウザＡ及びブラウザＢのそれぞれについて取得する。なお、ブラウザＡ及びブラウザＢのいずれで表示する場合も木構造は同様となるが、画面上での位置及びサイズは、ブラウザによってそれぞれ異なるＨＴＭＬ要素も存在する。取得部１２は、取得した階層構造情報を比較部１４へ受け渡す。 In step S12, the acquisition unit 12 receives the input HTML document and has a hierarchical structure in which each HTML element included in the HTML document displayed by each of the browser A and the browser B having different screen sizes is displayed in a hierarchical structure. 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 respectively. It should be noted that the tree structure is the same when displayed by both the browser A and the browser B, but there are HTML elements whose position and size on the screen are different depending on the browser. The acquisition unit 12 transfers the acquired hierarchical structure information to the comparison unit 14.
次に、ステップＳ１４で、比較部１４が、取得部１２から受け渡された階層構造情報が示すＨＴＭＬ文書を示す木構造において、処理対象ノードを設定する。最初に設定する処理対象ノードは、例えばルートノード（図２の例では、ノード「ＨＴＭＬ」）とすることができる。 Next, in step S14, the comparison unit 14 sets a processing target node in the tree structure indicating the HTML document indicated by the hierarchical structure information passed from the acquisition unit 12. The first processing target node can be, for example, the root node (node “HTML” in the example of FIG. 2).
次に、ステップＳ１６で、比較部１４が、上記ステップＳ１４で設定した処理対象ノードを親ノードとする部分構造を抽出する。 Next, in step S16, the comparison unit 14 extracts a partial structure having the processing target node set in step S14 as a parent node.
次に、ステップＳ１８で、比較部１４が、上記ステップＳ１６で抽出した部分構造が属する階層を、階層構造情報に基づいて特定し、特定した階層に応じた配置一致基準を、配置一致基準ＤＢ２０から取得する。 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 obtains the layout matching criterion corresponding to the specified hierarchy from the layout matching criterion DB 20. get.
次に、ステップＳ２０で、比較部１４が、上記ステップＳ１８で取得した配置一致基準に基づいて、部分構造に含まれる子ノードに相当するＨＴＭＬ要素間の配置関係を、ブラウザＡで表示する場合と、ブラウザＢで表示する場合とで比較する。 Next, in step S20, the comparison unit 14 displays the layout relationship between the HTML elements corresponding to the child nodes included in the partial structure on the browser A based on the layout matching criterion acquired in step S18. , And the case where it is displayed on the browser B.
次に、ステップＳ２２で、比較部１４が、部分構造に含まれる子ノードに相当するＨＴＭＬ要素間の配置が、配置一致基準を超えているか否か、すなわち、配置が異なるか否かを判定する。配置一致基準を超えている場合には、ステップＳ２４へ移行し、超えていない場合には、ステップＳ２６へ移行する。 Next, in step S22, the comparison unit 14 determines whether the arrangement between the HTML elements corresponding to the child nodes included in the partial structure exceeds the arrangement matching criterion, that is, whether the arrangement is different. .. If it exceeds the placement matching criterion, the process proceeds to step S24, and if not, the process proceeds to step S26.
ステップＳ２４では、出力部１６が、上記ステップＳ１６で抽出された部分構造に含まれる子ノードに相当するＨＴＭＬ要素に関する情報を非互換要素リストに記録する。 In step S24, the output unit 16 records information about the HTML element corresponding to the child node included in the partial structure extracted in step S16 in the incompatible element list.
次に、ステップＳ２６で、比較部１４が、階層構造情報に含まれるノードのうち、子ノードを持つノード、すなわち末端のノード以外のノードで、処理対象ノードに設定されていない未処理のノードが存在するか否かを判定する。未処理のノードが存在する場合には、ステップＳ１４に戻り、未処理ノードが存在しない場合には、ステップＳ２８へ移行する。 Next, in step S26, the comparing unit 14 determines that among the nodes included in the hierarchical structure information, the nodes that have child nodes, that is, the nodes other than the end node, which are not set as the process target node, are unprocessed nodes. Determine if it exists. If an unprocessed node exists, the process returns to step S14, and if no unprocessed node exists, the process proceeds to step S28.
ステップＳ２８では、出力部１６が、非互換要素リストを出力し、表示比較処理を終了する。 In step S28, the output unit 16 outputs the incompatible element list and ends the display comparison process.
上記の処理について、ブラウザＡがデスクトップＰＣ用のブラウザ、ブラウザＢがタブレットＰＣ用のブラウザの場合で、図２に示す木構造で表されるＨＴＭＬ文書のＨＴＭＬ要素の配置を比較する場合について説明する。 The above processing will be described in the case where the browser A is a browser for desktop PC and the browser B is a browser for tablet PC, and the arrangement of HTML elements of the HTML document represented by the tree structure shown in FIG. 2 is compared. ..
例えば、ノード「ＨＴＭＬ」と、その子ノード「ヘッダ」、「本文」、及び「ｄｉｖ」とを含む部分構造は、図２に示すように上位階層に属するため、図６に示すような配置一致基準ＤＢ２０から、上位階層に対応付けて記憶されている配置一致基準が取得される。そして、図１３の上図に示すように、部分構造に含まれる子ノードに相当するＨＴＭＬ要素「ヘッダ」、「本文」、及び「ｄｉｖ」間の配置関係が、上位階層用の配置一致基準に基づいて比較される。例えば、上位階層用の配置一致基準が、ＨＴＭＬ要素間の上下左右の位置関係が一致するか否かを比較する基準であるとする。この場合、「ヘッダ」に対して「ｄｉｖ」及び「本文」が下に位置するという関係が、ブラウザＡ及びＢ共に成り立つため、ＨＴＭＬ要素間の配置は一致すると判定することができる。 For example, since the partial structure including the node "HTML" and its child nodes "header", "body", and "div" belongs to the higher hierarchy as shown in FIG. 2, the arrangement matching criterion as shown in FIG. The placement matching criterion stored in association with the upper hierarchy is acquired from the DB 20. Then, as shown in the upper diagram of FIG. 13, the arrangement relationship among the HTML elements “header”, “body”, and “div” corresponding to the child nodes included in the partial structure is the arrangement matching criterion for the upper layer. Are compared based on. For example, it is assumed that the placement matching criterion for the upper layer is a criterion for comparing whether the positional relationship between the HTML elements in the upper, lower, left, and right directions is the same. In this case, since the relationship that "div" and "body" are located below the "header" holds for both browsers A and B, it is possible to determine that the HTML elements are arranged in the same arrangement.
また、例えば、ノード「本文」と、その子ノード「項目１」及び「項目２」とを含む部分構造は、図２に示すように下位階層に属するため、図６に示すような配置一致基準ＤＢ２０から、下位階層に対応付けて記憶されている配置一致基準が取得される。そして、図１３の下図に示すように、部分構造に含まれる子ノードに相当するＨＴＭＬ要素「項目１」と「項目２」間の配置関係が、下位階層用の配置一致基準に基づいて比較される。例えば、下位階層用の配置一致基準が、ＨＴＭＬ要素間の角度の一致度を比較する基準であるとする。この場合、ブラウザＡにおける「項目１」から見た「項目２」の角度θＡと、ブラウザＢにおける「項目１」から見た「項目２」の角度θＢとには差がなく、ＨＴＭＬ要素間の配置は一致すると判定することができる。 Further, for example, since the partial structure including the node “body” and its child nodes “item 1” and “item 2” belongs to the lower hierarchy as shown in FIG. 2, the arrangement matching criterion DB 20 as shown in FIG. From, the arrangement matching criterion stored in association with the lower hierarchy is acquired. Then, as shown in the lower diagram of FIG. 13, the layout relationship between the HTML elements “item 1” and “item 2” corresponding to the child nodes included in the partial structure is compared based on the layout matching criterion for the lower hierarchy. It For example, it is assumed that the placement matching criterion for the lower hierarchy is a criterion for comparing the matching degree of angles between HTML elements. In this case, the angle θ A of the "item 2" as seen from the "item 1" in the browser A, there is no difference in the angle θ B of as seen from the "item 1" and "Item 2" in the browser B, HTML element It can be determined that the arrangements in between are the same.
以上説明したように、第１実施形態に係る表示比較装置によれば、表示する画面サイズが異なる２つのブラウザの各々で表示されるＨＴＭＬ文書の階層構造情報における部分構造が属する階層に応じた配置一致基準を決定する。そして、決定した配置一致基準に基づいて、部分構造に含まれるＨＴＭＬ要素間の配置関係を、２つのブラウザの各々で表示する場合について比較する。これにより、マルチデバイス環境で表示されるＨＴＭＬ文書の非互換性を検出可能に、画面サイズが異なる複数のブラウザで表示される場合のＨＴＭＬ要素の配置を比較することができる。 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 in the hierarchical structure information of the HTML document displayed by each of the two browsers having different screen sizes to be displayed belongs. Determine match criteria. Then, based on the determined layout matching criterion, the layout relationship between the HTML elements included in the partial structure is compared in the case of displaying by each of the two browsers. Thereby, it is possible to detect the incompatibility of the HTML document displayed in the multi-device environment, and to compare the arrangement of the HTML elements when displayed in a plurality of browsers having different screen sizes.
また、階層に応じた配置一致基準を、下位階層ほど、高い一致度を要求する基準とすることで、レスポンシブ・デザインで作成されたＨＴＭＬ文書などのように、ブラウザに応じて許容されるレイアウトの変更を考慮して、適切に配置の一致を判定することができる。 In addition, by setting the layout matching criterion according to the hierarchy to a criterion that requires a higher matching degree in a lower hierarchy, a layout that is allowed depending on a browser, such as an HTML document created by a responsive design, can be used. In consideration of the change, it is possible to appropriately determine the matching of arrangement.
＜第２実施形態＞
次に、第２実施形態について説明する。第１実施形態では、ＨＴＭＬ文書が、上位階層と下位階層とで構成される場合について説明したが、第２実施形態では、上位階層と、下位階層と、上位階層と下位階層との間の中間階層とで構成される場合について説明する。
<Second Embodiment>
Next, a second embodiment will be described. In the first embodiment, the case where the HTML document is composed of the upper layer and the lower layer has been described. However, in the second embodiment, the upper layer, the lower layer, and the middle between the upper layer and the lower layer. The case of being composed of layers will be described.
なお、第２実施形態に係る表示比較装置において、第１実施形態に係る表示比較装置１０と同様の構成については、同一符号を付して詳細な説明を省略する。 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 designated 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. Further, the arrangement matching criterion DB 220 is stored in a predetermined storage area of the display comparison device 210.
図１４に、配置一致基準ＤＢ２２０の一例を示す。図１４の例では、上位階層では、部分構造に含まれる子ノードに相当するＨＴＭＬ要素間の上下左右の位置関係が一致するか否かを比較する配置一致基準が定められている。また、中間階層では、部分構造に含まれる子ノードに相当するＨＴＭＬ要素の縦横並びを変換した上で、ＨＴＭＬ要素間の距離及び角度の少なくとも一方の一致度を比較する配置一致基準が定められている。また、下位階層では、部分構造に含まれる子ノードに相当するＨＴＭＬ要素の縦横並びを変換することなく、ＨＴＭＬ要素間の距離及び角度の少なくとも一方の一致度を比較する配置一致基準が定められている。 FIG. 14 shows an example of the placement matching criterion DB 220. In the example of FIG. 14, in the upper layer, a placement matching criterion for comparing whether or not the vertical and horizontal positional relationships between the HTML elements corresponding to the child nodes included in the partial structure match is defined. Further, in the middle hierarchy, after the vertical and horizontal arrangement of the HTML elements corresponding to the child nodes included in the partial structure is converted, an arrangement matching criterion for comparing the matching degree of at least one of the distance and the angle between the HTML elements is set. There is. Further, in the lower layer, an arrangement matching criterion for comparing the matching degree of at least one of the distance and the angle between the HTML elements is defined without converting the vertical and horizontal arrangement of the HTML elements corresponding to the child nodes included in the partial structure. There is.
比較部２１４は、第１実施形態における比較部１４と同様に、部分構造が属する階層に応じた配置一致基準を決定する。そして、比較部２１４は、決定した配置一致基準に基づいて、処理対象の部分構造に含まれる子ノードに相当するＨＴＭＬ要素の各々について、２つのブラウザの各々で表示する場合の配置を比較する。 Similar to the comparison unit 14 in the first embodiment, the comparison unit 214 determines the layout matching criterion according to the hierarchy to which the partial structure belongs. Then, the comparison unit 214 compares the arrangements of the respective HTML elements corresponding to the child nodes included in the partial structure of the processing target when the two browsers display the respective arrangements based on the determined arrangement matching criterion.
上述したように、マルチデバイス環境に対応させて、レスポンシブ・デザインで作成されたＨＴＭＬ文書を表示する場合、同一の部分構造に属するＨＴＭＬ要素は、横並びから縦並び、又は縦並びから横並びへの変換が許容される場合がある。 As described above, when displaying the HTML document created by the responsive design in correspondence with the multi-device environment, the HTML elements belonging to the same partial structure are converted from horizontal arrangement to vertical arrangement or from vertical arrangement to horizontal arrangement. May be acceptable.
そこで、比較部２１４は、決定した配置一致基準において、縦横並びの変換が許容されている場合には、ＨＴＭＬ要素の縦横並びを変換する場合と変換しない場合との両方の場合で、ＨＴＭＬ要素の配置を比較する。ＨＴＭＬ要素の縦横並びを変換する場合、具体的には、比較部２１４は、一方のブラウザで表示する場合のＨＴＭＬ要素の配置を、横並びから縦並びに、又は縦並びから横並びに変換し、他方のブラウザで表示する場合のＨＴＭＬ要素の配置との一致度を比較する。比較部２１４は、ＨＴＭＬ要素の縦横並びを変換する場合と変換しない場合とのいずれかの場合で、配置一致基準を満たせば、ブラウザ間でＨＴＭＬ要素の配置が一致すると判定する。 Therefore, the comparison unit 214, in the case where vertical/horizontal arrangement is allowed to be converted in the determined arrangement matching criterion, in both cases of converting the vertical/horizontal arrangement of HTML elements and not converting the HTML elements, Compare the placement. When converting the vertical and horizontal arrangement of the HTML elements, specifically, the comparison unit 214 converts the arrangement of the HTML elements displayed in one browser from the horizontal arrangement to the vertical arrangement or from the vertical arrangement to the horizontal arrangement, and the other arrangement. The degree of coincidence with the arrangement of HTML elements when displayed on a browser is compared. The comparison unit 214 determines that the HTML element layouts match between browsers if the layout matching criterion is satisfied in either case of converting the vertical and horizontal alignment of HTML elements or not.
第２実施形態に係る表示比較装置１０は、例えば図１１に示すコンピュータ４０で実現することができる。コンピュータ４０の記憶部４３には、コンピュータ４０を、表示比較装置２１０として機能させるための表示比較プログラム２５０が記憶される。表示比較プログラム２５０は、取得プロセス５２と、比較プロセス２５４と、出力プロセス５６とを有する。また、記憶部４３は、配置一致基準ＤＢ２２０を構成する情報が記憶される情報記憶領域６０を有する。 The display comparison device 10 according to the second embodiment can be realized by the computer 40 shown in FIG. 11, for example. The storage unit 43 of the computer 40 stores a display comparison program 250 for causing the computer 40 to function as the display comparison device 210. The display comparison program 250 has an acquisition process 52, a comparison process 254, and an output process 56. In addition, the storage unit 43 has an information storage area 60 in which information that configures the arrangement matching reference DB 220 is stored.
ＣＰＵ４１は、表示比較プログラム２５０を記憶部４３から読み出してメモリ４２に展開し、表示比較プログラム２５０が有するプロセスを順次実行する。ＣＰＵ４１は、比較プロセス２５４を実行することで、図５に示す比較部２１４として動作する。他のプロセスについては、第１実施形態に係る表示比較プログラム５０と同様である。これにより、表示比較プログラム２５０を実行したコンピュータ４０が、表示比較装置２１０として機能することになる。 The CPU 41 reads the display comparison program 250 from the storage unit 43, expands it in the memory 42, and sequentially executes the processes of the display comparison program 250. 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. As a result, the computer 40 that executes the display comparison program 250 functions as the display comparison device 210.
なお、表示比較プログラム２５０により実現される機能は、例えば半導体集積回路、より詳しくはＡＳＩＣ等で実現することも可能である。 The function realized by the display comparison program 250 can be realized by, for example, a semiconductor integrated circuit, more specifically, an ASIC or the like.
次に、第２実施形態に係る表示比較装置２１０の作用について説明する。表示比較装置２１０にＨＴＭＬ文書が入力されると、表示比較装置２１０において、図１５に示す表示比較処理が実行される。なお、第２実施形態における表示比較処理において、第１実施形態における表示比較処理と同一の処理については、同一符号を付して詳細な説明を省略する。また、表示比較処理は、開示の技術の表示比較方法の一例である。 Next, the operation of the display comparison device 210 according to the second embodiment will be described. When an HTML document is input to the display comparison device 210, the display comparison device 210 executes the display comparison process shown in FIG. In the display comparison process according to the second embodiment, the same processes as the display comparison process according to the first embodiment are designated by the same reference numerals and detailed description thereof will be omitted. The display comparison process is an example of the display comparison method of the disclosed technology.
ステップＳ１２〜Ｓ１８を経て、ステップＳ２１９へ移行する。ステップＳ２１９では、比較部２１４が、上記ステップＳ１８で取得した配置一致基準において、縦横並びの変換が許容されている場合には、一方のブラウザで表示する場合のＨＴＭＬ要素の縦横並びを変換する。具体的には、比較部２１４が、図３において丸印が併記されている両矢印が示す変換のように、ＨＴＭＬ要素間の間隔の割合及び並び順を保持したまま、ＨＴＭＬ要素の配置を、横並びから縦並びに、又は縦並びから横並びに変換する。 After steps S12 to S18, the process proceeds to step S219. In step S219, the comparison unit 214 converts the vertical and horizontal arrangement of the HTML elements to be displayed by one of the browsers when the arrangement matching criterion acquired in step S18 allows the conversion of the vertical and horizontal arrangement. Specifically, the comparison unit 214 arranges the HTML elements while maintaining the ratio of the intervals between the HTML elements and the arrangement order, as in the conversion indicated by the double-headed arrow with the circles in FIG. Convert from horizontal to vertical, or from vertical to horizontal.
次に、ステップＳ２２０で、比較部２１４が、上記ステップＳ１８で取得した配置一致基準に基づいて、上記ステップＳ１６で抽出した部分構造に含まれる子ノードに相当するＨＴＭＬ要素の各々について、２つのブラウザの各々で表示する場合の配置を比較する。この際、配置一致基準において、縦横並びの変換が許容されている場合、比較部２１４は、上記ステップＳ１２で取得した階層構造情報が示すＨＴＭＬ要素の配置、すなわち縦横変換をしない場合の配置をブラウザ間で比較する。さらに、比較部２１４は、一方のブラウザで表示する場合のＨＴＭＬ要素の縦横並びを変換した配置と、他方のブラウザで表示する場合のＨＴＭＬ要素の配置とを比較する。 Next, in step S220, the comparison unit 214 uses two browsers for each of the HTML elements corresponding to the child nodes included in the partial structure extracted in step S16, based on the placement matching criterion acquired in step S18. Comparing the layout when displaying each. At this time, if the vertical and horizontal conversion is allowed in the layout matching criterion, the comparison unit 214 uses the browser to determine the layout of the HTML elements indicated by the hierarchical structure information acquired in step S12, that is, the layout without vertical and horizontal conversion. Compare between. Further, the comparison unit 214 compares the arrangement of the HTML elements in which the vertical and horizontal arrangements have been converted when displaying with one browser and the arrangement of the HTML elements when displaying with 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 arrangement of the HTML elements is different between the browsers when the arrangement matching criterion is exceeded regardless of whether the vertical and horizontal arrangement of the HTML elements is converted or not. ..
以下、第１実施形態と同様に、ステップＳ２４〜Ｓ２８が実行される。 Thereafter, steps S24 to S28 are executed 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 in the hierarchical structure information of the HTML document displayed by each of the two browsers having different screen sizes to be displayed. The placement matching criterion is determined according to the hierarchy to which the structure belongs. Then, based on the determined layout matching criterion, the layout relationship between the HTML elements included in the partial structure is compared in the case of displaying by each of the two browsers. If conversion of vertical and horizontal arrangement of HTML elements is permitted by the determined arrangement matching criteria, even if the vertical and horizontal arrangement of HTML elements is displayed in one browser, it is displayed in the other browser. Comparing with the arrangement of HTML elements of. As a result, the same effect as that of the first embodiment can be achieved, and the layout is appropriately arranged in consideration of the layout change permitted depending on the browser such as the HTML document created by the responsive design. Can be determined.
なお、配置一致基準ＤＢに記憶される階層に応じた配置一致基準は、第１実施形態の図６の例、及び第２実施形態の図１４の例に限定されず、下位階層ほど、一致とみなす条件が厳しくなるような配置一致基準であればよい。 The placement matching criterion according to the hierarchy stored in the placement matching criterion DB is not limited to the example of FIG. 6 of the first embodiment and the example of FIG. 14 of the second embodiment. It is sufficient if the arrangement coincidence criterion is such that the condition to be regarded becomes strict.
例えば、配置一致基準として、全階層で、部分構造に含まれる子ノードに相当するＨＴＭＬ要素間の距離及び角度の少なくとも一方の一致度を比較する配置一致基準を定めておくことができる。この場合、一致度を判定するための閾値を、上位階層の場合より下位階層の場合の方が、高い一致度を要求する値として定めておけばよい。 For example, as the placement matching criterion, a placement matching criterion that compares the matching degree of at least one of the distance and the angle between the HTML elements corresponding to the child nodes included in the partial structure can be set in all layers. In this case, the threshold for determining the degree of coincidence may be set as a value that requires a higher degree of coincidence in the lower layer than in the upper layer.
また、例えば、上位階層では、ＨＴＭＬ要素間の角度の一致度を比較する配置一致基準を定め、下位階層では、ＨＴＭＬ要素間の距離及び角度の両方の一致度を比較する配置一致基準を定めてもよい。 Further, for example, in the upper layer, the arrangement matching criterion for comparing the matching degree of the angles between the HTML elements is defined, and in the lower layer defining the arrangement matching criterion for comparing the matching degree of both the distance and the angle between the HTML elements. Good.
また、上記第１及び第２実施形態における、階層に応じた配置一致基準に加え、部分構造の子ノードに相当するＨＴＭＬ要素の種類に応じて、配置一致基準を異ならせてもよい。この場合の配置一致基準ＤＢ３２０の一例を図１６に示す。図１６の例では、上位階層と下位階層とで配置一致基準を異ならせると共に、ＨＴＭＬ要素の種類がイメージかテキストかに応じても、配置一致基準を異ならせている。ここでは、イメージの場合よりテキストの場合の方が、配置の一致を厳しく判定する例を示している。なお、ＨＴＭＬ要素の種類は、イメージ及びテキストに限定されず、他の種類を含んでいてもよい。 Further, in addition to the placement matching criterion according to the hierarchy in the first and second embodiments, the placement matching criterion may be changed according to the type of the HTML element corresponding to the child node of the partial structure. FIG. 16 shows an example of the arrangement matching criterion DB 320 in this case. In the example of FIG. 16, the placement matching criterion is made different between the upper layer and the lower layer, and the placement matching criterion is made different depending on whether the type of HTML element is image or text. Here, an example is shown in which the matching of the arrangement is determined more severely in the case of text than in the case of image. The types of HTML elements are not limited to images and texts, and may include other types.
また、上記実施形態では、部分構造が属する階層を、階層構造情報（木構造）から判定する場合について説明したが、これに限定されない。ＨＴＭＬ文書に対する部分構造の占める割合が大きいほど、上記実施形態の上位階層と同様に、表示サイズが異なるブラウザ間でＨＴＭＬ要素のレイアウトが変化し易い特徴がある。そこで、部分構造のサイズや、ＨＴＭＬ文書に対する部分構造の占める割合に応じて、配置一致基準を特定するようにしてもよい。 Moreover, although the said embodiment demonstrated the case where the hierarchy to which a partial structure belongs was determined from hierarchical structure information (tree structure), it is not limited to this. As the ratio of the partial structure to the HTML document is larger, the layout of the HTML element is likely to change between browsers having different display sizes, as in the upper layer of the above embodiment. Therefore, the layout matching criterion 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 mode in which the display comparison program is stored (installed) in the storage unit in advance has been described, but the present invention is not limited to this. The program according to the disclosed technology can be provided in a form stored in a storage medium such as a CD-ROM, a DVD-ROM, or a USB memory.
以上の各実施形態に関し、更に以下の付記を開示する。 With respect to each of the above embodiments, the following additional notes are disclosed.
（付記１）
表示する画面サイズが異なる２つのブラウザの各々で表示されるＨＴＭＬ文書に含まれる各要素を階層構造で表した階層構造情報の各々を取得し、
前記階層構造情報が示す前記ＨＴＭＬ文書全体の階層構造における、前記階層構造情報に含まれる部分構造が属する階層に応じた基準に基づいて、前記部分構造に含まれる要素の各々について、前記２つのブラウザの各々で表示する場合の配置を比較する
ことを含む処理をコンピュータに実行させるための表示比較プログラム。
(Appendix 1)
Acquiring each of the hierarchical structure information representing each element included in the HTML document displayed by each of the two browsers with different screen sizes to be displayed in the hierarchical structure,
In the hierarchical structure of the entire HTML document indicated by the hierarchical structure information, based on a criterion according to a hierarchy to which the partial structure included in the hierarchical structure information belongs, the two browsers are provided for each of the elements included in the partial structure. A display comparison program for causing a computer to execute processing including comparing arrangements when displayed on each.
（付記２）
前記基準を超えて前記２つのブラウザ間で配置が異なる要素を、前記ＨＴＭＬ文書を前記２つのブラウザの各々で表示する場合における非互換要素として出力することをさらに含む処理を前記コンピュータに実行させるための付記１に記載の表示比較プログラム。
(Appendix 2)
In order to cause the computer to execute a process further including outputting an element, which exceeds the standard and has a different arrangement between the two browsers, as an incompatible element when the HTML document is displayed by each of the two browsers. The display comparison program according to Appendix 1.
（付記３）
前記基準として、前記部分構造が属する階層が下位階層であるほど、前記２つのブラウザ間で表示される要素の配置について、高い一致度を要求する基準を用いる付記１又は付記２に記載の表示比較プログラム。
(Appendix 3)
The display comparison according to Appendix 1 or Appendix 2, which uses, as the criterion, a criterion that requires a high degree of coincidence in the arrangement of elements displayed between the two browsers as the hierarchy to which the partial structure belongs is lower. program.
（付記４）
前記基準として、少なくとも、前記部分構造が前記ＨＴＭＬ文書全体の構造に関連する上位階層に属する場合と、前記部分構造が前記ＨＴＭＬ文書の局所構造となる下位階層に属する場合とで、異なる基準を用いる付記１〜付記３のいずれか１項に記載の表示比較プログラム。
(Appendix 4)
As the standard, different standards 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 reference, in the upper layer, the matching degree of the vertical and horizontal positional relationship between the elements included in the partial structure, and in the lower layer, the matching degree of at least one of the distance and the angle between the elements included in the partial structure. The display comparison program according to Supplementary Note 4 using.
（付記６）
前記基準として、前記部分構造に含まれる要素間の距離及び角度の少なくとも一方の一致度を用いる場合、前記一致度を判定するための閾値を、前記上位階層の場合より前記下位階層の場合の方が、高い一致度を要求する値にする付記５に記載の表示比較プログラム。
(Appendix 6)
As the criterion, when using the degree of coincidence of at least one of the distance and the angle between the elements included in the partial structure, a threshold for determining the degree of coincidence is set to be lower in the lower layer than in the upper layer. Is a display comparison program according to Supplementary Note 5 in which a value that requires a high degree of matching is set.
（付記７）
前記要素間の距離及び角度の少なくとも一方の一致度を比較する際、前記２つのブラウザのいずれか一方で表示する場合の要素の配置を、横並びから縦並びに変換、又は、縦並びから横並びに変換して、前記一致度を比較する付記５又は付記６に記載の表示比較プログラム。
(Appendix 7)
When comparing the degree of coincidence of at least one of the distance and the angle between the elements, the arrangement of the elements when displayed in one of the two browsers is changed from horizontal arrangement to vertical arrangement or from vertical arrangement to horizontal arrangement. The display comparison program according to Supplementary Note 5 or Supplementary Note 6, which compares the degrees of coincidence.
（付記８）
前記階層構造を、前記上位階層と、前記下位階層と、前記上位階層と前記下位階層との間の中間階層とに分類する場合、
前記基準として、
前記上位階層では、前記部分構造に含まれる要素間の上下左右の位置関係の一致度、
前記中間階層では、前記２つのブラウザのいずれか一方で表示する場合の要素の配置を、横並びから縦並びに変換、又は、縦並びから横並びに変換することを許容した上での、前記部分構造に含まれる要素間の距離及び角度の少なくとも一方の一致度、
前記下位階層では、前記２つのブラウザのいずれか一方で表示する場合の要素の配置を変換することなく、前記部分構造に含まれる要素間の距離及び角度の少なくとも一方の一致度
を用いる
付記７に記載の表示比較プログラム。
(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 standard,
In the upper hierarchy, the degree of coincidence of the positional relationship between the elements included in the partial structure in the vertical and horizontal directions,
In the middle hierarchy, the arrangement of elements when displaying in one of the two browsers is changed to the partial structure after allowing conversion from horizontal arrangement to vertical arrangement or vertical arrangement to horizontal arrangement. The degree of coincidence of at least one of the distance and the angle between the included elements,
In the lower layer, the degree of coincidence 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 displaying in one of the two browsers. Display comparison program described.
（付記９）
前記基準を、前記部分構造に含まれる要素の種類に応じて異ならせる付記１〜付記８のいずれか１項に記載の表示比較プログラム。
(Appendix 9)
9. The display comparison program according to any one of appendices 1 to 8, wherein the criterion is changed according to the type of element included in the partial structure.
（付記１０）
表示する画面サイズが異なる２つのブラウザの各々で表示されるＨＴＭＬ文書に含まれる各要素を階層構造で表した階層構造情報の各々を取得する取得部と、
前記階層構造情報が示す前記ＨＴＭＬ文書全体の階層構造における、前記階層構造情報に含まれる部分構造が属する階層に応じた基準に基づいて、前記部分構造に含まれる要素の各々について、前記２つのブラウザの各々で表示する場合の配置を比較する比較部と、
を含む表示比較装置。
(Appendix 10)
An acquisition unit that acquires each piece of hierarchical structure information that represents each element included in the HTML document displayed in each of two browsers that display different screen sizes in a hierarchical structure,
In the hierarchical structure of the entire HTML document indicated by the hierarchical structure information, based on a criterion according to a hierarchy to which the partial structure included in the hierarchical structure information belongs, the two browsers are provided for each of the elements included in the partial structure. And a comparison unit that compares the arrangement when displaying each
Display comparison device including.
（付記１１）
前記基準を超えて前記２つのブラウザ間で配置が異なる要素を、前記ＨＴＭＬ文書を前記２つのブラウザの各々で表示する場合における非互換要素として出力する出力部をさらに含む付記１０に記載の表示比較装置。
(Appendix 11)
11. The display comparison according to note 10, further including an output unit that outputs an element, which exceeds the standard and is arranged differently between the two browsers, as an incompatible element when the HTML document is displayed by each of the two browsers. apparatus.
（付記１２）
前記比較部は、前記基準として、前記部分構造が属する階層が下位階層であるほど、前記２つのブラウザ間で表示される要素の配置について、高い一致度を要求する基準を用いる付記１０又は付記１１に記載の表示比較装置。
(Appendix 12)
Note 10 or Note 11 that the comparing unit uses, as the criterion, a criterion that requires a high degree of coincidence in the arrangement of elements displayed between the two browsers as the hierarchy to which the partial structure belongs is lower. The display comparison device described in 1.
（付記１３）
前記比較部は、前記基準として、少なくとも、前記部分構造が前記ＨＴＭＬ文書全体の構造に関連する上位階層に属する場合と、前記部分構造が前記ＨＴＭＬ文書の局所構造となる下位階層に属する場合とで、異なる基準を用いる付記１０〜付記１２のいずれか１項に記載の表示比較装置。
(Appendix 13)
The comparison unit may use, as the criterion, at least the case where the partial structure belongs to a higher hierarchy related to the structure of the entire HTML document and the case where the partial structure belongs to a lower hierarchy that is a local structure of the HTML document. The display comparison device according to any one of appendices 10 to 12, which uses different criteria.
（付記１４）
前記比較部は、前記基準として、前記上位階層では、前記部分構造に含まれる要素間の上下左右の位置関係の一致度、前記下位階層では、前記部分構造に含まれる要素間の距離及び角度の少なくとも一方の一致度を用いる付記１３に記載の表示比較装置。
(Appendix 14)
The comparison unit uses, as the reference, the degree of coincidence of the vertical and horizontal positional relationships between the elements included in the partial structure in the upper layer, and the distance and angle between the elements included in the partial structure in the lower layer. 14. The display comparison device according to attachment 13, which uses at least one of the degrees of coincidence.
（付記１５）
前記比較部は、前記基準として、前記部分構造に含まれる要素間の距離及び角度の少なくとも一方の一致度を用いる場合、前記一致度を判定するための閾値を、前記上位階層の場合より前記下位階層の場合の方が、高い一致度を要求する値にする付記１４に記載の表示比較装置。
(Appendix 15)
When the comparison unit uses the degree of coincidence of at least one of a distance and an angle between elements included in the partial structure as the reference, a threshold for determining the degree of coincidence is lower than that in the case of the upper layer. 15. The display comparison device according to appendix 14, wherein a value that requires a higher degree of coincidence is used in the case of a hierarchy.
（付記１６）
前記比較部は、前記要素間の距離及び角度の少なくとも一方の一致度を比較する際、前記２つのブラウザのいずれか一方で表示する場合の要素の配置を、横並びから縦並びに変換、又は、縦並びから横並びに変換して、前記一致度を比較する付記１４又は付記１５に記載の表示比較装置。
(Appendix 16)
When comparing the degree of coincidence of at least one of the distance and the angle between the elements, the comparison unit converts the arrangement of the elements in the case of displaying in one of the two browsers from horizontal arrangement to vertical arrangement or vertical arrangement. 16. The display comparison device according to supplementary note 14 or supplementary note 15 in which the degree of coincidence is compared by converting the arrangement side by side to the side by side.
（付記１７）
前記階層構造を、前記上位階層と、前記下位階層と、前記上位階層と前記下位階層との間の中間階層とに分類する場合、
前記比較部は、前記基準として、
前記上位階層では、前記部分構造に含まれる要素間の上下左右の位置関係の一致度、
前記中間階層では、前記２つのブラウザのいずれか一方で表示する場合の要素の配置を、横並びから縦並びに変換、又は、縦並びから横並びに変換することを許容した上での、前記部分構造に含まれる要素間の距離及び角度の少なくとも一方の一致度、
前記下位階層では、前記２つのブラウザのいずれか一方で表示する場合の要素の配置を変換することなく、前記部分構造に含まれる要素間の距離及び角度の少なくとも一方の一致度
を用いる
付記１６に記載の表示比較装置。
(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 degree of coincidence of the positional relationship between the elements included in the partial structure in the vertical and horizontal directions,
In the middle hierarchy, the arrangement of elements when displaying in one of the two browsers is changed to the partial structure after allowing conversion from horizontal arrangement to vertical arrangement or vertical arrangement to horizontal arrangement. The degree of coincidence of at least one of the distance and the angle between the included elements,
In the lower layer, the degree of coincidence 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 displaying in one of the two browsers. Display comparison device 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 type of elements included in the partial structure.
（付記１９）
表示する画面サイズが異なる２つのブラウザの各々で表示されるＨＴＭＬ文書に含まれる各要素を階層構造で表した階層構造情報の各々を取得し、
前記階層構造情報が示す前記ＨＴＭＬ文書全体の階層構造における、前記階層構造情報に含まれる部分構造が属する階層に応じた基準に基づいて、前記部分構造に含まれる要素の各々について、前記２つのブラウザの各々で表示する場合の配置を比較する
ことを含む処理をコンピュータが実行する表示比較方法。
(Appendix 19)
Acquiring each of the hierarchical structure information that represents each element included in the HTML document displayed by each of two browsers having different screen sizes to be displayed in a hierarchical structure,
In the hierarchical structure of the entire HTML document indicated by the hierarchical structure information, based on a criterion according to a hierarchy to which the partial structure included in the hierarchical structure information belongs, the two browsers are provided for each of the elements included in the partial structure. The display comparison method in which the computer executes the processing including the comparison of the arrangements when displaying each.
（付記２０）
表示する画面サイズが異なる２つのブラウザの各々で表示されるＨＴＭＬ文書に含まれる各要素を階層構造で表した階層構造情報の各々を取得し、
前記階層構造情報が示す前記ＨＴＭＬ文書全体の階層構造における、前記階層構造情報に含まれる部分構造が属する階層に応じた基準に基づいて、前記部分構造に含まれる要素の各々について、前記２つのブラウザの各々で表示する場合の配置を比較する
ことを含む処理をコンピュータに実行させるための表示比較プログラムを記憶した記憶媒体。
(Appendix 20)
Acquiring each of the hierarchical structure information that represents each element included in the HTML document displayed by each of two browsers having different screen sizes to be displayed in a hierarchical structure,
In the hierarchical structure of the entire HTML document indicated by the hierarchical structure information, based on a criterion according to a hierarchy to which the partial structure included in the hierarchical structure information belongs, the two browsers are provided for each of the elements included in the partial structure. A storage medium that stores a display comparison program for causing a computer to execute a process including comparing the arrangement when displaying each of the items.
１０、２１０ 表示比較装置
１２ 取得部
１４、２１４ 比較部
１６ 出力部
２０、２２０、３２０ 配置一致基準ＤＢ
４０ コンピュータ
４１ ＣＰＵ
４２ メモリ
４３ 記憶部
４９ 記憶媒体
５０、２５０ 表示比較プログラム
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 media 50, 250 display comparison program
Claims (11)
前記階層構造情報が示す前記ＨＴＭＬ文書全体の階層構造における、前記階層構造情報に含まれる部分構造が属する階層に応じた基準に基づいて、前記部分構造に含まれる要素の各々について、前記２つのブラウザの各々で表示する場合の配置を比較する
ことを含む処理をコンピュータに実行させるための表示比較プログラム。 Acquiring each of the hierarchical structure information representing each element included in the HTML document displayed by each of the two browsers with different screen sizes to be displayed in the hierarchical structure,
In the hierarchical structure of the entire HTML document indicated by the hierarchical structure information, based on a criterion according to a hierarchy to which the partial structure included in the hierarchical structure information belongs, the two browsers are provided for each of the elements included in the partial structure. A display comparison program for causing a computer to execute processing including comparing arrangements when displayed on each.
前記基準として、
前記上位階層では、前記部分構造に含まれる要素間の上下左右の位置関係の一致度、
前記中間階層では、前記２つのブラウザのいずれか一方で表示する場合の要素の配置を、横並びから縦並びに変換、又は、縦並びから横並びに変換することを許容した上での、前記部分構造に含まれる要素間の距離及び角度の少なくとも一方の一致度、
前記下位階層では、前記２つのブラウザのいずれか一方で表示する場合の要素の配置を変換することなく、前記部分構造に含まれる要素間の距離及び角度の少なくとも一方の一致度
を用いる
請求項７に記載の表示比較プログラム。 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 standard,
In the upper hierarchy, the degree of coincidence of the positional relationship between the elements included in the partial structure in the vertical and horizontal directions,
In the middle hierarchy, the arrangement of elements when displaying in one of the two browsers is changed to the partial structure after allowing conversion from horizontal arrangement to vertical arrangement or vertical arrangement to horizontal arrangement. The degree of coincidence of at least one of the distance and the angle between the included elements,
The degree of coincidence of at least one of a distance and an angle between elements included in the partial structure is used in the lower layer without converting the arrangement of elements when displayed in one of the two browsers. The display comparison program described in.
前記階層構造情報が示す前記ＨＴＭＬ文書全体の階層構造における、前記階層構造情報に含まれる部分構造が属する階層に応じた基準に基づいて、前記部分構造に含まれる要素の各々について、前記２つのブラウザの各々で表示する場合の配置を比較する比較部と、
を含む表示比較装置。 An acquisition unit that acquires each piece of hierarchical structure information that represents each element included in the HTML document displayed in each of two browsers that display different screen sizes in a hierarchical structure,
In the hierarchical structure of the entire HTML document indicated by the hierarchical structure information, based on a criterion according to a hierarchy to which the partial structure included in the hierarchical structure information belongs, the two browsers are provided for each of the elements included in the partial structure. And a comparison unit that compares the arrangement when displaying each
Display comparison device including.
前記階層構造情報が示す前記ＨＴＭＬ文書全体の階層構造における、前記階層構造情報に含まれる部分構造が属する階層に応じた基準に基づいて、前記部分構造に含まれる要素の各々について、前記２つのブラウザの各々で表示する場合の配置を比較する
ことを含む処理をコンピュータが実行する表示比較方法。 Acquiring each of the hierarchical structure information that represents each element included in the HTML document displayed by each of two browsers having different screen sizes to be displayed in a hierarchical structure,
In the hierarchical structure of the entire HTML document indicated by the hierarchical structure information, based on a criterion according to a hierarchy to which the partial structure included in the hierarchical structure information belongs, the two browsers are provided for each of the elements included in the partial structure. The display comparison method in which the computer executes the processing including the comparison of the arrangements when displaying each.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| JP2019002848A JP7215176B2 (en) | 2019-01-10 | 2019-01-10 | Display comparison program, apparatus and method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| JP2019002848A JP7215176B2 (en) | 2019-01-10 | 2019-01-10 | Display comparison program, apparatus and method |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| JP2020113002A true JP2020113002A (en) | 2020-07-27 |
| JP7215176B2 JP7215176B2 (en) | 2023-01-31 |
Family
ID=71667034
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| JP2019002848A Active JP7215176B2 (en) | 2019-01-10 | 2019-01-10 | Display comparison program, apparatus and method |
Country Status (1)
| Country | Link |
|---|---|
| JP (1) | JP7215176B2 (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2022195726A1 (en) | 2021-03-16 | 2022-09-22 | 富士通株式会社 | Information processing program, information processing method, and information processing device |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110019676A1 (en) * | 2009-07-21 | 2011-01-27 | Cisco Technology, Inc. | Extended subnets |
| JP2016071418A (en) * | 2014-09-26 | 2016-05-09 | 富士通株式会社 | Display area specification device, display area specification method, and program |
| US20180052808A1 (en) * | 2016-08-16 | 2018-02-22 | Adobe Systems Incorporated | Creation and display of a webpage with alternative layouts for different webpage widths |
-
2019
- 2019-01-10 JP JP2019002848A patent/JP7215176B2/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110019676A1 (en) * | 2009-07-21 | 2011-01-27 | Cisco Technology, Inc. | Extended subnets |
| JP2016071418A (en) * | 2014-09-26 | 2016-05-09 | 富士通株式会社 | Display area specification device, display area specification method, and program |
| US20180052808A1 (en) * | 2016-08-16 | 2018-02-22 | Adobe Systems Incorporated | Creation and display of a webpage with alternative layouts for different webpage widths |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2022195726A1 (en) | 2021-03-16 | 2022-09-22 | 富士通株式会社 | Information processing program, information processing method, and information processing device |
Also Published As
| Publication number | Publication date |
|---|---|
| JP7215176B2 (en) | 2023-01-31 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10984295B2 (en) | Font recognition using text localization | |
| US9875429B2 (en) | Font attributes for font recognition and similarity | |
| KR101955732B1 (en) | Associating captured image data with a spreadsheet | |
| CN111428457B (en) | Automatic formatting of data tables | |
| US9697234B1 (en) | Approaches for associating terms with image regions | |
| US20060037019A1 (en) | Tree-to-graph folding procedure for systems engineering requirements | |
| US20170098141A1 (en) | Determination of Font Similarity | |
| US11023540B2 (en) | Web page clustering method and device | |
| US10528649B2 (en) | Recognizing unseen fonts based on visual similarity | |
| US20150227276A1 (en) | Method and system for providing an interactive user guide on a webpage | |
| US11269950B2 (en) | Analysis for framework assessment | |
| US20180307399A1 (en) | Dynamic Thumbnails | |
| US11205207B2 (en) | Automated digital catalog generation | |
| US11182956B2 (en) | Self drawing tool for a computer-implemented automated design, modeling and manufacturing system | |
| JP5612557B2 (en) | Method, computer readable medium and system for determining table cell height | |
| JP7215176B2 (en) | Display comparison program, apparatus and method | |
| JP6708253B2 (en) | Evaluation program, evaluation device, and evaluation method | |
| US20120110441A1 (en) | Using a layout engine to display an overflowed textbox | |
| CN114924822B (en) | Screenshot method and device of three-dimensional topological structure, electronic equipment and storage medium | |
| CN117151106A (en) | Method and device for generating document outline, electronic equipment and storage medium | |
| US10379970B2 (en) | Automatic design discrepancy reporting | |
| US20210150670A1 (en) | Table Shifting and Skewing | |
| CN112487781A (en) | File comparison method and device, storage medium and equipment | |
| US9244597B1 (en) | Representing spatial relationships of elements on a user interface | |
| US11526652B1 (en) | Automated optimization of displayed electronic content imagery |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| A621 | Written request for application examination |
Free format text: JAPANESE INTERMEDIATE CODE: A621 Effective date: 20211007 |
|
| A131 | Notification of reasons for refusal |
Free format text: JAPANESE INTERMEDIATE CODE: A131 Effective date: 20220830 |
|
| A977 | Report on retrieval |
Free format text: JAPANESE INTERMEDIATE CODE: A971007 Effective date: 20220831 |
|
| A521 | Request for written amendment filed |
Free format text: JAPANESE INTERMEDIATE CODE: A523 Effective date: 20220922 |
|
| TRDD | Decision of grant or rejection written | ||
| A01 | Written decision to grant a patent or to grant a registration (utility model) |
Free format text: JAPANESE INTERMEDIATE CODE: A01 Effective date: 20221220 |
|
| A61 | First payment of annual fees (during grant procedure) |
Free format text: JAPANESE INTERMEDIATE CODE: A61 Effective date: 20230102 |
|
| R150 | Certificate of patent or registration of utility model |
Ref document number: 7215176 Country of ref document: JP Free format text: JAPANESE INTERMEDIATE CODE: R150 |