(57)【要約】【課題】異なる種類のＷｅｂブラウザにおいて表示されるＷｅｂページ情報の表示イメージの差異を少なくすること。【解決手段】処理サーバ１０１は、Ｗｅｂページ情報をテスト端末に送信し（Ｓ５１０）、該Ｗｅｂページ情報を複数種類のブラウザで表示した場合のブラウザごとの表示イメージを取得し（Ｓ５１５）、該ブラウザごとの表示イメージを比較して差異を検出し（Ｓ５１６）、前記各表示イメージに差異がある場合は該Ｗｅｂページ情報を調整し（Ｓ５１７でＮｏ→3fＳ５０２〜Ｓ５２０）、同様に、該調整されたＷｅｂページ情報をテスト端末に送信して前記ブラウザごとの表示イメージを取得して比較し調整する一連の処理を繰り返す制御を行う（Ｓ５１０〜Ｓ５１７でＮｏ→Ｓ５０２〜Ｓ５２０）。テスト端末は、処理サーバ１０１から受信したＷｅｂページ情報のブラウザごとの表示イメージを生成して処理サーバ１０１に返送する（Ｓ５１１〜Ｓ５１４）。【選択図】図５
2016099692.tif 000002
【特許請求の範囲】
【請求項１】
Ｗｅｂページ情報に基づく表示を行う複数種類のＷｅｂブラウザを実行可能な端末と、前記端末と通信可能な情報処理装置とを有する情報処理システムであって、
前記情報処理装置は、
Ｗｅｂページ情報を前記端末に送信する送信手段と、
前記送信手段で送信したＷｅｂページ情報を前記端末で動作する複数種類のＷｅｂブラウザにおいて表示した場合の前記Ｗｅｂブラウザごとの表示イメージを取得する取得手段と、
前記取得手段が取得した前記Ｗｅｂブラウザごとの表示イメージを比較して差異を検出する比較手段と、
前記比較手段により前記各表示イメージの差異が検出された場合に該Ｗｅｂページ情報を調整する調整手段と、
前記調整手段により調整されたＷｅｂページ情報を、前記送信手段により送信して前記Ｗｅｂブラウザごとの表示イメージを前記取得手段により取得し、前記比較手段により比較し、前記調整手段により調整する一連の処理を、前記各表示イメージの差異の検出がなくなるまで繰り返す制御手段と、を有し、
前記端末は、
前記情報処理装置から受信したＷｅｂページ情報の前記Ｗｅｂブラウザごとの表示イメージを生成し、該生成した前記Ｗｅｂブラウザごとの表示イメージを前記情報処理装置に返送する返送手段を有する、
ことを特徴とする情報処理システム。
【請求項２】
Ｗｅｂページ情報に基づく表示を行う複数種類のＷｅｂブラウザを実行可能な端末と通信可能な情報処理装置であって、
Ｗｅｂページ情報を前記端末に送信する送信手段と、
前記送信手段で送信したＷｅｂページ情報を前記端末で動作する複数種類のＷｅｂブラウザにおいて表示した場合の前記Ｗｅｂブラウザごとの表示イメージを取得する取得手段と、
前記取得手段が取得した前記Ｗｅｂブラウザごとの表示イメージを比較して差異を検出する比較手段と、
前記比較手段により前記各表示イメージの差異が検出された場合に該Ｗｅｂページ情報を調整する調整手段と、
前記調整手段により調整されたＷｅｂページ情報を、前記送信手段により送信して前記Ｗｅｂブラウザごとの表示イメージを前記取得手段により取得し、前記比較手段により比較し、前記調整手段により調整する一連の処理を、前記各表示イメージの差異の検出がなくなるまで繰り返す制御手段と、
を有することを特徴とする情報処理装置。
【請求項３】
前記調整手段により調整されたＷｅｂページ情報を出力する出力手段を有することを特徴とする請求項２に記載の情報処理装置。
【請求項４】
前記調整手段は、該Ｗｅｂページ情報に含まれる全ての要素から、該各表示イメージの差異の要因となる要素を特定し、該要素の属性値を調整することを特徴とする請求項２又は３に記載の情報処理装置。
【請求項５】
前記調整手段は、該Ｗｅｂページ情報に含まれる要素ごとに、表示の有無を変更して前記端末に送信して前記Ｗｅｂブラウザごとの表示イメージを取得し、該取得した各表示イメージを比較して前記各表示イメージの差異の状態が変化した場合に、その直前に表示の有無を変更した要素を、該差異の要因となる要素として特定することを特徴とする請求項４に記載の情報処理装置。
【請求項６】
前記調整手段は、前記差異の要因として特定された要素の属性のうち、優先順位の高い属性の属性値から変更することを特徴とする請求項４又は５に記載の情報処理装置。
【請求項７】
前記調整手段は、前記差異の要因として特定された要素の属性に、属性値が指定されている属性が存在する場合、該属性の属性値を変更することを特徴とする請求項６に記載の情報処理装置。
【請求項８】
前記調整手段は、前記差異の要因として特定された要素の属性に、属性値が指定されている属性が存在しない場合、予め決められている優先順位の高い属性から属性値を変更することを特徴とする請求項６又は７に記載の情報処理装置。
【請求項９】
前記調整手段は、１つの属性に対して、予め決められている変更条件に従い予め決められている限界まで段階的に属性値を変更することを特徴とする請求項６乃至８のいずれか１項に記載の情報処理装置。
【請求項１０】
前記比較手段は、前記複数のブラウザのうち基準とするブラウザの表示イメージと他のブラウザの表示イメージとを比較することを特徴とする請求項２乃至９のいずれか１項の記載の情報処理装置。
【請求項１１】
前記送信手段は、前記端末からの要求に応じて、前記Ｗｅｂページ情報をＷｅｂサーバから取得して前記端末に送信することを特徴とする請求項２乃至１０のいずれか１項に記載の情報処理装置。
【請求項１２】
Ｗｅｂページ情報に基づく表示を行う複数種類のＷｅｂブラウザを実行可能な端末と、前記端末と通信可能な情報処理装置を有する情報処理システムの制御方法であって、
前記情報処理装置が実行する、
Ｗｅｂページ情報を前記端末に送信する送信ステップと、
前記送信ステップで送信したＷｅｂページ情報を前記端末で動作する複数種類のＷｅｂブラウザにおいて表示した場合の前記Ｗｅｂブラウザごとの表示イメージを取得する取得ステップと、
前記取得ステップで取得した前記Ｗｅｂブラウザごとの表示イメージを比較して差異を検出する比較ステップと、
前記比較ステップで前記各表示イメージの差異が検出された場合に該Ｗｅｂページ情報を調整する調整ステップと、
前記調整ステップで調整されたＷｅｂページ情報を、前記送信ステップにより送信して前記Ｗｅｂブラウザごとの表示イメージを前記取得ステップにより取得し、前記比較ステップにより比較し、前記調整ステップにより調整する一連の処理を、前記各表示イメージの差異の検出がなくなるまで繰り返す制御ステップと、を有し、
前記端末が実行する、
前記情報処理装置から受信したＷｅｂページ情報に基づく前記Ｗｅｂブラウザごとの表示イメージを生成し、該生成した前記Ｗｅｂブラウザごとの表示イメージを前記情報処理装置に返送する返送ステップを有する、
ことを特徴とする情報処理システムの制御方法。
【請求項１３】
Ｗｅｂページ情報に基づく表示を行う複数種類のＷｅｂブラウザを実行可能な端末と通信可能な情報処理装置の制御方法であって、
Ｗｅｂページ情報を前記端末に送信する送信ステップと、
前記送信ステップで送信したＷｅｂページ情報を前記端末で動作する複数種類のＷｅｂブラウザにおいて表示した場合の前記Ｗｅｂブラウザごとの表示イメージを取得する取得ステップと、
前記取得ステップで取得した前記Ｗｅｂブラウザごとの表示イメージを比較して差異を検出する比較ステップと、
前記比較ステップで前記各表示イメージの差異が検出された場合に該Ｗｅｂページ情報を調整する調整ステップと、
前記調整ステップで調整されたＷｅｂページ情報を、前記送信ステップにより送信して前記Ｗｅｂブラウザごとの表示イメージを前記取得ステップにより取得し、前記比較ステップにより比較し、前記調整ステップにより調整する一連の処理を、前記各表示イメージの差異の検出がなくなるまで繰り返す制御ステップと、
を有することを特徴とする情報処理装置の制御方法。
【請求項１４】
コンピュータを、請求項２乃至１１のいずれか１項に記載された手段として機能させるためのプログラム。
【発明の詳細な説明】
【技術分野】
【０００１】
本発明は、Ｗｅｂクライアント環境においてアクセスされるＷｅｂアプリケーションにおけるＷｅｂブラウザの相違を解決する制御に関する。
【背景技術】
【０００２】
Ｗｅｂアプリケーションでは、ＨＴＭＬ（ＨｙｐｅｒＴｅｘｔ Ｍａｒｋｕｐ Ｌａｎｇｕａｇｅ）やＣＳＳ（Ｃａｓｃａｄｉｎｇ Ｓｔｙｌｅ Ｓｈｅｅｔｓ）等で構成されるアプリケーションをＷｅｂブラウザがレンダリングすることで動作するが、標準規格（Ｗ３Ｃ）に非準拠等の理由で、ブラウザ及びプラットフォームによって表示が異なる場合がある。
【０００３】
特許文献１には、ＷｅｂブラウザによるＷｅｂページの表示の差異を検出するシステムが記載されている。
【先行技術文献】
【特許文献】
【０００４】
【特許文献１】特開２０１３−７７３０１号公報
【発明の概要】
【発明が解決しようとする課題】
【０００５】
特許文献１では、ＷｅｂブラウザによるＷｅｂページの表示の差異を検出することは可能であるが、同等な表示になるようなＷｅｂページ情報を修正することはできない。そのため、Ｗｅｂページの開発者自身が表示の差異がなくなるように対応方法を検討する必要がある。対応方法には様々な方法があるため、開発者はそれらの様々な方法から修正、確認を繰り返して差異のない表現を探し当てる必要があり、手間と時間がかかっていた。
【０００６】
本発明は、上記の問題点を解決するためになされたものである。本発明の目的は、異なる種類のＷｅｂブラウザにおいて表示されるＷｅｂページ情報の表示イメージの差異を少なくする方法を容易に見つけることができる仕組みを提供することである。
【課題を解決するための手段】
【０００７】
本発明は、Ｗｅｂページ情報に基づく表示を行う複数種類のＷｅｂブラウザを実行可能な端末と、前記端末と通信可能な情報処理装置とを有する情報処理システムであって、前記情報処理装置は、Ｗｅｂページ情報を前記端末に送信する送信手段と、前記送信手段で送信したＷｅｂページ情報を前記端末で動作する複数種類のＷｅｂブラウザにおいて表示した場合の前記Ｗｅｂブラウザごとの表示イメージを取得する取得手段と、前記取得手段が取得した前記Ｗｅｂブラウザごとの表示イメージを比較して差異を検出する比較手段と、前記比較手段により前記各表示イメージの差異が検出された場合に該Ｗｅｂページ情報を調整する調整手段と、前記調整手段により調整されたＷｅｂページ情報を、前記送信手段により送信して前記Ｗｅｂブラウザごとの表示イメージを前記取得手段により取得し、前記比較手段により比較し、前記調整手段により調整する一連の処理を、前記各表示イメージの差異の検出がなくなるまで繰り返す制御手段と、を有し、前記端末は、前記情報処理装置から受信したＷｅｂページ情報の前記Ｗｅｂブラウザごとの表示イメージを生成し、該生成した前記Ｗｅｂブラウザごとの表示イメージを前記情報処理装置に返送する返送手段を有する、ことを特徴とする。
【発明の効果】
【０００８】
本発明によれば、異なる種類のＷｅｂブラウザにおいて表示されるＷｅｂページ情報の表示イメージの差異を少なくする方法を容易に見つけることができる。
【図面の簡単な説明】
【０００９】
【図１】本発明の一実施例を示す情報処理システムの構成を例示する図
【図２】本実施例を構成する装置のハードウェアブロック図
【図３】本発明の課題を説明するＨＴＭＬソースコードを例示する模式図
【図４】本発明の課題を説明するブラウザの表示画面を例示する模式図
【図５】本発明のシステムで実行される処理の一例を示すフローチャート
【図６】本発明のＣＳＳ調整処理の詳細を例示するフローチャート
【図７】調整対象とされるＨＴＭＬ及びＣＳＳと、２つの異なるＷｅｂブラウザの画面イメージを例示する図
【図８】調整対象とされるＨＴＭＬ及びＣＳＳと、２つの異なるＷｅｂブラウザの画面イメージを例示する図
【図９】調整対象とされるＨＴＭＬ及びＣＳＳと異なるＷｅｂブラウザの画面イメージを例示する図
【図１０】調整対象とされるＨＴＭＬ及びＣＳＳと異なるＷｅｂブラウザの画面イメージを例示する図
【図１１】調整対象とされるＨＴＭＬ及びＣＳＳと異なるＷｅｂブラウザの画面イメージを例示する図
【図１２】ＣＳＳ属性変更設定データを例示する図
【図１３】スタイルシートの属性値の変更例と該属性値を変更した後の異なるＷｅｂブラウザの画面イメージを例示する図
【発明を実施するための形態】
【００１０】
図１は、本発明の一実施例を示す情報処理システムの構成を例示する図である。
図１に示すように、本実施例の情報処理システムでは、Ｗｅｂサーバ１００、処理サーバ１０１、１０３や１０４に示すようなテスト端末が、ＬＡＮ１０２等のネットワークを介して通信可能に接続されている。なお、Ｗｅｂサーバ１００、処理サーバ１０１、１０３や１０４に示すようなテスト端末と、ＬＡＮ１０２等のネットワークとの接続は、有線であっても、無線であってもよいし、インターネット等を介した接続であってもよい。
【００１１】
Ｗｅｂサーバ１００は、ＨＴＭＬ、ＣＳＳ等で記載されるＷｅｂページを、Ｗｅｂブラウザ等からの要求に応じてネットワークを通じて提供する。処理サーバ１０１は、Ｗｅｂブラウザからの要求を、Ｗｅｂサーバ１００に中継する。テスト端末１０３、１０４は、複数種類のＷｅｂブラウザを実行可能な端末である。なお、テスト端末１０３、１０４は、パーソナルコンピュータ、タブレット端末、スマートフォン等のＷｅｂブラウザを実行可能な装置であれば、どのような装置であってもよい。また、テスト端末は、少なくとも１つ存在すればよく、以下、単にテスト端末という。
【００１２】
なお、テスト端末１０３をパーソナルコンピュータ（ＰＣ）、テスト端末１０４をスマートフォンとすると、ＰＣ用のＷｅｂページのテストを行いたい場合はテスト端末１０３を用い、スマートフォン用のＷｅｂページのテストを行いたい場合はテスト端末１０４を用いて後述する図５、図６に示す処理を行うようにしてもよい。
【００１３】
さらに、Ｗｅｂサーバ１００、処理サーバ１０１、テスト端末のいずれか複数が１つの装置で実現されていてもよい。例えば、Ｗｅｂサーバ１００と処理サーバ１０１が、１つの装置で実現されてもよいし、処理サーバ１０１とテスト端末が１つの装置で実現されていてもよい。
【００１４】
図２は、Ｗｅｂサーバ１００、処理サーバ１０１、テスト端末として適用可能な情報処理装置のハードウェア構成を例示するブロック図である。
図２において、２０１はＣＰＵで、本情報処理装置上の各処理を司る。２０６はメモリ装置で、ＣＰＵ２０１のワーク領域として使用され、本情報処理装置の各処理に関わる一時的なデータを記憶可能である。２０５はハードディスクやＳＳＤ（Ｓｏｌｉｄ Ｓｔａｔｅ Ｄｒｉｖｅ）等の補助記憶装置で、本情報処理装置の各処理に関わるプログラムやデータ等を記憶する。２０３はドライブ装置で、ＤＶＤ等の記憶媒体２０４に対して情報の読み出しと書き込みを行う。２０２はインタフェース装置で、ネットワーク経由でＬＡＮやインターネットに接続し、外部の装置と情報交換を行う。２０７はシステムバスで、２０１〜２０６の各部分を結びつけ、データをやり取りするためのものである。
【００１５】
ＣＰＵ２０１は、補助記憶装置２０５や記憶媒体２０４に格納されたプログラムを必要に応じてメモリ装置２０６に呼び出して実行することにより、本情報処理装置において各種処理の実行を実現する。なお、図示しないが、本情報処理装置は、上記の構成の他に、キーボード、ポインティングデバイス等の入力装置や、ディスプレイ等の出力装置を有していてよい。
【００１６】
以下、図３、図４を用いて、本発明が解決しようとする課題について具体例を用いて説明する。
図３は、本発明の課題を説明するＨＴＭＬソースコードの一例を示す模式図である。
図３において、３００は、Ｗｅｂページ情報としてのＨＴＭＬソースコードであり、ＨＴＭＬやＣＳＳ等で構成されている。
【００１７】
図４は、本発明の課題を説明するブラウザの表示画面を例示する模式図である。
ここでは、図３に示すＨＴＭＬソースコードを、ブラウザＡ（例えばＩｎｔｅｒｎｅｔ Ｅｘｐｌｏｒｅｒ（登録商標））、ブラウザＢ（例えばＣｈｒｏｍｅ（登録商標））、ブラウザＣ（例えばＦｉｒｅｆｏｘ（登録商標））などで表示する例を用いる。
【００１８】
図４において、４００は、図３のＨＴＭＬソースコード３００をブラウザＡで表示した場合のブラウザ画面の表示例である。また、４１０は、同じく図３のＨＴＭＬソースコードをブラウザＢで表示した場合のブラウザ画面の表示例である。また、４２０は、同じく図３のＨＴＭＬソースコードをブラウザＣで表示した場合のブラウザ画面の表示例である。
【００１９】
ブラウザＡのブラウザ画面４００、ブラウザＣのブラウザ画面４２０は、どちらも表示に大きな差異はない。一方、ブラウザＢのブラウザ画面４１０では、４１１の部分に横スクロールバーが表示されており、ブラウザＡのブラウザ画面４００の４０１の部分や、ブラウザＣのブラウザ画面４２０の４２１の部分と明らかに異なっている。
【００２０】
このように、同じＨＴＭＬソースコードであっても、ブラウザにより表示画面が異なることがある。よって、ＨＴＭＬソースコードの開発者が想定する特定のブラウザ以外のブラウザを使用しているユーザ層のために、これらの表示画面に違いがないようにＨＴＭＬソースコードのＣＳＳ（Ｃａｓｃａｄｉｎｇ Ｓｔｙｌｅ Ｓｈｅｅｔｓ）をブラウザ毎に変更し、ユーザビリティを改善する必要がある。
【００２１】
図５は、本発明のシステムで実行される処理の一例を示すフローチャートである。なお、図５及び後述する図６のフローチャートにおいて、処理サーバ１０１において実行される処理は、処理サーバ１０１のＣＰＵ２０１が補助記憶装置２０５等に格納されたプログラムを必要に応じてメモリ装置２０６にロードして実行することにより実現されるものである。また、テスト端末において実行される処理は、テスト端末のＣＰＵ２０１が補助記憶装置２０５等に格納されたプログラムを必要に応じてメモリ装置２０６にロードして実行することにより実現されるものである。また、Ｗｅｂサーバ１００において実行される処理は、Ｗｅｂサーバ１００のＣＰＵ２０１が補助記憶装置２０５等に格納されたプログラムを必要に応じてメモリ装置２０６にロードして実行することにより実現されるものである。なお、図中の'Ｓ'を付した符号はステップを示す。
【００２２】
図５のフローチャートは、テスト端末もしくは処理サーバ１０１から、本発明のアプリケーションが起動されると開始される。
例えば、テスト端末から処理サーバ１０１へのアクセスにより、Ｓ５０１で処理が開始されると、Ｓ５２１において、処理サーバ１０１は、テストパラメータを取得する。なお、テストパラメータには、ユーザがＨＴＭＬソースコードを開発する際に基準とするブラウザ（基準ブラウザ）を特定する情報や、テスト端末のウィンドウサイズなどが含まれる。これらのテストパラメータは、テスト端末から取得してもよいし、処理サーバ１０１の補助記憶装置２０５に予め記憶している情報から取得してもよい。なお、以後の説明では、基準ブラウザを、ブラウザＡとして説明する。
【００２３】
次に、Ｓ５０２において、処理サーバ１０１は、開発中のＵＲＬをテスト端末に送信し、複数種類のＷｅｂブラウザの起動命令を送信する。なお、このＵＲＬは、処理開始（Ｓ５０１）の際に指定されたものでもよいし、上述のテストパラメータに含まれるものでもよいし、処理サーバ１０１の補助記憶装置２０５に予め記憶している情報であってもよい。
【００２４】
Ｓ５０３で、テスト端末は、処理サーバ１０１から送信された処理開始命令および開発中のＵＲＬを受け付けると、Ｓ５０４において、調査対象のブラウザ（以下、調査対象ブラウザ）及び基準ブラウザを起動する。なお、基準ブラウザの情報は、テスト端末で予め設定されているものとしても、上述のテストパラメータに含まれるものなどでもよい。
【００２５】
次に、Ｓ５０５において、テスト端末は、上記Ｓ５０３で受け付けた開発中のＵＲＬに対応するＷｅｂサーバ１００に対するリクエスト（要求）を、処理サーバ１０１を介して送信する。
【００２６】
処理サーバ１０１は、上記Ｓ５０５で送信されたリクエストを受信すると、Ｓ５０６に処理を進める。Ｓ５０６では、処理サーバ１０１は、Ｗｅｂサーバ１００に送信されるべきＵＲＬへのリクエストが初めてのリクエスト（初回）であるか否かを判定する。そして初めてのリクエストであると判定した場合（Ｓ５０６でＹｅｓの場合）、処理サーバ１０１は、ＷｅｂサーバからＨＴＭＬソースコードを取得する処理（Ｓ５０７〜Ｓ５０９、Ｓ５１０）へと処理を移行する。一方、２回目以降のリクエストであると判定した場合（Ｓ５０６でＮｏの場合）、処理サーバ１０１は、処理サーバ１０１にキャッシュしたＨＴＭＬ（ＣＳＳ調整済み）を取得する処理（Ｓ５１９〜Ｓ５２０、Ｓ５１０）に移行する。
【００２７】
まず、初回のリクエストであった場合について説明する。
Ｓ５０７において、処理サーバ１０１は、Ｗｅｂサーバ１００の開発中のＵＲＬへリクエストを送信し、Ｓ５０８において、Ｗｅｂサーバ１００からの応答を取得する。すなわち、処理サーバ１０１は、Ｗｅｂサーバ１００から上記開発中のＵＲＬに紐付く情報（ＨＴＭＬとＣＳＳ）を受信する。
【００２８】
次に、Ｓ５０９において、処理サーバ１０１は、上記Ｓ５０８で取得したＨＴＭＬ及びＣＳＳを、処理サーバ１０１のメモリ装置２０６内の所定の領域（ＨＴＭＬ、ＣＳＳ記憶部５５０）に記憶する。次に、Ｓ５１０において、処理サーバ１０１は、上記リクエストの送信元のテスト端末に、上記Ｓ５０９で記憶したＨＴＭＬ及びＣＳＳを送信する。
【００２９】
次に、Ｓ５１１において、テスト端末は、処理サーバから送信されたＨＴＭＬ及びＣＳＳを受信し、Ｓ５１２において、上記Ｓ５０４で起動した複数のブラウザで表示処理を行う。この表示処理は、テスト端末のディスプレイに実際に表示されなくても、仮想的にＶＲＡＭ上にデータを配置する処理でもよい。
【００３０】
次に、Ｓ５１３において、テスト端末は、上記Ｓ５１２で複数のブラウザに表示した画面イメージ（画像）を取得（キャプチャ）する。次に、Ｓ５１４において、テスト端末は、上記Ｓ５１３で取得した複数のブラウザの画面イメージを処理サーバ１０１に送信する。
【００３１】
次に、Ｓ５１５において、処理サーバ１０１は、テスト端末から送信された上記複数のブラウザの画面イメージを受信する。なお、Ｓ５１２〜Ｓ５１４，Ｓ５１５の処理は、複数のブラウザで実施しているので、１つのブラウザでＳ５１２〜Ｓ５１４，Ｓ５１５までの処理を行い、次のブラウザで同じくＳ５１２〜Ｓ５１４，Ｓ５１５までの処理を行うようにしてもよい。即ち、テスト端末は、処理サーバ１０１から受信したＷｅｂページ情報について、結果として、Ｗｅｂブラウザごとの表示イメージを生成して処理サーバ１０１に返送可能な機能を備えていればよい。
【００３２】
次に、Ｓ５１６において、処理サーバ１０１は、上記Ｓ５１５で受信した複数のブラウザの画面イメージを比較する。この画面の画像比較は、Ｗｅｂブラウザ内のＨＴＭＬとＣＳＳで表示される部分のみを比較する。また、比較方法は、特に限定されるものではないが、画像の特徴点抽出法による比較など、多少のサイズの大きさなどの違いは差異と見なさない比較方法が望ましい。すなわち、画面イメージ間に差異があっても所定以内の差異は、差異がないものと判断する比較方法が望ましい。
【００３３】
次に、Ｓ５１７において、処理サーバ１０１は、上記Ｓ５１６での比較の結果、複数のブラウザの画面イメージが同等か否かを判定する。そして、複数のブラウザの画面イメージが同等でない（差異が検出された）と判定した場合（Ｓ５１７でＮｏの場合）、処理サーバ１０１は、Ｓ５０２へと処理を戻す。なお、Ｓ５０２〜Ｓ５０６までは初回と同じ処理が行われる。ただし、Ｓ５０６の処理は、２回目以降の処理であるため、処理サーバ１０１は、Ｓ５１９へと処理を遷移させる。
【００３４】
以下、２回目以降のリクエストの場合について説明する。
Ｓ５１９において、処理サーバ１０１は、初回のリクエストの際に上記Ｓ５０９でメモリ装置２０６内の所定の領域（ＨＴＭＬ、ＣＳＳ記憶部５５０）に記憶されたＨＴＭＬ及びＣＳＳ情報を取得する。
次に、Ｓ５２０において、処理サーバ１０１は、上記Ｓ５１９で取得したＣＳＳを調整する処理を行う。なお、Ｓ５２０の処理の詳細は図６を参照して後述する。
Ｓ５２０のＣＳＳ調整処理を完了すると、処理サーバ１０１は、Ｓ５１０において、上記リクエストの送信元のテスト端末に、上記Ｓ５２０で調整済みのＨＴＭＬ及びＣＳＳを送信する。なお、Ｓ５１１〜Ｓ５１７の処理は初回の場合と同様であり、複数のブラウザの画面イメージが同等でない間（Ｓ５１７でＮｏの間）、処理サーバ１０１は、Ｓ５０２〜Ｓ５０６、Ｓ５１９〜Ｓ５２０、Ｓ５１０〜Ｓ５１７の処理を繰り返す。
【００３５】
一方、上記Ｓ５１７において、処理サーバ１０１が、複数のブラウザの画面イメージが同等である（差異が検出されていない）と判定した場合（Ｓ５１７でＹｅｓの場合）、Ｓ５１８へと処理を移行する。
Ｓ５１８では、処理サーバ１０１は、調整完了と判断し、現在のＣＳＳとＨＴＭＬを記憶領域（例えば処理サーバ１０１の補助記憶装置２０５内の調整済ＣＳＳ出力領域）に出力し、本フローチャートの処理を終了する。なお、上記Ｓ５１８で出力された調整済ＣＳＳは、その後、Ｗｅｂサーバへと反映される。
【００３６】
以下、Ｓ５２０の処理の詳細を、図６〜図１３を参照して説明する。
図６は、図５のＳ５２０のＣＳＳ調整処理の詳細を例示するフローチャートであり、図５のＳ５２０へと遷移した際に開始される。
【００３７】
Ｓ６０１において処理が開始されると、Ｓ６０２において、処理サーバ１０１は、図５の処理から呼び出された本ＣＳＳ調整処理が、図５の処理の中で初回の処理であるか否かを判定する。そして、本ＣＳＳ調整処理が初回の処理であると判定した場合（Ｓ６０２でＹｅｓの場合）、処理サーバ１０１は、Ｓ６０３に処理を移行する。図５の処理からＣＳＳ調整処理を初めて実行する場合（初回の場合）、処理サーバ１０１は、ＣＳＳの調整をする必要がある部分（ＣＳＳ調整対象）を特定するために、ＨＴＭＬの表示に関する各要素を一旦非表示にして、上位要素から順に表示させてブラウザのキャプチャ画像を比較することにより、キャプチャ画像に差異が出てくる要素を、ＣＳＳ調整対象として特定する。以下、この処理をＳ６０３〜Ｓ６０９および図７〜図１１を参照して説明する。
【００３８】
Ｓ６０３において、処理サーバ１０１は、図５のＳ５１９で取得したＨＴＭＬのＤＯＭツリーの表示要素の全てを非表示に設定する処理を行う。以下、図７と図８を参照して、ＤＯＭツリーの表示要素の全てを非表示に設定する処理を説明する。なお、ＤＯＭは、Ｄｏｃｕｍｅｎｔ Ｏｂｊｅｃｔ Ｍｏｄｅｌを示す。
【００３９】
図７は、本実施例において調整対象とされるＨＴＭＬ及びＣＳＳと、２つの異なるＷｅｂブラウザ（ブラウザＡ、ブラウザＢ）の画面イメージを例示する図である。
図７において、７００はＨＴＭＬソースコードを示す。７１０は、ＨＴＭＬソースコード７００をブラウザＡ（基準ブラウザ）で表示した結果を示す。７２０は、ＨＴＭＬソースコード７００をブラウザＢ（調整対象ブラウザ）で表示した結果を示す。
【００４０】
調整対象ブラウザであるブラウザＢの画面イメージ７２０の表示領域７２１には、横スクロールバーが表示されており、この点が、基準ブラウザであるブラウザＡの画面イメージ７１０とは異なっている。そのため、７００のようなＨＴＭＬソースコードの場合は、図６のフローチャートの処理により調整が行われる。上記Ｓ６０３の処理で、非表示設定を行ったＨＴＭＬソースコードを、図８を参照して説明する。
【００４１】
図８は、図７のＨＴＭＬソースコード７００からＤＯＭツリーの表示要素の全てを非表示に設定した場合のＨＴＭＬと、その結果表示される２つの異なるＷｅｂブラウザの画面イメージを例示する図である。
【００４２】
図８において、８００は、上記Ｓ６０３で表示要素の全てが非表示設定されたＨＴＭＬソースコードを示す。ＨＴＭＬソースコード８００では、表示要素の全てを非表示設定にしているため、８０１，８０２に示すように、＜ｄｉｖ＞タグ内のスタイルシートで、「ｓｔｙｌｅ＝"ｖｉｓｉｂｉｌｉｔｙ：ｈｉｄｄｅｎ"」が設定されており、それらのタグ内のコメントや情報は表示されていない。なお、本実施例では、ＨＴＭＬソースコード８００をテスト端末に送信しないため、８１０や８２０に示す画面イメージはテスト端末で表示されないものであるが、図７の７１０、７２０との比較のために記載している。以下、図６のフローチャートの説明に戻る。
【００４３】
次に、Ｓ６０４において、処理サーバ１０１は、ＤＯＭツリーの上位要素から順に非表示のタグを表示タグに戻す処理を行う。以下、具体例を、図９を参照して説明する。
【００４４】
図９は、図８のＨＴＭＬソースコード８００からＤＯＭツリーの表示要素の最上位階層のみを表示する設定に変更した場合のＨＴＭＬソースコードと、その結果表示される２つの異なるＷｅｂブラウザの画面イメージを例示する図である。
【００４５】
図９において、９００は、上記Ｓ６０４で表示要素の最上位階層のみが表示するように設定されたＨＴＭＬソースコードを示す。ＨＴＭＬソースコード９００は、図８の８００で示した状態から、９０１〜９０３に示すように、＜ｄｉｖ＞タグの内、最上位階層である＜ｄｉｖ ｉｄ＝"ｃｏｎｔａｉｎｅｒ"＞のスタイルシートだけ、「ｓｔｙｌｅ＝"ｖｉｓｉｂｉｌｉｔｙ：ｈｉｄｄｅｎ"」を削除したＨＴＭＬの例に対応する。以下、図６のフローチャートの説明に戻る。
【００４６】
次に、Ｓ６０５において、処理サーバ１０１は、上記Ｓ６０４で非表示を表示に変更したＨＴＭＬとＣＳＳをテスト端末に送信する。
テスト端末は、Ｓ６１５において、上記Ｓ６０５で送信されたＨＴＭＬとＣＳＳを受信し、該受信したＨＴＭＬとＣＳＳを図５のＳ５０４で起動した複数の対象ブラウザでそれぞれ表示する。その後、Ｓ６１６において、テスト端末は、夫々の対象ブラウザで表示された画像をそれぞれキャプチャし、それらのキャプチャ画像を処理サーバ１０１に送信する。
【００４７】
次に、Ｓ６０６において、処理サーバ１０１は、テスト端末から送信された複数の対象ブラウザで表示されたキャプチャ画像を取得し、次のＳ６０７において、上記Ｓ６０６で取得した複数の対象ブラウザの画像を比較する。なお、Ｓ６０５〜Ｓ６０７の処理は、図５のＳ５１０〜Ｓ５１６の処理と同様である。以下、上記Ｓ６１６で表示された画面のイメージを、図９を参照して説明する。
【００４８】
図９の９１０は、ＨＴＭＬソースコード９００を基準ブラウザで表示した場合の画面イメージである。また、９２０は、ＨＴＭＬソースコード９００を調整対象ブラウザで表示した場合の画面イメージである。９１０と９２０に示す例では、どちらも何も表示されていないため、２つのキャプチャ画像に違いはないと判断される。以下、図６のフローチャートの説明に戻る。
【００４９】
次に、Ｓ６０８において、処理サーバ１０１は、図５のＳ５１６でブラウザによる差異が検出された箇所が表示されているか（即ち、基準ブラウザと調整対象ブラウザの画面イメージに差異がある）否かを判定する。
【００５０】
そして、差異が検出された箇所が表示されている（即ち、基準ブラウザと調整対象ブラウザの画面イメージに差異がある）と判定した場合（Ｓ６０８でＹｅｓの場合）、処理サーバ１０１は、Ｓ６０９へと処理を移行する。
一方、差異が検出された箇所が表示されていない（即ち、基準ブラウザと調整対象ブラウザの画面イメージに差異がない）と判定した場合（Ｓ６０８でＮｏの場合）、処理サーバ１０１は、Ｓ６０４へと処理を戻す。
【００５１】
図９の例では、基準ブラウザと調整対象ブラウザの画面イメージに差はないので、Ｓ６０４へと処理を戻し、２回目のＳ６０４を実行する。図９、図１０を参照して、引き続き具体例を説明する。
【００５２】
２回目のＳ６０４では、最上位階層＜ｄｉｖ ｉｄ＝"ｃｏｎｔａｉｎｅｒ"＞の次の階層として、＜ｄｉｖ ｉｄ＝"ｈｅａｄｅｒ"＞の要素が該当する。そのため、図９のＨＴＭＬソースコード９００の＜ｄｉｖ ｉｄ＝"ｈｅａｄｅｒ"＞タグのスタイルシート「ｓｔｙｌｅ＝"ｖｉｓｉｂｉｌｉｔｙ：ｈｉｄｄｅｎ"」を削除し、非表示を解除する。＜ｄｉｖ ｉｄ＝"ｈｅａｄｅｒ"＞の要素の非表示設定を解除したＨＴＭＬソースコードと、その表示画面の例を、図１０を参照して説明する。
【００５３】
図１０は、図９のＨＴＭＬソースコード９００からＤＯＭツリーの表示要素の上から２番目の階層を表示する設定に変更した場合のＨＴＭＬソースコードと、その結果表示される２つの異なるＷｅｂブラウザの画面イメージを例示する図である。
【００５４】
図１０において、１０００は、上記Ｓ６０４で表示要素の上から２番目の階層を表示するように設定変更されたＨＴＭＬソースコードを示す。ＨＴＭＬソースコード１０００では、１００１に示すように、図９の９００で示した状態から、＜ｄｉｖ＞タグの内、２番目の階層である＜ｄｉｖ ｉｄ＝"ｈｅａｄｅｒ"＞のスタイルシートの「ｓｔｙｌｅ＝"ｖｉｓｉｂｉｌｉｔｙ：ｈｉｄｄｅｎ"」を削除したＨＴＭＬの例である。即ち、図１０の例では、最上位階層＜ｄｉｖ ｉｄ＝"ｃｏｎｔａｉｎｅｒ"＞と次の階層＜ｄｉｖ ｉｄ＝"ｈｅａｄｅｒ"＞の要素の非表示設定のスタイルシートが削除されており、その結果、基準ブラウザの画面イメージは１０１０、調整対象ブラウザの画面イメージは１０２０のようになる。なお、１０１０、１０２０に示す例では、夫々の画面イメージを特徴点抽出法などで比較すると、差異がないと判断されるため、図６のＳ６０８では、再度Ｓ６０４へと処理を戻し、３回目のＳ６０４の処理を実行することとなる。
【００５５】
処理サーバ１０１は、図１０のＨＴＭＬソースコード１０００から、さらに図６のＳ６０４の処理を実行すると、次の上位階層である＜ｄｉｖ ｉｄ＝"ｓｃｒｏｌｌ１"＞の要素の非表示設定のスタイルシートを削除（非表示設定を解除）する処理を実行する。以下、図１０のＨＴＭＬソースコード１０００から更に図６のＳ６０４の処理を行った場合のＨＴＭＬソースコードの例を、図１１を参照して説明する。
【００５６】
図１１は、図１０のＨＴＭＬソースコード１０００から更に図６のＳ６０４の次の上位階層の要素の非表示設定を解除したＨＴＭＬソースコードと基準ブラウザと調整対象ブラウザの画面イメージを例示する図である。
【００５７】
図１１に示すＨＴＭＬソースコード１１００では、１１０１に示すように、＜ｄｉｖ ｉｄ＝"ｓｃｒｏｌｌ１"＞の要素の非表示設定のスタイルシート「ｓｔｙｌｅ＝"ｖｉｓｉｂｉｌｉｔｙ：ｈｉｄｄｅｎ"」も削除されている。この結果、基準ブラウザの画面イメージ１１１０と調整対象ブラウザのそれぞれの画面イメージ１１２０は、１１２１のような横スクロールが表示され、２つのブラウザによる画面イメージに差異が現れる。以下、図６のフローチャートの説明に戻る。
【００５８】
処理サーバ１０１は、上述した図６のＳ６０８においてブラウザによる差異を検出すると、Ｓ６０９へと処理を遷移する。
Ｓ６０９では、処理サーバ１０１は、直前に非表示設定のスタイルシートを削除した要素を特定する。図１１に示した例の場合、直前に非表示設定のスタイルシートを削除した要素は＜ｄｉｖ ｉｄ＝"ｓｃｒｏｌｌ１"＞である。
【００５９】
次に、Ｓ６１０において、処理サーバ１０１は、上記Ｓ６０９で特定した要素のスタイルシートの属性に値指定があるか（ユーザにより指定している値（例えばｗｉｄｔｈ：１１６ｐｘなど）があるか）否かを判定する。そして、要素の属性に値指定があると判定した場合（Ｓ６１０でＹｅｓの場合）、処理サーバ１０１は、まずユーザが指定している上記Ｓ６０９で特定した要素のスタイルシートの属性値を変更するよう制御する（後述するＳ６１１）。この理由は、通常スタイルシートのデフォルト値以外の値に設定されている場合、表示が崩れることが多いためで、ユーザが指定している属性値（例えばｗｉｄｔｈ：１１６ｐｘなど）の修正をまず試みる。
【００６０】
図１１の例では、＜ｄｉｖ ｉｄ＝"ｓｃｒｏｌｌ１"＞の要素のユーザが指定しているスタイルシートは１１０２欄であるため、この１１０２欄のスタイルシートを変更する。なお、複数のスタイルシートの属性の値が指定されている場合（たとえば、図１１の１１０２欄のような場合）、その属性から優先度の高いスタイルシートの属性の値を変更する。以下、図１２を参照して、スタイルシートの属性値の変更の優先度について説明する。
【００６１】
図１２は、本実施例におけるスタイルシートの属性値の変更の優先度を記憶したＣＳＳ属性変更設定データの一例を示す図である。
図１２において、１２００はＣＳＳ属性変更設定データであり、予め処理サーバ１０１の補助記憶装置２０５内の所定の記憶領域（ＣＳ属性変更設定記憶部６６１）に記憶されているものとする。
【００６２】
１２０１欄は、スタイルシートの変更候補の属性であり、１２０４欄に示すように、上から順に優先順位が設定されている。また、属性の値を変更する条件は１２０２欄に記憶されており、変更条件の限界（上限値や下限値等）は１２０３欄に記憶されている。
【００６３】
ＣＳＳ属性変更設定データ１２００によると、最初の属性変更候補は「ｗｉｄｔｈ」であり、スタイルシート１１０２欄にも「ｗｉｄｔｈ」が含まれているので、まず、「ｗｉｄｔｈ」の属性値を変更する（後述するＳ６１１）。属性値の変更は、図６のＣＳＳ調整処理が呼び出されるたびに段階的に行われることになる。そして、「ｗｉｄｔｈ」が上限値一杯まで大きくなった場合は、次の優先順位のスタイルシート１１０２欄の候補を探して変更する。以下、図６のフローチャートの説明に戻る。
【００６４】
なお、上記Ｓ６１０において、上記Ｓ６０９で特定した要素のスタイルシートの属性に値がない（ユーザにより属性の値に指定がない）と判定した場合（Ｓ６１０でＮｏの場合）、処理サーバ１０１は、Ｓ６１３の処理へと移行する。Ｓ６１３では、処理サーバ１０１は、ＣＳＳ属性変更設定データ（例えば図１２の１２００）から、ＣＳＳ指定可能な属性を取得する。なお、図１２の１２０１に示すような属性をもつタグの場合、処理サーバ１０１は、優先順位１２０４の順位でスタイルシートの属性値を変更可能な属性を取得する。なお、上記Ｓ６１３で取得したＣＳＳ指定可能な属性の値を変更する場合、即ち、属性値が指定されていない要素の属性に設定する値の初期値は、予め処理サーバ１０１の補助記憶装置２０５に格納されているものとする。
【００６５】
次に、Ｓ６１１において、処理サーバ１０１は、上記Ｓ６１０でユーザが属性値を指定していると判定された属性、もしくは、上記Ｓ６１３で取得された属性の値を変更する処理を行う。さらに、処理サーバ１０１は、上記Ｓ６１１で変更したＣＳＳ変更箇所及び属性値を、処理サーバ１０１のメモリ装置２０６内の所定の領域（ＨＴＭＬ、ＣＳＳ記憶部５５０）に記憶し、図５のフローチャートに処理を戻す。以下、図１３を参照して、本実施例のスタイルシートの属性値を変更する例を説明する。
【００６６】
図１３は、本実施例におけるスタイルシートの属性値の変更例値と、該属性値の変更に伴い表示イメージが同等になった基準ブラウザと調整対象ブラウザの画面イメージを例示する図である。
【００６７】
例えば、図１１に示したＨＴＭＬソースコード例の場合、１３００に示すように、１３０１のように画面イメージ１１２０に対応するブラウザＢ（ＢｒｏｗｓｅｒＢ）を指定し、１３０２のようにスタイルシートの設定値の指定を行う。この際、１３０２に示すように、変更条件１２０２の「大きくする」に基づいて、元の属性値「１１６ｐｘ」を１増加させた「１１７ｐｘ」値が、属性値に指定されている。
【００６８】
この結果、基準ブラウザの画面イメージ１３１０、調整対象ブラウザの画面イメージ１３２０のように、基準ブラウザと調整対象ブラウザの画面イメージが一致する（差異が検出されない）。もし属性値を１増加させても双方の画面イメージが一致しない場合は、図５においてＳ５１７からＳ５０２へと処理が遷移し、さらにＳ５０６、Ｓ５１９、Ｓ５２０と処理が遷移して再び図６のＣＳＳ調整処理が呼び出されることになる。この場合、Ｓ６０２で２回目以降の処理と判断され、Ｓ６１２へと処理を移行する。
Ｓ６１２では、処理サーバ１０１は、前回、ＣＳＳ調整処理が呼び出された際に変更した要素を取得し、更にＳ６１０以降の処理を実施する。
【００６９】
以上の処理を繰り返すことにより、複数種類のＷｅｂブラウザによる表示の差異の要因となる要素を特定し、ＣＳＳの修正、各Ｗｅｂブラウザでの表示イメージの差異の検出を繰り返すことにより、複数種類のＷｅｂブラウザで表示されるＷｅｂページの表示イメージの差異を少なくすることができる。
【００７０】
なお、図６では、ＨＴＭＬソースコードに含まれる全ての要素を一旦非表示に変更した後、要素ごとに、例えば最下位の要素から順に、該要素を表示するように変更してＨＴＭＬソースコードをテスト端末に送信してブラウザごとの表示イメージを取得し、該取得した各表示イメージを比較して前記各表示イメージに差異が発生した場合に、その直前に表示するように変更した要素を、該差異の要因となる要素として特定する構成を説明した。しかし、ＨＴＭＬソースコードに含まれる要素ごとに、例えば最下位の要素から順に、該要素を非表示するように変更してＨＴＭＬソースコードをテスト端末に送信してブラウザごとの表示イメージを取得し、該取得した各表示イメージを比較して前記各表示イメージの差異がなくなった場合に、その直前に非表示に変更した要素を、該差異の原因となる要素として特定するように構成してもよい。すなわち、処理サーバ１０１は、Ｗｅｂページ情報に含まれる要素ごとに、表示の有無を変更してテスト端末に送信してＷｅｂブラウザごとの表示イメージを取得し、該取得した各表示イメージを比較して前記各表示イメージの差異の状態が変化した場合に、その直前に表示の有無を変更した要素を、該差異の原因となる要素として特定する。
【００７１】
以上示したように、本実施例の処理サーバ１０１が、ＨＴＭＬソースコード７００として例示したようなＷｅｂページ情報をテスト端末に送信し、該送信したＷｅｂページ情報に基づく表示をテスト端末で動作する複数種類のＷｅｂブラウザにおいて実行した場合の前記Ｗｅｂブラウザごとの表示イメージを取得し、該取得した前記Ｗｅｂブラウザごとの表示イメージを比較して差異を検出し、前記各表示イメージに差異が検出された場合に該Ｗｅｂページ情報を調整し、同様に、該調整されたＷｅｂページ情報をテスト端末に送信して前記Ｗｅｂブラウザごとの表示イメージを取得して比較し調整する一連の処理を繰り返す制御（例えば、各表示イメージの差異が検出されなくなるまで繰り返す（所定の回数を上限としてもよい））を行うことにより、異なる種類のＷｅｂブラウザにおいて表示されるＷｅｂページ情報の表示イメージの差異を少なくすることができる。
【００７２】
なお、上述した各種データの構成及びその内容はこれに限定されるものではなく、用途や目的に応じて、様々な構成や内容で構成されることは言うまでもない。
以上、一実施形態について示したが、本発明は、例えば、システム、装置、方法、プログラムもしくは記憶媒体等としての実施態様をとることが可能である。具体的には、複数の機器から構成されるシステムに適用しても良いし、また、一つの機器からなる装置に適用しても良い。
また、上記各実施例を組み合わせた構成も全て本発明に含まれるものである。
【００７３】
（その他の実施例）
本発明は、上述の実施例の１以上の機能を実現するプログラムを、ネットワーク又は記憶媒体を介してシステム又は装置に供給し、そのシステム又は装置のコンピュータにおける１つ以上のプロセッサーがプログラムを読出し実行する処理でも実現可能である。また、１以上の機能を実現する回路（例えば、ＡＳＩＣ）によっても実現可能である。
また、本発明は、複数の機器から構成されるシステムに適用しても、１つの機器からなる装置に適用してもよい。
本発明は上記実施例に限定されるものではなく、本発明の趣旨に基づき種々の変形（各実施例の有機的な組合せを含む）が可能であり、それらを本発明の範囲から除外するものではない。即ち、上述した各実施例及びその変形例を組み合わせた構成も全て本発明に含まれるものである。
【符号の説明】
【００７４】
１００    Ｗｅｂサーバ
１０１    処理サーバ
１０２    ＬＡＮ
１０３，１０４    テスト端末
【図１】
2016099692.tif 000003
【図２】
2016099692.tif 000004
【図３】
2016099692.tif 000005
【図４】
2016099692.tif 000006
【図５】
2016099692.tif 000007
【図６】
2016099692.tif 000008
【図７】
2016099692.tif 000009
【図８】
2016099692.tif 000010
【図９】
2016099692.tif 000011
【図１０】
2016099692.tif 000012
【図１１】
2016099692.tif 000013
【図１２】
2016099692.tif 000014
【図１３】
2016099692.tif 000015