JP2012181693A

JP2012181693A - ウェブページ表示制御装置およびスクロール制御方法

Info

Publication number: JP2012181693A
Application number: JP2011044389A
Authority: JP
Inventors: Shinji Otake; 信二大竹
Original assignee: JVCKenwood Corp
Current assignee: JVCKenwood Corp
Priority date: 2011-03-01
Filing date: 2011-03-01
Publication date: 2012-09-20

Abstract

【課題】携帯端末等におけるウェブブラウザの操作方法を改善する。
【解決手段】ハイパーリンク抽出部１０４は、ウェブページを構成する文書ファイルからハイパーリンクの設定されたオブジェクトを抽出し、抽出されたオブジェクトのウェブページ上での配置に関する情報をオブジェクト格納部１１６に格納する。フォーカス制御部１１４は、ユーザによる操作入力に応じて、ウェブページ上で次にフォーカス表示すべきオブジェクトを選択する。距離算出部１２２は、現在フォーカスが置かれたオブジェクトと次のフォーカス対象とされたオブジェクトとの画像上での距離を算出する。スクロール制御部１２４は、算出された距離とスクロール方向の幅とを比較し、距離がスクロール方向の幅以下である場合、次のフォーカス対象を含むように表示範囲を設定し、距離がスクロール方向の幅を上回る場合、スクロール方向の幅以下の所定量だけ移動した表示範囲を設定する。
【選択図】図４

Description

本発明は、ウェブページの操作性を向上させる技術に関する。

ウェブページを閲覧するためのブラウザは、パーソナルコンピュータ（ＰＣ）のみならず、携帯電話、ゲーム機、デジタルテレビなどの様々な電子機器に搭載されている。ウェブページの多くは、マウス等の、ポインタを任意の位置に移動できる入力デバイスが接続されたＰＣを用いて閲覧されることが前提となっている。そのため、携帯電話やデジタルテレビなどのＰＣ以外の電子機器でウェブページを閲覧する場合、電子機器やそのリモートコントローラに設けられたボタンだけではウェブページに対する操作がうまくいかないことがある。そのため、従来のブラウザには、カーソルキーなどの特定のキー操作に応じて、ハイパーリンクが設定されたオブジェクトに順次フォーカスを移動させる機能（以下、「順次フォーカス機能」と呼ぶことがある）が備えられている。

また、特許文献１には、移動キーの操作に応じてアンカーポイントに対するフォーカスを順次移動させていく表示制御装置において、フォーカスをスキップする属性が付加されたアンカーポイントについては、フォーカスを行うことなくスキップするようにした表示制御方法が開示されている。これによると、特定のアンカーポイントを迅速に選択することが可能になる。

特開平１０−２９３７６７公報

しかしながら、上述のように、キー操作によりハイパーリンクまたはアンカーポイント間を移動してウェブページを閲覧すると、レイアウトによってはウェブページの一部を閲覧することができない場合がある。具体的には、あるハイパーリンクまたはアンカーポイントの後に、ディスプレイのスクロール方向の表示幅を越える長文のテキストや大きな画像等がレイアウトされている場合、次のハイパーリンクまたはアンカーポイントに移動したとき、そのテキストまたは画像の一部が表示されずに画面がスクロールされてしまうという問題がある。

本発明はこうした状況に鑑みてなされたものであり、その目的は、順次フォーカス機能を備えるブラウザにおいて、特定のキー操作によってウェブページをディスプレイにスクロール表示させる場合に、ハイパーリンク間のコンテンツをスキップすることなく表示させる技術を提供することにある。

本発明のある態様は、ウェブページ表示制御装置である。この装置は、ウェブページをレンダリングしてディスプレイに画像として表示させるウェブページ表示制御装置において、ウェブページを構成する文書ファイルからハイパーリンクの設定されたオブジェクトを抽出するハイパーリンク抽出部と、ハイパーリンク抽出部によって抽出されたオブジェクトのウェブページ上での配置に関する情報を少なくとも含むオブジェクト情報を格納するオブジェクト格納部と、ユーザによる操作入力に応じて、ウェブページ上で次にフォーカス表示すべきオブジェクトを選択するフォーカス制御部と、現在フォーカスの置かれているオブジェクトと、次にフォーカスすべきオブジェクトとの画像上での距離を算出する距離算出部と、距離算出部により算出されたオブジェクト間距離と出力先のスクロール方向の表示幅とを比較し、オブジェクト間距離がスクロール方向の表示幅以下である場合、次のフォーカス対象を含むように表示範囲を設定し、オブジェクト間距離がスクロール方向の表示幅を上回る場合、該スクロール方向の表示幅以下の所定量だけ移動した表示範囲を設定するスクロール制御部と、文書ファイルに基づきウェブページをレンダリングし、スクロール制御部によって設定された表示範囲を切り出してディスプレイに表示させるレンダリング部と、を備える。

この態様によると、ハイパーリンクの設定されたオブジェクト間の移動を指示する特定のキー入力があった場合に、現在フォーカスの置かれているオブジェクトと次にフォーカスすべきオブジェクトとの間の距離を算出し、算出された距離に応じて、通常のオブジェクト間のフォーカス移動または所定量の画面スクロールのいずれかが選択される。これによって、ハイパーリンクの設定されたオブジェクト間の距離が、ディスプレイのスクロール方向の表示幅よりも離れている場合でも、オブジェクト間にレイアウトされているコンテンツをスキップすることなく閲覧することが可能になる。
なお、「文書ファイル」とは、マークアップ言語で記述されたＨＴＭＬファイルやＸＭＬファイルなどを含む。

本発明の別の態様は、ウェブページをレンダリングしてディスプレイに画像として表示させるウェブページ表示制御装置におけるスクロール制御方法である。この方法は、ウェブページを構成する文書ファイルからハイパーリンクの設定されたオブジェクトを抽出し、ハイパーリンク抽出部によって抽出されたオブジェクトのウェブページ上での配置に関する情報を少なくとも含むオブジェクト情報をメモリに格納し、ユーザによる操作入力に応じて、ウェブページ上で次にフォーカス表示すべきオブジェクトを選択し、現在フォーカスが置かれているオブジェクトと、次にフォーカスすべきオブジェクトとの画像上での距離を算出し、算出されたオブジェクト間距離と出力先のスクロール方向の表示幅とを比較し、オブジェクト間距離がスクロール方向の表示幅以下である場合、次のフォーカス対象を含むように表示範囲を設定し、オブジェクト間距離がスクロール方向の表示幅を上回る場合、該スクロール方向の表示幅以下の所定量だけ移動した表示範囲を設定し、文書ファイルに基づきレンダリングされたウェブページから設定された表示範囲を切り出してディスプレイに表示させることを含む。

なお、以上の構成要素の任意の組合せ、本発明の表現を方法、装置、システム、記録媒体、コンピュータプログラムなどの間で変換したものもまた、本発明の態様として有効である。

本発明によれば、ハイパーリンクの設定されたオブジェクト間の移動を指示する特定のキー操作によってウェブページをディスプレイにスクロール表示させる場合に、オブジェクト間にレイアウトされているコンテンツをスキップすることなく表示させることが可能になる。

ウェブページを表示する様子を示す図である。ウェブページのＨＴＭＬファイルの一例を示す図である。図２のＨＴＭＬファイルに基づき、従来のブラウザによってスクロール表示されるウェブページの例を示す図である。一実施形態に係るウェブページ表示制御装置の構成を示す図である。ハイパーリンク抽出部によるオブジェクトの抽出を説明するフローチャートである。オブジェクト格納部に格納されているオブジェクト情報を示す表である。一実施形態に係るウェブページ表示制御装置によってスクロール表示されるウェブページの例を説明する図である。

図１は、例えば携帯電話１０を利用してウェブページを表示する様子を示す図である。ユーザは、携帯電話１０に設けられた方向指示ボタンなどを使用して、ディスプレイ上に表示されるウェブページを操作する。

携帯電話内のウェブページ表示制御装置（図３に示す）は、ユーザの操作に応答してインターネット等のネットワーク２４を介してＵＲＬ（Uniform Resource Locator）で特定されるサーバ２０にアクセスし、ウェブページを構成する文書ファイルを取得する。

図２は、ウェブページ表示制御装置によって解釈されディスプレイにレンダリングされるＨＴＭＬファイル５０の一例を示す図である。図３は、図２のＨＴＭＬファイル５０に基づき、従来のブラウザによってレンダリングされるウェブページの例を示す図である。

図３のファイル４０１は、ＨＴＭＬファイル５０の７〜１８行目を簡便に表している。すなわち、７行目の「リンク１」オブジェクトの後に８〜１７行目のテキストｌｉｎｅ０１〜ｌｉｎｅ１０が続き、さらに「リンク２」オブジェクトが続くことを表している。また、図３の画面４０２および４０３は、携帯電話１０のディスプレイ１２０に表示される画面を表しており、この例ではその表示範囲は横１６０ピクセル×縦１２０ピクセルである。

画面４０２は、ウェブページ表示制御装置によってＨＴＭＬファイル４０１が読み込まれた直後の表示を示しており、オブジェクトのうち先頭の「リンク１」オブジェクトにフォーカスＦが位置する状態になっている。このときにユーザから、ハイパーリンクの設定されたオブジェクト間の移動を指示する特定のキー入力がなされると、画面４０３のように、「リンク２」オブジェクトにフォーカスＦが移動した画面が表示される。この場合、画面４０２および４０３のいずれにも、テキストｌｉｎｅ０５、ｌｉｎｅ０６が表示されないことが分かる。

このように、従来のブラウザでハイパーリンク間の移動によりウェブページをスクロール表示させる場合、ウェブページのレイアウトによっては表示されないコンテンツが発生してしまう。

そこで、本実施形態では、ハイパーリンク間の移動によりウェブページをスクロールさせる指示がユーザにより与えられた場合でも、ウェブページのレイアウトによらずコンテンツの全てを閲覧できるようにする技術を提供する。

図４は、本発明の一実施形態に係るウェブページ表示制御装置１００の構成を示す図である。この構成は、ハードウエア的には、任意のコンピュータのＣＰＵ、メモリ、その他のＬＳＩで実現でき、ソフトウエア的にはメモリにロードされたプログラムなどによって実現されるが、ここではそれらの連携によって実現される機能ブロックを描いている。したがって、これらの機能ブロックがハードウエアのみ、ソフトウエアのみ、またはそれらの組合せによっていろいろな形で実現できることは、当業者には理解されるところである。

本実施形態のウェブページ表示制御装置は、周知のブラウザプログラムの一部として実装されることが好ましい。したがって、図４に明示されていない機能であっても、一般のブラウザプログラムが備えている機能は当然に有しているものとする。

通信制御部１１８は、ＵＲＬの入力、検索サイトにおける検索結果の選択、ハイパーリンクの選択などのユーザの操作に応じて、インターネット等のネットワーク２４を介して指定されたウェブサーバ２０にアクセスし、対応する文書ファイルを取得する。文書ファイルは、ＳＧＭＬ(Standard Generalized Markup Language)、ＨＴＭＬ(HyperText Markup Language)、ＸＭＬ(eXtensible Markup Language)などのマークアップ言語で記述されている。文書ファイルにＪａｖａＳｃｒｉｐｔ（登録商標）などのスクリプト言語が含まれていてもよい。また、文書ファイルとともに関連するＣＳＳが取得されてもよい。取得された文書ファイルは、ファイル解析部１０２に送られる。なお、以下では、主に文書ファイルがＨＴＭＬファイルであるとして説明する。

ファイル解析部１０２は、取得された文書ファイルを解析し、ウェブページの描画に必要な情報をレンダリング部１１０に送る。ファイル解析部１０２は、ハイパーリンク抽出部１０４を含む。

ハイパーリンク抽出部１０４は、文書ファイルの中からハイパーリンクの設定されたオブジェクトを抽出する。具体的には、ハイパーリンク抽出部１０４は、アンカータグ<a hrefを検索することで、ハイパーリンクの設定されたオブジェクトを抽出する。

ハイパーリンク抽出部１０４は、抽出したオブジェクトについての情報をオブジェクト格納部１１６に格納する。オブジェクト情報には、抽出されたオブジェクトのＩＤ、始点位置およびサイズが少なくとも含まれる。これらのオブジェクト情報は、文書ファイルに含まれていてもよいし、ＣＳＳに含まれていてもよい。

図５は、ハイパーリンク抽出部１０４によるオブジェクトの抽出を説明するフローチャートである。まず、ハイパーリンク抽出部１０４は、ＨＴＭＬファイル内で先頭からアンカータグを検索する（Ｓ１０）。アンカータグが検出されると、ハイパーリンク抽出部１０４は、そのタグ構文内にハイパーリンクが含まれるか否かを判定する（Ｓ１２）。ハイパーリンクが含まれれば（Ｓ１２のＹ）、そのアンカータグに関連するオブジェクトの情報を取り出し、オブジェクト格納部１１６に格納する（Ｓ１４）。ハイパーリンクが含まれていなければ（Ｓ１２のＮ）、Ｓ１４をスキップする。ＨＴＭＬファイルの最終行に達していなければ（Ｓ１６のＮ）、ＨＴＭＬファイルから次のアンカータグを検索する。

図４に戻り、操作入力受信部１１２は、ウェブページ内のハイパーリンクが設定されたオブジェクト間でフォーカスを移動させる操作として予め設定されている操作、例えば方向指示ボタンの操作入力を受け取る。操作入力受信部１１２は、受信した方向ボタンの情報をフォーカス制御部１１４に送る。なお、ハイパーリンク間を移動させる操作には、ＰＣのカーソルキー、Ｔａｂキーの操作なども含まれる。

フォーカス制御部１１４は、方向指示ボタンの操作に応じて、ウェブページ内のハイパーリンク間でフォーカスを移動させる。すなわち、フォーカス制御部１１４は、オブジェクト格納部１１６に格納されているオブジェクト情報を取得し、現在フォーカスが置かれているオブジェクトから方向指示ボタンに対応する方向で最も距離が近いオブジェクトを、次にフォーカスを移動させるべきオブジェクトとして選択する。フォーカス制御部１１４は、選択したオブジェクトのオブジェクト情報を距離算出部１２２に送る。

距離算出部１２２は、現在フォーカスが置かれているオブジェクトと、次のフォーカス対象とされたオブジェクトとの画像上での距離を、オブジェクト情報を使用して算出する。

スクロール制御部１２４は、距離算出部１２２により算出されたオブジェクト間の距離と、出力先のディスプレイ１２０のスクロール方向の表示幅とを比較する。そして、オブジェクト間の距離がスクロール方向の表示幅以下である場合、次のフォーカス対象であるオブジェクトを含むように表示範囲を設定する。オブジェクト間の距離がスクロール方向の表示幅を上回る場合、スクロール方向の表示幅以下の所定量だけ移動した表示範囲を設定する。設定された表示範囲の情報は、レンダリング部１１０に送られる。

なお、ディスプレイのスクロール方向の表示幅の情報は、予めスクロール制御部１２４に与えられていてもよいし、ディスプレイのプロパティなどから取得してもよい。また、ディスプレイに複数のウインドウが表示されており、そのうちの一つのウインドウにウェブページが表示される場合、スクロール制御部１２４は、ディスプレイのスクロール方向の表示幅の代わりに、ウインドウのスクロール方向の表示幅を使用する。

レンダリング部１１０は、ファイル解析部１０２による文書ファイルの解析結果にしたがって、図示しないフレームバッファ上にウェブページのビットマップ画像をレンダリングする。そして、レンダリング部１１０は、スクロール制御部１２４から受け取る表示範囲の指示を受け取り、ビットマップ画像から指示された範囲を切り出してディスプレイ１２０に出力する。このとき、表示範囲内にフォーカスされたオブジェクトがある場合には、フォーカスされていることを表す強調表示をオブジェクト（すなわちハイパーリンク）に施した上でレンダリングする。本実施形態では、この強調表示はオブジェクトの周りを囲む黒い正方形として表されている。しかしながら、他の表示態様でフォーカスを表してもよい。例えば、文字を反転表示したり、文字の背景の色を変えるなどしてフォーカスを表してもよい。

以下、ウェブページ表示制御装置１００の作用を説明する。

通信制御部１１８によって図２のＨＴＭＬファイル５０が読み込まれると、ファイル解析部１０２のハイパーリンク抽出部１０４は、ＨＴＭＬファイル５０からアンカータグを検出し、ハイパーリンクの設定されたオブジェクトのオブジェクト情報をオブジェクト格納部１１６に格納する。具体的には、図２の７行目および１８行目のアンカータグが検出され、オブジェクト「リンク１」「リンク２」のオブジェクト情報が格納される。図６は、オブジェクト格納部１１６に格納されたオブジェクト情報を示す。図中の行２０２はオブジェクト名を表し、行２０４はオブジェクトの始点位置を表し、行２０６はオブジェクトサイズを表している。

図７は、ウェブページ表示制御装置によってスクロール表示されるウェブページの例を説明する図である。図７のファイル４０１は、ＨＴＭＬファイル５０の７〜１８行目を簡便に表している。すなわち、７行目の「リンク１」オブジェクトの後に８〜１７行目のテキストｌｉｎｅ０１〜ｌｉｎｅ１０が続き、さらに「リンク２」オブジェクトが続くことを表している。

画面６０２は、ウェブページ表示制御装置によってＨＴＭＬファイル４０１が読み込まれた直後の表示を示す。図３と同様に、画面サイズは横１６０ピクセル×縦１２０ピクセルであり、オブジェクト格納部１１６に格納されているオブジェクトのうち先頭の「リンク１」オブジェクトにフォーカスＦが表示されている。ユーザから方向指示ボタン等により下方向の移動指示が与えられると、フォーカス制御部１１４は、オブジェクト格納部１１６の中から次にフォーカスすべきオブジェクトとして「リンク２」オブジェクトを選択する。フォーカス制御部１１４は、「リンク１」および「リンク２」オブジェクトのオブジェクト情報を距離算出部１２２に送る。

距離算出部１２２は、「リンク１」オブジェクトと「リンク２」オブジェクトとの間の距離を算出する。この例では、「リンク１」オブジェクトの始点位置が（０，０）、「リンク２」オブジェクトの始点位置が（０，２６４）であるので、距離は２６４ピクセルと算出される。

スクロール制御部１２４は、距離算出部１２２により算出されたオブジェクト間距離と、ディスプレイのスクロール方向の表示幅とを比較する。この場合、オブジェクト間距離が２６４ピクセルであるのに対し、スクロール方向の表示幅が１２０ピクセルであるので、スクロール制御部１２４は、次のオブジェクトにフォーカスを移動させるのではなく、所定の送り量だけ画面をスクロールさせると決定する。

例えば、通常の送り量が１２ピクセルであれば、現在の表示範囲から１２ピクセルだけ下方向に移動させた表示範囲を設定して、レンダリング部１１０に送信する。これに応じて、レンダリング部はフレームバッファ上のビットマップ画像から対応する表示範囲を切り出してディスプレイ１２０に出力する。図７中の画面６０３は、このときの表示範囲を示している。画面６０２では表示されていなかったテキストｌｉｎｅ０５の上半分が表示されていることが分かる。ユーザから再び下方向の移動指示が与えられると、画面６０４に示すように、さらに１２ピクセルだけ下方向に移動された表示範囲がディスプレイに表示される。

なお、スクロールが選択された場合の送り量は、様々な値を利用できる。例えば、テキスト一行分（上記の例では２４ピクセル）または数行分の値であってもよいし、スクロール方向の表示幅と同じ値（上記の例では１２０ピクセル）であってもよい。後者であれば、今回の表示範囲とスクロール後の表示範囲とで、重複して表示される部分がなくなる。また、スクロール後の表示範囲内に次にフォーカスすべきオブジェクトが含まれている場合、スクロール制御部１２４は、次にフォーカスすべきオブジェクトがディスプレイの先頭行または最終行に表示されるように送り量を調整してもよい。

以上説明したように、本実施形態に係るウェブページ表示制御装置によれば、携帯端末等におけるウェブブラウザの操作性を改善することができる。具体的には、本実施形態によれば、ハイパーリンクの設定されたオブジェクト間の移動を指示する特定のキー入力があった場合に、現在フォーカスの置かれているオブジェクトと、次にフォーカスすべきオブジェクトとの間の距離を算出し、算出された距離に応じて、通常のオブジェクト間のフォーカス移動と、所定量の画面スクロールとのいずれかを選択するようにした。これによって、ハイパーリンクの設定された連続するオブジェクト間の距離が、ディスプレイのスクロール方向の表示幅よりも離れている場合でも、オブジェクト間にレイアウトされているコンテンツをスキップすることなく閲覧することが可能になる。ディスプレイのスクロール方向の表示幅がオブジェクト間の距離と比べて大きい場合には、通常通りオブジェクト間でフォーカスが移動されるので、迅速に画面をスクロールさせることができる。

以上、いくつかの実施形態をもとに本発明を説明した。この実施例は例示であり、それらの各構成要素や各処理プロセスの組合せにいろいろな変形例が可能なこと、またそうした変形例も本発明の範囲にあることは当業者に理解されるところである。

本発明に係るウェブページ表示制御装置は、デジタルテレビ、ゲーム機、ＰＤＡ（Personal Digital Assistant）などの携帯移動端末、カーナビゲーションシステム等のように、マウス、トラックボールまたはタッチパネル等のディスプレイ上の任意の位置にポインタを移動させる入力デバイスを持たない電子機器に実装されてもよい。ディスプレイとウェブページ表示制御装置とは、単一の筐体内に一体化されていてもよいし、別体であってもよい。また、ウェブページ表示制御装置に方向指示を与えるキーまたはボタンは、ウェブページ表示制御装置が実装される電子機器に設けられてもよいし、リモートコントローラのような別の機器に設けられてもよい。

５０ＨＴＭＬファイル、１００ウェブページ表示制御装置、１０２ファイル解析部、１０４ハイパーリンク抽出部、１１０レンダリング部、１１２操作入力受信部、１１４フォーカス制御部、１１６オブジェクト格納部、１１８通信制御部、１２０ディスプレイ、１２２距離算出部、１２４スクロール制御部。

Claims

ウェブページをレンダリングしてディスプレイに画像として表示させるウェブページ表示制御装置において、
前記ウェブページを構成する文書ファイルからハイパーリンクの設定されたオブジェクトを抽出するハイパーリンク抽出部と、
前記ハイパーリンク抽出部によって抽出されたオブジェクトの前記ウェブページ上での配置に関する情報を少なくとも含むオブジェクト情報を格納するオブジェクト格納部と、
ユーザによる操作入力に応じて、前記ウェブページ上で次にフォーカス表示すべきオブジェクトを選択するフォーカス制御部と、
現在フォーカスの置かれているオブジェクトと、次にフォーカスすべきオブジェクトとの間の画像上での距離を算出する距離算出部と、
前記距離算出部により算出されたオブジェクト間距離と出力先のスクロール方向の表示幅とを比較し、オブジェクト間距離がスクロール方向の表示幅以下である場合、次のフォーカス対象を含むように表示範囲を設定し、オブジェクト間距離がスクロール方向の表示幅を上回る場合、該スクロール方向の表示幅以下の所定量だけ移動した表示範囲を設定するスクロール制御部と、
前記文書ファイルに基づきウェブページをレンダリングし、前記スクロール制御部によって設定された表示範囲を切り出してディスプレイに表示させるレンダリング部と、
を備えることを特徴とするウェブページ表示制御装置。
前記スクロール制御部は、前記表示範囲にフォーカス対象のオブジェクトが含まれる場合、該オブジェクトが先頭行または最終行に位置するように前記表示範囲を設定することを特徴とする請求項１に記載のウェブページ表示制御装置。
方向入力キーを有する操作部をさらに備えることを特徴とする請求項１または２に記載のウェブページ表示制御装置。
ウェブページをレンダリングしてディスプレイに画像として表示させるウェブページ表示制御装置におけるスクロール制御方法であって、
前記ウェブページを構成する文書ファイルからハイパーリンクの設定されたオブジェクトを抽出し、
抽出されたオブジェクトの前記ウェブページ上での配置に関する情報を少なくとも含むオブジェクト情報をメモリに格納し、
ユーザによる操作入力に応じて、前記ウェブページ上で次にフォーカス表示すべきオブジェクトを選択し、
現在フォーカスの置かれているオブジェクトと、次にフォーカスすべきオブジェクトとの間の画像上での距離を算出し、
算出されたオブジェクト間距離と出力先のスクロール方向の表示幅とを比較し、オブジェクト間距離がスクロール方向の表示幅以下である場合、次のフォーカス対象を含むように表示範囲を設定し、オブジェクト間距離がスクロール方向の表示幅を上回る場合、該スクロール方向の表示幅以下の所定量だけ移動した表示範囲を設定し、
前記文書ファイルに基づきレンダリングされたウェブページから設定された表示範囲を切り出してディスプレイに表示させることを特徴とするスクロール制御方法。