JP6002268B1 - データ表示システム - Google Patents

Abstract

【課題】クライアントでのデータ表示をわかり易く、しかも短時間に表示できるデータ表示システムを提供する。【解決手段】サーバ１０は、データから生成したデータ画像を所定のサイズで分割してブロック画像をデータ画像上のブロック座標位置情報と関連づけて記憶部１４に記憶する画像管理部１２を有し、クライアント２０は、サーバ１０から受信したデータ画像のサイズと同じサイズで、表示部でスクロール操作をした際に使用するスクロール階層を生成し、生成されたスクロール階層上に表示部の画面サイズのウインドウを配置し、ウインドウからみた表示可能なブロック数を決定し、決定されたブロック数分のデータ画像上のブロック座標位置情報をサーバに送信する画面ブロック管理部２２と、サーバからデータ画像上のブロック座標位置情報に該当するブロック画像を受信した場合、ブロック画像をスクロール階層上に配置する画面ブロック配置部２３と、を有する。【選択図】図１

Description

本発明は、携帯情報端末でのデータ表示を容易にする技術に関する。

スマートフォン、タブレット型端末などの携帯情報端末の普及に伴い、業務システムのデータを携帯情報端末のＷｅｂブラウザから利用するニーズが増加している。例えば、特許文献１では、サーバベースコンピューティングで、クライアント装置にＷｅｂページなどの長大なデータをスクロールしながら表示させる方法が記載されている。

特開２０１３−１７５２０６号公報

特許文献１のサーバ装置は、アプリケーションプログラムに従い取得されたデータをキャッシュデータとしてスクロールの単位に分割し識別子に対応付けて記憶しており、このスクロール単位のキャッシュデータのそれぞれにスクロール発生の可能性に応じた順位を設定する順位設定をし、サーバ装置の動作状態に応じてデータを送信するタイミングを判断している。このため、必ずしも、クライアント装置の表示要求タイミングで送信されるわけではなく、表示の快適性が十分とは言えない問題がある。

本発明は、前記した課題を解決するためになされたものであり、クライアントでのデータ表示を容易にし、しかも短時間に表示できるデータ表示システムを提供することを目的とする。

前記目的を達成するため、本発明のデータ表示システムは、クライアントとサーバとの間で通信し、クライアントからの要求に応じてサーバから取得した画像を表示するデータ表示システムであって、サーバは、データを記憶する記憶部と、記憶部から取得したデータをデータ画像として生成し、生成したデータ画像を所定のサイズで分割してブロック毎のブロック画像を生成し、生成されたブロック画像をデータ画像上のブロック座標位置情報と関連づけて記憶部に記憶する画像管理部と、を有し、クライアントは、サーバからデータ画像のサイズおよびデータ画像上のブロック座標位置情報を受信した場合、データ画像のサイズと同じサイズで、表示部でスクロール操作をした際に使用するスクロール階層を生成し、生成されたスクロール階層上に表示部の画面サイズのウインドウを配置し、ウインドウからみた表示可能なブロック数を決定し、決定されたブロック数分のデータ画像上のブロック座標位置情報をサーバに送信する画面ブロック管理部と、サーバからデータ画像上のブロック座標位置情報に該当するブロック画像を受信した場合、受信したブロック画像をスクロール階層上に配置する画面ブロック配置部と、を有し、画面ブロック管理部は、表示部のスクロール操作がされた場合、ウインドウを固定した状態でスクロール階層を該スクロール操作に応じて移動し、ウインドウからみたブロックを決定し、決定されたブロックのうち、まだ受信していないブロック画像をサーバに要求することを特徴とする。本発明のその他の態様については、後記する実施形態において説明する。

本発明によれば、クライアントでのデータ表示を容易にし、しかも短時間に表示できる。

本発明の実施形態に係るデータ表示システムを示す図である。 実施形態に係るＷｅｂページのガントチャートの例を示す図である。 データ画像のブロック配列情報を示す図である。 実施形態に係るデータ表示システムの画面構成を示す図である。 実施形態に係るスクロール操作の際の画面構成を示す図である。 データ表示の処理を示すフローチャートである。 クライアントでスクロールシートを作成した状態を示す図である。 クライアントでスクロール操作をした際の状態を示す図である。 比較例としてのスクロール操作した際の表示画面の例（その１）を示す図であり、（ａ）はユーザ入力後の初期の画面であり、（ｂ）は上方向にスクロール操作後のブロックの移動開始直後の状態を示す図である。 比較例としてのスクロール操作した際の表示画面の例（その２）を示す図であり、（ａ）はブロックの移動を示す図であり、（ｂ）は全ブロックのスクロール後の状態を示す図である。 比較例としてのスクロール操作した際の座標変換の例を示す図であり、（ａ）はスクロール前の座標位置を示す図であり、（ｂ）はスクロール後の座標位置を示す図である。 比較例としての座標系のモデルの例を示す図である。 本実施形態に係るスクロール操作した際のスクロールシートおよび各ブロックの座標を示す図であり、（ａ）はスクロール前の座標位置を示す図であり、（ｂ）はスクロール後の座標位置を示す図である。 実施形態に係る座標系のモデルの例を示す図である。 本実施形態に係るデータ表示システムの処理フローを示す図であり、（ａ）は、Ｗｅｂシステムの処理フローであり、（ｂ）は本実施形態に係るサーバサイドで描画を行う場合の処理フローである。

以下、本発明の実施形態について図面を参照して詳細に説明する。
図１は、本発明の実施形態に係るデータ表示システムを示す図である。データ表示システム１００は、サーバ１０と、スマートフォン・タブレット型端末などの携帯情報端末であるクライアント２０とから構成される。サーバ１０とクライアント２０とは、ネットワークＮＷを介して通信可能である。

サーバ１０は、処理部１１、記憶部１４、クライアント２０と通信を行う通信部１９などから構成される。処理部１１は、画像管理部１２、データ通信部１３などから構成される。

画像管理部１２は、記憶部１４から取得したデータをデータ画像ＤＰ（図３参照）として生成し、生成したデータ画像ＤＰを所定のサイズで分割してブロック毎のブロック画像を生成し、生成されたブロック画像をデータ画像ＤＰ上のブロック座標位置情報と関連づけて記憶部１４に記憶する。

データ通信部１３は、クライアント２０からデータの識別情報であるデータＩＤを受信した場合、データ画像ＤＰのサイズ（図３参照）およびデータ画像ＤＰ上のブロック座標位置情報であるブロック配列情報１６並びに１ブロックの大きさをクライアント２０に送信し、クライアント２０からデータの送信要求を受信した場合、ブロックの識別情報であるブロックＩＤに基づいて該当する画像をクライアント２０に送信する。

記憶部１４には、ユーザが利用するデータ１５、データを複数のブロックに分割した際のブロック配列情報１６（図３参照）、クライアント２０からデータＩＤを受信した場合に送付されるスクロールシート情報１７、ブロックの識別情報であるブロックＩＤに関連付けられたブロック画像情報１８などが記憶されている。なお、ブロック画像情報１８とは、データＩＤ、ブロックＩＤ、ブロック画像ＢＰを文字列化したものなどを関連づけた情報である。

記憶部１４は、ＲＡＭ（Random Access Memory）・ＨＤＤ（Hard disk drive）装置などにより構成される。処理部１１は、ＣＰＵ（Central Processing Unit）によって、ＲＡＭ・ＨＤＤ上のプログラムを実行することで実現される。通信部１９は、ネットワークＮＷを介して、クライアント２０などと各種データ、コマンドを交換する。なお、図示していないが、サーバ１０は入力部、表示部などを有する。

クライアント２０は、処理部２１、記憶部２４、表示部２７、入力部２８、サーバ１０と通信を行う通信部２９などから構成される。処理部２１は、画面ブロック管理部２２、画面ブロック配置部２３などから構成される。

画面ブロック管理部２２は、サーバ１０からデータ画像ＤＰ（図３参照）のサイズおよびデータ画像ＤＰ上のブロック座標位置情報であるブロック配列情報１６を受信した場合、データ画像ＤＰのサイズと同じサイズで、表示部２７でスクロール操作をした際に使用する後記するスクロール階層Ｌ１（図４参照）を生成する。そして、生成されたスクロール階層Ｌ１上に表示部２７の画面サイズのウインドウＷ（画面表示領域、図４参照）を配置し、ウインドウＷからみた表示可能なブロック数を決定し、決定されたブロック数分のデータ画像ＤＰ上のブロックＩＤをサーバ１０に送信する。

画面ブロック配置部２３は、サーバ１０からデータ画像ＤＰ上のブロックＩＤに該当するブロック画像を受信した場合、受信したブロック画像をスクロール階層Ｌ１上に配置する。

記憶部２４には、表示部２７の画面表示領域のサイズである画面サイズ情報２５、表示部２７の画面に表示する際の画面ブロック情報２６（図７参照）が記憶されている。なお、画面サイズ情報は、通常、クライアント２０の表示部２７の表示画面の大きさであるが、Ｗｅｂプラウザでのブロック画像を表示する画像表示領域であってもよい。

本実施形態に係るデータ表示システム１００は、サーバ上のデータベース（例えば記憶部１４）にデータが集約され、クライアント２０の要求によりデータを可視化し、クライアント２０に表示するシステムである。本実施形態のデータ表示システムについて、一般的なＷｅｂシステムと比較して、図１５を参照して説明する。

図１５は、本実施形態に係るデータ表示システムの処理フローを示す図であり、（ａ）は、Ｗｅｂシステムの処理フローであり、（ｂ）は本実施形態に係るサーバサイドで描画を行う場合の処理フローである。

図１５（ａ）は、一般的な処理フローを抽象化したものである。ＭＶＣ（Model-View-Controller）のモデルビューコントローラを用いている場合、処理の中核を担う「Model」、表示・出力を司る「View」、入力を受け取ってその内容に応じて「View」と「Model」を制御する「Controller」の３要素の組み合わせでシステムが実装される。メインの処理は「Model」に実装し、「Model」は画面出力などを行わない。処理結果は「View」に渡され、画面表示などが行われる。ユーザからの入力は「Controller」が受け取り、何らかの処理が必要な場合は「Model」に依頼し、出力が必要な場合は「View」に依頼する方式である。

図１５（ａ）の場合、クライアントがＭＶＣアーキテクチャでの「View」に相当する。クライアントからのリクエストがあると、表示対象となるデータが「Model」となるサーバのデータベースから取得され、「Controller」がユーザの要求に応じてデータの加工などの処理を行う。その後、処理結果を表示するため、データをシリアライズし、「View」であるクライアントに転送する。クライアントは受け取ったデータをオブジェクトに復元したのち、各オブジェクトの表示位置などを計算しながら画面を描画する。しかしながら、スマートフォン・タブレット型端末などの携帯情報端末に対し、前記方式を用いると、描画、スクロールなどのユーザインターフェイス（ＵＩ）応答に時間がかかり、十分な操作性能が確保できない場合がある。

これに対し、図１５（ｂ）に示す本実施形態に係るサーバサイドで描画を行う場合の処理フローでは、クライアントの処理負荷を低減するため、負荷の高い描画処理をサーバサイドで実行するサーバサイドイメージレンダリング方式を用いる。描画結果は画像データとしてクライアントに転送される。これにより、クライアントの負荷は画像の表示のみとなり、クライアントの負荷が低減できる。また、低速性能しかないクライアントで行っていた処理を高速性能なサーバ上で実行することで処理時間の短縮を図ることができる。

次に、本実施形態の特徴を、図２〜図５を参照して説明する。
図２は、実施形態に係るＷｅｂページのガントチャートの例を示す図である。図２は、データ１５に基づくガントチャートの例であり、ガントチャートには、上部に工程の日程欄、左部に工程欄、中央部に各工程の進捗状況欄が表示される。ガントチャート上には、「詳細設計が遅れています。」などの管理者が記入したコメントが記載されている。大規模なガントチャートになると、数年にわたる日程におよぶことがあり、サーバ１０に保持するデータ画像のサイズと、クライアント２０の画面のサイズが大きく異なることが多発する。図３でその関係を説明する。

図３は、データ画像のブロック配列情報を示す図である。適宜図１を参照して説明する。ここでは説明をわかりやすくするため、データ１５に基づくデータ画像ＤＰを横に６分割（列として０，１，…，５）し、縦に２１分割（行０，１，…，２０）し、ブロック画像としたものとして説明する。ブロック画像は、ブロックＩＤと関連付けて管理されている。ブロックＩＤは、データ画像ＤＰの列・行の座標位置であり、具体的には、２列目・７行目のブロック画像は、（２，７）の座標位置である。この際、データ画像ＤＰと比較してクライアント２０で表示される領域は相対的に小さく、クライアント２０で初期に表示されるウインドウＷ（画面表示領域）は、例えば２列、３行分となる場合がある。このため、クライアント２０では、ユーザは所望のデータを見ようとしてスクロール操作を行う。

図４は、実施形態に係るデータ表示システムの画面構成を示す図である。図５は、実施形態に係るスクロール操作の際の画面構成を示す図である。データ表示システム１００のクライアント２０の画面構成は、スクロールシートＳＳ（図７参照）の階層であるスクロール階層Ｌ１（ベース階層）と、ユーザが追記するオブジェクトＯＢを配置するオブジェクト配置階層Ｌ２（上位階層）とから構成されている。クライアント２０の表示部２７に表示される領域は、固定領域であるウインドウＷ（画面表示領域）から見たスクロール階層Ｌ１およびオブジェクト配置階層Ｌ２である。スクロール階層Ｌ１の上には、サーバ１０から取得したブロック画像ＢＰが配置される。

オブジェクト配置階層Ｌ２は、クライアント２０のアプリケーションがオブジェクトを配置する領域、または、アプリケーションで描画を行う領域である。オブジェクト配置階層Ｌ２は、スクロール操作の際にスクロール階層Ｌ１と同期して移動する。すなわち、画面ブロック管理部２２は、データ画像ＤＰのサイズと同じサイズで、オブジェクトＯＢを配置する際に使用するオブジェクト配置階層Ｌ２を生成する。そして、オブジェクト配置階層Ｌ２を、スクロール階層Ｌ１の上に配置したブロック画像ＢＰを覆うようにスクロール階層Ｌ１上に配置し、配置されたオブジェクト配置階層Ｌ２をスクロール階層Ｌ１がスクロール操作された際に同期して移動する。

図５は、図４に示した構成において、ユーザがクライアント２０の表示部２７でスクロール操作をした場合を示す。スクロール操作をされると、本実施形態ではそのスクロール操作に応じて下位階層であるスクロール階層Ｌ１が移動する。上位階層であるオブジェクト配置階層Ｌ２は、同期して移動するため、その上に配置されている全オブジェクトを一括して移動できる。すなわち、スクロール動作を比喩的にいうならば、机上にスクロールシートＳＳ（図７参照）であるスクロール階層Ｌ１を敷き、その上のタイル（ブロック画像ＢＰ）とアプリケーションが追記したオブジェクトＯＢを含めて、スクロールシートＳＳを引っ張って丸ごと移動することができる。

前記の画面構成をすることにより、クライアント２０はスクロール操作された際に既に読み込んであるブロック画像ＢＰをスクロールシートＳＳに配置させたままで、まだ読み込んでいないブロック画像のみをサーバ１０に要求することができる。また、ブロック画像ＢＰの要求に際し、サーバ１０とクライアント２０との座標変換などの操作が必要でなく、読み込み要求の画像判定および座標変換に要する処理時間を短縮することができる。

次に、データ表示の処理について、図６〜図８を参照して説明する。
図６は、データ表示の処理を示すフローチャートである。適宜図１、図３を参照して説明する。クライアント２０は、サーバ１０に接続し、ユーザが表示する内容を識別するデータＩＤを送信する（ステップＳ４１）。サーバ１０は、リクエストを受信すると（ステップＳ３１）、データＩＤに該当するデータ１５を記憶部１４から取得する（ステップＳ３２）。そして、サーバ１０は、記憶部１４から取得したデータ１５をデータ画像ＤＰとして生成し、生成したデータ画像ＤＰを所定のサイズで分割してブロック毎のブロック画像ＢＰを生成する。さらに、サーバ１０は、生成されたブロック画像ＢＰをデータ画像ＤＰ上のブロック座標位置情報であるブロックＩＤと関連づけて記憶部１４に記憶する（ステップＳ３３）。

記憶部１４に記憶されているデータ１５は、例えば、ガントチャートであれば、各工程の進捗状況、その進捗状況におけるコメント、納期期限など文字情報を含めて１つのデータとなっている。このため、まずデータ１５をひとつの画像として生成し、その後に、図３に示したように領域毎に複数のブロックに分割してブロック毎のブロック画像ＢＰを生成する。これにより、「大量製品の在庫推移を一覧表示」するように製品毎にデータがブロック毎にきれいに分割可能な場合だけでなく、全体が１枚のガントチャートとなるような分割が難しい場合にもステップＳ３３が適用できる。

サーバ１０は、クライアント２０への描画完了の準備ができると、描画完了通知をクライアント２０に送信するとともに、スクロールシート情報１７を送信する（ステップＳ３４）。スクロールシート情報１７とは、データ画像ＤＰのサイズおよびデータ画像ＤＰ上のブロック座標位置情報などであり、具体的には、スクロールシートＳＳ（図７参照）のサイズ、１ブロックあたりのサイズ、およびスクロールシートＳＳ上のブロック配列情報１６である。図３のデータ画像の例で説明すると、ブロック画像ＢＰのサイズを１００×１００ピクセルとすると、スクロールシートＳＳのサイズは、データ画像ＤＰの大きさと同じである６００×２１００ピクセルである。なお、図３の例では、１ブロックあたりの幅および高さ（すなわちサイズ）が均一になっているが、これに限定される必要はない。

クライアント２０の画面ブロック管理部２２は、サーバ１０からスクロールシート情報１７を受信した場合（ステップＳ４２）、表示部２７の画面サイズ情報２５に基づいて、表示部２７に表示可能なウインドウＷからのブロックＩＤを、画面ブロック情報２６として確定する（ステップＳ４３）。すなわち、画面ブロック管理部２２は、画面表示可能なブロック数を決定し、データ送信要求とともに決定されたブロック数分の識別情報であるブロックＩＤをサーバ１０に送信する（ステップＳ４４）。

図７は、クライアントでスクロールシートを作成した状態を示す図である。図７に示すスクロールシートＳＳは、図３に示したデータ画像ＤＰと同じ大きさである。具体的には、スクロールシートＳＳの大きさは６００×２１００ピクセルで作成され、６列・２１行のブロック画像領域で分けられている。画面ブロック管理部２２は、クライアント２０での画面上の表示する位置を決定し、クライアント２０の画面表示領域であるウインドウＷの左上を起点とした相対位置で、スクロールシートＳＳの原点位置を決定する。すなわち、スクロールシートＳＳの原点位置は、（−２００，−７００）である。また、ブロックＩＤは、ウインドウＷから見たブロック領域であり、例えば、（２，７）、（２，８）、（２，９）、（３，７）、（３，８）、（３，９）となる。

図６に戻り、サーバ１０はリクエスト要求を受信すると（ステップＳ３５）、リクエストされたブロックＩＤに該当する画像をクライアント２０に送信する（ステップＳ３６）。具体的には、ブロックＩＤのメタ情報を付加して、JavaScript（登録商標）のリテラル形式などを用いて、
{
xindex:2,
yindex,7,
imagedata:(画像データを文字列化したもの)
}
などとする。そして、クライアント２０の画面ブロック配置部２３は、サーバ１０からブロックＩＤに該当する画像を受信した場合（ステップＳ４５）、スクロール階層Ｌ１に受信した画像を配置する（ステップＳ４６）。

画面ブロック管理部２２は、クライアント２０の画像上でスクロール操作を検知したか否かを判定し（ステップＳ４７）、スクロール操作が検知されない場合（ステップＳ４７，Ｎｏ）、ステップＳ４７に戻り、スクロール操作が検知された場合（ステップＳ４７，Ｙｅｓ）、ステップＳ４３に戻る。

具体的に説明すると、画面ブロック管理部２２は、表示部２７でスクロール操作がされた場合、ウインドウＷを固定した状態でスクロール階層Ｌ１を該スクロール操作に応じて移動し、ウインドウＷからみたブロックＩＤを決定し、決定されたブロックＩＤのうち、まだ受信していないブロック画像をサーバ１０に要求する。

図８は、クライアントでスクロール操作をした際の状態を示す図である。図８に示す例は、上に１ブロック分スクロール操作をした場合である。ウインドウＷの位置は固定であるので、上に１ブロック分スクロール操作されても、既に読み込んであるブロックＩＤの（２，８）、（２，９）、（３，８）、（３，９）はそのままであり、不足画像のブロックＩＤは、（２，１０）、（３，１０）となる。この際、クライアント２０において、ブロックＩＤは、スクロールシートＳＳ上で常に固定であるので、座標変換などの処理は不要である。不足する画像のブロックＩＤのみをサーバ１０に要求する。また、スクロールシートの原点ＳＳ０の座標は、（−２００，−８００）に変更され、スクロールシートの原点ＳＳ０の座標は、スクロール量を計算する際に用いられる。さらに、ブロックＩＤが（２，７）、（３，７）のブロック画像ＢＰは、キャッシュメモリなどに保存しておくとよい。

また、ブロック画像ＢＰのサイズとスクロールの単位は独立であり、例えば、ブロック画像ＢＰのサイズが１００×１００ピクセルの場合でも、上方向に１０ピクセルずつスクロールするような動作も可能である。

図８に示す例では、上にスクロール操作した場合を示したが、左右方向、斜め方向にスクロール操作しても、クライアント２０のブロックＩＤは、スクロールシートＳＳ上で常に固定であるので、座標変換などの処理は不要である。

クライアント２０においてアプリケーションがオブジェクトＯＢを配置する場合にも、スクロールシートＳＳ上の座標を用いて配置する。例えば、座標位置が（３００，９００）に青い丸（図ではオブジェクトＯＢ）を表示したい場合、青い丸の画像に対し、（３００，９００）の座標を設定するとよい。

本実施形態では、ユーザがスクロール操作した際に、表示されているブロック画像ＢＰの座標位置の変換なしに画面に表示できるのが特徴となっている。この特徴および座標系モデルについて、比較例（図９〜図１１参照）と比較して図１３、図１４で説明する。

図９は、比較例としてのスクロール操作した際の表示画面の例（その１）を示す図であり、（ａ）はユーザ入力後の初期の画面であり、（ｂ）は上方向にスクロール操作後のブロックの移動開始直後の状態を示す図である。図１０は、比較例としてのスクロール操作した際の表示画面の例（その２）を示す図であり、（ａ）はブロックの移動を示す図であり、（ｂ）は全ブロックのスクロール後の状態を示す図である。

図９（ａ）に示すように、Ｗｅｂブラウザ上に確保されたウインドウＷ（画面表示領域）内に、ブロック画像ＢＰを並べることで画面を描画する。また、画面には、アプリケーションが描画するオブジェクトＯＢが追記（配置）されている。オブジェクトＯＢには、例えば、ガントチャートであれば各工程の計画値または実績値を示す矩形形状がある。各ブロック画像には左上の位置（図では黒丸の位置）に対してウインドウＷの左上を起点とした相対座標系で座標位置が指定され、この座標位置をブロックＩＤと対応付けて管理する。

画面が上方向にスクロール操作された場合、図９（ｂ）に示すように、各ブロック画像ＢＰは１つずつ移動する。スクロールの際には、各ブロックの座標を再計算し、スクロール後の位置に移動する。上方向に５０ピクセルスクロールする場合、図の例では（ｘ、ｙ）＝（０，０）にあったブロックの座標位置を（０，−５０）に更新する。

続けて、図１０（ａ）に示すように、隣のブロック画像を移動する。このようにして画面内に表示される全てのブロック画像ＢＰに対して順番に実行する。この処理は処理性能が低いデバイスにとって、短時間に処理することができない問題がある。例えば、この処理は毎秒６０フレームの場合１６．７ｍｓ以内に全ての処理を完了する必要がある。

図１０（ｂ）に示す状態は、全てのブロック画像ＢＰをスクロール操作後の状態であるが、課題として、ブロック画像はスクロールされて移動しているが、アプリケーションが追加したオブジェクトＯＢは取り残された状態となっている。

図１１は、比較例としてのスクロール操作した際の座標変換の例を示す図であり、（ａ）はスクロール前の座標位置を示す図であり、（ｂ）はスクロール後の座標位置を示す図である。図１１では、図９および図１０のブロック画像の座標位置の変換を、さらに具体的に説明する。ここでは、ウインドウＷに図３に示すブロックＩＤが（２，７）、（２，８）、（２，９）、（３，７）、（３，８）、（３，９）のブロック画像ＢＰが表示され、上方向に１ブロックだけスクロール操作された場合について説明する。なお、ウインドウＷの原点Ｗ０を（ｘ，ｙ）＝（０，０）とする。

スクロール前は、図１１（ａ）に示すように、ウインドウＷに表示されたブロック画像ＢＰの座標位置は、
ブロックＩＤが（２，７）の場合、座標位置（０，０）、
ブロックＩＤが（２，８）の場合、座標位置（０，１００）、
ブロックＩＤが（２，９）の場合、座標位置（０，２００）、
ブロックＩＤが（３，７）の場合、座標位置（１００，０）、
ブロックＩＤが（３，８）の場合、座標位置（１００，１００）、
ブロックＩＤが（３，９）の場合、座標位置（１００，２００）
である。

スクロール後は、図１１（ｂ）に示すように、ウインドウＷに表示されたブロック画像の座標位置は、
ブロックＩＤが（２，７）の場合、座標位置（０，−１００）、
ブロックＩＤが（２，８）の場合、座標位置（０，０）、
ブロックＩＤが（２，９）の場合、座標位置（０，１００）、
ブロックＩＤが（２，１０）の場合、座標位置（０，２００）、
ブロックＩＤが（３，７）の場合、座標位置（１００，−１００）、
ブロックＩＤが（３，８）の場合、座標位置（１００，０）、
ブロックＩＤが（３，９）の場合、座標位置（１００，１００）
ブロックＩＤが（３，１０）の場合、座標位置（１００，２００）
となる。

すなわち、スクロール後は、ウインドウＷからはずれたブロックＩＤが（２，７）および（３，７）のブロック画像ＢＰは削除され、新規にブロックＩＤが（２，１０）および（３，１０）のブロック画像ＢＰをサーバ１０に要求することになる。この際、クライアント２０では、図１１（ｂ）に示すようにブロック画像ＢＰの座標書き換えの処理が必要となる。このような処理が必要となる座標系のモデルについて、図１２を参照して説明する。

図１２は、比較例としての座標系のモデルの例を示す図である。比較例の座標系のモデルでは、複数のブロック画像ＢＰまたはアプリケーションが配置したオブジェクトＯＢが、ウインドウＷ（画面表示領域）を起点とした座標系を有している。そのため、スクロール操作に応じて、全オブジェクトＯＢの座標情報を書き換える必要がある。具体的には、地図上の経路案内などのように、画像の上に任意のオブジェクトＯＢを配置する必要があるアプリケーションの場合、画面のスクロールに同期して、そのオブジェクトＯＢの座標も書き換える必要がある。これに対し、本実施形態の手法について、図１３および図１４を参照して説明する。

図１３は、本実施形態に係るスクロール操作した際のスクロールシートおよび各ブロックの座標を示す図であり、（ａ）はスクロール前の座標位置を示す図であり、（ｂ）はスクロール後の座標位置を示す図である。ここでは、ウインドウＷに図３に示すブロックＩＤが（２，７）、（２，８）、（２，９）、（３，７）、（３，８）、（３，９）を表示され、上方向に１ブロックだけスクロール操作された場合について説明する。なお、ウインドウＷの原点Ｗ０を（ｘ，ｙ）＝（０，０）とする。

本実施形態では、クライアント２０側でスクロールシートＳＳを作成し、スクロールシートＳＳ上に配置したブロック画像を、ウインドウＷを介して表示している。スクロール前は、図１３（ａ）に示すように、ウインドウＷに表示されたブロック画像の座標位置は、スクロールシートの原点ＳＳ０を起点として、
ブロックＩＤが（２，７）の場合、座標位置（２００，７００）、
ブロックＩＤが（２，８）の場合、座標位置（２００，８００）、
ブロックＩＤが（２，９）の場合、座標位置（２００，９００）、
ブロックＩＤが（３，７）の場合、座標位置（３００，７００）、
ブロックＩＤが（３，８）の場合、座標位置（３００，８００）、
ブロックＩＤが（３，９）の場合、座標位置（３００，９００）
である。スクロールシートＳＳの原点ＳＳ０は、ウインドウＷの原点Ｗ０を起点として、座標位置（−２００，−７００）である。

スクロール後は、図１３（ｂ）に示すように、ウインドウＷに表示されたブロック画像の座標位置は、
ブロックＩＤが（２，７）の場合、座標位置（２００，７００）、
ブロックＩＤが（２，８）の場合、座標位置（２００，８００）、
ブロックＩＤが（２，９）の場合、座標位置（２００，９００）、
ブロックＩＤが（２，１０）の場合、座標位置（２００，１０００）、
ブロックＩＤが（３，７）の場合、座標位置（３００，７００）、
ブロックＩＤが（３，８）の場合、座標位置（３００，８００）、
ブロックＩＤが（３，９）の場合、座標位置（３００，９００）
ブロックＩＤが（３，１０）の場合、座標位置（３００，１０００）
となる。スクロールシートＳＳの原点ＳＳ０は、ウインドウＷの原点Ｗ０を起点として、座標位置（−２００，−８００）である。

すなわち、スクロール後は、ウインドウＷからはずれたブロックＩＤが（２，７）および（３，７）のブロック画像ＢＰは削除され、新規にブロックＩＤが（２，１０）および（３，１０）のブロック画像ＢＰをサーバ１０に要求することになる。この際、クライアント２０では、図１３（ｂ）に示すように、既にサーバ１０から取得されているブロック画像ＢＰの座標書き換えの処理は必要ない。このような処理が必要となる座標系のモデルについて、図１４を参照して説明する。

図１４は、実施形態に係る座標系のモデルの例を示す図である。本実施形態の座標系のモデルでは、スクロールシートＳＳ以下に配置したブロック画像ＢＰなどのオブジェクトＯＢは、スクロールシートＳＳの原点ＳＳ０を起点とした座標系を有している。そのため、画面をスクロール操作されても、全オブジェクトＯＢの座標情報を書き換える必要はない。

また、図４で示したように、アプリケーションに対して公開するレイヤ（階層）であるオブジェクト配置階層Ｌ２は、スクロール階層Ｌ１と同じ大きさであり、スクロール階層Ｌ１と同期して移動する。すなわち、オブジェクト配置階層Ｌ２はスクロール階層Ｌ１を完全に覆うようにしている。座標系を３次元で考えると、オブジェクト配置階層Ｌ２は、スクロール階層Ｌ１に対しＺ座標（ここではＺindexと称する）を有する。例えば、スクロール階層Ｌ１の座標点が（３００，８００，０）とすると、例えば、オブジェクト配置階層Ｌ２上の座標点は（３００，８００，Ｚindex×１００）となる。なお、Ｚindexは、整数とする。

アプリケーションに対して公開するレイヤ（階層）がない場合、アプリケーションが配置したオブジェクトは、スクロールシートＳＳ上に直接配置することになるが、ブロック画像の上にくるようにアプリケーションがＺindexを制御する必要がある。全てのブロック画像の上にくるレイヤを設けることで、アプリケーションが配置したオブジェクトが、ブロック画像の下に潜り込まないようにしている。

前記の説明ではスクロール操作について説明したが、表示部２７の画面を、２本指を大きく広げて触った状態（タッチ状態）から指の間隔を狭めていくピンチイン操作（縮小操作）、２本指を狭めた触った状態（タッチ状態）から指の間隔を広げていくピンチアウト操作（拡大操作）があった場合においても、本実施形態ではスクロールシートＳＳの縮小、拡大に対応する。このため、各ブロック画像ＢＰの座標位置は、スクロールシートＳＳの原点ＳＳ０からの座標位置に対して、縮小率、拡大率を乗ずるだけで算出でき処理時間がかからない利点を有する。

１０ サーバ
１１ 処理部
１２ 画像管理部
１３ データ通信部
１４ 記憶部
１５ データ
１６ ブロック配列情報
１７ スクロールシート情報
１８ ブロック画像情報
２０ クライアント
２１ 処理部
２２ 画面ブロック管理部
２３ 画面ブロック配置部
２４ 記憶部
２５ 画面サイズ情報
２６ 画面ブロック情報
１００ データ表示システム
ＢＰ ブロック画像
ＤＰ データ画像
Ｌ１ スクロール階層
Ｌ２ オブジェクト配置階層
ＮＷ ネットワーク
ＯＢ オブジェクト
ＳＳ スクロールシート
Ｗ ウインドウ

Claims (2)

1. クライアントとサーバとの間で通信し、前記クライアントからの要求に応じて前記サーバから取得した画像を表示するデータ表示システムであって、
   前記サーバは、
   データを記憶する記憶部と、
   前記記憶部から取得したデータをデータ画像として生成し、前記生成したデータ画像を所定のサイズで分割してブロック毎のブロック画像を生成し、前記生成されたブロック画像を前記データ画像上のブロック座標位置情報と関連づけて前記記憶部に記憶する画像管理部と、を有し、
   前記クライアントは、
   前記サーバから前記データ画像のサイズおよび前記データ画像上のブロック座標位置情報を受信した場合、前記データ画像のサイズと同じサイズで、表示部でスクロール操作をした際に使用するスクロール階層を生成し、前記生成されたスクロール階層上に前記表示部の画面サイズのウインドウを配置し、前記ウインドウからみた表示可能なブロック数を決定し、前記決定されたブロック数分の前記データ画像上のブロック座標位置情報を前記サーバに送信する画面ブロック管理部と、
   前記サーバから前記データ画像上のブロック座標位置情報に該当するブロック画像を受信した場合、前記受信したブロック画像を前記スクロール階層上に配置する画面ブロック配置部と、を有し、
   前記画面ブロック管理部は、前記表示部のスクロール操作がされた場合、前記ウインドウを固定した状態で前記スクロール階層を該スクロール操作に応じて移動し、前記ウインドウからみた前記ブロックを決定し、前記決定されたブロックのうち、まだ受信していないブロック画像を前記サーバに要求する
   ことを特徴とするデータ表示システム。
2. 前記画面ブロック管理部は、前記データ画像のサイズと同じサイズで、オブジェクトを配置する際に使用するオブジェクト配置階層を生成し、前記オブジェクト配置階層を、前記スクロール階層に配置したブロック画像がある平面と直交する座標位置の値が前記スクロール階層のある座標位置の値より大きくなるように配置し、前記配置されたオブジェクト配置階層を前記スクロール階層がスクロール操作された際に同期して移動する
   ことを特徴とする請求項１に記載のデータ表示システム。