JP2010039815A

JP2010039815A - Ｗｅｂページレイアウト補正システム

Info

Publication number: JP2010039815A
Application number: JP2008202859A
Authority: JP
Inventors: Tomoko Kebukawa; 朋子癸生川
Original assignee: NEC Engineering Ltd
Current assignee: NEC Engineering Ltd
Priority date: 2008-08-06
Filing date: 2008-08-06
Publication date: 2010-02-18

Abstract

【課題】クライアントの Webブラウザでレイアウトが正しく表示されるように Webページの開発者が手動で HTMLソースを変更している。
【解決手段】クライアントが使用する Webブラウザと画面レイアウトが正しく表示される Webブラウザ２で HTMLソースを表示した際の表示領域のビットマップ画像から、各 HTML要素の表示位置と、表示サイズと、表示文字サイズを取得する。取得した値を用いて、クライアントの Webブラウザ１で HTMLソースを表示した際の各 HTML要素の表示位置と、表示サイズと、表示文字サイズが、 Webブラウザ２で HTMLソースを表示した際のそれぞれと同じになるように HTMLソースを自動的に補正する。
【選択図】図１

Description

本発明は、Webページレイアウト補正システム、特に、クライアントが使用している Webブラウザの種類によって Webページの画面レイアウトが崩れることがないように、HTML等の Web記述言語で記述された HTMLソース等を補正するシステムに関する。

この種の補正に係わる従来技術として、「Webアプリケーション開発支援装置及び開発支援方法」（特許文献１参照）を挙げることができる。この技術は、クライアントが使用する Webブラウザの種類が固定の場合におけるものであるが、Webアプリケーションの実行結果として動的に生成される HTMLソースの内の Webページの画面レイアウトに関する部分と、Webデザイナーにより作成されたデザイン HTMLの内の動的レイアウト部分とを比較し、異なる部分がある場合は、その HTMLソースを自動的に強調表示することで、画面レイアウトが正しく表示されるように HTMLソースを修正する作業を支援するものである。

また、Webコンテンツを格納している共通データベースに記述されたWWWページの HTMLソースを端末機器のWWW記述言語に応じて変換する「異種端末のアクセスを許容するウェブサイト及びウェブサイトに異種端末のアクセスを許容する方法」（例えば、特許文献２参照）も公知である。

特開2005-122504号公報（第５頁、図１）特開2001-273188号公報（第３頁−第４頁、図１）

しかしながら、特許文献２記載の技術では、画面レイアウトを補正するための修正箇所を自動的に表示するが、補正作業自体は手動で行うため、Webページの画面レイアウトに関する部分の HTMLソースを補正する作業に手間がかかるという第１の問題点がある。

更に、クライアントが使用するWebブラウザと特許文献１のシステムが使用する Webブラウザが異なる場合に、HTMLソースを補正した後でも Webページの画面レイアウトが設計時とは異なってしまう可能性があるという第２の問題点がある。その理由は、HTMLソースを表示する Webブラウザが異なれば、 Webブラウザ毎の HTMLソースの表示方法の違いのために画面レイアウトが一致しない場合があるが、特許文献１のシステムは、 HTMLソースの画面レイアウトに関する部分が動的に生成された後と設計時で同じになるように補正するためのシステムであって、 Webブラウザ毎の HTMLソースの表示方法の違いを吸収する機能を持たないためである。

また、特許文献２記載の技術では、端末機器の WWW記述言語の違いに対応するものであって、Webページレイアウトに対するものではなく、また違いの部分的な補正ではなく変換するため処理量が多くなるという問題点がある。

そこで、本発明の目的は、Webページの HTMLソースを補正する作業を Webサーバ上で自動的に行う Webページレイアウト補正システムを提供することにある。ここでいう補正とは、ある一種類の Webブラウザで画面レイアウトが正しく表示される HTMLソースを開発者が作成しておけば、クライアントが画面レイアウトを正しく表示する Webブラウザとは異なる種類の Webブラウザで HTMLソースを表示した場合でも、画面レイアウトが正しく表示できるように HTMLソースを変更することを意味する。

第１の本発明の Webページレイアウト補正システムは、クライアントと同じ OSを有する Webサーバが接続され、該 Webサーバは、クライアントが使用する Webブラウザと同じ種類の Webブラウザ（Webブラウザ１）で要求された Webページを表示した際の表示領域のビットマップ画像から、 Webページの各 HTML要素の表示位置，表示サイズおよび表示文字サイズを取得する手段と、Webページの画面レイアウトが正しく表示される Webブラウザ（Webブラウザ２）で Webページを表示した際の表示領域のビットマップ画像から、 Webページの各 HTML要素の表示位置，表示サイズおよび表示文字サイズを取得する手段と、２つの取得した表示位置，表示サイズおよび表示文字サイズをそれぞれ比較する手段と、２つの取得した表示位置，表示サイズまたは表示文字サイズの何れかが異なる場合には、同じになるように Webページの HTMLソースを補正する手段を有することを特徴とする。

第２の本発明の Webページレイアウト補正システムは、Webサーバとそれぞれが異なる OSを有するサーバとを接続した Webページレイアウト補正システムであって、 Webサーバは；クライアントが使用する Webブラウザと同じ種類の Webブラウザ（Webブラウザ１）で要求された Webページを表示した際の表示領域のビットマップ画像から、 Webページの各 HTML要素の表示位置，表示サイズおよび表示文字サイズを取得する手段と、Webページの画面レイアウトが正しく表示される Webブラウザ（Webブラウザ２）で Webページを表示した際の表示領域のビットマップ画像から、 Webページの各 HTML要素の表示位置，表示サイズおよび表示文字サイズを取得する手段と、２つの取得した表示位置，表示サイズおよび表示文字サイズをそれぞれ比較する手段と、２つの取得した表示位置，表示サイズまたは表示文字サイズの何れかが異なる場合には、同じになるように前記 Webページの HTMLソースを補正する手段を有し、サーバは；クライアントの OSが Webサーバの OSと異なる場合に、 Webサーバからクライアントが使用する Webブラウザの種類と Webページの HTMLソースの送信を受けて、 Webブラウザ１で Webページを表示した際の表示領域のビットマップ画像を取得し Webサーバへ返信することを特徴とする。

要するに、本発明の Webページレイアウト補正システムは、クライアントが使用する Webブラウザと画面レイアウトが正しく表示される Webブラウザで HTMLソースを表示した際の表示領域のビットマップ画像から、各 HTML要素の表示位置と、表示サイズと、表示文字サイズを取得する手段を有する。また、取得した値を用いて正しい画面レイアウトで表示できる Webブラウザ以外の Webブラウザで HTMLソースを表示した際の各 HTML要素の表示位置と、表示サイズと、表示文字サイズが、正しい画面レイアウトで表示できる Webブラウザで HTMLソースを表示した際の各 HTML要素の表示位置と、表示サイズと、表示文字サイズと同じになるように HTMLソースを補正する手段を有する。これらによって本発明の目的を達成することができる。

詳しくは、Webサーバは、Webページの HTMLソースを保存する HTMLソース保存メモリと、Webブラウザ１およびWebブラウザ２を含む Webブラウザ群と、クライアントの Webブラウザから Webページの表示要求を受けると、クライアントの OSや使用している Webブラウザの種類などの情報を取得するクライアント情報取得手段と、情報により、当該 Webブラウザ１および Webブラウザ２により HTMLソースを表示し、その状態のビットマップ画像から HTML要素の表示位置，表示サイズおよび表示文字サイズを取得し解析する画像解析手段と、解析の結果により HTML要素の表示位置を補正する処理を行う表示位置補正手段と、解析の結果により HTML要素の表示サイズを補正する処理を行う表示サイズ補正手段と、解析の結果により HTML要素の表示文字サイズを補正する処理を行う表示文字サイズ補正手段と、補正処理中に作成した HTMLソースを保存する処理中 HTMLソース保存メモリを有することを特徴とする。

更に、画像解析手段は、 HTMLソースを Webブラウザ１および前記 Webブラウザ２に表示し、それぞれの表示領域のビットマップ画像を取得する画面画像取得手段と、各ビットマップ画像からそれぞれの HTML要素の表示位置を取得する画像位置取得手段と、各ビットマップ画像からそれぞれの HTML要素の表示サイズを取得する画像サイズ取得手段と、各ビットマップ画像からそれぞれの HTML要素下の文字列が全て表示されているか確認する画面文字数確認手段と、各ビットマップ画像に異なる部分がないか調べる画像比較手段を有することを特徴とする。

また、表示位置補正手段は、特定の HTML要素を黒色、その他の HTML要素を白色で表示されるように HTMLソースを変更する HTMLソース要素強調表示手段と、強調表示された HTML要素の位置指定方法を絶対座標での指定に変更する HTMLソース位置指定手段と、 Webブラウザ１と、 Webブラウザ２で前記指定変更された HTMLソースを表示したときの HTML要素の表示位置の差を計算する表示位置差計算手段と、 HTML要素の指定位置を表示位置差計算手段により算出した値で修正する表示位置修正手段を有することを特徴とする。

また、表示サイズ補正手段は、 HTML要素のサイズ指定方法をピクセル単位での指定に変更する HTMLソースサイズ指定手段と、 Webブラウザ１と、 Webブラウザ２で HTMLソースを表示したときの HTML要素の表示サイズの差を計算する表示サイズ差計算手段と、 HTML要素の指定サイズを表示サイズ差計算手段により算出した値で修正する表示サイズ修正手段を有することを特徴とする。

また、表示文字サイズ補正手段は、特定の HTML要素内の文字列が全て表示されるか確認するために文字列の直後に黒色で表示される文字を追加し、他の文字列や HTML要素は白色に表示されるように HTMLソースを変更する HTMLソース文字強調表示手段と、変更された HTMLソースを Webブラウザ１で表示し、追加した黒色の文字が表示されるまで、 HTML要素の指定文字サイズを小さく変更した HTMLソースを作成していく表示文字サイズ修正手段を有することを特徴とする。

また、本発明の Webページレイアウト補正システムは、 Webページの URLと、 Webブラウザ２の種類の対応を保持するテーブルと、補正前後のWebページの URLと、 Webブラウザ２の種類の対応を保持するテーブルを備え、クライアントの Webブラウザから Webページの表示要求を受けると、画像解析手段は補正の前後に応じて前記テーブルを使い分け、該当する前記 Webブラウザ２の種類を抽出して使用することを特徴とする。

本発明の第１の効果は、HTMLソースの補正を手動ではなく自動的に行うため Webページの作成効率を上げることができるということである。

本発明の第２の効果は、クライアントが Webサーバに要求を送った時点で Webサーバはクライントが使用している Webブラウザを取得し、その Webブラウザでレイアウトが正しく表示できるように HTMLソースを修正するため、如何なる種類の Webブラウザを使用しているクライアントであっても、画面レイアウトが崩れていない Webページを閲覧できるということである。

この結果、Webページの開発者が１種類の Webブラウザで画面レイアウトが正しく表示できるように HTMLソースを作成しておけば、クライアントが使用している Webブラウザでも、画面レイアウトが正しく表示できる Webブラウザと同じ見た目になるように HTMLソースを自動的に補正することができるので、Webページを開発する手間を軽減することができるようになる。

先ず、図５〜図７に示す模式図を用いて本発明の具体的なイメージを与える。

図５は HTML要素の位置を補正する処理を示す。クライアントが使用している Webブラウザ１で Webページを表示したときと、正しい画面レイアウト（以下、「レイアウト」と記す）で表示できる Webブラウザ２で同じ Webページを表示したときとで、レイアウトが異なる HTMLソース１１があるとする（図５の手順１）。この場合、選択した HTML要素のみが黒く表示されるように HTMLソース１１を変更した HTMLソース１２を作成する。HTMLソース１２を Webブラウザ２で表示し、選択した HTML要素の表示位置（X,Y）を取得する（図５の手順２）。

次に、選択した HTML要素の絶対座標として、取得した表示位置（X,Y）を指定した HTMLソース１３を HTMLソース１２を変更して作成する。絶対座標とは、 Webブラウザの表示サイズと種類によって変更されない絶対的な座標値をいう。そして、HTMLソース１３を表示した Webブラウザ１と、HTMLソース１２を表示した Webブラウザ２で選択した HTML要素が同じ位置に表示されているか確認する（図５の手順３）。

同じ位置に表示されない場合は、選択した HTML要素の Webブラウザ１における表示位置（X',Y'）を取得し、選択した HTML要素の位置を補正するようにHTMLソース１３を変更した HTMLソース１４を作成する（図５の手順４）。補正は、X'に（X-X'）、Y'に（Y-Y'）を加えることにより行なう。以後、 HTMLソース１４を使用すれば、 Webブラウザ１によっても、 Webブラウザ２と同様に、 HTML要素の位置が正しい Webページを表示できるようになる。

図６は HTML要素の表示サイズを補正する処理を示す。HTMLソース１３もしくは HTMLソース１４を表示した Webブラウザ２での選択した HTML要素の表示サイズをピクセル単位で取得する（図６の手順５）。取得した表示サイズを選択した HTML要素のサイズとしてピクセル単位で指定したHTMLソース１５をHTMLソース１３もしくは HTMLソース１４を変更して作成する。HTMLソース１５を表示した Webブラウザ１と、HTMLソース１３もしくは HTMLソース１４を表示した Webブラウザ２で選択した HTML要素が同じサイズで表示されているか確認する（図６の手順６）。同じサイズで表示されない場合は、選択したHTML要素の Webブラウザ１における表示サイズを取得し、選択した HTML要素のサイズを補正するようにHTMLソース１５を変更した HTMLソース１６を作成する（図６の手順７）。以後、 HTMLソース１６を使用すれば、 Webブラウザ１によっても、 Webブラウザ２と同様に、 HTML要素の位置が正しく、かつ HTML要素の表示サイズも正しい Webページを表示できるようになる。

図７は表示文字サイズを補正する処理を示す。文字列の直後に黒色で表示される文字を追加し、他の要素を白色で表示されるように HTMLソース１６を変更した HTMLソース１７を作成する（図７の手順８）。HTMLソース１７を Webブラウザ１で表示し、追加した黒色の文字が表示される（図７の手順１０）まで、 HTMLソース１７の文字サイズを小さく変更した HTMLソース１８，１９を作成していく（図７の手順９）。以後、 HTMLソース１９を使用すれば、 Webブラウザ１によっても、 Webブラウザ２と同様に、 HTML要素の位置が正しく、かつ HTML要素の表示サイズも正しく、かつ表示文字サイズも正しい Webページを表示できるようになる。

図１は、第１の本発明による Webページレイアウト補正システムの実施の形態を示すブロック図である。この Webページレイアウト補正システムでは、ユーザが使用している PCであるクライアント１０１と、本発明を実現する Webサーバ１０２が WANを介して接続されている。

クライアント１０１は Webブラウザ１０を有し、Webブラウザ１０は、Webページを表示しようとするとき、 WAN経由で Webサーバ１０２に Webページを要求（Request）する。Webサーバ１０２は、クライアント情報取得手段２３１を有し、クライアント情報取得手段２３１はユーザエージェントなどを用いて、クライアントの OSや使用しているWebブラウザの種類などの情報を取得する。

Webサーバ１０２は Webブラウザ群３を保有している。Webブラウザ群３はクライアント１０１が使用している Webブラウザ１０と同じ種類の Webブラウザ１や、Webページのレイアウトが正しく表示される Webブラウザ２を含む。Webブラウザ群３には随時様々な種類の Webブラウザを追加することが可能で、Webサーバ１０２は Webブラウザ群３の Webブラウザで Webページを表示したときに、そのレイアウトが崩れないように HTMLソースを補正することができる。

具体的には、Webサーバ１０２は、HTML要素の表示位置を補正する処理を行う表示位置補正手段２００、表示サイズを補正する処理を行う表示サイズ補正手段２１０、表示文字サイズを補正する処理を行う表示文字サイズ補正手段２２０、および HTMLソースをWebブラウザに表示した状態のビットマップ画像から HTML要素の表示位置，表示サイズ，表示文字サイズを取得し解析する画像解析手段２４０を有する。

また、Webページの URLと Webページのレイアウトが正しく表示される Webブラウザの種類との対応表である Webページ＿ブラウザ対応テーブル１３１、補正した後の Webページと補正対象となった Webブラウザの種類との対応表である Webページ＿補正後ブラウザ対応テーブル１３２、HTMLソースを保存する HTMLソース保存メモリ１４１、および補正処理中に作成した HTMLソースを保存する処理中 HTMLソース保存メモリ１４２を有する。

次に、Webサーバ１０２の詳細な構成を説明する。表示位置補正手段２００は、特定の HTML要素を黒色、その他の HTML要素を白色で表示されるように HTMLソースを変更する HTMLソース要素強調表示手段２０１と、 HTML要素の位置指定方法を絶対座標での指定に変更する HTMLソース位置指定手段２０２と、 Webブラウザ１と Webブラウザ２で HTMLソースを表示したときの HTML要素の表示位置の差を計算する表示位置差計算手段２０３と、 HTML要素の指定位置を表示位置差計算手段２０３により算出した値で修正する表示位置修正手段２０４とで構成される。

表示サイズ補正手段２１０は、HTML要素のサイズ指定方法をピクセル単位での指定に変更する HTMLソースサイズ指定手段２１１と、レイアウトが正しく表示できる Webブラウザと、それ以外の Webブラウザで HTMLソースを表示したときの HTML要素の表示サイズの差を計算する表示サイズ差計算手段２１２と、HTML要素の指定サイズを表示サイズ差計算手段２１２により算出した値で修正する表示サイズ修正手段２１３とで構成される。

表示文字サイズ補正手段２２０は、特定の HTML要素内の文字列が全て表示されるか確認するために文字列の直後に黒色で表示される文字を追加し、他の文字列や HTML要素は白色に表示されるように HTMLソースを変更する HTMLソース文字強調表示手段２２１と、HTML要素の指定文字サイズを修正する表示文字サイズ修正手段２２２とで構成される。

画像解析手段２４０は、クライアント１０が Webページを要求したときに、 HTMLソースを Webブラウザに表示し、Webブラウザの表示領域のビットマップ画像（代表参照番号を２０とする）を取得する画面画像取得手段２４１と、ビットマップ画像２０から HTML要素の表示位置を取得する画像位置取得手段２４２と、ビットマップ画像２０から HTML要素の表示サイズを取得する画像サイズ取得手段２４３と、ビットマップ画像から HTML要素下の文字列が全て表示されているか確認する画面文字数確認手段２４４と、２つのビットマップ画像に異なる部分がないか調べる画像比較手段２４５とで構成される。

図２は、Webページ_ブラウザ対応テーブル１３１の内容を例示する。この対応表は、補正前の WebページのURLと、そのWebページのレイアウトを正しく表示することができる Webブラウザ２の種類とを列に示す。Webページの URLは、HTMLソース保存メモリ１４１の各 HTMLソースの位置を指し示す。ここでは、 Webブラウザ２の種類として、Ａ，Ｂの２種類を示している。WebブラウザＡ，Ｂそれぞれは２つの URLの Webページを表示することができる。

図３は、Webページ_補正後ブラウザ対応テーブル１３２の内容を例示する。この対応表は、補正前の Webページの URLと、補正後の Webページの URLと、レイアウトを正しく表示することができる Webブラウザの種類とを列に示す。Webページの URLは、 HTMLソース保存メモリ１４１の各 HTMLソースの位置を指し示す。

次に、以上のように構成された本発明のWebページレイアウト補正システムの動作について、図４のフローチャートを参照して詳細に説明する。

先ず、クライアント１０１が使用している Webブラウザ１０と同じ種類の Webブラウザ１と、Webページのレイアウトが正しく表示される Webブラウザ２で Webページを表示した場合に、２つの画面のレイアウトが一致するか確認する処理を説明する。Webページの表示のためには、HTMLソース保存メモリ１４１が保存している HTMLソースが使用される。

Webサーバ１０２はクライアント１０１の Webブラウザ１０からの要求を受け取ると、クライアント情報取得手段２３１を用いてクライアント１０１が使用している Webブラウザの種類を取得する（図４のステップ５００）。

そして、クライアント１０１が使用している Webブラウザ１０と同じの種類の Webブラウザ１を Webブラウザ群３から抽出して、Webブラウザ１で Webページを表示し、そこから画面画像取得手段２４１を用いてビットマップ画像（図５の２１）を取得する。同様に、 Webブラウザ群３から抽出した Webブラウザ２の内の Webページ＿ブラウザ対応テーブル１３１から取得した種類の Webブラウザ２で Webページを表示し、画面画像取得手段２４１を用いてビットマップ画像（図５の２２）を取得する（ステップ５０１）。図２の例では、 Webページの URLに応じて、 Webブラウザ２の内の WebブラウザＡ，Ｂ等で当該 Webページを表示する。

画像比較手段２４５はビットマップ画像２１とビットマップ画像２２を比較し、全ピクセルの色に差がなければ（ステップ５０２でＮＯ）、クライアント１０１の Webブラウザ１０に補正前の Webページの URLを返して終了する（ステップ５２０）。

一方、Webブラウザ１と Webブラウザ２で各 HTML要素の表示位置が異なる場合（ステップ５０２でＹＥＳ）、一致するように HTMLソースを補正する処理を説明する。

HTMLソース要素強調表示手段２０１は HTMLソース内の HTML要素を最初から一つずつ選択し、強調表示する。ここでいう強調表示とは、補正前の HTMLソース（図５の１１）を変更して、選択した HTML要素の背景色，前景色，ボーダーを全て黒に指定し、他の HTML要素は白に指定した HTMLソース（図５の１２）を作成することである。次に、画面画像取得手段２４１を用いて HTMLソース１２を Webブラウザ２で表示したビットマップ画像（図５の２３）を取得する。

そして、画像位置取得手段２４２は、ビットマップ画像２３の左上端から右下に順にピクセルをチェックしていき、初めて黒色のピクセルが存在した部分を選択した HTML要素の表示位置（図５の４１）を取得する。HTMLソース位置指定手段２０２を用いて、 HTMLソース１２を変更し、選択したHTML要素の絶対座標を表示位置４１として指定した HTMLソース（図５の１３）を作成する（ステップ５０３）。

次に、画面画像取得手段２４１は、HTMLソース１３を Webブラウザ１で表示したビットマップ画像（図５の２４）を取得し、画像位置取得手段２４２は、ビットマップ画像２４から選択した HTML要素の表示位置（図５の４２）を取得する。表示位置４１と表示位置４２が異なる場合（ステップ５０４でＮＯ）、表示位置差計算手段２０３を用いて、表示位置の差（表示位置４１−表示位置４２）を取得する。表示位置修正手段２０４は、選択した HTML要素の絶対座標を（表示位置４２＋（表示位置４１−表示位置４２））として指定するように HTMLソース１３を変更した HTMLソース（図５の１４）を作成する（ステップ５０５）。

次に、Webブラウザ１とWebブラウザ２で各 HTML要素の表示サイズが一致するように HTMLソースを補正する処理を説明する。

画像サイズ取得手段２４３は、ビットマップ画像２３のピクセル中で、最も左に黒色のピクセルが存在した部分の X座標と、最も右に黒色のピクセルが存在した部分の X座標の差を幅とし、また最も上に黒色のピクセルが存在した部分の Y座標と、最も下に黒色のピクセルが存在した部分の Y座標の差を高さとして、選択した HTML要素の表示サイズ（図６の５１）を取得する。 HTMLソースサイズ指定手段２１１を用いて、HTMLソース１３もしくは HTMLソース１４を変更し、選択した HTML要素のサイズを表示サイズ５１のピクセル単位で指定した HTMLソース（図６の１５）を作成する（ステップ５０６）。

画面画像取得手段２４１は、 HTMLソース１５を Webブラウザ１で表示したビットマップ画像２５を取得し、画像サイズ取得手段２４３は選択した HTML要素の表示サイズ（図６の５２）を取得する。表示サイズ５１と表示サイズ５２が異なる場合（ステップ５０７でＮＯ）、表示サイズ差計算手段２１２を用いて、表示サイズの差（表示サイズ５２−表示サイズ５１）を取得する。表示サイズ修正手段２１３を用いて、選択した HTML要素のサイズを（表示サイズ５２＋（表示サイズ５１−表示サイズ５２））のピクセル単位で指定するように HTMLソース１５を変更したHTMLソース（図６の１６）を作成する（ステップ５０８）。

次に、Webブラウザ１とWebブラウザ２で各 HTML要素内の表示文字列が一致するようにHTMLソースを補正する処理を説明する。選択した HTML要素の直下、もしくはインライン要素の下に文字列があるかどうか HTMLソース１１を確認する（ステップ５０９）。

文字列があった場合（ステップ５０９でＮＯ）、HTMLソース文字強調表示手段２２１を用いて文字列の直後に黒く表示される文字を追加し（追加する文字は■とする）、他の要素は白く表示するように HTMLソース１５もしくは HTMLソース１６を変更した HTMLソース（図７の１７）を作成する。画面画像取得手段２４１を用いて HTMLソース１７を Webブラウザ１で表示したビットマップ画像（図７の２６）を作成し、画面文字数確認手段２４４を用いてビットマップ画像２６のピクセル中に黒色のピクセルが存在するかどうか確認する。黒色のピクセルが存在しなかった場合（ステップ５１０でＮＯ）、表示文字サイズ修正手段２２２を用いて文字列の文字サイズを１つ小さい値に指定するように HTMLソース１７を変更した HTMLソース１８を作成する（ステップ５１１）。黒色のピクセルが存在するようになる（ステップ５１０でＹＥＳ）まで、ステップ５１０とステップ５１１を繰り返す。

次に、 Webブラウザ１とWeb２で表示されている文字数が同じか否かにより、HTMLソース１１内の HTML要素全てが処理し終わったかを確認し（ステップ５１２）、処理し終わった場合（ステップ５１２でＹＥＳ）は補正後の Webページの URLをクライアント１０１の使用している Webブラウザ１０に返して終了する（ステップ５２１）。全ての HTML要素について処理し終わってない場合（ステップ５１２でＮＯ）は、ステップ５０３へ戻り上記ステップ５１１までの処理を次の HTML要素について繰り返す。

以上の各補正処理の過程において、処理中の HTMLソースは処理中 HTMLソース保存メモリ１４２に保存され、補正処理のために適宜に読み出されて使用される。そして、補正終了後の HTMLソースは HTMLソース保存メモリ１４１に保存され、その位置を示す URLが Webページ_補正後ブラウザ対応テーブル１３２に登録される。以後は、Webページ_補正後ブラウザ対応テーブル１３２を参照して得られる URLにより、HTMLソース保存メモリ１４１から HTMLソースを読み出して Webページを表示する。

次に、第２の本発明のWebページレイアウト補正システムの実施の形態について説明する。

図１に示したWebページレイアウト補正システムは、Webサーバが１つ、つまり OSが１種類であることを想定している。このような形態では、クライアントの OSと Webサーバの OSが異なると、クライアントと同じ Webブラウザを Webサーバにインストールすることができないため、 HTMLソースを補正できない場合がある。そこで、第２の発明では、複数種類の OSのサーバを Webサーバとは別に用意し、そのサーバ内に複数種類の Webブラウザをインストールしておく。 Webサーバがこのサーバを操作するための手段を両サーバが持つことで、クライアントの OSと Webサーバの OSが異なる場合にも、HTMLソースを補正することができる。

図８は、異なる OSを持つ複数のサーバ１０４等を LAN回線で Webサーバ１０３に繋げた、第２の発明を実施するための最良の形態を示す。以下に、第１の発明を実施するための最良の形態と異なる構成の部分について説明する。

Webサーバ１０３は、図１におけるクライアント情報取得手段２３１に代わってクライアント情報取得手段２３２を有し、クライアント１０１から Webページの要求がきた時点で、クライアント情報取得手段２３２によりクライアント１０１の OSと Webブラウザの種類を取得する。また、Webサーバ１０３は Webブラウザとその Webブラウザを持つサーバの対応表である Webブラウザ＿サーバ対応テーブル１３３を有する。

また、Webサーバ１０３は、サーバ通信手段２５２を備えており、クライアント１０１の OSが Webサーバ１０３の OSと異なった場合に、 Webサーバ１０３はサーバ通信手段２５１を用いて、クライアント１０１と同じ OSを持つサーバ１０４に、クライアント１０１が要求している Webページの HTMLソース（図５の１１）と、クライアント１０１が使用している Webブラウザの種類を送信する。このとき、 Webブラウザ＿サーバ対応テーブル１３３を使用する。また、サーバ通信手段２５１により、クライアント１０１が使用している Webブラウザと同じ種類の Webブラウザ４で HTMLソース１１を表示したときのビットマップ画像をサーバ１０４から受け取る。

サーバ１０４はWebブラウザ群６を保有している。Webブラウザ群６には、サーバ１０４にインストールすることができる種類の Webブラウザが複数含まれる。また、サーバ１０４は Webサーバ通信手段３５１を備えている。サーバ１０４は Webサーバ通信手段３５１を用いて HTMLソースとクライアント１０１が使用している Webブラウザの種類を Webサーバ１０３から受信し、また、クライアント１０１が使用している Webブラウザと同じ種類の Webブラウザで HTMLソースを表示したときのビットマップ画像を Webサーバ１０３に送信する。なお、画面画像取得手段３４１は、第１の発明における面画像取得手段２４１と同機能である。

図９はWebブラウザ_サーバ対応テーブル１３３の内容を例示する。この対応表は OSの種類と、Webブラウザの種類と、 Webブラウザを持つサーバを列に示す。

次に、図４のフローチャートを部分的に参照して、第２の発明を実施の形態の動作について、第１の実施の形態と異なる部分を説明する。

先ず、クライアント１０１が使用している Webブラウザ１０と同じ種類の Webブラウザと、Webページのレイアウトが正しく表示される Webブラウザで Webページを表示した場合に、２つの画面のレイアウトが一致するか確認する処理を説明する。Webサーバ１０３はクライアント１０１の Webブラウザ１０からの要求を受け取ると、クライアント情報取得手段２３２を用いてクライアント１０１の OSと、使用している Webブラウザの種類を取得する（図４のステップ５００相当）。

次に、Webブラウザ＿サーバ対応テーブル１３３からクライアント１０１が使用している Webブラウザ１０と同じ種類の Webブラウザ４を持つサーバ１０４を取得する。そして、サーバ通信手段２５１を用いて、クライアント１０１が使用している Webブラウザの種類と、クライアント１０１が要求している Webページの HTMLソースをサーバ１０４に送信する。サーバ１０４は Webサーバ通信手段３５１により Webサーバ１０３からWebブラウザの種類と HTMLソースを受信する。

サーバ１０４は、Webブラウザ４で HTMLソースを表示し、画面画像取得手段３４１によりビットマップ画像３１を取得すると、Webサーバ通信手段３５１を用いてビットマップ画像（参照番号を３１とする）を Webサーバ１０３に送信する。Webサーバ１０３は、 Webページ＿ブラウザ対応テーブル１３１から取得したレイアウトが正しく表示できる Webブラウザ２で Webページを表示し、画面画像取得手段２４１によりビットマップ画像３２を取得する（ステップ５０１相当）。

Webサーバ１０３は、画像比較手段２４５を用いてビットマップ画像３１とビットマップ画像３２を比較し、全ピクセルの色に差がなければクライアント１０１の使用している Webブラウザ１０に補正前の Webページの URLを返して終了する（ステップ５０２，ステップ５２０相当）。

次に、Webブラウザ４と Webブラウザ２で各 HTML要素の表示位置が一致するように HT
MLソースを補正する処理を説明する。

Webサーバ１０３は、HTMLソース要素強調表示手段２０１を用いて HTMLソース内の HTML要素を最初から一つずつ選択し、強調表示する。ここでいう強調表示とは、補正前の HTMLソース１１を変更して、選択したHTML要素の背景色，前景色，ボーダーを全て黒に指定し、他の HTML要素は白に指定した HTMLソース（図５の１２）を作成することである。次に、画面画像取得手段２４１を用いて HTMLソース１２をWebブラウザ２で表示したビットマップ画像（図５の２３）を取得する。そして、画像位置取得手段２４２を用いて、ビットマップ画像２３の左上端から右下に順にピクセルをチェックしていき、初めて黒色のピクセルが存在した部分を選択した HTML要素の表示位置を４１（図５）とする。HTMLソース位置指定手段２０２を用いて、 HTMLソース１２を変更し、選択したHTML要素の絶対座標を表示位置４１として指定した HTMLソース１３を作成する（ステップ５０３相当）。

次に、サーバ通信手段２５１を用いて、HTMLソース１３と Webブラウザの種類をサーバ１０４に送信する。サーバ１０４は、 Webサーバ通信手段３５１により HTMLソース１３と Webブラウザの種類を受け取り、画像取得手段３４１を用いて、HTMLソース１３を Webブラウザ４で表示したビットマップ画像３４を取得し、Webサーバ通信手段３５１を用いて Webサーバ１０３に送信する。

Webサーバ１０３は、サーバ通信手段２５１によりビットマップ画像（図５の２４）をサーバ１０４から受け取る。画像位置取得手段２４２を用いて、ビットマップ画像２４から選択した HTML要素の表示位置（図５の４２）を取得する。表示位置４１と表示位置４２が異なった場合、表示位置差計算手段２０３を用いて、表示位置の差（表示位置４１−表示位置４２）を取得する。表示位置修正手段２０４を用いて、選択した HTML要素の絶対座標を（表示位置４２＋（表示位置４１−表示位置４２））として指定するように HTMLソース１３を置き換える（ステップ５０４，ステップ５０５相当）。

つまり、第１の発明におけるWebブラウザ１に代わって、Webブラウザ４が同様な役割を担うのである。各 HTML要素の表示サイズを補正する処理と、表示文字サイズが一致するように HTMLソースを補正する処理についても、同様に解されたい。前述の第１の発明における、これらの処理の説明と、上述の第２の発明における表示位置補正の説明とから詳細な動作は自明である。

本発明は、クライアントが使用する可能性のある Webブラウザの種類が複数ある場合のインターネットやイントラネット上の Webサーバに適用できる。また、開発環境下で使用し、複数の Webブラウザ向けの HTMLソースを作成する用途にも適用可能である。

第１の本発明による Webサーバの実施の形態を示すブロック図本発明における Webページ_ブラウザ対応テーブルの例を示す図本発明におけるWebページ_補正後ブラウザ対応テーブルの例を示す図第１の本発明の Webサーバの動作を示すフローチャート本発明の本発明の具体的なイメージを与える第１の模式図本発明の本発明の具体的なイメージを与える第２の模式図本発明の本発明の具体的なイメージを与える第３の模式図第２の本発明による Webページレイアウト補正システムの実施の形態を示すブロック図第２の本発明における Webブラウザ_サーバ対応テーブルの例を示す図

符号の説明

１，２，４，５ Webブラウザ
３，６ Webブラウザ群
１０ Webブラウザ
２１〜２７ビットマップ画像
１０１クライアント
１０２，１０３ Webサーバ
１０４サーバ
１３１ Webページ＿ブラウザ対応テーブル
１３２ Webページ＿補正後ブラウザ対応テーブル
１３３ Webブラウザ＿サーバ対応テーブル
１４１ HTMLソース保存メモリ
１４２処理中HTMLソース保存メモリ
２００表示位置補正手段
２０１ HTMLソース要素強調表示手段
２０２ HTMLソース位置指定手段
２０３表示位置差計算手段
２０４表示位置修正手段
２１０表示サイズ補正手段
２１１ HTMLソースサイズ指定手段
２１２表示サイズ差計算手段
２１３表示サイズ差修正手段
２２０表示文字サイズ補正手段
２２１ HTMLソース文字強調表示手段
２２２表示文字サイズ修正手段
２３１，２３２クライアント情報取得手段
２４０画像解析手段
２４１画面画像取得手段
２４２画面位置取得手段
２４３画面サイズ取得手段
２４４画面文字数確認手段
２４５画像比較手段
２５１サーバ通信手段
３４１画像解析手段
３５１ Webサーバ通信手段

Claims

クライアントと同じ OSを有する Webサーバが接続され、該 Webサーバは、
クライアントが使用する Webブラウザと同じ種類の Webブラウザ（Webブラウザ１）で要求された Webページを表示した際の表示領域のビットマップ画像から、前記 Webページの各 HTML要素の表示位置，表示サイズおよび表示文字サイズを取得する手段と、
Webページの画面レイアウトが正しく表示される Webブラウザ（Webブラウザ２）で前記 Webページを表示した際の表示領域のビットマップ画像から、前記 Webページの各 HTML要素の表示位置，表示サイズおよび表示文字サイズを取得する手段と、
前記２つの取得した表示位置，表示サイズおよび表示文字サイズをそれぞれ比較する手段と、
前記２つの取得した表示位置，表示サイズまたは表示文字サイズの何れかが異なる場合には、同じになるように前記 Webページの HTMLソースを補正する手段を有することを特徴とする Webページレイアウト補正システム。
Webサーバとそれぞれが異なる OSを有するサーバとを接続した Webページレイアウト補正システムであって、
前記 Webサーバは；
クライアントが使用する Webブラウザと同じ種類の Webブラウザ（Webブラウザ１）で要求された Webページを表示した際の表示領域のビットマップ画像から、前記 Webページの各 HTML要素の表示位置，表示サイズおよび表示文字サイズを取得する手段と、
Webページの画面レイアウトが正しく表示される Webブラウザ（Webブラウザ２）で前記 Webページを表示した際の表示領域のビットマップ画像から、前記 Webページの各 HTML要素の表示位置，表示サイズおよび表示文字サイズを取得する手段と、
前記２つの取得した表示位置，表示サイズおよび表示文字サイズをそれぞれ比較する手段と、
前記２つの取得した表示位置，表示サイズまたは表示文字サイズの何れかが異なる場合には、同じになるように前記 Webページの HTMLソースを補正する手段を有し、
前記サーバは；
クライアントの OSが前記 Webサーバの OSと異なる場合に、前記 Webサーバからクライアントが使用する Webブラウザの種類と前記 Webページの HTMLソースの送信を受けて、前記 Webブラウザ１で前記 Webページを表示した際の表示領域のビットマップ画像を取得し前記 Webサーバへ返信することを特徴とする Webページレイアウト補正システム。
前記 Webサーバは、
Webページの HTMLソースを保存する HTMLソース保存メモリと、
前記Webブラウザ１および前記Webブラウザ２を含む Webブラウザ群と、
前記クライアントの Webブラウザから Webページの表示要求を受けると、前記クライアントの OSや使用している Webブラウザの種類などの情報を取得するクライアント情報取得手段と、
前記情報により、当該 Webブラウザ１および Webブラウザ２により前記 HTMLソースを表示し、その状態のビットマップ画像から HTML要素の表示位置，表示サイズおよび表示文字サイズを取得し解析する画像解析手段と、
前記解析の結果により HTML要素の表示位置を補正する処理を行う表示位置補正手段と、
前記解析の結果により HTML要素の表示サイズを補正する処理を行う表示サイズ補正手段と、
前記解析の結果により HTML要素の表示文字サイズを補正する処理を行う表示文字サイズ補正手段と、
前記補正処理中に作成した HTMLソースを保存する処理中 HTMLソース保存メモリを有することを特徴とする請求項１または請求項２記載の Webページレイアウト補正システム。
前記画像解析手段は、
前記 HTMLソースを前記 Webブラウザ１および前記 Webブラウザ２に表示し、それぞれの表示領域のビットマップ画像を取得する画面画像取得手段と、
前記各ビットマップ画像からそれぞれの HTML要素の表示位置を取得する画像位置取得手段と、
前記各ビットマップ画像からそれぞれの HTML要素の表示サイズを取得する画像サイズ取得手段と、
前記各ビットマップ画像からそれぞれの HTML要素下の文字列が全て表示されているか確認する画面文字数確認手段と、
前記各ビットマップ画像に異なる部分がないか調べる画像比較手段を有することを特徴とする請求項３記載の Webページレイアウト補正システム。
前記表示位置補正手段は、
特定の HTML要素を黒色、その他の HTML要素を白色で表示されるように前記 HTMLソースを変更する HTMLソース要素強調表示手段と、
前記強調表示された HTML要素の位置指定方法を絶対座標での指定に変更する HTMLソース位置指定手段と、
前記 Webブラウザ１と、前記 Webブラウザ２で前記指定変更された HTMLソースを表示したときの HTML要素の表示位置の差を計算する表示位置差計算手段と、
前記 HTML要素の指定位置を前記表示位置差計算手段により算出した値で修正する表示位置修正手段を有することを特徴とする請求項３記載の Webページレイアウト補正システム。
前記表示サイズ補正手段は、
前記 HTML要素のサイズ指定方法をピクセル単位での指定に変更する HTMLソースサイズ指定手段と、
前記 Webブラウザ１と、前記 Webブラウザ２で HTMLソースを表示したときの HTML要素の表示サイズの差を計算する表示サイズ差計算手段と、
前記 HTML要素の指定サイズを前記表示サイズ差計算手段により算出した値で修正する表示サイズ修正手段を有することを特徴とする請求項３記載の Webページレイアウト補正システム。
前記表示文字サイズ補正手段は、
特定の HTML要素内の文字列が全て表示されるか確認するために文字列の直後に黒色で表示される文字を追加し、他の文字列や HTML要素は白色に表示されるように前記 HTMLソースを変更する HTMLソース文字強調表示手段と、
前記変更された HTMLソースを Webブラウザ１で表示し、前記追加した黒色の文字が表示されるまで、前記 HTML要素の指定文字サイズを小さく変更した HTMLソースを作成していく表示文字サイズ修正手段を有することを特徴とする請求項３記載の Webページレイアウト補正システム。
Webページの URLと、前記 Webブラウザ２の種類の対応を保持するテーブルと、
前記補正前後のWebページの URLと、前記 Webブラウザ２の種類の対応を保持するテーブルを備え、
前記クライアントの Webブラウザから Webページの表示要求を受けると、前記画像解析手段は前記補正の前後に応じて前記テーブルを使い分け、該当する前記 Webブラウザ２の種類を抽出して使用することを特徴とする請求項３記載の Webページレイアウト補正システム。