JP6200373B2 - 表示領域制御装置、表示領域制御方法、および表示領域制御プログラム - Google Patents

Description

本発明は、Web ページを閲覧者が閲覧するための技術に関する。

HTML5(http://www.w3.org/html/wg/drafts/html/master/) で記述されたデジタルコンテンツを閲覧するとき、閲覧者はブラウザをスクロールさせてWeb ページの一部分を閲覧する。このとき、スクロール開始時にWebページに表示されているWeb ページの一部分に後で戻ってくるときのために、または、スクロール開始時に起点となっていた位置と閲覧中の位置との位置関係を把握するために、スクロール開始時の起点となる位置や範囲に目印を表示させておくことが行われている。

このような目印を表示しているサービスの１つとして、Web ページ内に地図を表示し、地図をマウスドラッグでスクロールするものがある。例えば、Google マップ(https://maps.google.co.jp/)では、起点となるランドマーク（主に駅や建物） にピンを設定し、起点となる位置を閲覧者に示す。また、非特許文献１では、起点となる位置を円の中心として任意の半径の円で表示する。

「地図に円を描く（Google Maps API V3版）」、＜URL：http://www.nanchatte.com/map/circleService.html＞

閲覧者がブラウザで、あるWeb ページをスクロールしたり、拡大縮小をくり返しながら閲覧すると、閲覧し始めたときの起点となる位置から離れた位置を閲覧するため、閲覧者が現在閲覧している位置と、起点となる位置との位置関係が把握しづらくなる。起点となる位置がブラウザ上に表示されないほど離れた場所を閲覧することもありうるため、起点と閲覧している位置との位置関係をブラウザ上で目視することができなくなる。起点と閲覧している位置との位置関係が把握しづらいことで、起点となる位置との関係を把握するために、スクロールや拡大縮小などの操作を繰り返す必要が生じることによる操作回数の増加や、検索対象を絞り込むまでの検索時間の増加などの問題がある。

例えば、Web ページ内で地図を閲覧して起点付近の複数店舗の中から１店舗を決定する場合、起点と店舗との位置関係はその店舗を選択するかどうかの決め手のひとつになると考えられ、起点とその店舗との位置関係を把握するために、地図をスクロールしたり拡大縮小する操作を行うことが考えられる。

起点との位置関係を示すために、非特許文献１のように起点となる位置を円の中心として任意の半径の円で表示する場合や、表示されている地図（詳細地図）をズームアウトした地図（広域地図）を重ねて表示する場合は、円や広域地図を地図上に重ねて表示したり、それらを表示することで、地図の表示領域が小さくなってしまい、地図が読みにくくなるという問題がある。

本発明は、上記の事情に鑑みなされたもので、本発明の目的は、起点となる位置と閲覧中の位置との位置関係を閲覧者が把握しやすいように表示することにある。

上記の課題を解決するために、本発明は、表示領域の移動操作の処理に係る表示領域制御装置であって、端末から送信されたイベントの種別を判定するイベント種類判定手段と、前記判定したイベントの種別が表示領域の移動操作開始を示す種別の場合、移動操作開始時の表示領域の起点を取得する手段と、前記判定したイベントの種別が表示領域の移動操作終了を示す種別の場合、移動操作終了時の表示領域を記憶手段に格納し、前記移動操作終了時の表示領域の終点と、前記移動操作開始時の表示領域の起点とを含む表示領域を生成する生成手段と、前記生成手段が生成した表示領域を所定の時間、前記端末に表示させ、その後、前記記憶手段に記憶された前記移動操作終了時の表示領域を前記端末に表示させる表示領域制御手段と、を備えることを要旨とする。

本発明は、コンピュータが行う、表示領域の移動操作の処理に係る表示領域制御方法であって、端末から送信されたイベントの種別を判定するイベント種類判定ステップと、前記判定したイベントの種別が表示領域の移動操作開始を示す種別の場合、移動操作開始時の表示領域の起点を取得するステップと、前記判定したイベントの種別が表示領域の移動操作終了を示す種別の場合、移動操作終了時の表示領域を記憶部に格納し、前記移動操作終了時の表示領域の終点と、前記移動操作開始時の表示領域の起点とを含む表示領域を生成する生成ステップと、前記生成ステップで生成した表示領域を所定の時間、前記端末に表示させ、その後、前記記憶部に記憶された前記移動操作終了時の表示領域を前記端末に表示させる表示領域制御ステップと、を行うことを要旨とする。

本発明は、上記表示領域制御装置としてコンピュータを機能させるための表示領域制御プログラムである。

本発明によれば、起点となる位置と閲覧中の位置との位置関係を閲覧者が把握しやすいように表示することができる。

本発明の第１の実施形態におけるサーバの構成図である。 サーバの処理を示すフローチャートである。 表示領域ｒａの算出方法を説明するための説明図である。 表示領域ｒｂと、格納領域ｒａの一例を示すものである。 本発明の第２の実施形態におけるサーバの構成図である。

以下、図面と共に、本発明の実施の形態を説明する。

＜第１の実施形態＞
図１は、本発明の第１の実施の形態におけるサーバ１（表示領域制御装置）の構成図である。サーバ１は、ネットワークを介して接続されたクライアント２に、当該クライアント２により指定されたWeb ページ（デジタルコンテンツ）を送信・提供するサーバである。

また、本実施形態のサーバ１は、クライアント２のブラウザに表示されるWeb ページを閲覧するユーザ（閲覧者）が、Web ページの移動操作（スクロール）を行った後に、その時点でクライアント２のブラウザに表示されている移動後の終点と、移動操作を開始した時点で表示されていた起点とを含むWeb ページの表示領域を生成し、一定時間、クライアント２に表示させる。すなわち、移動後の終点と、移動前の起点とが１つの画面で表示されるようにズームアウトまたはズームインして調整した表示領域を生成する。

クライアント２は、ブラウザの機能を搭載した装置であって、スマートフォン、ＰＣなどを用いることができる。クライアント２は、サーバ１にアクセスし、サーバ１が提供するWeb ページをブラウザに表示するとともに、ユーザが入力した操作を受け付けて、当該操作に対応するイベントをサーバ１に送信する。

図示するサーバ１は、イベント種類判定部１１と、移動処理部１２とを備える。イベント種類判定部１１は、クライアント２のブラウザで発生したイベントを受信し、当該イベントの種別を判別する。

移動処理部１２は、イベントの種類に応じた処理を行い、クライアント２を使用するユーザによるWeb ページの表示領域の移動後に、移動後の終点と移動前の起点とを含むWeb ページの表示領域を生成し、一定時間だけクライアント２に表示させる。移動処理部１２は、フラグ更新部１２１と、生成部１２２と、表示領域制御部１２３と、記憶部１２４とを、備える。

フラグ更新部１２１は、イベント種類判定部１１が判定したイベントの種別が表示領域の移動操作開始を示す種別の場合、フラグを所定の値に更新する。フラグは、記憶部１２４に記憶されているものとする。

生成部１２２は、判定したイベントの種別が表示領域の移動操作終了を示す種別の場合、移動操作終了時の表示領域の終点と、移動操作開始時の表示領域の起点とを含む表示領域を生成する。また、生成部１２２は、判定したイベントの種別が表示領域の移動操作終了を示す種別の場合、移動操作終了時の表示領域を記憶部１２４に格納する。

表示領域制御部１２３は、生成部１２２が生成した表示領域を所定の時間、クライアント２に表示させ、その後、記憶部１２４に記憶された移動操作終了時の表示領域をクライアント２に表示させる。

なお、本実施形態のサーバ１は、例えば、ＣＰＵと、メモリと、ハードディスク等の外部記憶装置などを備えた汎用的なコンピュータシステムを用いることができる。このコンピュータシステムにおいて、ＣＰＵがメモリ上にロードされたサーバ１用のプログラムを実行することにより、サーバ１の各機能が実現される。また、サーバ１用のプログラムは、ハードディスク、フレキシブルディスク、ＣＤ−ＲＯＭ、ＭＯ、ＤＶＤ−ＲＯＭなどのコンピュータ読取り可能な記録媒体に記憶することも、ネットワークを介して配信することもできる。

次に、本実施形態の処理について説明する。

図２は、本実施形態のサーバ１の処理を示すフローチャートである。

サーバ１のイベント種類判定部１１は、クライアント２のブラウザで発生したイベントおよびイベントに関する情報を受け付ける（Ｓ１１０）。本実施形態では、ユーザがブラウザの表示領域で表示されているWeb ページ（例えば、地図などのコンテンツ）のスクロール移動などの操作を行うことにより、mousedown、mousemoveまたはmouseupのイベントがサーバ１に通知される。

mousedownは、ユーザがブラウザの表示領域上でマウスボタンを押下（クリック）したときに発生するイベントである。mousemoveは、ユーザがブラウザの表示領域上でマウスポインタを動かしている時（ドラッグしてスクロールをしている最中）に発生するイベントである。mouseupは、マウスボタンを離した（リリースした）ときに発生するイベントであって、操作の終了を示すイベントである。

ユーザは、例えば表示領域に表示されているWeb ページを移動（スクロール）させる際に、まずmousedownの操作を行い、その後、mousemoveでマウスポインタを所望の位置に移動させ、その後mouseupの操作を行うことで、所望の領域のWeb ページがブラウザの表示領域に表示されるようにWeb ページを移動する。

そして、イベント種類判定部１１は、クライアント２から受け付けたイベントの種類を判別する。まず、イベント種類判定部１１は、当該イベントがmousedown であるか否かを判別する（Ｓ１２０）。

mousedown のイベントの場合（Ｓ１２０：ＹＥＳ）、イベント種類判定部１１は、生成部１２２に、mousedown のイベントが発生したことおよびイベントに関する情報を通知する。これにより、生成部１２２は、起点となる座標を取得し、当該座標を（x１,y1）とする（Ｓ１３０）。起点となる座標は、例えば、地図を表示させるようなWeb ページであれば、ユーザが指定したランドマークの座標（マウスボタンを押下したマウスポインタの座標）を用いることが考えられる。なお、起点となる座標については、イベントに関する情報に含まれている。

そして、フラグ更新部１２１は、フラグを所定の値（ここでは、「ture」）に更新する（Ｓ１４０）。

一方、Ｓ１１０で通知されイベントがmousedown のイベントでない場合（Ｓ１２０：ＮＯ）、イベント種類判定部１１は、当該イベントがmouseupであるか否かを判別する（Ｓ１５０）。mousemoveのイベントの場合（Ｓ１５０：ＮＯ）、イベント種類判定部１１は、イベントの発生を通知することなく処理を終了する。

mouseupのイベントの場合（Ｓ１５０：ＹＥＳ）、イベント種類判定部１１は、mouseupのイベントが発生したことおよびイベントに関する情報を生成部１２２に通知する。これにより、生成部１２２は、フラグを読み出して「ture」か否かを判別し、「fale」の場合は（Ｓ１６０：ＮＯ）、表示領域の移動操作におけるmouseupイベントではないとみなし、処理を終了する。

「ture」の場合（Ｓ１６０：ＹＥＳ）、生成部１２２は、イベント種類判定部１１から通知されたイベントに関する情報を用いて、mouseupのイベントが発生したときの座標を終点として取得し、当該座標を（x2,y2）とする。そして、生成部１２２は、mouseupイベントが発生したときのWeb ページの表示領域ｒｂを、記憶部１２４に格納する（Ｓ１７０）。なお、終点の座標（x2,y2）は、例えば、mouseupのイベントが発生したときのマウスポインタの座標などが考えられる。

また、表示領域ｒｂは、現時点においてクライアント２に表示されている表示領域ｒｂの画像をそのままコピーして記憶部１２４に記憶することが考えられる。また、表示領域ｒｂとして、mouseup のイベントが発生したときのブラウザの表示領域の左上端、右上端、左下端、右下端のいずれかの座標を記憶部１２４に記憶することも考えられる。

あるいは、表示領域ｒｂを、イベントに関する情報を用いて算出することも考えられる。例えば、Ｓ１３０で取得した起点となる座標（x1,y1）と、Ｓ１７０で取得した終点となる座標（x2,y2）とを用いて、起点から終点への方向（スクロール方向）と、起点から終点への距離である移動量（スクロール量）とを算出し、起点となる座標（x1,y1）に、起点から終点への方向に移動量を加算した座標を、表示領域ｒｂとして記憶部１２４に記憶することも考えられる。

なお、スクロール方向およびスクロール量は、以下の式（ベクトルｖ）により算出することができる。

ベクトルｖ＝（x2-x1,y2-y1）
そして、生成部１２２は、起点となる座標（x1,y1）と終点となる座標（x2,y2）とを用いて、起点と終点とを含む表示領域ｒａを算出および生成する（Ｓ１８０）。

図３は、表示領域ｒａの算出方法を説明するための説明図である。

表示領域ｒａの中心は、（x1,y1）と（x2,y2）とを結ぶ直線の中点に一致させる。そして、表示領域ｒａの縦のサイズおよび横のサイズは、以下のとおりに算出する。

縦のサイズ＝2×α＋｜x2-x1｜ （α＞0）
横のサイズ＝2×β＋｜y2-y1｜ （β＞0）
ブラウザの画面サイズ（ウィンドウサイズ）を（wx,wy）として、以下の式を満たすαおよびβの組（α,β）を1つ算出する。なお、α＞0およびβ＞0とする。

wx：wy＝（2×α＋｜x2-x1｜）：（2×β＋｜y2-y1｜）
そして、算出したαおよびβを用いて、表示領域（x1,y1）と（x2,y2）の中点を中心とし、縦サイズを（2×α＋｜x2-x1｜）とし、横のサイズを（2×β＋｜y2-y1｜）とする表示領域ｒａを算出する。

表示領域ｒａは、図３に示す方法で算出される場合に限定されることなく、起点となる座標（x1,y1）と終点となる座標（x2,y2）とが１つのブラウザの画面上に表示されるものであれば、どのような方法を用いてもよい。例えば、起点と終点とが１つの画面に表示されるような拡大率または縮小率を算出し、そのうちの１つの拡大率または縮小率を用いてWeb ページを拡大または縮小した表示領域ｒａを生成することとしてもよい。

そして、表示領域制御部１２３は、生成した表示領域ｒａのWeb ページの描画指示をクライアント２のブラウザに送信し、所定の時間（ｔ秒間）描画させる。その後、表示領域制御部１２３は、Ｓ１７０で記憶部１２４に記憶した表示領域ｒｂのWeb ページの描画指示をクライアント２のブラウザに送信し、再描画させる（Ｓ１９０）。すなわち、表示領域制御部１２３は、mouseupのイベントが発生したときの表示領域ｒｂから、起点と終点を含む表示領域ｒａをｔ秒間表示し、その後、元の表示領域ｒｂに戻す。

そして、フラグ更新部１２１は、フラグを「false」に更新する（Ｓ２００）。

図４は、Ｓ１７０で格納される表示領域ｒｂと、Ｓ１８０で算出される格納領域ｒａの一例を示すものである。図示する画面４１は、ユーザがスクロールを開始した時点（Ｓ１２０：ＹＥＳ）において、クライアント２のブラウザに表示される画面であって、起点（x1,y1）が含まれている。

画面４２は、ユーザがスクロールを終了した時点（Ｓ１５０：ＹＥＳ）において、クライアント２のブラウザに表示される表示領域ｒｂの画面であって、当該画面には終点（x2,y2）が含まれている。

画面４３は、Ｓ１９０で所定時間クライアント２のブラウザに表示される表示領域ｒａの画面である。画面４３には、起点と終点の両方が含まれている。なお、図示する画面４３は、起点と終点を１つの画面で表示するために所定の縮小率で縮小（ズームアウト）されている。

このように、本実施形態では、クライアント２のブラウザには、現在閲覧中の表示領域ｒｂ（mouseupのイベントが発生したときの表示領域）の画面から、起点と終点とが含まれる表示領域ｒａの画面がｔ秒間表示され、その後、元の表示領域ｒｂの画面が表示される。これにより、ユーザは、起点となる位置と閲覧中の位置との位置関係を、直感的に把握することができる。

＜第２の実施形態＞
第１の実施形態では、クライアントが１つの場合について説明したが、第２の実施形態では、あるクライアントで入力されたイベントに応じて当該クライアントだけではなく、他のクライアントのブラウザも同期して、表示領域が移動するものである。

図５は、第２の実施形態のサーバ１Ａと、複数のクライアント２、３とを示す構成図である。本実施形態のサーバ１Ａの構成は、表示領域制御部１２３Ａが、クライアント２だけでなく、クライアント３についても、クライアント２と同期して表示領域を移動させる点において、図１に示す第１の実施形態のサーバ１と異なり、その他は同様である。

本実施形態の処理は、図２で説明した第１の実施形態の処理と、以下の点において異なり、その他は同様である。すなわち、クライアント２から入力されるイベントにより、Ｓ１４０で、フラグが所定値（ここでは「ture」）に更新されたタイミングで、他のクライアント３のイベントに基づく処理を全て破棄し、クライアント２の表示領域の移動に同期して、他のクライアント３の表示領域を移動させる。例えば、Ｓ１９０において、表示領域制御部１２３Ａは、表示領域ｒａのWeb ページの描画指示をクライアント２およびクライアント３のブラウザに送信し、所定の時間（ｔ秒間）描画させ、その後、Ｓ１７０で記憶部１２４に記憶した表示領域ｒｂのWeb ページの描画指示をクライアント２およびクライアント３のブラウザに送信し、再描画させる。

これにより、クライアント３のブラウザには、クライアント２のブラウザと同じ表示領域の画面が同期して表示されるため、クライアント２のユーザＡが、離れた場所にいる他のクライアント３のユーザＢ（例えば、友人など）と、ユーザＡが操作した起点となる位置から終点となる位置との位置関係を共有することができ、クライアント２のユーザＡだけでなく、クライアント３のユーザＢも、起点となる位置と閲覧中の位置との位置関係を、直感的に把握することができる。

なお、本実施形態では、クライアント２（またはクライアント３）のユーザが、あらかじめ、同期させたいクライアントをサーバ１Ａに登録しておくものとする。

以上説明した第１および第２の本実施形態では、起点となる位置と現在閲覧中の終点の位置とを含む表示領域ｒａを生成し、クライアント２に表示させることにより、ユーザに起点となる位置と現在閲覧中の終点の位置（マウスの位置）との位置関係を直感的に知らせることができる。また、本実施形態では、ユーザの移動操作が終了したタイミングで、起点と終点とを含む表示領域ｒａが自動でクライアントに表示されるため、ユーザの操作負荷を軽減し、ユーザの利便性を向上することができる。

また、クライアント２でWeb ページを閲覧しているユーザが、ブラウザにより表示されたWeb ページをスクロールし、拡大縮小させながら閲覧するときに、スクロール後の位置と起点となる位置との位置関係を直感的に把握することが可能となり、Web ページの中にある検索対象を決めるまでのスクロールや拡大縮小などの操作回数を減らすとともに、検索対象を絞り込むまでの時間を減らすことが可能となる。

また、第２の実施形態では、複数のクライアントのブラウザで、同じ表示領域の画面が同期して表示されるため、離れた場所にいるユーザに、あるユーザが操作した起点となる位置から終点となる位置との位置関係を共有することができる。

なお、本発明は上記実施形態に限定されるものではなく、特許請求の範囲内において、種々変更・応用が可能である。例えば、Ｓ１３０でおよびＳ１７０で取得する起点（x1,y1）および終点の座標（x2,y2）として、ブラウザの表示領域の左上端、右上端、左下端、右下端のいずれかの座標を用いることとしてもよい。

１、１Ａ：サーバ
１１ ：イベント種類判定部
１２ ：移動処理部
１２１：フラグ更新部
１２２：生成部
１２３：表示領域制御部
２、３：クライアント

Claims (3)

1. 表示領域の移動操作の処理に係る表示領域制御装置であって、
   端末から送信されたイベントの種別を判定するイベント種類判定手段と、
   前記判定したイベントの種別が表示領域の移動操作開始を示す種別の場合、移動操作開始時の表示領域の起点を取得する手段と、
   前記判定したイベントの種別が表示領域の移動操作終了を示す種別の場合、移動操作終了時の表示領域を記憶手段に格納し、前記移動操作終了時の表示領域の終点と、前記移動操作開始時の表示領域の起点とを含む表示領域を生成する生成手段と、
   前記生成手段が生成した表示領域を所定の時間、前記端末に表示させ、その後、前記記憶手段に記憶された前記移動操作終了時の表示領域を前記端末に表示させる表示領域制御手段と、を備えること
   を特徴とする表示領域制御装置。
2. コンピュータが行う、表示領域の移動操作の処理に係る表示領域制御方法であって、
   端末から送信されたイベントの種別を判定するイベント種類判定ステップと、
   前記判定したイベントの種別が表示領域の移動操作開始を示す種別の場合、移動操作開始時の表示領域の起点を取得するステップと、
   前記判定したイベントの種別が表示領域の移動操作終了を示す種別の場合、移動操作終了時の表示領域を記憶部に格納し、前記移動操作終了時の表示領域の終点と、前記移動操作開始時の表示領域の起点とを含む表示領域を生成する生成ステップと、
   前記生成ステップで生成した表示領域を所定の時間、前記端末に表示させ、その後、前記記憶部に記憶された前記移動操作終了時の表示領域を前記端末に表示させる表示領域制御ステップと、を行うこと
   を特徴とする表示領域制御方法。
3. 請求項１に記載の表示領域制御装置としてコンピュータを機能させるための表示領域制御プログラム。