JP2010218523A

JP2010218523A - 画面配置変更装置、方法及びプログラム

Info

Publication number: JP2010218523A
Application number: JP2009095276A
Authority: JP
Inventors: Hirohito Komada; 博仁駒田
Original assignee: Yahoo Japan Corp
Current assignee: Yahoo Japan Corp
Priority date: 2009-03-17
Filing date: 2009-03-17
Publication date: 2010-09-30
Anticipated expiration: 2029-03-17
Also published as: JP5020278B2

Abstract

【課題】サーバに依存することなく、本来は画面配置を変更できないウェブページでもブロックごとの配置変更を可能とする。
【解決手段】ウェブページデータを、ブラウザ表示において矩形の要素群を構成する単位であるブロックに区分する区分手段１０と、各ブロック要素を単位とする表示配置の配置変更操作を受け付ける変更受付手段２０と、前記配置変更操作に応じて、前記識別ＩＤを書き換える変更内容を対象のＵＲＬと共に、クライアント端末上の所定の変更記憶手段４５に記憶させる書換保存手段４０と、ウェブブラウザＢのアクセス先ＵＲＬと対象のＵＲＬが合致する変更内容を変更記憶手段４５から読み出し、前記アクセス先ＵＲＬに対応して受信したウェブページデータに反映させる反映手段５０と、を有する。
【選択図】図１

Description

本発明は、ウェブ閲覧におけるユーザインタフェースの改良に関する。

従来、インターネットのウェブサイトについて、パーソナルコンピュータなどのクライアント端末で表示される文字列や図形などの内容や配置は、予め決定された通りにＨＴＭＬファイルなどのウェブページデータとして配信され、その並び順などの体裁は画面サイズの影響を受ける程度であった。

その後、端末側ユーザのマウス操作などで、表示文字サイズなどを変更できる例（例えば、特許文献１参照）や、ページ内の例えばニュースや天気情報といったブロックを単位に画面配置を変更できる例（例えば、非特許文献１，２参照）が提案された。

特開２００４−２１８３８号公報

ヤフー株式会社、「ＭｙＹａｈｏｏ！」、［ｏｎｌｉｎｅ］、［２００９年２月１０日検索］、インターネット〈ＵＲＬ：ｈｔｔｐ：／／ｍｙ．ｙａｈｏｏ．ｃｏ．ｊｐ／〉グーグル株式会社、「ｉＧｏｏｇｌｅ」、［ｏｎｌｉｎｅ］、［２００９年２月１０日検索］、インターネット〈ＵＲＬ：ｈｔｔｐ：／／ｗｗｗ．ｇｏｏｇｌｅ．ｃｏ．ｊｐ／ｉｇ〉

しかし、上記のような従来技術では、画面配置を変更できる対象は、本来動かせるように設計された専用のページに限定される問題があった。すなわち、配置の変更対象は、そのための専用の機能やボタン等のグラフィック要素等をＨＴＭＬなどに事前に組み込んだ特定のウェブページに限定され、前記のような専用の機能等を組み込んでいない一般のウェブページについては画面配置を変更できない限界があった。

また、従来、配置の変更内容を、以降のアクセスでも反映させるために記憶する機能はサーバ依存であり、ログインＩＤなどでユーザを識別することにより、ユーザが行った変更内容をサーバで受信し記憶しておくものであった。このため、ＩＤ等の非登録ユーザや、セキュリティポリシーなどの関係でｃｏｏｋｉｅを利用しない場合は、ブロックの配置を一旦変更しても、次回アクセス時にはその変更内容が失われ、初期状態に戻ってしまう不便があった。

本発明は、上記のような課題を解決するもので、その目的は、サーバに依存することなく、本来は画面配置を変更できないウェブページでもブロックごとの配置変更を可能とすることである。

上記の目的をふまえ、本発明の一態様は、ウェブブラウザを備えたクライアント端末であるコンピュータで実現される画面配置変更装置において、マークアップデータとスタイルシートデータを識別ＩＤで関連付けたウェブページデータを、ブラウザ表示において矩形の要素群を構成する単位であるブロックに区分する区分手段と、各ブロック要素を単位とする表示配置の配置変更操作を、前記ウェブブラウザでの画面表示を用いて所定の入力手段から受け付ける変更受付手段と、受け付けられた前記配置変更操作に応じて、前記識別ＩＤを書き換える変更内容を対象のＵＲＬと共に、クライアント端末上の所定の変更記憶手段に記憶させる書換保存手段と、前記ウェブブラウザのアクセス先ＵＲＬと対象のＵＲＬが合致する変更内容を前記変更記憶手段から読み出し、前記アクセス先ＵＲＬに対応して受信したウェブページデータに反映させる反映手段と、をコンピュータが実現したことを特徴とする。

また、上記装置に限らず、上記装置に対応する方法及びコンピュータ・プログラムもそれぞれ本発明の態様である。さらに、上記のように構成される本発明の作用及び効果、並びに本発明の他の各態様における構成、作用及び効果については、実施形態などを通じて後述する通りである。

本発明によれば、サーバに依存することなく、本来は画面配置を変更できないウェブページでもブロックごとの配置変更が可能となる。

本発明の実施形態について（以下、図面の簡単な説明において同じ）、構成を示す機能ブロック図。処理手順の概要を示すフローチャート。ウェブページデータの一例を示す概念図。図３に示したウェブページデータのＨＴＭＬをブロックごとに区分した状態を示す概念図。視覚的ブロック要素の認識によりウェブページデータをブロックに区分する場合の処理手順を示すフローチャート。ウェブページの一例を示す概念図。図６に示したウェブページの一例について、視覚的ブロック要素の認識によりブロックに区分する過程を示す概念図。視覚的ブロック要素の認識によるブロックへの区分に関するデータを例示する図。図６に示したウェブページを表示して画面配置変更操作を受け付ける画面状態を例示する図。図９の画面状態において、ブロックの位置を変更する様子を例示する図。図面配置の変更内容を表すデータを例示する図。ブロックを手動で指定している状態を示す図。変更した画面（画面配置）を共有する場合の処理手順を示すフローチャート。矩形範囲の指定を共有する場合の処理手順を示すフローチャート。変更前の画面構成の一例を示す図。変更内容を表すマスタデータを示す図。変更後の画面構成の一例を示す図。

次に、本発明を実施するための形態（「実施形態」と呼ぶ）について、図に沿って説明する。なお、背景技術や課題などで既に述べた内容と共通の前提事項については適宜省略する。

〔１．構成〕
本実施形態は、図１（構成図）に示すように、パーソナルコンピュータなどウェブブラウザＢを備えたクライアント端末であるコンピュータ（ユーザＰＣ）上に実現する画面配置変更装置（以下「本装置」と呼ぶ）１に関するものであるが、本発明は、本装置１に対応する情報処理方法やコンピュータ・プログラムとしても把握可能である。

本装置１は、図１に示すように、一般的なコンピュータの構成として、少なくとも、ＣＰＵなどの演算制御部５と、外部記憶装置（ＨＤＤ等）や主メモリ等の記憶装置６と、インターネットや携帯電話網に代表される通信ネットワークＮとの通信手段７（ＬＡＮアダプタなど）と、を有し、記憶装置６に予め記憶（インストール）した所定のコンピュータ・プログラムが演算制御部５を制御することで、図１に示す各手段などの要素（１０〜９２など）を実現する。ここで、前記プログラムについては、図示はしないが、プログラムのダウンロード配信やブックマークレット、Ｆｉｒｅｆｏｘのグリースモンキー（ｇｒｅｅｃｅｍｏｎｋｅｙ）のようなブラウザ拡張機能など、任意の態様で実現してよい。

また、前記各要素（１０〜９２など）のうち、情報を記憶する手段は、記憶装置６においてファイルや各種データベース（「ＤＢ」とも表す）、配列等の変数、システム設定値など任意の形式で実現し、また、その他の情報処理を行う各要素は、以下のような各機能や処理を実現・実行する処理手段である。

〔２．作用〕
上記のように構成した本装置１における処理手順を、図２のフローチャートに沿って説明する。なお、本出願においてステップ番号その他の符号は、要素の識別のためで、処理の順序とは無関係である。

まず、ウェブブラウザＢが、アクセス先ＵＲＬのウェブページデータをウェブサーバ２から受信し（ステップＳ０５）、画面に表示する（ステップＳ０７）。ここで、ウェブページデータは、マークアップデータとスタイルシートデータを識別ＩＤで関連付けたもので、このうち、マークアップデータは、文書の論理構造を記述するＨＴＭＬ（ＨｙｐｅｒＴｅｘｔＭａｒｋｕｐＬａｎｇｕａｇｅ）などのマークアップ言語で記述されたファイル又はその部分であり、以下、単に「ＨＴＭＬ」とも呼ぶ。また、スタイルシートデータは、文書の視覚的デザインを制御するもので、ＣＳＳ（ＣａｓｃａｄｉｎｇＳｔｙｌｅＳｈｅｅｔｓ）に代表され、前記マークアップデータの一部又は独立した別ファイルであり、以下、単に「ＣＳＳ」とも呼ぶ。ここで、ウェブページデータの一例を図３に示す。

すなわち、この例では、ＨＴＭＬ内のブロック要素ごとに付された識別用ＩＤ（図３に示す「Ａ１」「Ａ２」など）をもとに、ＣＳＳでウェブページ上で表示する位置や体裁など記述してウェブページのデザインを整形、制御しており、受信時点のＨＴＭＬ及びＣＳＳの記述内容が初期状態として表示画面Ｄに画面表示される。画面表示された任意のウェブページの画面表示構成を変更するには、所定の操作により本装置１の機能を呼び出せばよい。

〔２−１．ブロック要素への区分〕
すなわち、本装置１では、区分手段１０（図１）が、与えられたウェブページデータのＨＴＭＬを、ブラウザ表示において矩形の要素群を構成する単位であるブロックすなわちブロック要素に区分する（図２のステップＳ１０。区分処理）。

ブロック要素への区分は、第一には、所定のタグ（〈ｄｉｖ〉など）を検出することにより行う。ブロック要素は、ブラウザ表示で矩形の要素群を構成する記述単位で、ブロック要素として定義されているタグ（Ｐ，Ｈ１，Ｈ２，Ｈ３，Ｈ４，Ｈ５，Ｈ６，ＵＬ，ＯＬ，ＤＩＲ，ＭＥＮＵ，ＰＲＥ，ＸＭＰ，ＬＩＳＴＩＮＧ，ＤＬ，ＤＩＶ，ＣＥＮＴＥＲ，ＮＯＳＣＲＩＰＴ，ＮＯＦＲＡＭＥＳ，ＢＬＯＣＫＱＵＯＴＥ，ＦＯＲＭ，ＩＳＩＮＤＥＸ，ＨＲ，ＴＡＢＬＥ，ＦＩＥＬＤＳＥＴ，ＡＤＤＲＥＳＳ）を判別することでＨＴＭＬ記述をブロック要素へ区分できる。図４は、図３に示したＨＴＭＬをこのようにブロックに区分した状態を例示するもので、破線の矩形で囲んだ各範囲がブロック要素である。

〔２−２．視覚的ブロック要素の認識〕
なお、ブロック要素として定義されている上記のようなタグが、ページ上の視覚的ブロック要素と必ず対応するかは、ウェブページの作り方によるので、タグ検出状態に応じて自動的に又は所定の要求操作に応じ、視覚的ブロック要素を認識させることも可能である。

この場合の処理手順を図５のフローチャートに示す。この場合、区分手段１０では、タグ要素検出手段１１（図１）が、マークアップデータすなわちＨＴＭＬ内から、ブロック要素として定義されている所定のタグで記述されているブロックタグ要素を検出し（図５のステップＳ１１。タグ要素検出処理）、このように検出された前記各ブロックタグ要素について、座標算出手段１２（図１）が、ウェブページの表示領域（表示ウィンドウなど）におけるＸ軸方向の各絶対座標を算出する（図５のステップＳ１２。座標算出処理）。

ここで、各要素についてページ上の絶対座標を取得する手法は自由であるが、一例として、対象要素のＤＯＭ（ドキュメント・オブジェクト・モデル）上の親要素からのオフセット値（すなわち、サイズのデータ）を取得し、このオフセット値を収集しながらＨＴＭＬ要素まで親要素を辿って行き、全てのオフセット値を足し合わせると、対象要素のページ上の座標を計算することができる。

ここで、オフセット値は、Ｘ軸方向（幅）及びＹ軸方向（高さ）に関するブロック要素のサイズであり、各対象要素について、ｏｆｆｓｅｔＨｅｉｇｈｔ関数、ｏｆｆｓｅｔＷｉｄｔｈ関数を、
「
ｖａｒｈｅｉｇｈ＝対象要素オブジェクト．ｏｆｆｓｅｔＨｅｉｇｈｔ；
ｖａｒｗｉｄｔｈ＝対象要素オブジェクト．ｏｆｆｓｅｔＷｉｄｔｈ；
」
のように用いて取得可能である。

なお、上記のようにＤＯＭなどから対象要素のページ上の座標を計算する手法について、実際には近似値の取得が一般的であるが、具体的実装例として、ｊＱｕｅｒｙ（ｈｔｔｐ：／／ｊｑｕｅｒｙ．ｃｏｍ／）などのライブラリの機能を利用して取得することも可能である。

そして、基準軸取得手段１３（図１）は、上記のように算出された前記各絶対座標のうち所定以上の頻出度をもつ各座標を各基準軸座標として取得する（図５のステップＳ１３。基準軸取得処理）。例えば、図６に例示するウェブページは、破線で示す要素ａ１〜ａ９，ｂ１〜ｂ５，ｃ１〜ｃ８を含み、このウェブページからは、図７に例示するように、各基準軸座標Ｘａ，Ｘｂ，Ｘｃを取得する。

そして、座標区分手段１４（図１）が、前記のように取得された前記各基準軸座標と、算出された前記各絶対座標が一致（完全一致に限らず、所定の許容誤差までは一致とみなしてもよい）する各ブロックタグ要素群を、それぞれブロックの全部又は一部として区分する（図５のステップＳ１４。座標区分処理）。

すなわち、このように得たＸ座標を持つブロック要素に対して、それぞれのＹ座標を求め、識別ＩＤや枠線など所定要素を基準に、またはＹ座標同士の間隔が大きく開いた部分（例えば、図７の例では、軸Ｙｃ２２とＹｃ３１の間、軸Ｙｃ６２とＹｃ７１の間）などを境界として、Ｙ方向にも複数のブロックに区分すれば、ＸＹ方向に矩形が順列した各ブロックを特定可能となる。例えば、基準軸座標Ｘｃと軸Ｙｃ１１及びＹｃ２２で囲んだブロックは、要素ｃ１とｃ２を含んだ一つのブロックであり、基準軸座標Ｘｃと軸Ｙｃ３１及びＹｃ６２で区分されるブロックは、要素ｃ３〜ｃ６を囲んだ一つのブロックである。

図８は、上記のような視覚的ブロック要素の認識を行う処理に用いるワークエリアのデータ構成例であり、各要素すなわちウェブページを構成するオブジェクトごとに、要素ＩＤ、上記のように取得されたＸ軸方向の絶対（Ｘ座標。「６５０」など）、Ｙ座標（「５０」「１００」など）、前記オフセット値であるＸ幅（「２５０」「１５０」など）及びＹ高さ（「５０」など）と、それらをもとに区分されたブロックの番号（「５」「６」など）と、を含んでいる。

このように、マークアップデータ（ＨＴＭＬ）内の各要素の頻出座標を、該当ページで視覚デザイン上の区分線等となる基準座標軸とし、その座標との一致をもとに要素群をブロックに区分する構成と処理については、これにより、ウェブページの多様な構成手法に柔軟に対応しつつブロックを容易に検出可能となる利点があるが、必ずしも必須ではないので省略も可能である。

〔２−３．配置変更操作の受付〕
そして、変更受付手段２０（図１）が、各ブロック要素を単位とする表示配置（表示の列や上下位置）の配置変更操作を、ウェブブラウザＢでの画面表示を用いて所定の入力手段から受け付ける（図２のステップＳ２０。変更受付処理）。ここで、「入力手段」は、典型的には、マウスやキーボードなどの入力装置Ｍであるが、タッチスクリーンや音声認識などでもよい。

また、変更操作の要領は自由であるが、例えば、図９は、配置変更操作を受け付けるモードにおけるウェブページの表示例であり、このウェブページは、実線の矩形で示すブロックＡ１〜Ｃ３を含んでいる。このウェブページにおいて、図１０に例示するように、例えばブロックＢ２の枠をマウスカーソルＭＣでポイントしながらマウスボタンをクリックすると、そのブロックと同じ形状の可動枠（図１０において破線の矩形で示す）Ｆが現れ、マウスボタンを押しながらその可動枠Ｆをドラッグして任意の他のブロック（例えばブロックＢ１）上にドロップ（離す）すれば、ブロックＢ１とＢ２の位置の入れ替えを指示したこととなる。

〔２−４．識別ＩＤ変更内容の保存と反映〕
続いて、書換保存手段４０（図１）が、受け付けられた前記配置変更操作に応じて、ＨＴＭＬ内の前記識別ＩＤを書き換える変更内容を対象のＵＲＬと共に、クライアント端末である本装置１上の所定の変更記憶手段４５（図１。典型的にはｃｏｏｋｉｅ）に記憶させる（図２のステップＳ３０。書換保存処理）。ここで、記憶内容の表現形式は自由であるが、一例として、図１１に例示するように、ウェブページデータ内の各識別情報を、他のどの識別情報と置き換えたかのデータなどが考えられる。

上記のように記憶された変更内容は、直ちに、及び同じページへの次回以降のアクセス時に反映される。すなわち、変更操作直後は、反映手段５０（図１）が、ウェブブラウザのアクセス先ＵＲＬに対応する変更内容、すなわちアクセス先ＵＲＬと対象のＵＲＬが合致する変更内容を前記変更記憶手段４５から検索した際、記憶させたばかりの変更内容が該当してヒットするので（図２のステップＳ０６）それを読み出して、そのアクセス先ＵＲＬに対応して受信したウェブページデータにＨＴＭＬ内の識別ＩＤを書換えることで反映させ（ステップＳ５０。反映処理）、反映後のウェブページデータを基にウェブブラウザＢが画面を表示することで（ステップＳ０７）画面表示にも反映される。

ここで、ＣＳＳでの整形に用いているＨＴＭＬ内の識別ＩＤの書き換えは、例えば、
「
対象オブジェクト．ｉｄ＝変更したいＩＤ
ｅｘ）ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ（′変更前ＩＤ′）．ｉｄ＝′変更後ＩＤ′；
」
のようなスクリプト記述により実現可能である。また、実装態様によっては、ＣＳＳ側の識別ＩＤを書き換えるようにしてもよい。

〔２−５．次回以降の反映〕
次回以降のアクセスについては、ウェブブラウザＢがウェブサイトにアクセスしてページリクエストを送信しウェブページデータを受信したうえで（図２のステップＳ０５）、上記と同様に、反映手段５０（図１）が、ウェブブラウザのアクセス先ＵＲＬと対象のＵＲＬが合致する変更内容を前記変更記憶手段４５から検索し、存在する場合は（図２のステップＳ０６）それを読み出して、そのアクセス先ＵＲＬに対応して受信したウェブページデータに反映させる（ステップＳ５０。反映処理）ことにより、過去に行われた変更操作の結果を表示に反映させる（ステップＳ０７）。

〔２−６．基本的効果〕
以上のように、本実施形態によれば、クライアント端末側において、ブロックへの区分、変更操作の受付とそれに基づく識別ＩＤの書換え、変更の記憶と以降の反映の構成や処理を実現することにより、サーバに依存することなく、本来は画面配置を変更できないウェブページでもブロックごとの配置変更が可能となる。

〔２−７．手動によるブロックの指定〕
また、区分手段１０（図１）による区分が困難又は適切でない場合、自動で又はユーザからの所定の要求操作により、手動によるブロックの指定を受け付ける。この場合、まず、範囲受付手段６０（図１）が、前記ウェブページデータに基づくウェブブラウザＢでの表示画面について、ブロックとして扱うべき矩形範囲の指定を入力装置Ｍから受け付ける（図２のステップＳ６０。範囲受付処理）。

このとき、ユーザがクリックした座標は、マウスクリックイベントを補足するようにしておき、
「
ｆｕｎｃｔｉｏｎｐｏｓ（ｅｖｅｎｔ）｛
ｉｆ（！ｅｖｅｎｔ）ｖａｒｅｖｅｎｔ＝ｗｉｎｄｏｗ．ｅｖｅｎｔ；
ｉｆ（！ｅｖｅｎｔ．ｐａｇｅＸ）ｅｖｅｎｔ．ｐａｇｅＸ＝ｅｖｅｎｔ．ｃｌｉｅｎｔＸ＋ｄｏｃｕｍｅｎｔ．ｂｏｄｙ．ｓｃｒｏｌｌＬｅｆｔ；
ｉｆ（！ｅｖｅｎｔ．ｐａｇｅＹ）ｅｖｅｎｔ．ｐａｇｅＹ＝ｅｖｅｎｔ．ｃｌｉｅｎｔＹ＋ｄｏｃｕｍｅｎｔ．ｂｏｄｙ．ｓｃｒｏｌｌＴｏｐ；
ｖａｒｘ＝ｅｖｅｎｔ．ｐａｇｅＸ；
ｖａｒｙ＝ｅｖｅｎｔ．ｐａｇｅＹ；
｝
」
のようなスクリプト記述等で取得することができる。これを用いて、ユーザーがマウスボタンを押した場所（ｏｎｍｏｕｓｅｄｏｗｎ）と、マウスボタンを離した場所（ｏｎｍｏｕｓｅｕｐ）とを取得し、選択範囲の座標を求める事が出来る。

そして、要素区分手段７０（図１）が、ウェブページデータを構成するマークアップデータ（ＨＴＭＬ）内の各表示要素について、各表示要素の表示画面上における位置及びサイズの情報を取得しそれに基づいて、受け付けた前記矩形範囲に含まれる要素群に分けることで前記ブロックに区分する（図２のステップＳ７０。要素区分処理）。この際は、各要素ごとに、前記視覚的ブロック要素の認識で示したような計算で求めた座標と、前記ｏｆｆｓｅｔＨｅｉｇｈｔ関数、ｏｆｆｓｅｔＷｉｄｔｈ関数で取得したサイズのデータを元に、存在する座標範囲を個々に特定することで、前記各矩形範囲に入る要素群ごとに区分する。

例えば、図１２の例では、細い破線の矩形で示す要素ａ１〜ｃ８を含むウェブページ上で、マウスポインタ（マウスカーソル）Ｐにより、太い破線の矩形で示す範囲Ｒ１を指定した場合、この範囲Ｒに含まれる要素ｃ３〜ｃ６が一つのブロックとなり、同様に、他の部分と要素についても所望の範囲を指定することでブロックにまとめることができる。

このように、画面上でブロックの指定を受け付けて、各範囲に含まれる要素ごとに区分する構成と処理については、これにより、ウェブページの構成手法などの関係でブロック要素とデザインが一致しにくいページに対しても、ユーザの意図に沿った配置変更を確実に適用可能となる効果があるが、必ずしも必須ではないので省略も可能である。

〔２−８．画面配置の共有〕
また、変更した画面配置を、複数の本装置間で共有することも可能であり、この場合の処理手順を図１３のフローチャートに示す。すなわち、各装置が送信手段８０及び受信手段８２を備え（図１）、送信側となる装置では、画面配置を送信するユーザからの指示により（図１３のステップＳ７９）、送信手段８０（図１）が、変更記憶手段４５に記憶されている前記変更内容及び対象のＵＲＬを直接又はサーバを介して他の装置（共有相手のＰＣなどのクライアント端末）に送信する（図１３のステップＳ８０。送信処理）。

送信先となった装置では、受信手段８２（図１）が、そのような変更内容及び対象のＵＲＬが他の装置から送られてくると（図１３のステップＳ８１）それを受信して変更記憶手段４５に記憶させる（ステップＳ８２。受信処理）。そして、このように他の装置から受信して変更記憶手段４５に追加した共有分の変更内容については、ユーザによる設定や指示に応じて、対象のＵＲＬのページへの次回以降のアクセス時に反映する。

この反映を実現するために、図２に示すように、ウェブブラウザＢがウェブページデータを受信した際（ステップＳ０５）、反映手段５０（図１）が、ウェブブラウザのアクセス先ＵＲＬと対象のＵＲＬが合致する変更内容を前記変更記憶手段４５から検索して該当するものがあれば（ステップＳ０６）読み出し、前記アクセス先ＵＲＬに対応して受信したウェブページデータに反映させる（ステップＳ５０。反映処理）。

このように、クライアント端末間で変更内容を対象のＵＲＬと共に送受信して共有する構成と処理については、これにより、各ブロックのわかりやすいレイアウトや、関心などの優先順位を容易に共有することが可能となり、ユーザ間の情報共有や作業の効率化が図れる効果があるが、必ずしも必須ではないので省略も可能である。

〔２−９．矩形範囲等の共有〕
また、変更後の画面配置ではなく、ユーザ指定によるブロックへの区分の基準である矩形範囲のみをユーザ間で共有することも可能であり、この場合の処理手順を図１４のフローチャートに示す。すなわち、各装置が範囲送信手段９０及び範囲受信手段９２（図１）を備え、送信側となる装置では、矩形範囲を送信するユーザからの指示により（図１４のステップＳ８９）、範囲送信手段９０（図１）が、範囲受付手段６０により受け付けられた各矩形範囲の指定（例えば座標範囲）又は要素区分手段７０により区分された前記ブロック（例えば、ＨＴＭＬをブロックに区分する位置や区分されたブロック自体など）を、対象のＵＲＬとともに他の装置（共有相手のＰＣなどのクライアント端末）に送信する（図１４のステップＳ９０。範囲送信処理）。

一方、送信先となった装置では、範囲受信手段９２（図１）が、各矩形範囲の指定又は区分された前記ブロックが対象のＵＲＬとともに他のクライアント端末から送られてくると（ステップＳ９１）それを受信する（図１４のステップＳ９２。範囲受信処理）。そして、このように他の装置から受信した各矩形範囲の指定については、図２に示したのと同様に、要素区分手段７０（図１）が、該当するマークアップデータ内の各表示要素ブロックに区分する基準として用いる（ステップＳ７０。要素区分処理）。また、他の装置から受信したのがブロックの場合は、それに基づいて配置変更操作の受付（図２のステップＳ２０）以降の処理を行う。

このように、クライアント端末間で矩形範囲の指定の仕方を対象のＵＲＬと共に送受信して共有する構成と処理については、これにより、多数の表示要素のわかりやすいブロックへの別け方などを容易に共有することが可能となり、画面配置変更作業の効率化が図れる効果があるが、必ずしも必須ではないので省略も可能である。

〔３．他の実施形態〕
なお、上記実施形態は例示に過ぎず、本発明は、以下に例示するものやそれ以外の他の実施態様も含むものである。例えば、各構成図、データの図、フローチャート、概念図、画面例の図などは例示に過ぎず、各要素の有無、その順序や具体的内容などは適宜変更可能である。一例として、手動によるブロックの指定は必須ではなく、また、本発明において、各手段などの要素は、コンピュータの演算制御部に限らず、ワイヤードロジック等に基づく電子回路で実現してもよい。

また、上記実施形態では、識別ＩＤを書き換える変更内容をｃｏｏｋｉｅなどの変更保存手段に記憶させたが、各ＩＤごとに具体的な座標値を記憶するようにすれば、各ブロックの配置位置の自由度が高まる。ＩＤに対応するブロックごとに具体的な座標値を記録しておく一例としては、
「
ｉｄ＿１：｛ｔｏｐ：○○ｐｘ，ｌｅｆｔ：○○ｐｘ｝
」
のように、要素のＩＤ（例えば「ｉｄ＿１」）ごとに座標値（ｔｏｐ，ｌｅｆｔ）を対応付けるデータ（要素の幅ｗｉｄｔｈ、高さｈｉｇｈｔを含めてもよい）を単位とし、それらをブロック要素数分複数保持したマスタデータを構成し、このマスタデータを保存し適用することにより画面配置を変更（カスタマイズ）した画面構成内容を次回閲覧時にも再現適用する。

実際には、上記のようなデータ形式にＤＯＭＳｃｒｉｐｔｉｎｇで言う対象要素への参照データ等を付加したもの等を用いる。なお、上記「ｔｏｐ」は、表示領域上端から下方に向かって値が増加するＹ座標であり、上記「ｌｅｆｔ」は、表示領域左端から右方向に向かって値が増加するＸ座標である。

ここで、上記のようなマスタデータを用いた画面構成変更の一例を示す。なお、上述の座標値の記述例では幅「ｔｏｐ」のように小文字を用いたが、大文字小文字の別はシステム仕様等によるので、ここでは差異がないものとし、以下の例では適宜大文字を用いる。まず、変更前の画面構成は、図１５に示すように、各ブロックＡ１，Ａ２，Ｂ１，Ｂ２…Ｃ３を含み、この画面構成における各ブロックの位置とサイズを図１６（１）に示すマスタデータが表しているとする。

例えば、ブロックＡ１については、図１５及び図１６（１）に示すように、左上隅始点のＹ座標（ＴＯＰ）が０ピクセル（以下「ｐｘ」と表す）、Ｘ座標（ＬＥＦＴ）が１００ｐｘ、高さ（ＨＥＩＧＨＴ）が２００ｐｘ、幅（ＷＩＤＴＨ）が１５０ｐｘである。このような図１５の状態に対し、ブロックＢ１（図１５において散点及び楕円で示す）をブロックＣ１の上に挿入する画面変更を行うと、変更後の画面は図１７に示す状態となり、この状態では、図１６（２）に下線で示すように、挿入されたブロックＢ１の高さ分１７０ｐｘずつ、ブロックＣ１〜Ｃ３のＹ座標（ＴＯＰ）が変更となる。

なお、変更前（図１５）は幅３００ｐｘの中央の列に位置していたブロックＢ１を、その右隣の幅２２０ｐｘの列に移動したように、移動前後で列の幅が変わる場合は、幅（ｗｉｄｔｈ）が変わった分、文字列などのコンテンツを新しい幅にちょうど収める表示にレイアウトされるため、高さ（ｈｅｉｇｈｔ）が増える場合もある。

そして、以上のように変更した変更の差分又は変更後のマスタデータを、変更内容として記憶しておき、次回閲覧時にも適用する。変更内容をその場で及び次回閲覧時にＣＳＳに適用するには、一例として、
「
Ｂ２．ＳＴＹＬＥ．ＴＯＰ＝′０ｐｘ′；
Ｂ１．ＳＴＹＬＥ．ＬＥＦＴ＝′５５０ｐｘ′；
Ｂ１．ＳＴＹＬＥ．ＷＩＤＴＨ＝′２２０ｐｘ′；
Ｃ１．ＳＴＹＬＥ．ＴＯＰ＝′１７０ｐｘ′；
Ｃ２．ＳＴＹＬＥ．ＴＯＰ＝′２７０ｐｘ′；
Ｃ３．ＳＴＹＬＥ．ＴＯＰ＝′４００ｐｘ′；
」
のようなスクリプト記述等のプログラム表現を用いることができる。

一方、変更のないブロックＡ１，Ａ２等の部分について上記と同様に表現すれば、
「
Ａ１．ＳＴＹＬＥ．ＴＯＰ＝′０ｐｘ′；
Ａ１．ＳＴＹＬＥ．ＬＥＦＴ＝′１００ｐｘ′；
Ａ１．ＳＴＹＬＥ．ＨＥＩＧＨＴ＝′２００ｐｘ′；
Ａ１．ＳＴＹＬＥ．ＷＩＤＴＨ＝′１５０ｐｘ′；
Ａ２．ＳＴＹＬＥ．ＴＯＰ＝′２００ｐｘ′；
Ａ２．ＳＴＹＬＥ．ＬＥＦＴ＝′１００ｐｘ′；
」
のようになるが、これら部分は配置変更の前後で変化がないこととなる。

Ｎ通信ネットワーク
１画面配置変更装置（本装置）
２サーバ
５演算制御部
６記憶装置
７通信手段
１０区分手段
１５ページ記憶手段
２０変更受付手段
４０書換保存手段
４５変更記憶手段
５０反映手段

Claims

ウェブブラウザを備えたクライアント端末であるコンピュータが実現する画面配置変更装置において、
マークアップデータとスタイルシートデータを識別ＩＤで関連付けたウェブページデータを、ブラウザ表示において矩形の要素群を構成する単位であるブロックに区分する区分手段と、
各ブロック要素を単位とする表示配置の配置変更操作を、前記ウェブブラウザでの画面表示を用いて所定の入力手段から受け付ける変更受付手段と、
受け付けられた前記配置変更操作に応じて、前記識別ＩＤを書き換える変更内容を対象のＵＲＬと共に、クライアント端末上の所定の変更記憶手段に記憶させる書換保存手段と、
前記ウェブブラウザのアクセス先ＵＲＬと対象のＵＲＬが合致する変更内容を前記変更記憶手段から読み出し、前記アクセス先ＵＲＬに対応して受信したウェブページデータに反映させる反映手段と、
をコンピュータが実現することを特徴とする画面配置変更装置。
前記区分手段は、
前記マークアップデータ内から、ブロック要素として定義されている所定のタグで記述されているブロックタグ要素を検出するタグ要素検出手段と、
検出された前記各ブロックタグ要素について、ウェブページの表示領域におけるＸ軸方向の各絶対座標を算出する座標算出手段と、
算出された前記各絶対座標のうち所定以上の頻出度をもつ各座標を各基準軸座標として取得する基準軸取得手段と、
取得された前記各基準軸座標と、算出された前記各絶対座標が一致する各ブロックタグ要素群を、それぞれブロックの全部又は一部として区分する座標区分手段と、
を有することを特徴とする請求項１記載の画面配置変更装置。
前記ウェブページデータに基づく前記ウェブブラウザでの表示画面について、前記ブロックとして扱うべき各矩形範囲の指定を前記入力手段から受け付ける範囲受付手段と、
前記ウェブページデータを構成するマークアップデータ内の各表示要素について、各表示要素の前記表示画面上における位置及びサイズの情報を取得しそれに基づいて、受け付けた前記各矩形範囲に含まれる要素群に分けることで前記ブロックに区分する要素区分手段と、
を前記コンピュータが実現したことを特徴とする請求項１又は２記載の画面配置変更装置。
前記変更記憶手段に記憶されている前記変更内容及び対象のＵＲＬを他のクライアント端末に送信する送信手段と、
前記変更内容及び対象のＵＲＬを他のクライアント端末から受信して前記変更記憶手段に記憶させる受信手段と、
をコンピュータが実現したことを特徴とする請求項１から３のいずれか一項に記載の画面配置変更装置。
前記範囲受付手段により受け付けられた各矩形範囲の指定又は前記要素区分手段により区分された前記ブロックを対象のＵＲＬとともに他のクライアント端末に送信する範囲送信手段と、
各矩形範囲の指定又は区分された前記ブロックを対象のＵＲＬとともに他のクライアント端末から受信する範囲受信手段と、
をコンピュータが実現したことを特徴とする請求項２から４のいずれか一項に記載の画面配置変更装置。
ウェブブラウザを備えたクライアント端末であるコンピュータが実現する画面配置変更方法において、
マークアップデータとスタイルシートデータを識別ＩＤで関連付けたウェブページデータを、ブラウザ表示において矩形の要素群を構成する単位であるブロックに区分する区分処理と、
各ブロック要素を単位とする表示配置の配置変更操作を、前記ウェブブラウザでの画面表示を用いて所定の入力手段から受け付ける変更受付処理と、
受け付けられた前記配置変更操作に応じて、前記識別ＩＤを書き換える変更内容を対象のＵＲＬと共に、クライアント端末上の所定の変更記憶手段に記憶させる書換保存処理と、
前記ウェブブラウザのアクセス先ＵＲＬと対象のＵＲＬが合致する変更内容を前記変更記憶手段から読み出し、前記アクセス先ＵＲＬに対応して受信したウェブページデータに反映させる反映処理と、
をコンピュータが実現することを特徴とする画面配置変更方法。
ウェブブラウザを備えたクライアント端末であるコンピュータを制御する画面配置変更プログラムにおいて、
そのプログラムはコンピュータを制御することにより、
マークアップデータとスタイルシートデータを識別ＩＤで関連付けたウェブページデータを、ブラウザ表示において矩形の要素群を構成する単位であるブロックに区分させ、
各ブロック要素を単位とする表示配置の配置変更操作を、前記ウェブブラウザでの画面表示を用いて所定の入力手段から受け付けさせ、
受け付けられた前記配置変更操作に応じて、前記識別ＩＤを書き換える変更内容を対象のＵＲＬと共に、クライアント端末上の所定の変更記憶手段に記憶させ、
前記ウェブブラウザのアクセス先ＵＲＬと対象のＵＲＬが合致する変更内容を前記変更記憶手段から読み出すと共に、前記アクセス先ＵＲＬに対応して受信したウェブページデータに反映させる
ことを特徴とする画面配置変更プログラム。