特許 7215176 表示比較プログラム、装置、及び方法

(19)【発行国】日本国特許庁(JP)

(12)【公報種別】特許公報(B2)

(11)【特許番号】

(24)【登録日】2023-01-23

(45)【発行日】2023-01-31

(54)【発明の名称】表示比較プログラム、装置、及び方法

(51)【国際特許分類】

   G06F 40/14 20200101AFI20230124BHJP

   G06F 40/106 20200101ALI20230124BHJP

【ＦＩ】

G06F40/14

G06F40/106

【請求項の数】 10

(21)【出願番号】P 2019002848

(22)【出願日】2019-01-10

(65)【公開番号】P2020113002

(43)【公開日】2020-07-27

【審査請求日】2021-10-07

(73)【特許権者】

【識別番号】000005223

【氏名又は名称】富士通株式会社

(74)【代理人】

【識別番号】100084995

【弁理士】

【氏名又は名称】加藤 和詳

(74)【代理人】

【識別番号】100099025

【弁理士】

【氏名又は名称】福田 浩志

(72)【発明者】

【氏名】田中 宏

【審査官】長 由紀子

(56)【参考文献】

【文献】米国特許出願公開第２０１１／００１９６７６（ＵＳ，Ａ１）

【文献】米国特許出願公開第２０１８／００５２８０８（ＵＳ，Ａ１）

【文献】特開２０１６－０７１４１８（ＪＰ，Ａ）

(58)【調査した分野】(Int.Cl.，ＤＢ名)

Ｇ０６Ｆ ４０／００－５８

Ｇ０６Ｆ ３／０４８

(57)【特許請求の範囲】

【請求項1】

表示する画面サイズが異なる２つのブラウザの各々で表示されるＨＴＭＬ文書に含まれる各要素を階層構造で表すと共に、各要素の画面上での位置及びサイズの情報を含む階層構造情報の各々を取得し、
前記階層構造情報が示す前記ＨＴＭＬ文書全体の階層構造における、前記階層構造情報に含まれる部分構造が属する階層に応じた、前記２つのブラウザ間での要素の配置の一致度の基準に基づいて、前記部分構造に含まれる要素の各々について、前記２つのブラウザの各々で表示する場合の配置が一致するか否かを比較し、
前記基準を超えて前記２つのブラウザ間で配置が異なる要素を、前記ＨＴＭＬ文書を前記２つのブラウザの各々で表示する場合における非互換要素として出力する
ことを含む処理をコンピュータに実行させるための表示比較プログラム。

【請求項2】

前記基準として、前記部分構造が属する階層が下位階層であるほど、前記２つのブラウザ間で表示される要素の配置について、高い一致度を要求する基準を用いる請求項１に記載の表示比較プログラム。

【請求項3】

前記基準として、少なくとも、前記部分構造が前記ＨＴＭＬ文書全体の構造に関連する上位階層に属する場合と、前記部分構造が前記ＨＴＭＬ文書の局所構造となる下位階層に属する場合とで、異なる基準を用いる請求項１又は請求項２に記載の表示比較プログラム。

【請求項4】

前記基準として、前記上位階層では、前記部分構造に含まれる要素間の上下左右の位置関係の一致度、前記下位階層では、前記部分構造に含まれる要素間の距離及び角度の少なくとも一方の一致度を用いる請求項３に記載の表示比較プログラム。

【請求項5】

前記基準として、前記部分構造に含まれる要素間の距離及び角度の少なくとも一方の一致度を用いる場合、前記一致度を判定するための閾値を、前記上位階層の場合より前記下位階層の場合の方が、高い一致度を要求する値にする請求項４に記載の表示比較プログラム。

【請求項6】

前記要素間の距離及び角度の少なくとも一方の一致度を比較する際、前記２つのブラウザのいずれか一方で表示する場合の要素の配置を、横並びから縦並びに変換、又は、縦並びから横並びに変換して、前記一致度を比較する請求項４又は請求項５に記載の表示比較プログラム。

【請求項7】

前記階層構造を、前記上位階層と、前記下位階層と、前記上位階層と前記下位階層との間の中間階層とに分類する場合、
前記基準として、
前記上位階層では、前記部分構造に含まれる要素間の上下左右の位置関係の一致度、
前記中間階層では、前記２つのブラウザのいずれか一方で表示する場合の要素の配置を、横並びから縦並びに変換、又は、縦並びから横並びに変換することを許容した上での、前記部分構造に含まれる要素間の距離及び角度の少なくとも一方の一致度、
前記下位階層では、前記２つのブラウザのいずれか一方で表示する場合の要素の配置を変換することなく、前記部分構造に含まれる要素間の距離及び角度の少なくとも一方の一致度
を用いる
請求項６に記載の表示比較プログラム。

【請求項8】

前記基準を、前記部分構造に含まれる要素の種類に応じて異ならせる請求項１～請求項７のいずれか１項に記載の表示比較プログラム。

【請求項9】

表示する画面サイズが異なる２つのブラウザの各々で表示されるＨＴＭＬ文書に含まれる各要素を階層構造で表すと共に、各要素の画面上での位置及びサイズの情報を含む階層構造情報の各々を取得する取得部と、
前記階層構造情報が示す前記ＨＴＭＬ文書全体の階層構造における、前記階層構造情報に含まれる部分構造が属する階層に応じた、前記２つのブラウザ間での要素の配置の一致度の基準に基づいて、前記部分構造に含まれる要素の各々について、前記２つのブラウザの各々で表示する場合の配置が一致するか否かを比較する比較部と、
前記基準を超えて前記２つのブラウザ間で配置が異なる要素を、前記ＨＴＭＬ文書を前記２つのブラウザの各々で表示する場合における非互換要素として出力する出力部と、
を含む表示比較装置。

【請求項10】

表示する画面サイズが異なる２つのブラウザの各々で表示されるＨＴＭＬ文書に含まれる各要素を階層構造で表すと共に、各要素の画面上での位置及びサイズの情報を含む階層構造情報の各々を取得し、
前記階層構造情報が示す前記ＨＴＭＬ文書全体の階層構造における、前記階層構造情報に含まれる部分構造が属する階層に応じた、前記２つのブラウザ間での要素の配置の一致度の基準に基づいて、前記部分構造に含まれる要素の各々について、前記２つのブラウザの各々で表示する場合の配置が一致するか否かを比較し、
前記基準を超えて前記２つのブラウザ間で配置が異なる要素を、前記ＨＴＭＬ文書を前記２つのブラウザの各々で表示する場合における非互換要素として出力する
ことを含む処理をコンピュータが実行する表示比較方法。

【発明の詳細な説明】

【技術分野】

【0001】

開示の技術は、表示比較プログラム、表示比較装置、及び表示比較方法に関する。

【背景技術】

【0002】

従来、ウェブページやアプリケーションなどのコンテンツの作成者は、作成したコンテンツが様々なブラウザ画面上で正しく表示されるか否かを検証する必要がある。この検証を目視で行うことは負荷が大きいため、コンテンツを構成するＨＴＭＬ（Hyper Text Markup Language）要素の配置を比較するクロスブラウザ表示テストなどの技術が開発されている。

【0003】

例えば、複数の表示要素を含む表示データに関して複数のブラウザ間での互換性を確保するための修正作業を効率化する修正候補判定装置が提案されている。この装置は、他の表示要素に包含される表示要素群について、複数のブラウザのそれぞれによる表示結果における各表示要素の表示領域の相対的な位置関係を特定する。また、この装置は、表示要素群毎に、ブラウザ毎に特定された各表示領域の相対的な位置関係を相互に比較する。そして、いずれかのブラウザに関して特定された位置関係が他のブラウザに関して特定された位置関係と異なる表示要素群を、表示データにおける修正箇所の候補であると判定する。

【0004】

また、表示データの表示に関する複数のブラウザ間での非互換を効率的に検出する非互換検出装置が提案されている。この装置は、同一の表示データに関する複数のブラウザのそれぞれの表示結果における、表示データに含まれる複数の表示要素のそれぞれの表示領域を示す表示領域情報を取得する。また、この装置は、ブラウザ毎に、当該ブラウザに関して取得された表示領域情報に基づいて、複数の表示要素の中で水平方向に相互に並列する表示要素の組み合わせを特定する。そして、この装置は、いずれかのブラウザに関して特定され、他のいずれかのブラウザに関して特定されない組み合わせに含まれる表示要素を、ブラウザ間の非互換部分として検出する。

【先行技術文献】

【特許文献】

【0005】

【文献】特開２０１６－１８２５４号公報

【文献】特開２０１６－６６２２７号公報

【発明の概要】

【発明が解決しようとする課題】

【0006】

近年、ブラウザは、パーソナルコンピュータ（ＰＣ）だけでなく各種のモバイル端末でも広く利用されているが、様々なデバイス用にウェブコンテンツを作成するのは負荷が大きい。そこで、近年では、「ワンソース・マルチユース」と言われるように、一つのＨＴＭＬ文書を様々なデバイスで表示する「レスポンシブ・デザイン」という技術が広く用いられている。

【0007】

このようなレスポンシブ・デザインのＨＴＭＬ文書をマルチデバイス環境で表示する場合、いずれの画面においても正常に表示されているとしても、画面サイズの相違により、表示レイアウトが変化する可能性がある。したがって、従来技術のように、単にＨＴＭＬ要素の配置関係を比較するだけでは、ブラウザ間の非互換性を適切に検出することができない場合がある。

【0008】

一つの側面として、開示の技術は、マルチデバイス環境で表示されるＨＴＭＬ文書の非互換性を検出可能に、画面サイズが異なる複数のブラウザでの表示を比較することを目的とする。

【課題を解決するための手段】

【0009】

一つの態様として、開示の技術は、表示する画面サイズが異なる２つのブラウザの各々で表示されるＨＴＭＬ文書に含まれる各要素を階層構造で表すと共に、各要素の画面上での位置及びサイズの情報を含む階層構造情報の各々を取得する。また、前記階層構造情報が示す前記ＨＴＭＬ文書全体の階層構造における、前記階層構造情報に含まれる部分構造が属する階層に応じた、前記２つのブラウザ間での要素の配置の一致度の基準に基づいて、前記部分構造に含まれる要素の各々について、前記２つのブラウザの各々で表示する場合の配置が一致するか否かを比較する。そして、前記基準を超えて前記２つのブラウザ間で配置が異なる要素を、前記ＨＴＭＬ文書を前記２つのブラウザの各々で表示する場合における非互換要素として出力する

【発明の効果】

【0010】

一つの側面として、マルチデバイス環境で表示されるＨＴＭＬ文書の非互換性を検出可能に、画面サイズが異なる複数のブラウザでの表示を比較することができる、という効果を有する。

【図面の簡単な説明】

【0011】

【図1】マルチデバイス環境におけるＨＴＭＬ文書表示時のレイアウトの変更を説明するための図である。

【図2】ＨＴＭＬ文書の階層構造情報の一例を示す図である。

【図3】ＨＴＭＬ要素の縦横並びの変更を説明するための図である。

【図4】ＨＴＭＬ要素の間隔やサイズの変更を説明するための図である。

【図5】第１及び第２実施形態に係る表示比較装置の機能ブロック図である。

【図6】第１実施形態における配置一致基準ＤＢの一例を示す図である。

【図7】ＨＴＭＬ要素間の配置の比較を説明するための図である。

【図8】ＨＴＭＬ要素間の上下の位置関係を説明するための図である。

【図9】ＨＴＭＬ要素間の左右の位置関係を説明するための図である。

【図10】ＨＴＭＬ要素間の角度の一致度を比較する場合を説明するための図である。

【図11】第１及び第２実施形態に係る表示比較装置として機能するコンピュータの概略構成を示すブロック図である。

【図12】第１実施形態における表示比較処理の一例を示すフローチャートである。

【図13】階層に応じた配置一致基準に基づくＨＴＭＬ要素の比較を説明するための図である。

【図14】第２実施形態における配置一致基準ＤＢの一例を示す図である。

【図15】第２実施形態における表示比較処理の一例を示すフローチャートである。

【図16】配置一致基準ＤＢの他の例を示す図である。

【発明を実施するための形態】

【0012】

以下、図面を参照して、開示の技術に係る実施形態の一例を説明する。

【0013】

各実施形態の詳細を説明する前に、マルチデバイス環境において、レスポンシブ・デザインのＨＴＭＬ文書を表示する場合における互換性、及び表示レイアウトの特徴について説明する。

【0014】

図１に示すように、レスポンシブ・デザインで作成されたＨＴＭＬ文書は、デスクトップＰＣ、タブレットＰＣ、モバイル端末等の、それぞれ画面サイズの異なるデバイスで表示される際に、各画面サイズに合わせたレイアウトに自動で変更される。したがって、個々のＨＴＭＬ要素の配置を比較した場合には、配置関係に差異があるＨＴＭＬ要素も存在するが、各デバイスに表示された画面はいずれも正常な表示である。すなわち、各デバイスに表示された画面同士は互換性を有する。

【0015】

このように、ＨＴＭＬ要素の配置関係を単純に比較するだけでは、マルチデバイス環境における、ブラウザ間での表示の非互換性を適切に検出できない場合がある。

【0016】

ここで、画面サイズが異なるブラウザ間では、表示されるＨＴＭＬ要素の配置は変化するが、ＨＴＭＬ文書の上位階層と下位階層とでは、その配置位置の変化の傾向は異なる。具体的には、図２に示すように、上位階層に属するＨＴＭＬ要素間の配置関係は、画面サイズに応じてレイアウトが大きく変化し易く、その変化の傾向に規則性を見出すことが困難である。例えば、最上位の層に属するＨＴＭＬ要素は、画面全体が見易くなるようにレイアウトが工夫されるため、画面サイズに応じて様々な配置が採用される。図１の例では、「ヘッダ」、「ｄｉｖ」、及び「本文」の配置関係は、デスクトップＰＣ用と、タブレットＰＣ用と、モバイル端末用とでそれぞれ大きく異なる。

【0017】

一方、下位階層に属するＨＴＭＬ要素間の配置関係は、画面サイズが相違してもレイアウトが変化し難く、変化する場合でも、その変化に規則性がある場合が多い。変化の規則性としては、例えば、図３に示すように、横並びのＨＴＭＬ要素を縦並びに変化させることや、その逆に、縦並びのＨＴＭＬ要素を横並びに変化させる場合などがある。ただし、ＨＴＭＬ要素の並び順が入れ替わる場合には、互換性がないとみなす。また、変化の規則性としては、例えば、図４に示すように、ＨＴＭＬ要素の間隔やサイズを変化させる場合などがある。ただし、ＨＴＭＬ要素が均等に配置されている場合と、ＨＴＭＬ要素間の間隔にばらつきがある場合とでは、互換性がないとみなす。

【0018】

そこで、以下の各実施形態では、ＨＴＭＬ要素の配置関係がブラウザ間で一致しているか否かの判断基準を、ＨＴＭＬ要素が属する階層に応じて変更することで、ＨＴＭＬ要素の配置関係をより適切に比較する。

【0019】

＜第１実施形態＞
第１実施形態に係る表示比較装置１０は、機能的には、図５に示すように、取得部１２と、比較部１４と、出力部１６とを含む。また、表示比較装置１０の所定の記憶領域には、配置一致基準データベース（ＤＢ）２０が記憶される。

【0020】

取得部１２は、表示する画面サイズが異なる２つのブラウザの各々で表示されるＨＴＭＬ文書に含まれる各ＨＴＭＬ要素を階層構造で表した階層構造情報の各々を取得する。階層構造情報は、少なくとも、ＨＴＭＬ要素の親子関係を示す情報と、各ＨＴＭＬ要素の画面上での位置及びサイズなどを示す属性情報とを含む。

【0021】

ＨＴＭＬ要素の親子関係は、例えば図２に示すように、各ＨＴＭＬ要素をノードで表し、親子関係にあるＨＴＭＬ要素を示すノード同士を接続した木構造で表すことができる。また、属性情報としては、ＨＴＭＬ要素が配置される画面上の領域を矩形領域で表した場合の矩形の基準位置（例えば左上角）の座標（ｘ，ｙ）と、矩形のサイズ（Δｘ，Δｙ）とを含む情報とすることができる。このような階層構造情報としては、例えば、ＨＴＭＬ文書を内部で表現したＤＯＭ（Document Object Model）情報を用いることができる。取得部１２は、取得した階層構造情報を比較部１４へ受け渡す。

【0022】

比較部１４は、取得部１２から受け渡された階層構造情報が示すＨＴＭＬ文書全体の階層構造において、部分構造が属する階層に応じて、ブラウザ間でのＨＴＭＬ要素の配置が一致するか否かを判定するための配置一致基準を決定する。

【0023】

本実施形態における部分構造とは、階層構造情報において、ある１つのノードと、そのノードを親ノードとして直結する子ノードとを含む構造である。例えば、図２の例で、ノード「本文」に着目した場合、ノード「本文」と、ノード「本文」を親ノードとして直結する子ノード「項目１」及び「項目２」とが、１つの部分構造となる。

【0024】

具体的には、比較部１４は、処理対象の部分構造毎に、その部分構造が属する階層を、階層構造情報に基づいて特定し、特定した階層に応じた配置一致基準を、配置一致基準ＤＢ２０から取得する。

【0025】

図６に示すように、配置一致基準ＤＢ２０には、階層に応じた配置一致基準が記憶されている。配置一致基準ＤＢ２０では、配置一致基準として、部分構造が属する階層が下位階層であるほど、２つのブラウザ間で表示されるＨＴＭＬ要素の配置について、高い一致度を要求する基準が定められる。すなわち、配置一致基準として、部分構造がＨＴＭＬ文書全体の構造に関連する上位階層に属する場合と、局所構造となる下位階層に属する場合とで、異なる基準が定められる。

【0026】

例えば、図６に示すように、上位階層では、部分構造に含まれる子ノードに相当するＨＴＭＬ要素間の上下左右の位置関係が一致するか否かを比較する配置一致基準を定めておくことができる。一方、下位階層では、部分構造に含まれる子ノードに相当するＨＴＭＬ要素間の距離及び角度の少なくとも一方の一致度を比較する配置一致基準を定めておくことができる。

【0027】

比較部１４は、決定した配置一致基準に基づいて、処理対象の部分構造に含まれる子ノードに相当するＨＴＭＬ要素の各々について、２つのブラウザの各々で表示する場合の配置を比較する。

【0028】

具体的には、図７に示すように、比較部１４は、ＨＴＭＬ要素１から見たＨＴＭＬ要素２の配置が、ブラウザＡで表示する場合とブラウザＢで表示する場合とで、一致するか否かを比較する。なお、以下では、ブラウザＸで表示されるＨＴＭＬ要素ｉを「ＨＴＭＬ要素ｉ－Ｘ」と表記する。また、表示するブラウザを区別することなくＨＴＭＬ要素について説明する場合には、単に「ＨＴＭＬ要素ｉ」と表記する。

【0029】

例えば、図６に示す配置一致基準ＤＢ２０で、上位階層について定められている配置一致基準、すなわち、ＨＴＭＬ要素間の上下左右の位置関係が一致するか否かを比較する場合について説明する。

【0030】

この場合、比較部１４は、階層構造情報に含まれる各ＨＴＭＬ要素の位置及びサイズに基づいて、ＨＴＭＬ要素１とＨＴＭＬ要素２との間の横方向（ｘ座標）及び縦方向（ｙ座標）の重複部分の有無を判定する。図８に示すように、横方向に重複部分があり、縦方向に重複部分がない場合、比較部１４は、ＨＴＭＬ要素１とＨＴＭＬ要素２との配置は上下の関係であると判定する。また、図９に示すように、横方向に重複部分がなく、縦方向に重複部分がある場合、比較部１４は、ＨＴＭＬ要素１とＨＴＭＬ要素２との配置は左右の関係であると判定する。

【0031】

比較部１４は、上記の上下左右の関係の判定結果と、ＨＴＭＬ要素１及びＨＴＭＬ要素２の基準位置（例えば、左上角）の座標とに基づいて、ＨＴＭＬ要素１から見てＨＴＭＬ要素２が上、下、左、又は右のいずれに位置するかを特定する。比較部１４は、この特定結果が、ブラウザＡで表示する場合と、ブラウザＢで表示する場合とで同一か否かを比較する。同一の場合には、ＨＴＭＬ要素１とＨＴＭＬ要素２との配置関係は、ブラウザＡ及びＢ間で一致し、異なる場合には、配置関係が一致しない、という比較結果になる。

【0032】

また、例えば、図６に示す配置一致基準ＤＢ２０で、下位階層について定められている配置一致基準、すなわち、ＨＴＭＬ要素間の角度の一致度を比較する場合について説明する。

【0033】

この場合、比較部１４は、図１０に示すように、ＨＴＭＬ要素１－Ａの基準位置（例えば、左上角）からＨＴＭＬ要素２－Ａの基準位置へのベクトルと、基準方向とのなす角θ_Ａを求める。同様に、比較部１４は、ＨＴＭＬ要素１－Ｂの基準位置からＨＴＭＬ要素２－Ｂの基準位置へのベクトルと、基準方向とのなす角θ_Ｂを求める。基準方向は、例えば、ＨＴＭＬ要素１とＨＴＭＬ要素２との位置関係が上下の場合には垂直方向、左右の場合には水平方向とすることができる。

【0034】

そして、比較部１４は、θ_Ａとθ_Ｂとの差（｜θ_Ａ－θ_Ｂ｜）と、予め定めた閾値θ_ｔｈとを比較する。｜θ_Ａ－θ_Ｂ｜＜θ_ｔｈの場合には、ＨＴＭＬ要素１とＨＴＭＬ要素２との配置関係は、ブラウザＡ及びＢ間で一致し、｜θ_Ａ－θ_Ｂ｜≧θ_ｔｈの場合には、配置関係が一致しない、という比較結果になる。

【0035】

比較部１４は、比較結果を出力部１６へ受け渡す。

【0036】

出力部１６は、比較部１４から受け渡された比較結果に基づいて、配置一致基準を超えて２つのブラウザ間で配置が異なるＨＴＭＬ要素を、ＨＴＭＬ文書を２つのブラウザの各々で表示する場合における非互換要素として記録したリストを出力する。例えば、リストには、非互換要素の要素名、どの配置一致基準を満たさなかったか等の情報を含めることができる。なお、非互換要素を記録したリストを出力する場合に限定されず、各ＨＴＭＬ要素について、互換性の有無を記録したリストを出力するなどしてもよい。

【0037】

第１実施形態に係る表示比較装置１０は、例えば図１１に示すコンピュータ４０で実現することができる。コンピュータ４０は、ＣＰＵ（Central Processing Unit）４１と、一時記憶領域としてのメモリ４２と、不揮発性の記憶部４３とを備える。また、コンピュータ４０は、入力部、表示部等の入出力装置４４と、記憶媒体４９に対するデータの読み込み及び書き込みを制御するＲ／Ｗ（Read/Write）部４５とを備える。また、コンピュータ４０は、インターネット等のネットワークに接続される通信Ｉ／Ｆ４６を備える。ＣＰＵ４１、メモリ４２、記憶部４３、入出力装置４４、Ｒ／Ｗ部４５、及び通信Ｉ／Ｆ４６は、バス４７を介して互いに接続される。

【0038】

記憶部４３は、ＨＤＤ（Hard Disk Drive）、ＳＳＤ（Solid State Drive）、フラッシュメモリ等によって実現できる。記憶媒体としての記憶部４３には、コンピュータ４０を、表示比較装置１０として機能させるための表示比較プログラム５０が記憶される。表示比較プログラム５０は、取得プロセス５２と、比較プロセス５４と、出力プロセス５６とを有する。また、記憶部４３は、配置一致基準ＤＢ２０を構成する情報が記憶される情報記憶領域６０を有する。

【0039】

ＣＰＵ４１は、表示比較プログラム５０を記憶部４３から読み出してメモリ４２に展開し、表示比較プログラム５０が有するプロセスを順次実行する。ＣＰＵ４１は、取得プロセス５２を実行することで、図５に示す取得部１２として動作する。また、ＣＰＵ４１は、比較プロセス５４を実行することで、図５に示す比較部１４として動作する。また、ＣＰＵ４１は、出力プロセス５６を実行することで、図５に示す出力部１６として動作する。また、ＣＰＵ４１は、情報記憶領域６０から情報を読み出して、配置一致基準ＤＢ２０をメモリ４２に展開する。これにより、表示比較プログラム５０を実行したコンピュータ４０が、表示比較装置１０として機能することになる。なお、プログラムを実行するＣＰＵ４１はハードウェアである。

【0040】

なお、表示比較プログラム５０により実現される機能は、例えば半導体集積回路、より詳しくはＡＳＩＣ（Application Specific Integrated Circuit）等で実現することも可能である。

【0041】

次に、第１実施形態に係る表示比較装置１０の作用について説明する。表示比較装置１０にＨＴＭＬ文書が入力されると、表示比較装置１０において、図１２に示す表示比較処理が実行される。なお、表示比較処理は、開示の技術の表示比較方法の一例である。

【0042】

ステップＳ１２で、取得部１２が、入力されたＨＴＭＬ文書を受け取り、表示する画面サイズが異なるブラウザＡ及びブラウザＢの各々で表示されるＨＴＭＬ文書に含まれる各ＨＴＭＬ要素を階層構造で表した階層構造情報の各々を取得する。例えば、取得部１２は、Selenium WebDriverなどを用いて、図２に示すようなＨＴＭＬ要素の親子関係を示す情報と、各ＨＴＭＬ要素の画面上での位置及びサイズを示す情報とを含むＤＯＭ情報を、ブラウザＡ及びブラウザＢのそれぞれについて取得する。なお、ブラウザＡ及びブラウザＢのいずれで表示する場合も木構造は同様となるが、画面上での位置及びサイズは、ブラウザによってそれぞれ異なるＨＴＭＬ要素も存在する。取得部１２は、取得した階層構造情報を比較部１４へ受け渡す。

【0043】

次に、ステップＳ１４で、比較部１４が、取得部１２から受け渡された階層構造情報が示すＨＴＭＬ文書を示す木構造において、処理対象ノードを設定する。最初に設定する処理対象ノードは、例えばルートノード（図２の例では、ノード「ＨＴＭＬ」）とすることができる。

【0044】

次に、ステップＳ１６で、比較部１４が、上記ステップＳ１４で設定した処理対象ノードを親ノードとする部分構造を抽出する。

【0045】

次に、ステップＳ１８で、比較部１４が、上記ステップＳ１６で抽出した部分構造が属する階層を、階層構造情報に基づいて特定し、特定した階層に応じた配置一致基準を、配置一致基準ＤＢ２０から取得する。

【0046】

次に、ステップＳ２０で、比較部１４が、上記ステップＳ１８で取得した配置一致基準に基づいて、部分構造に含まれる子ノードに相当するＨＴＭＬ要素間の配置関係を、ブラウザＡで表示する場合と、ブラウザＢで表示する場合とで比較する。

【0047】

次に、ステップＳ２２で、比較部１４が、部分構造に含まれる子ノードに相当するＨＴＭＬ要素間の配置が、配置一致基準を超えているか否か、すなわち、配置が異なるか否かを判定する。配置一致基準を超えている場合には、ステップＳ２４へ移行し、超えていない場合には、ステップＳ２６へ移行する。

【0048】

ステップＳ２４では、出力部１６が、上記ステップＳ１６で抽出された部分構造に含まれる子ノードに相当するＨＴＭＬ要素に関する情報を非互換要素リストに記録する。

【0049】

次に、ステップＳ２６で、比較部１４が、階層構造情報に含まれるノードのうち、子ノードを持つノード、すなわち末端のノード以外のノードで、処理対象ノードに設定されていない未処理のノードが存在するか否かを判定する。未処理のノードが存在する場合には、ステップＳ１４に戻り、未処理ノードが存在しない場合には、ステップＳ２８へ移行する。

【0050】

ステップＳ２８では、出力部１６が、非互換要素リストを出力し、表示比較処理を終了する。

【0051】

上記の処理について、ブラウザＡがデスクトップＰＣ用のブラウザ、ブラウザＢがタブレットＰＣ用のブラウザの場合で、図２に示す木構造で表されるＨＴＭＬ文書のＨＴＭＬ要素の配置を比較する場合について説明する。

【0052】

例えば、ノード「ＨＴＭＬ」と、その子ノード「ヘッダ」、「本文」、及び「ｄｉｖ」とを含む部分構造は、図２に示すように上位階層に属するため、図６に示すような配置一致基準ＤＢ２０から、上位階層に対応付けて記憶されている配置一致基準が取得される。そして、図１３の上図に示すように、部分構造に含まれる子ノードに相当するＨＴＭＬ要素「ヘッダ」、「本文」、及び「ｄｉｖ」間の配置関係が、上位階層用の配置一致基準に基づいて比較される。例えば、上位階層用の配置一致基準が、ＨＴＭＬ要素間の上下左右の位置関係が一致するか否かを比較する基準であるとする。この場合、「ヘッダ」に対して「ｄｉｖ」及び「本文」が下に位置するという関係が、ブラウザＡ及びＢ共に成り立つため、ＨＴＭＬ要素間の配置は一致すると判定することができる。

【0053】

また、例えば、ノード「本文」と、その子ノード「項目１」及び「項目２」とを含む部分構造は、図２に示すように下位階層に属するため、図６に示すような配置一致基準ＤＢ２０から、下位階層に対応付けて記憶されている配置一致基準が取得される。そして、図１３の下図に示すように、部分構造に含まれる子ノードに相当するＨＴＭＬ要素「項目１」と「項目２」間の配置関係が、下位階層用の配置一致基準に基づいて比較される。例えば、下位階層用の配置一致基準が、ＨＴＭＬ要素間の角度の一致度を比較する基準であるとする。この場合、ブラウザＡにおける「項目１」から見た「項目２」の角度θ_Ａと、ブラウザＢにおける「項目１」から見た「項目２」の角度θ_Ｂとには差がなく、ＨＴＭＬ要素間の配置は一致すると判定することができる。

【0054】

以上説明したように、第１実施形態に係る表示比較装置によれば、表示する画面サイズが異なる２つのブラウザの各々で表示されるＨＴＭＬ文書の階層構造情報における部分構造が属する階層に応じた配置一致基準を決定する。そして、決定した配置一致基準に基づいて、部分構造に含まれるＨＴＭＬ要素間の配置関係を、２つのブラウザの各々で表示する場合について比較する。これにより、マルチデバイス環境で表示されるＨＴＭＬ文書の非互換性を検出可能に、画面サイズが異なる複数のブラウザで表示される場合のＨＴＭＬ要素の配置を比較することができる。

【0055】

また、階層に応じた配置一致基準を、下位階層ほど、高い一致度を要求する基準とすることで、レスポンシブ・デザインで作成されたＨＴＭＬ文書などのように、ブラウザに応じて許容されるレイアウトの変更を考慮して、適切に配置の一致を判定することができる。

【0056】

＜第２実施形態＞
次に、第２実施形態について説明する。第１実施形態では、ＨＴＭＬ文書が、上位階層と下位階層とで構成される場合について説明したが、第２実施形態では、上位階層と、下位階層と、上位階層と下位階層との間の中間階層とで構成される場合について説明する。

【0057】

なお、第２実施形態に係る表示比較装置において、第１実施形態に係る表示比較装置１０と同様の構成については、同一符号を付して詳細な説明を省略する。

【0058】

図５に示すように、第２実施形態に係る表示比較装置２１０は、機能的には、取得部１２と、比較部２１４と、出力部１６とを含む。また、表示比較装置２１０の所定の記憶領域には、配置一致基準ＤＢ２２０が記憶される。

【0059】

図１４に、配置一致基準ＤＢ２２０の一例を示す。図１４の例では、上位階層では、部分構造に含まれる子ノードに相当するＨＴＭＬ要素間の上下左右の位置関係が一致するか否かを比較する配置一致基準が定められている。また、中間階層では、部分構造に含まれる子ノードに相当するＨＴＭＬ要素の縦横並びを変換した上で、ＨＴＭＬ要素間の距離及び角度の少なくとも一方の一致度を比較する配置一致基準が定められている。また、下位階層では、部分構造に含まれる子ノードに相当するＨＴＭＬ要素の縦横並びを変換することなく、ＨＴＭＬ要素間の距離及び角度の少なくとも一方の一致度を比較する配置一致基準が定められている。

【0060】

比較部２１４は、第１実施形態における比較部１４と同様に、部分構造が属する階層に応じた配置一致基準を決定する。そして、比較部２１４は、決定した配置一致基準に基づいて、処理対象の部分構造に含まれる子ノードに相当するＨＴＭＬ要素の各々について、２つのブラウザの各々で表示する場合の配置を比較する。

【0061】

上述したように、マルチデバイス環境に対応させて、レスポンシブ・デザインで作成されたＨＴＭＬ文書を表示する場合、同一の部分構造に属するＨＴＭＬ要素は、横並びから縦並び、又は縦並びから横並びへの変換が許容される場合がある。

【0062】

そこで、比較部２１４は、決定した配置一致基準において、縦横並びの変換が許容されている場合には、ＨＴＭＬ要素の縦横並びを変換する場合と変換しない場合との両方の場合で、ＨＴＭＬ要素の配置を比較する。ＨＴＭＬ要素の縦横並びを変換する場合、具体的には、比較部２１４は、一方のブラウザで表示する場合のＨＴＭＬ要素の配置を、横並びから縦並びに、又は縦並びから横並びに変換し、他方のブラウザで表示する場合のＨＴＭＬ要素の配置との一致度を比較する。比較部２１４は、ＨＴＭＬ要素の縦横並びを変換する場合と変換しない場合とのいずれかの場合で、配置一致基準を満たせば、ブラウザ間でＨＴＭＬ要素の配置が一致すると判定する。

【0063】

第２実施形態に係る表示比較装置１０は、例えば図１１に示すコンピュータ４０で実現することができる。コンピュータ４０の記憶部４３には、コンピュータ４０を、表示比較装置２１０として機能させるための表示比較プログラム２５０が記憶される。表示比較プログラム２５０は、取得プロセス５２と、比較プロセス２５４と、出力プロセス５６とを有する。また、記憶部４３は、配置一致基準ＤＢ２２０を構成する情報が記憶される情報記憶領域６０を有する。

【0064】

ＣＰＵ４１は、表示比較プログラム２５０を記憶部４３から読み出してメモリ４２に展開し、表示比較プログラム２５０が有するプロセスを順次実行する。ＣＰＵ４１は、比較プロセス２５４を実行することで、図５に示す比較部２１４として動作する。他のプロセスについては、第１実施形態に係る表示比較プログラム５０と同様である。これにより、表示比較プログラム２５０を実行したコンピュータ４０が、表示比較装置２１０として機能することになる。

【0065】

なお、表示比較プログラム２５０により実現される機能は、例えば半導体集積回路、より詳しくはＡＳＩＣ等で実現することも可能である。

【0066】

次に、第２実施形態に係る表示比較装置２１０の作用について説明する。表示比較装置２１０にＨＴＭＬ文書が入力されると、表示比較装置２１０において、図１５に示す表示比較処理が実行される。なお、第２実施形態における表示比較処理において、第１実施形態における表示比較処理と同一の処理については、同一符号を付して詳細な説明を省略する。また、表示比較処理は、開示の技術の表示比較方法の一例である。

【0067】

ステップＳ１２～Ｓ１８を経て、ステップＳ２１９へ移行する。ステップＳ２１９では、比較部２１４が、上記ステップＳ１８で取得した配置一致基準において、縦横並びの変換が許容されている場合には、一方のブラウザで表示する場合のＨＴＭＬ要素の縦横並びを変換する。具体的には、比較部２１４が、図３において丸印が併記されている両矢印が示す変換のように、ＨＴＭＬ要素間の間隔の割合及び並び順を保持したまま、ＨＴＭＬ要素の配置を、横並びから縦並びに、又は縦並びから横並びに変換する。

【0068】

次に、ステップＳ２２０で、比較部２１４が、上記ステップＳ１８で取得した配置一致基準に基づいて、上記ステップＳ１６で抽出した部分構造に含まれる子ノードに相当するＨＴＭＬ要素の各々について、２つのブラウザの各々で表示する場合の配置を比較する。この際、配置一致基準において、縦横並びの変換が許容されている場合、比較部２１４は、上記ステップＳ１２で取得した階層構造情報が示すＨＴＭＬ要素の配置、すなわち縦横変換をしない場合の配置をブラウザ間で比較する。さらに、比較部２１４は、一方のブラウザで表示する場合のＨＴＭＬ要素の縦横並びを変換した配置と、他方のブラウザで表示する場合のＨＴＭＬ要素の配置とを比較する。

【0069】

次に、ステップＳ２２２で、比較部２１４が、部分構造に含まれる子ノードに相当するＨＴＭＬ要素間の配置が、配置一致基準を超えているか否か、すなわち、配置が異なるか否かを判定する。この際、比較部２１４は、ＨＴＭＬ要素の縦横並びを変換する場合と変換しない場合とのいずれの場合も、配置一致基準を超えている場合に、ブラウザ間でＨＴＭＬ要素の配置が異なると判定する。

【0070】

以下、第１実施形態と同様に、ステップＳ２４～Ｓ２８が実行される。

【0071】

以上説明したように、第２実施形態に係る表示比較装置によれば、第１実施形態と同様に、表示する画面サイズが異なる２つのブラウザの各々で表示されるＨＴＭＬ文書の階層構造情報における部分構造が属する階層に応じた配置一致基準を決定する。そして、決定した配置一致基準に基づいて、部分構造に含まれるＨＴＭＬ要素間の配置関係を、２つのブラウザの各々で表示する場合について比較する。決定した配置一致基準で、ＨＴＭＬ要素の縦横並びの変換が許容されている場合には、一方のブラウザで表示する場合のＨＴＭＬ要素の縦横並びを変換した場合についても、他方のブラウザで表示する場合のＨＴＭＬ要素の配置と比較する。これにより、第１実施形態と同様の効果を奏することができると共に、レスポンシブ・デザインで作成されたＨＴＭＬ文書などのように、ブラウザに応じて許容されるレイアウトの変更を考慮して、適切に配置の一致を判定することができる。

【0072】

なお、配置一致基準ＤＢに記憶される階層に応じた配置一致基準は、第１実施形態の図６の例、及び第２実施形態の図１４の例に限定されず、下位階層ほど、一致とみなす条件が厳しくなるような配置一致基準であればよい。

【0073】

例えば、配置一致基準として、全階層で、部分構造に含まれる子ノードに相当するＨＴＭＬ要素間の距離及び角度の少なくとも一方の一致度を比較する配置一致基準を定めておくことができる。この場合、一致度を判定するための閾値を、上位階層の場合より下位階層の場合の方が、高い一致度を要求する値として定めておけばよい。

【0074】

また、例えば、上位階層では、ＨＴＭＬ要素間の角度の一致度を比較する配置一致基準を定め、下位階層では、ＨＴＭＬ要素間の距離及び角度の両方の一致度を比較する配置一致基準を定めてもよい。

【0075】

また、上記第１及び第２実施形態における、階層に応じた配置一致基準に加え、部分構造の子ノードに相当するＨＴＭＬ要素の種類に応じて、配置一致基準を異ならせてもよい。この場合の配置一致基準ＤＢ３２０の一例を図１６に示す。図１６の例では、上位階層と下位階層とで配置一致基準を異ならせると共に、ＨＴＭＬ要素の種類がイメージかテキストかに応じても、配置一致基準を異ならせている。ここでは、イメージの場合よりテキストの場合の方が、配置の一致を厳しく判定する例を示している。なお、ＨＴＭＬ要素の種類は、イメージ及びテキストに限定されず、他の種類を含んでいてもよい。

【0076】

また、上記実施形態では、部分構造が属する階層を、階層構造情報（木構造）から判定する場合について説明したが、これに限定されない。ＨＴＭＬ文書に対する部分構造の占める割合が大きいほど、上記実施形態の上位階層と同様に、表示サイズが異なるブラウザ間でＨＴＭＬ要素のレイアウトが変化し易い特徴がある。そこで、部分構造のサイズや、ＨＴＭＬ文書に対する部分構造の占める割合に応じて、配置一致基準を特定するようにしてもよい。

【0077】

また、上記実施形態では、表示比較プログラムが記憶部に予め記憶（インストール）されている態様を説明したが、これに限定されない。開示の技術に係るプログラムは、ＣＤ－ＲＯＭ、ＤＶＤ－ＲＯＭ、ＵＳＢメモリ等の記憶媒体に記憶された形態で提供することも可能である。

【0078】

以上の各実施形態に関し、更に以下の付記を開示する。

【0079】

（付記１）
表示する画面サイズが異なる２つのブラウザの各々で表示されるＨＴＭＬ文書に含まれる各要素を階層構造で表した階層構造情報の各々を取得し、
前記階層構造情報が示す前記ＨＴＭＬ文書全体の階層構造における、前記階層構造情報に含まれる部分構造が属する階層に応じた基準に基づいて、前記部分構造に含まれる要素の各々について、前記２つのブラウザの各々で表示する場合の配置を比較する
ことを含む処理をコンピュータに実行させるための表示比較プログラム。

【0080】

（付記２）
前記基準を超えて前記２つのブラウザ間で配置が異なる要素を、前記ＨＴＭＬ文書を前記２つのブラウザの各々で表示する場合における非互換要素として出力することをさらに含む処理を前記コンピュータに実行させるための付記１に記載の表示比較プログラム。

【0081】

（付記３）
前記基準として、前記部分構造が属する階層が下位階層であるほど、前記２つのブラウザ間で表示される要素の配置について、高い一致度を要求する基準を用いる付記１又は付記２に記載の表示比較プログラム。

【0082】

（付記４）
前記基準として、少なくとも、前記部分構造が前記ＨＴＭＬ文書全体の構造に関連する上位階層に属する場合と、前記部分構造が前記ＨＴＭＬ文書の局所構造となる下位階層に属する場合とで、異なる基準を用いる付記１～付記３のいずれか１項に記載の表示比較プログラム。

【0083】

（付記５）
前記基準として、前記上位階層では、前記部分構造に含まれる要素間の上下左右の位置関係の一致度、前記下位階層では、前記部分構造に含まれる要素間の距離及び角度の少なくとも一方の一致度を用いる付記４に記載の表示比較プログラム。

【0084】

（付記６）
前記基準として、前記部分構造に含まれる要素間の距離及び角度の少なくとも一方の一致度を用いる場合、前記一致度を判定するための閾値を、前記上位階層の場合より前記下位階層の場合の方が、高い一致度を要求する値にする付記５に記載の表示比較プログラム。

【0085】

（付記７）
前記要素間の距離及び角度の少なくとも一方の一致度を比較する際、前記２つのブラウザのいずれか一方で表示する場合の要素の配置を、横並びから縦並びに変換、又は、縦並びから横並びに変換して、前記一致度を比較する付記５又は付記６に記載の表示比較プログラム。

【0086】

（付記８）
前記階層構造を、前記上位階層と、前記下位階層と、前記上位階層と前記下位階層との間の中間階層とに分類する場合、
前記基準として、
前記上位階層では、前記部分構造に含まれる要素間の上下左右の位置関係の一致度、
前記中間階層では、前記２つのブラウザのいずれか一方で表示する場合の要素の配置を、横並びから縦並びに変換、又は、縦並びから横並びに変換することを許容した上での、前記部分構造に含まれる要素間の距離及び角度の少なくとも一方の一致度、
前記下位階層では、前記２つのブラウザのいずれか一方で表示する場合の要素の配置を変換することなく、前記部分構造に含まれる要素間の距離及び角度の少なくとも一方の一致度
を用いる
付記７に記載の表示比較プログラム。

【0087】

（付記９）
前記基準を、前記部分構造に含まれる要素の種類に応じて異ならせる付記１～付記８のいずれか１項に記載の表示比較プログラム。

【0088】

（付記１０）
表示する画面サイズが異なる２つのブラウザの各々で表示されるＨＴＭＬ文書に含まれる各要素を階層構造で表した階層構造情報の各々を取得する取得部と、
前記階層構造情報が示す前記ＨＴＭＬ文書全体の階層構造における、前記階層構造情報に含まれる部分構造が属する階層に応じた基準に基づいて、前記部分構造に含まれる要素の各々について、前記２つのブラウザの各々で表示する場合の配置を比較する比較部と、
を含む表示比較装置。

【0089】

（付記１１）
前記基準を超えて前記２つのブラウザ間で配置が異なる要素を、前記ＨＴＭＬ文書を前記２つのブラウザの各々で表示する場合における非互換要素として出力する出力部をさらに含む付記１０に記載の表示比較装置。

【0090】

（付記１２）
前記比較部は、前記基準として、前記部分構造が属する階層が下位階層であるほど、前記２つのブラウザ間で表示される要素の配置について、高い一致度を要求する基準を用いる付記１０又は付記１１に記載の表示比較装置。

【0091】

（付記１３）
前記比較部は、前記基準として、少なくとも、前記部分構造が前記ＨＴＭＬ文書全体の構造に関連する上位階層に属する場合と、前記部分構造が前記ＨＴＭＬ文書の局所構造となる下位階層に属する場合とで、異なる基準を用いる付記１０～付記１２のいずれか１項に記載の表示比較装置。

【0092】

（付記１４）
前記比較部は、前記基準として、前記上位階層では、前記部分構造に含まれる要素間の上下左右の位置関係の一致度、前記下位階層では、前記部分構造に含まれる要素間の距離及び角度の少なくとも一方の一致度を用いる付記１３に記載の表示比較装置。

【0093】

（付記１５）
前記比較部は、前記基準として、前記部分構造に含まれる要素間の距離及び角度の少なくとも一方の一致度を用いる場合、前記一致度を判定するための閾値を、前記上位階層の場合より前記下位階層の場合の方が、高い一致度を要求する値にする付記１４に記載の表示比較装置。

【0094】

（付記１６）
前記比較部は、前記要素間の距離及び角度の少なくとも一方の一致度を比較する際、前記２つのブラウザのいずれか一方で表示する場合の要素の配置を、横並びから縦並びに変換、又は、縦並びから横並びに変換して、前記一致度を比較する付記１４又は付記１５に記載の表示比較装置。

【0095】

（付記１７）
前記階層構造を、前記上位階層と、前記下位階層と、前記上位階層と前記下位階層との間の中間階層とに分類する場合、
前記比較部は、前記基準として、
前記上位階層では、前記部分構造に含まれる要素間の上下左右の位置関係の一致度、
前記中間階層では、前記２つのブラウザのいずれか一方で表示する場合の要素の配置を、横並びから縦並びに変換、又は、縦並びから横並びに変換することを許容した上での、前記部分構造に含まれる要素間の距離及び角度の少なくとも一方の一致度、
前記下位階層では、前記２つのブラウザのいずれか一方で表示する場合の要素の配置を変換することなく、前記部分構造に含まれる要素間の距離及び角度の少なくとも一方の一致度
を用いる
付記１６に記載の表示比較装置。

【0096】

（付記１８）
前記比較部は、前記基準を、前記部分構造に含まれる要素の種類に応じて異ならせる付記１０～付記１７のいずれか１項に記載の表示比較装置。

【0097】

（付記１９）
表示する画面サイズが異なる２つのブラウザの各々で表示されるＨＴＭＬ文書に含まれる各要素を階層構造で表した階層構造情報の各々を取得し、
前記階層構造情報が示す前記ＨＴＭＬ文書全体の階層構造における、前記階層構造情報に含まれる部分構造が属する階層に応じた基準に基づいて、前記部分構造に含まれる要素の各々について、前記２つのブラウザの各々で表示する場合の配置を比較する
ことを含む処理をコンピュータが実行する表示比較方法。

【0098】

（付記２０）
表示する画面サイズが異なる２つのブラウザの各々で表示されるＨＴＭＬ文書に含まれる各要素を階層構造で表した階層構造情報の各々を取得し、
前記階層構造情報が示す前記ＨＴＭＬ文書全体の階層構造における、前記階層構造情報に含まれる部分構造が属する階層に応じた基準に基づいて、前記部分構造に含まれる要素の各々について、前記２つのブラウザの各々で表示する場合の配置を比較する
ことを含む処理をコンピュータに実行させるための表示比較プログラムを記憶した記憶媒体。

【符号の説明】

【0099】

１０、２１０ 表示比較装置
１２ 取得部
１４、２１４ 比較部
１６ 出力部
２０、２２０、３２０ 配置一致基準ＤＢ
４０ コンピュータ
４１ ＣＰＵ
４２ メモリ
４３ 記憶部
４９ 記憶媒体
５０、２５０ 表示比較プログラム

【図1】

【図2】

【図3】

【図4】

【図5】

【図6】

【図7】

【図8】

【図9】

【図10】

【図11】

【図12】

【図13】

【図14】

【図15】

【図16】