JP2014132468A - 画像表示方法および画像表示用プログラム - Google Patents

Abstract

【課題】ビューアの表示領域よりも大きい画像をビューアに表示し、ビューアの表示領域に対して画像を相対移動させる。
【解決手段】ビューアの表示領域１６に枠要素２２の配列を設定する。各枠要素２２に、該当する位置の分割画像をそれぞれ当てはめて表示する。ビューアの表示領域１６に対する画像の相対移動が指示された時に、ビューアの表示領域１６に対する枠要素２２の移動すべき位置を演算して該位置に枠要素２２を移動させる。該画像の相対移動に伴いビューアの表示領域１６から離れる分割画像に該当する位置の枠要素２２を削除し、ビューアの表示領域１６に近づく分割画像に該当する位置に枠要素２２を追加して、画像に対する枠要素の２２配列の位置を変更する。該追加した枠要素２２に、該当する位置の分割画像を当てはめて表示する。
【選択図】図１１

Description

この発明は、ビューアの表示領域よりも大きい画像をビューアに表示する画像表示方法および画像表示用プログラムに関する。

インターネット技術の発展により、世界中からあらゆる情報をブラウザで閲覧することができるようになった。画像情報も同様にブラウザで閲覧できる。これは、Ｗｅｂサーバ上に、ＪＰＥＧファイル等の画像ファイルを表示することを記述したＨＴＭＬファイルを保存しておくことにより実現される。インターネット技術を利用した新聞紙面画像の配信および閲覧も実用化されている。インターネット技術を利用した新聞紙面画像の配信・閲覧技術としては、例えば下記特許文献１に記載のものがある。

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

この発明は新聞紙面等の横縦のサイズ（画素数）が大きい画像をビューアに表示する画像表示方法および画像表示用プログラムを提供しようとするものである。

この発明の画像表示方法はビューアの画像を表示する表示領域よりも大きい画像を分割し該ビューアの表示領域に少なくとも一部が入る分割画像を該ビューアの表示領域に表示する画像表示方法において、分割画像を個々に当てはめて表示する表示領域に相当する複数の枠要素の配列をビューアに設定し、該各枠要素に、該当する位置の分割画像をそれぞれ当てはめて表示しまたは表示できる状態にするものである。

この発明の画像表示方法はビューアの画像を表示する表示領域よりも大きい画像を分割し該ビューアの表示領域に少なくとも一部が入る分割画像を該ビューアの表示領域に表示する画像表示方法において、ビューアの表示領域に少なくとも一部が入る分割画像を含む、ビューアの表示領域に対し所定の位置関係にある、画像全体に対して限定された範囲の画像領域に含まれる分割画像を、個々に当てはめて表示する表示領域に相当する複数の枠要素の配列をビューアに設定し、該各枠要素に、該当する位置の分割画像をそれぞれ当てはめて表示しまたは表示できる状態にし、かつ、ビューアの表示領域に対する画像の相対移動が指示された時に、ビューアの表示領域に対する枠要素の移動すべき位置を演算して該位置に枠要素を移動し、該画像の相対移動に伴いビューアの表示領域から離れる分割画像に該当する位置から枠要素を削除し、ビューアの表示領域に近づく分割画像に該当する位置に枠要素を追加して画像に対する枠要素の配列の位置を変更し、該追加する枠要素に、該当する位置の分割画像を当てはめて表示しまたは表示できる状態にするようにしたものである。これによればビューアの表示領域に対する画像の相対移動が指示された時に、ビューアの表示領域に対する枠要素の移動すべき位置を演算して該位置に枠要素を移動するので、画像全体（つまり全分割画像）を移動する場合に比べて演算量を減らすことができ、これにより画像の移動速度を速くする（追従性をよくする）ことができる。

この発明の画像表示用プログラムは、この発明の画像表示方法を処理装置に実行させることを特徴とするものである。

この発明の画像表示方法は例えば、ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法と組み合わせることができる。この組み合わせの様々な態様を以下に示す。各態様によれば、画像とビューアの表示領域との相対位置に応じてビューアの表示領域に少なくとも一部が入る分割画像を判断し、サーバから該当する分割画像を優先的に送信するようにしたので、画像全体を送信して表示する場合に比べて、少ない待ち時間でビューアに表示することができる。
《態様１》ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法であって、サーバから該画像を複数の領域に分割した画像ごとに送信可能にし、該画像とビューアの表示領域との相対位置に応じてビューアの表示領域に少なくとも一部が入る分割画像を判断し、サーバから該当する分割画像を優先的に送信し、ビューアに表示する画像表示方法。
《態様２》ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法であって、該画像を複数の領域に分割してサーバに予め用意し、該画像とビューアの表示領域との相対位置に応じてビューアの表示領域に少なくとも一部が入る分割画像を判断し、サーバから該当する分割画像を優先的に送信し、ビューアに表示する画像表示方法。
《態様３》ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法であって、該画像を、ビューアの表示領域よりも横方向もしくは縦方向の一方向または横方向および縦方向の両方向の長さがそれぞれ短い複数の領域に分割してサーバに予め用意し、該画像とビューアの表示領域との相対位置に応じてビューアの表示領域に少なくとも一部が入る複数の分割画像を判断し、サーバから該当する複数の分割画像を優先的に送信し、ビューアに元の並び状態に配列して表示する画像表示方法。
《態様４》ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法であって、該画像を複数の領域に分割してサーバに予め用意し、ビューアは該画像とビューアの表示領域との相対位置に応じてビューアの表示領域に少なくとも一部が入る分割画像を判断して該分割画像をサーバに優先的に要求し、サーバは該要求に応じた分割画像を優先的に送信し、ビューアは受け取った分割画像を表示する画像表示方法。
《態様５》ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法であって、該画像を、ビューアの表示領域よりも横方向もしくは縦方向の一方向または横方向および縦方向の両方向の長さがそれぞれ短い複数の領域に分割してサーバに予め用意し、ビューアは該画像とビューアの表示領域との相対位置に応じてビューアの表示領域に少なくとも一部が入る複数の分割画像を判断して該分割画像をサーバに優先的に要求し、サーバは該要求に応じた複数の分割画像を優先的に送信し、ビューアは受け取った分割画像を元の並び状態に配列して表示する画像表示方法。
《態様６》ビューアの表示領域に少なくとも一部が入る分割画像のほか、該分割画像の領域の周囲に隣接する分割画像を含む、ビューアの表示領域に対し所定の位置関係にある限定された範囲の画像領域に含まれる分割画像を併せて判断し、サーバから該当する分割画像を併せて優先的に送信する態様１から５のいずれか１つに記載の画像表示方法。
《態様７》前記分割画像がビューアに既にダウンロードされて保存されている分割画像であるかどうかを判断し、既に保存されている分割画像である場合は、サーバから再度ダウンロードすることなく、該保存されている分割画像を読み出して表示する態様１から６のいずれか１つに記載の画像表示方法。
《態様８》前記分割画像が、前記画像を横方向もしくは縦方向の一方向にまたは横方向および縦方向の両方向に格子状に分割した画像である態様１から７のいずれか１つに記載の画像表示方法。
《態様９》前記格子が、前記画像の左端位置を始点として所定ピクセル数ごとに横方向に分割して形成されたもの、もしくは、該画像の上端位置を始点として所定ピクセル数ごとに縦方向に分割して形成されたもの、または、該画像の左端位置を始点として所定ピクセル数ごとに横方向に分割しかつ該画像の上端位置を始点として所定ピクセル数ごとに縦方向に分割して形成されたものである態様８記載の画像表示方法。
《態様１０》ビューアの表示領域に少なくとも一部が入る分割画像を含む、ビューアの表示領域に対し所定の位置関係にある限定された範囲の画像領域に含まれる分割画像を、個々に当てはめて表示する表示領域に相当する所定数の枠要素をビューアに設定し、該各枠要素に、該当する位置の分割画像をそれぞれ当てはめて表示しまたは表示できる状態にし、かつ、画像の相対移動に伴いビューアの表示領域から離れる分割画像を判断して枠要素への当てはめを解除し、ビューアの表示領域に近づく分割画像を判断して枠要素に新たに当てはめる態様１から９のいずれか１つに記載の画像表示方法。
《態様１１》前記各枠要素に固有の識別情報が付与され、前記画像の相対移動に伴いビューアの表示領域から離れる分割画像の当てはめを解除する枠要素に、ビューアの表示領域に近づく分割画像を新たに当てはめる態様１０記載の画像表示方法。
《態様１２》前記各枠要素に固有の識別情報が付与され、ビューアは該固有の識別情報に、ビューアの表示領域における該枠要素の表示位置の情報と、該枠要素に当てはめる分割画像の識別情報を関連づけて保持し、ビューアは該情報に基づき、各枠要素に当てはめる分割画像を、ビューアの表示領域の所定位置に表示する態様１０または１１記載の画像表示方法。
《態様１３》前記分割画像の識別情報が、画像全体におけるその番地に相当する情報をもって該画像全体における識別情報としてなり、ビューアは該分割画像の識別情報をもってサーバに該分割画像を要求し、サーバは該識別情報に該当する分割画像を判別してビューアに送信する態様１２記載の画像表示方法。
《態様１４》前記分割画像の識別情報が、各分割画像のファイル形式を識別する情報を有しない態様１３記載の画像表示方法。
《態様１５》前記所定数の枠要素全体でブロックを構成し、画像の相対移動が指示された時に、ビューアは、該ビューアの表示領域の原点に対する該ブロックの原点の移動すべき座標を演算し、該演算により求められたブロックの原点の座標に基づき、前記各枠要素の原点の移動すべき座標をそれぞれ演算し、該演算により求められた座標に各枠要素の原点をそれぞれ移動することにより、前記画像の相対移動を実現する態様１０から１４のいずれか１つに記載の画像表示方法。
《態様１６》前記分割画像が前記画像を横方向に格子状に分割した画像でありかつ前記枠要素が横方向に所定数の連続した分割画像を当てはめるものであり、もしくは、前記分割画像が前記画像を縦方向に格子状に分割した画像でありかつ前記枠要素が縦方向に所定数の連続した分割画像を当てはめるものであり、または、前記分割画像が前記画像を横方向および縦方向に格子状に分割した画像でありかつ前記枠要素が横方向に所定数の連続した分割画像もしくは縦方向に所定数の連続した分割画像または横方向に所定数で縦方向に所定数の連続した分割画像を当てはめるものである態様１０から１５のいずれか１つに記載の画像表示方法。
《態様１７》同じ内容の画像を複数の倍率でかつ倍率ごとにそれぞれ複数の領域に分割してサーバから送信可能にし、ビューアから指示される倍率の画像について態様１から１６のいずれか１つに記載の方法を実行する画像表示方法。
《態様１８》倍率にかかわらず、画像を横方向もしくは縦方向または横方向および縦方向に分割するピクセル数が同じである態様１７記載の画像表示方法。
《態様１９》１つの倍率で画像を表示している状態で該画像上の任意の位置にポインタを当てて倍率変更操作をした場合に、該ポインタが位置する画像上の位置を不動点として変更後の倍率の画像を表示する態様１７または１８記載の画像表示方法。
《態様２０》同じ内容の画像を複数の倍率でかつ倍率ごとにそれぞれ複数の領域に分割してサーバから送信可能にし、ビューアから指示される倍率の画像について態様１０から１６のいずれか１つに記載の方法を実行する画像表示方法であって、倍率にかかわらず、前記枠要素の数を同じにしてなる画像表示方法。
《態様２１》前記ビューアがＷｅｂブラウザであり、該Ｗｅｂブラウザでの各演算がサーバから送信されるＨＴＭＬに格納されているJavaScript（登録商標）に基づき実行される態様１から２０のいずれか１つに記載の画像表示方法。これによれば、プラグインソフトウェアなしで画像表示を行うことができる。
《態様２２》前記枠要素が、サーバから送信されるＨＴＭＬに記述されている＜ＤＩＶ＞タグを使用して設定されている態様２１記載の画像表示方法。
《態様２３》前記サーバから送信されるＨＴＭＬに、前記分割画像ごとのファイル名及び／またはファイル形式等の属性の情報が組み込まれていない態様２１または２２記載の画像表示方法。
《態様２４》前記画像が、異なるファイル形式の分割画像が混在して構成されている態様１〜２３のいずれか１つに記載の画像表示方法。

この発明の実施の形態を示すシステム構成図である。 画像分割の説明図である。 図１のシステムにおいて新聞紙面を閲覧する場合のＷｅｂブラウザ１２とＷｅｂサーバ１０との間の通信のやり取りを示す図である。 分割画像データを当てはめる６×６個のセルをブロック化するためのＨＴＭＬソースプログラムである。 図１のＷｅｂブラウザ１２に表示される新聞紙面の画像の一例を示す図である。 新聞紙面１ページの画像とブラウザの表示領域およびブロックの位置関係の一例を示す図である。 ブロックとブラウザの表示領域の関係を示す図で、（ａ）はオフセットなしの場合、（ｂ）は−１セル分のオフセットありの場合である。 ブロックを構成する各セルの原点の座標値の一例を示す図である。 新聞１ページの画像を構成する各分割画像の座標値と、該各分割画像が当てはめられるセルのセル番号を示す図である。 ブロックを構成する各セルに当てはめる分割画像座標値と、該各セルに付与するセル番号と、該各セルのブラウザ上における表示位置の関係を求め、該当する分割画像をＷｅｂサーバに要求し、該要求に応じてＷｅｂサーバから送られてきた分割画像を各セル当てはめるためのJavaScriptの関数（抜粋）を示す図である。 スクロール操作による画像の移動動作の一例を示す図である。 スクロール操作時の制御内容を示すフローチャートである。 ブロックの移動量を計算してブロックの原点の移動すべき座標を求めるためのJavaScriptの関数を示す図である。 ブロックの再設定制御による、ブロックを構成する各セルに対する分割画像の当てはめの変更の一例を示す 表示倍率変更制御の制御内容を示すフローチャートである。 図１５のステップＳ２６で実行する演算の内容を説明するための図である。

この発明の実施の形態を以下説明する。この実施の形態では、プラグインソフトウェアなしで、新聞紙面画像を配信・閲覧する場合について説明する。図１にシステム構成を示す。Ｗｅｂサーバ（サーバコンピュータ）１０とＷｅｂブラウザ（クライアントコンピュータ、ビューア）１２とは、インターネット等の通信ネットワーク１４を介して接続されている。Ｗｅｂサーバ１０には、新聞紙面の画像データベースが予め格納されて用意されている。この画像データベースは、新聞１ページ全体を１つの画像とするもので、新聞を構成する各ページの画像を様々な倍率｛長さ比で例えば、２５％，３３％，５０％，６７％（以上、実際の新聞紙面の縮小画像），１００％（実際の新聞紙面と等倍画像），１３３％，２００％，４００％（以上、実際の新聞紙面の拡大画像）｝で（すなわち、同一ページの画像を複数の倍率で）保存している。各分割画像のファイル形式は同一である必要はなく、例えば分割画像ごとの特徴（写真か文字か、カラーか白黒か等）に応じて圧縮率が高いファイル形式（ＪＰＥＧ形式、ＰＮＧ形式、ＧＩＦ形式等）で保存する。したがって、新聞１ページの画像は、異なるファイル形式の分割画像が混在して構成される場合がある。このように、分割画像ごとに圧縮率が高いファイル形式を用いることにより送信時間を短縮できる。

１つの倍率の１ページの画像は、図２に示すように、左上位置（画像の原点位置）から横方向（Ｘ軸方向）および縦方向（Ｙ軸方向）にそれぞれ所定画素数ごとに格子状に分割されて、複数の矩形の分割画像の集合で構成されている。１つの分割画像を構成する画素数は、倍率の違いにかかわらず一定であり、例えば４８０×４８０ピクセルである（ただし、１ページ横方向全体の画素数が１つの分割画像について定められた横方向の画素数で割り切れない場合は、右端位置の分割画像の画素数は端数となる。同様に、１ページ縦方向全体の画素数が１つの分割画像について定められた縦方向の画素数で割り切れない場合は、下端位置の分割画像の画素数は端数となる。）。これに対し、１ページ分の紙面を構成する画素数は、倍率に応じて変化する｛倍率（＝長さ比）の二乗に比例する｝ので、１ページ分の紙面を構成する分割画像数は、倍率が低い画像ほど少なく、倍率が高い画像ほど多くなる。各分割画像には、１ページの画像における各分割画像の位置（番地）を示す座標値（分割画像座標値）として、図２に示すように、横方向の座標をｘ、縦方向の座標をｙとし、左上角の分割画像位置を原点［０，０］とし、右に行くに従い、また下に行くに従い１ずつ増加する分割画像座標値［ｘ，ｙ］に相当するファイル名がそれぞれ付与されて保存されている。１ページの画像における右端の分割画像の横方向の座標値をｘ_ｌ、下端の分割画像の縦方向の座標値をｙ_ｌとすると、右下角の最後の分割画像の座標値は［ｘ_ｌ，ｙ_ｌ］となる。特定の新聞の、特定のページの、特定の倍率の、特定の分割画像は、新聞名、日付、朝／夕刊別、ページ番号、倍率、分割画像座標値［ｘ，ｙ］の各情報を組み合わせた識別情報で特定（指定）される。新聞紙面を閲覧する場合は、Ｗｅｂブラウザ１２から、閲覧者により指示される閲覧位置に応じた該識別情報が送信され、Ｗｅｂサーバ１０は該識別情報を解析して、該当する分割画像を送信し、Ｗｅｂブラウザ１２は該分割画像を受け取って、元の画像の並びに配列して表示する。上記のような識別情報を用いれば、Ｗｅｂサーバ１０から最初にＷｅｂブラウザ１２に送信するＨＴＭＬ（後述する図３のステップＳ２）に、分割画像ごとのファイル名｛ファイル形式を指定する識別子(.jpg、.png、.gif等）が付加されたデータ｝を組み込んでおく必要がない（すなわち、Ｗｅｂブラウザ１２はファイル名やそのファイル形式を予め知らなくても、個々の分割画像を要求できる。）ので、該ＨＴＭＬのデータ量は少なくて済む。

この実施例では、後述するように（図６）、画像上にブラウザの表示領域全体が入る大きさの『ブロック』を設定する。このブロックは、例えば６×６個の『セル』（枠要素）で構成される。１つのセルは１つの分割画像の大きさ（例えば４８０×４８０ピクセル）に相当し、該当する位置の分割画像が当てはめ（割り当て）られる。ブロックは、画像が移動（スクロール）しても常にブラウザの表示領域全体が入るように、ブラウザの表示領域に対する画像の移動に応じて、ブラウザの表示領域に対してセル単位で移動し、これに伴い、セルに当てはめられる分割画像も順次入れ替えられる。

新聞紙面を閲覧する場合のＷｅｂブラウザ１２とＷｅｂサーバ１０との間の通信のやり取りを図３に示す。閲覧者がＷｅｂブラウザ１２からＷｅｂサーバ１０に○月○日付の○○新聞の○刊（朝刊または夕刊）を閲覧する旨の指示をすると、該当する内容のＨＴＭＬを要求する指示が出される（Ｓ１）。Ｗｅｂサーバ１０はこの要求を受けて、図４に示す、分割画像データを当てはめる６×６個のセルを設定する＜ＤＩＶ＞タグ、および、どの分割画像をどのセルに当てはめてブラウザ上のどの位置に表示するかを算出するためのJavaScriptを含んだＨＴＭＬをＷｅｂブラウザに返す（Ｓ２）。なお、６×６個のセルには、図４に示すように、「canvas００００」〜「canvas０５０５」の名前が付けられている。「canvas」に続く４桁の数字のうち、最初の２桁はブロック内でのセルのＸ軸方向の番地（００〜０５）を示し、それに続く残りの２桁はブロック内でのセルのＹ軸方向の番地（００〜０５）を示す。

Ｗｅｂブラウザ１２は、ＨＴＭＬを受け取ると、該ＨＴＭＬに記述されているJavaScriptに基づき、各セルにどの分割画像を当てはめるかおよび各セルに当てはめられた分割画像をブラウザ１２上のどの位置に表示するかを算出する。そして、算出された分割画像がＷｅｂブラウザ１２に既にダウンロードされてキャッシュメモリに保存されている分割画像であるかどうかを判断し、既に保存されている分割画像については、それを読み出して該当するセルに当てはめる。また、Ｗｅｂブラウザ１２に保存されていない分割画像については、Ｗｅｂサーバ１０に対し該当する分割画像を要求する（Ｓ３）。Ｗｅｂサーバ１０は該要求に応じて、該当する分割画像データを送信する（Ｓ４）。Ｗｅｂブラウザ１２は該分割画像データを受け取り、該当するセルに当てはめる。このようにして、６×６個のセルに分割画像がそれぞれ当てはめられて（関連づけられて）、前記算出された位置にそれぞれ表示される（Ｓ５）。これにより、Ｗｅｂブラウザ１２の表示領域全体に、分割画像がつなぎ目なく表示されて、新聞紙面の画像が表示される。表示の一例を図５に示す（図５においてセルの境界線は仮想的に示したもので、実際の画面では表示されない。）。なお、閲覧開始当初は初期画面として、Ｗｅｂブラウザ１２から閲覧の指示をした新聞の第１ページの所定倍率（紙面の記事全体が見渡せるように比較的低い倍率）の分割画像をＷｅｂブラウザ１２がＷｅｂサーバ１０に要求して表示するように、Ｗｅｂサーバ１０から送信するＨＴＭＬが記述されている。

初期表示制御
ブロックを構成する各セルに当てはめる分割画像について説明する。ここでは、図６に示すように、ブラウザの表示領域１６よりも大きい画像１８（新聞紙面１ページ分の画像）を、ブラウザの表示領域１６の中心と画像１８の中心を一致させた状態に初期表示するものとする。また、ブロック２０を６×６個のセル２２で構成し、ブロック２０の左側および上側を１セルずつ空けて（つまり、ブラウザの表示領域１６の左上角が、ブロック２０の左から２番目、上から２番目のセルに位置するように）表示するものとする。なお、以下の説明において、座標値あるいは番号（番地）はその種類に応じて次のように区別して表記する。
（ ， ）：ピクセル座標値（ピクセル単位の座標値）
［ ， ］：分割画像座標値（画像全体における分割画像ごとの座標値）
〔 ， 〕：セル番号（ブロックにおけるセルごとの番号値）
ピクセル座標値は、ブラウザの原点（左上角）を原点（０，０）とし、Ｘ軸方向の極性は右方向を＋、左方向を−とし、Ｙ軸方向の極性は下方向を＋、上方向を−とする。

図６において、各変数は次を意味する。
Ｘ_ｉ：画像（新聞紙面１ページ）全体の幅（ピクセル値）
Ｙ_ｉ：画像（新聞紙面１ページ）全体の高さ（ピクセル値）
Ｘ_ｂ：ブラウザの幅（ピクセル値）
Ｙ_ｂ：ブラウザの高さ（ピクセル値）
Ｘ_１＝Ｘ_ｉ／２：画像幅の半値 …（式１）
Ｙ_１＝Ｙ_ｉ／２：画像高さの半値 …（式２）
Ｘ_２＝Ｘ_ｂ／２：ブラウザ幅の半値 …（式３）
Ｙ_２＝Ｙ_ｂ／２：ブラウザ高さの半値 …（式４）

なお、画像全体の幅Ｘ_ｉおよび高さＹ_ｉの値は、ＷｅｂサーバがＨＴＭＬにhiddenタグの属性値として埋め込んで送信する（図３のステップＳ２）ことにより、Ｗｅｂブラウザに与えられる。このhiddenタグの例を以下に示す。
<INPUT TYPE="hidden" NAME="imageWidth" VALUE="5986">
<INPUT TYPE="hidden" NAME="imageHeight" VALUE="8130">
この例によれば、Ｘ_ｉ＝５９８６（ピクセル）、Ｙ_ｉ＝８１３０（ピクセル）が与えられる。また、ブラウザの幅および高さの値Ｘ_ｂ、Ｙ_ｂは、Ｗｅｂサーバから送信されるＨＴＭＬ（図３のステップＳ２）に記述されているJavaScriptに基づきブラウザ自身で取得する。ブラウザの幅および高さの値Ｘ_ｂ、Ｙ_ｂはJavaScriptの次の関数で求められる。
browserWidth=document.body.clientWidth; //表示されているブラウザの幅
browserHeight=document.body.clientHeight; //表示されているブラウザの高さ

図６において、ブラウザの原点（左上角）を原点（０，０）とすると、画像の原点の座標値（Ｘ_０，Ｙ_０）は次式によって与えられる。
Ｘ_０＝Ｘ_２−Ｘ_１：画像のＸ軸原点 …（式５）
Ｙ_０＝Ｙ_２−Ｙ_１：画像のＹ軸原点 …（式６）
１つの分割画像の大きさ（＝１つのセルの大きさ）を４８０×４８０ピクセルとすると、画像全体の分割画像数は次式によって与えられる。
Ｇ_ｘｉ＝Ｘ_ｉ／４８０：Ｘ軸方向の全分割画像数 …（式７）
Ｇ_ｙｉ＝Ｙ_ｉ／４８０：Ｙ軸方向の全分割画像数 …（式８）
このＧ_ｘｉ、Ｇ_ｙｉが小数点以下の桁を有する場合は、小数点以下を切り上げた整数値が実際のＸ軸方向およびＹ軸方向の全分割画像数である。また、Ｇ_ｘｉの小数点以下を切り捨てた値が右端の分割画像の横方向の座標値ｘ_ｌ（図２）であり、Ｇ_ｙｉの小数点以下を切り捨てた値が下端の分割画像の縦方向の座標値ｙ_ｌ（同）である。

一方、ブラウザの表示領域１６に必要な分割画像数は次式によって与えられる。
Ｇ_ｘｂ＝Ｘ_ｂ／４８０：Ｘ軸方向の表示に必要な分割画像数 …（式９）
Ｇ_ｙｂ＝Ｙ_ｂ／４８０：Ｙ軸方向の表示に必要な分割画像数 …（式１０）
ブラウザの表示領域１６に入る最初の分割画像｛ブラウザの原点（０，０）が属する（位置する）分割画像｝の座標［ｘ_ｆ，ｙ_ｆ］は、次式によって与えられる。
ｘ_ｆ＝−｛（Ｘ_０／４８０）の商の小数点以下を切り捨てた値｝ …（式１１）
ｙ_ｆ＝−｛（Ｙ_０／４８０）の商の小数点以下を切り捨てた値｝ …（式１２）

ブロックの左端に配置されるセル（Ｘ軸方向のセル番号をＳ_ｘｆとする。以下「Ｘ軸最初セル」という。）には、Ｘ軸方向の分割画像座標値がｘ_ｆ−１の分割画像を当てはめる。同様に、ブロックの上端に配置されるセル（Ｙ軸方向のセル番号をＳ_ｙｆとする。以下「Ｙ軸最初セル」という。）には、Ｙ軸方向の分割画像座標値がｙ_ｆ−１の分割画像を当てはめる。すなわち、
Ｓ_ｘｆ＝ｘ_ｆ−１ …（式１３）
Ｓ_ｙｆ＝ｙ_ｆ−１ …（式１４）
とする。これによれば、ブロックの最初のセル〔Ｓ_ｘｆ，Ｓ_ｙｆ〕（ブロックの左上角に配置されるセル。以下「最初セル」という。）には、［ｘ_ｆ−１，ｙ_ｆ−１］の分割画像が当てはめられる。−１を付加するのは、Ｓ_ｘｆ＝ｘ_ｆ、Ｓ_ｙｆ＝ｙ_ｆに設定すると、図７（ａ）に示すように、ブロック２０の左端部分および上端部分がブラウザの表示領域１６の左端部分および上端部分に接近して配置されることになり、画像を右下方向に移動（スクロール）させた際に、新たに左側および上側からブラウザの表示領域１６に入るべき分割画像がＷｅｂサーバから新たに転送されて来るまでの待ち時間に、ブラウザの表示領域１６の左端部分および上端部分に空白部分（画像が表示されない部分）が生じ易くなるためである。これに対し、−１を付加すると、図７（ｂ）に示すように、ブロック２０は予めブラウザの表示領域１６に対して１セル分以上左方向および上方向にオフセットして配置されることになり、画像を右下方向に移動させた際に、ブラウザの表示領域１６の左端部分および上端部分に空白部分を生じにくくさせることができる。

ブロックを構成するその他のセルに当てはめる分割画像の座標は、最初セル〔Ｓ_ｘｆ，Ｓ_ｙｆ〕に当てはめる分割画像の座標［ｘ_ｆ−１，ｙ_ｆ−１］に、Ｘ軸方向並びにＹ軸方向に１ずつ順次足していくことにより求められる。すなわち、最初セル〔Ｓ_ｘｆ，Ｓ_ｙｆ〕を０番目のセルとして、Ｘ軸方向にｍ番目（ｍ＝０，１，…，５）、Ｙ軸方向にｎ番目（ｎ＝０，１，…，５）のセル〔Ｓ_ｘｍ，Ｓ_ｙｎ〕に当てはめられる分割画像座標値は、
Ｓ_ｘｍ＝Ｓ_ｘｆ＋ｍ＝ｘ_ｆ−１＋ｍ …（式１５）
Ｓ_ｙｎ＝Ｓ_ｙｆ＋ｎ＝ｙ_ｆ−１＋ｎ …（式１６）
で与えられる。したがって、ブロックの最後のセル〔Ｓ_ｘｌ，Ｓ_ｙｌ〕（ブロックの右下角に配置されるセル。以下「最後セル」という。なお、ブロックの右端に配置されるセルをそれぞれ「Ｘ軸最後セル」、ブロックの下端に配置されるセルをそれぞれ「Ｙ軸最後セル」という。）に当てはめる分割画像の座標は、
Ｓ_ｘｌ＝Ｓ_ｘｆ＋５＝ｘ_ｆ＋４ …（式１７）
Ｓ_ｙｌ＝Ｓ_ｙｆ＋５＝ｙ_ｆ＋４ …（式１８）
となる。以上のようにして、ブロック２０を構成する６×６個のセル２２に当てはめるべき分割画像が求められる。

次に、ブロック２０を構成する６×６個のセル２２のブラウザ上における表示位置について説明する。各セルのブラウザ上における表示位置は、該各セルの原点（左上角の位置）の座標値（ピクセル値）で特定（指定）される。各セルの原点の座標値は以下のようにして求められる。まず、最初セル〔Ｓ_ｘｆ，Ｓ_ｙｆ〕の原点（X_ｂ０，Ｙ_ｂ０）は、ブロックの原点に相当し（図６参照）、
X_ｂ０＝Ｘ_０＋（Ｓ_ｘｆ×４８０） …（式１９）
Ｙ_ｂ０＝Ｙ_０＋（Ｓ_ｙｆ×４８０） …（式２０）
で与えられる。ブロックを構成するその他のセルの原点は、このようにして求められた最初セル〔Ｓ_ｘｆ，Ｓ_ｙｆ〕の原点（X_ｂ０，Ｙ_ｂ０）にＸ軸方向並びにＹ軸方向に４８０ずつ順次足していくことにより求められる。すなわち、最初セル〔Ｓ_ｘｆ，Ｓ_ｙｆ〕を０番目のセルとして、Ｘ軸方向にｍ番目（ｍ＝０，１，…，５）、Ｙ軸方向にｎ番目（ｎ＝０，１，…，５）のセル〔Ｓ_ｘｍ，Ｓ_ｙｎ〕の原点（X_ｂｍ，Ｙ_ｂｎ）は、
X_ｂｍ＝X_ｂ０＋（ｍ×４８０） …（式２１）
Ｙ_ｂｎ＝Ｙ_ｂ０＋（ｎ×４８０） …（式２２）
で与えられる。

Ｗｅｂサーバから送信されるＨＴＭＬ（図３のステップＳ２）には、以上の（式１）〜（式２２）に相当する演算を実行するJavaScriptが記述されており、Ｗｅｂブラウザは、該ＨＴＭＬを受け取ると、該JavaScriptに基づき、ブロックを構成する６×６個のセルに当てはめる分割画像座標値と、各セルのブラウザ上における表示位置（各セルの原点位置を表示するピクセル座標位置）を算出する。そして、Ｗｅｂブラウザは、算出された分割画像座標値を識別情報としてＷｅｂサーバに該当する分割画像を要求する（Ｗｅｂサーバから既にダウンロードされてキャッシュメモリに保存されている分割画像についてはそれを使用する。）（図３のステップＳ３）。Ｗｅｂサーバ１０は該要求に応じて、該当する分割画像データを送信し（同Ｓ４）、Ｗｅｂブラウザ１２は該分割画像データを受け取り、該当するセルに当てはめて、それぞれ前記求められた位置に表示する（同Ｓ５）（図６、図７、図９、図１１等から明らかなように、セルに当てはめられてもブラウザの表示領域から外れている分割画像はその時点では表示されないが、スクロール操作によりブラウザの表示領域に入ってくれば表示できる状態になっている）。

ここで、（式１）〜（式２２）に実際の値を入れて、ブラウザによって求められる、各セルに当てはめる分割画像座標値と、各セルのブラウザ上における表示位置を確かめてみる。画像の大きさをＸ軸方向：５９８６ピクセル、Ｙ軸方向：８１３０ピクセルとし、ブラウザの幅をＸ軸方向：１０２０ピクセル、Ｙ軸方向：５５６ピクセルとすると、Ｘ_ｉ＝５９８６、Ｙ_ｉ＝８１３０、Ｘ_ｂ＝１０２０、Ｙ_ｂ＝５５６となる。（式１）、（式２）により、画像幅の半値Ｘ_１、画像高さの半値Ｙ_１は、
Ｘ_１＝５９８６／２＝２９９３
Ｙ_１＝８１３０／２＝４０６５
となる。また、（式３）、（式４）により、ブラウザ幅の半値Ｘ_２、ブラウザ高さの半値Ｙ_２は、
Ｘ_２＝１０２０／２＝５１０
Ｙ_２＝５５６／２＝２７８
となる。また、（式５）、（式６）により、画像の原点（Ｘ_０，Ｙ_０）は、
Ｘ_０＝５１０−２９９３＝−２４８３
Ｙ_０＝２７８−４０６５＝−３７８７
となる。

１つの分割画像の大きさを４８０×４８０ピクセルとすると、（式７）、（式８）により、画像全体の分割画像数は、
Ｇ_ｘｉ＝５９８６／４８０＝１２．４７０８
Ｇ_ｙｉ＝８１３０／４８０＝１６．９３７５
となる。このＧ_ｘｉ＝１２．４７０８、Ｇ_ｙｉ＝１６．９３７５という数値は、画像全体の分割画像数が、Ｘ軸方向に１３個、Ｙ軸方向に１７個で、全体として１３×１７＝２２１個となることを示す。また、Ｇ_ｘｉの小数点以下を切り捨てた値が右端の分割画像の横方向の座標値ｘ_ｌであり、Ｇ_ｙｉの小数点以下を切り捨てた値が下端の分割画像の縦方向の座標値がｙ_ｌである。すなわち、ｘ_ｌ＝１２、ｙ_ｌ＝１６となる。
（式９）、（式１０）により、ブラウザの表示領域に必要な分割画像数は、
Ｇ_ｘｂ＝１０２０／４８０＝２．１２５
Ｇ_ｙｂ＝５５６／４８０＝１．１５８３３
となる。このＧ_ｘｂ＝２．１２５、Ｇ_ｙｂ＝１．１５８３３という数値は、ブラウザの表示領域全体に画像を表示するためには、ブロックを構成するセルが、Ｘ軸方向に少なくとも４個、Ｙ軸方向に少なくとも３個必要であることを示す。この実施例では、画像の移動（スクロール）動作時に、空白部分（画像が表示されない部分）を生じにくくさせるために、前述のようにＸ軸方向が６個、Ｙ軸方向が６個の合計６×６＝３６個のセルでブロックを構成している。ブロックを構成するセル数をより多くすれば、画像の移動動作時に空白部分をより生じにくくさせることができるが、その反面、該画像の移動動作時に各セルの座標計算に時間を要し、移動速度が遅くなる可能性がある（ただし、ＣＰＵの能力による）ので、移動動作時に空白部分が発生するのを防止することと画像の移動速度との兼ね合いで、ブロックを構成するセル数を設定する。

（式１１）、（式１２）により、ブラウザの表示領域に入る最初の分割画像の座標［ｘ_ｆ，ｙ_ｆ］は、
ｘ_ｆ＝−｛（−２４８３／４８０）の商の小数点以下を切り捨てた値｝＝５
ｙ_ｆ＝−｛（−３７８７／４８０）の商の小数点以下を切り捨てた値｝＝７
となる。したがって、ブロックの最初セル〔Ｓ_ｘｆ，Ｓ_ｙｆ〕に当てはめる分割画像の座標は、（式１３）、（式１４）により、
Ｓ_ｘｆ＝５−１＝４
Ｓ_ｙｆ＝７−１＝６
となる。また、ブロックの最後セル〔Ｓ_ｘｌ，Ｓ_ｙｌ〕に当てはめる分割画像の座標は、（式１７）、（式１８）により、
Ｓ_ｘｌ＝Ｓ_ｘｆ＋５＝９
Ｓ_ｙｌ＝Ｓ_ｙｆ＋５＝１１
となる。

（式１９）、（式２０）により、最初セル〔Ｓ_ｘｆ，Ｓ_ｙｆ〕の原点（X_ｂ０，Ｙ_ｂ０）は、
X_ｂ０＝−２４８３＋（４×４８０）＝−５６３
Ｙ_ｂ０＝−３７８７＋（６×４８０）＝−９０７
となる。この最初セルの座標（X_ｂ０，Ｙ_ｂ０）を基に（式２１）、（式２２）により求められる各セルの原点の座標値を図８に示す。

ここで、ブロック２０を構成する各セル２２のセル番号の付与方法について説明する。このセル番号の付与もＷｅｂサーバから送信されるＨＴＭＬに記述されているJavaScriptに基づき実行される。各セルのセル番号〔Ｓ_ｘ，Ｓ_ｙ〕は、該各セルに当てはめられる分割画像の座標［ｘ，ｙ］を、Ｘ軸方向についてはブロックを構成するＸ軸方向の総セル数、Ｙ軸方向についてはブロックを構成するＹ軸方向の総セル数でそれぞれ割った余りの値として付与する。これによれば、各分割画像が当てはめられるセルのセル番号（各分割画像に割り当てられるセル番号）は、分割画像ごとに一意的に定まる。この実施例では、Ｘ軸方向、Ｙ軸方向の総セル数はそれぞれ６であるから、セル番号は、Ｘ軸方向，Ｙ軸方向ともに０，１，２，…，５の繰り返しとなる。この場合、各分割画像が当てはめられるセルのセル番号を図９に示す。図９の各分割画像位置に記述されている数値のうち、上段は各分割画像２４の座標値を示し、下段は当てはめられるセルのセル番号を示す。セル番号が繰り返し使われても、ブロック内のセル数は６×６個だけであるから、ブロック内で同時に同じセル番号が重複して使用されることはない。このようにセル番号を繰り返し用いることにより、図４に示すように、ＨＴＭＬに記述する、セルを設定するための＜ＤＩＶ＞タグは６×６個だけ用意すれば足りることになる。

以上のようにして、Ｗｅｂサーバから送信されるＨＴＭＬに記述されているJavaScriptに基づき、ブロック２０を構成する６×６個のセル２２に当てはめる各分割画像２４の座標値と該各セル２２のセル番号および該各セル２２のブラウザ上における表示位置（各セルの原点位置を表示するピクセル座標位置）が求められたら、Ｗｅｂサーバに対し該当する分割画像２４の送信を要求し（図３のステップＳ３）、Ｗｅｂサーバから該要求に応じた分割画像データが送られてきたら（同Ｓ４）、該当するセル番号に当てはめてブラウザに表示する（同Ｓ５）。これにより、Ｗｅｂブラウザ１２の表示領域全体に、分割画像２４がつなぎ目なく表示されて、新聞紙面の画像１８が表示される。

図１０は、ブロック２０を構成する各セル２２に当てはめる各分割画像２４の座標値と、該各セル２２に付与するセル番号と、該各セル２２のブラウザ上における表示位置（各セルの原点位置）の関係を求め、該当する分割画像をＷｅｂサーバに要求し、該要求に応じてＷｅｂサーバから送られてきた分割画像２４を各セル２２に当てはめるためのJavaScriptの関数（抜粋）を示す。このJavaScriptの関数は、画像の左上角の分割画像［０，０］を始点として、分割画像位置をＹ軸方向に走査してブロックに含まれる分割画像の有無を判断し、ブロックに含まれる分割画像があった場合は、該分割画像が当てはめられるセルに、該分割画像のX軸方向の座標値ｘを６で割った余りをＸ軸方向のセル番号sellXとして付与し、該分割画像のＹ軸方向の座標値ｙを６で割った余りをＹ軸方向のセル番号sellYとして付与する。そして、「document.all("canvas" + sellX +sellY).innerHTML = "<IMG ID='image" +x +y + " 'SRC="image.cgi?a=xxx&b=xxx&c=xxx&d=xxx&e=xxx&f=xxx&g=xxx" STYLE='left:" +originX +";top:" + originY + ";'>"; 」により、該当する分割画像をＷｅｂサーバに要求し、該要求に応じてＷｅｂサーバから送られてきた分割画像を該当するセルに当てはめる。なお、上のJavaScriptの関数は、「canvas sellX sellY」（sellX＝００〜０５、sellY＝００〜０５）のＩＤを持つＤＩＶタグ（図４参照）を、このセルに当てはめる分割画像の座標値「image x y」のＩＤを持つＩＭＧタグに変換し、該ＩＭＧタグのソースとして「image.cgi」（Ｗｅｂサーバ側の画像データ検索および転送モジュール）からの分割画像データを埋め込むことを意味する。そのとき「a=xxx&b=xxx&c=xxx&d=xxx&e=xxx&f=xxx&g=xxx」は、Ｗｅｂサーバに保存されている画像を特定するためのパラメータ（新聞名、日付、朝／夕刊別、ページ番号、倍率等の情報）として、特定の画像ファイルを検索するための値となる。「STYLE='left:" +originX +";top:" + originY 」はこのセル（分割画像）の原点（左上の位置）を表示するブラウザの表示領域上の座標位置（ピクセル値）を示す。

以上の処理をその列のＹ軸方向の最後の分割画像まで行ったら、その１つ右隣の列に移って同様に上端からブロックに含まれる分割画像の有無を判断し、ブロックに含まれる分割画像が当てはめられるセルに、Ｘ軸方向のセル番号sellXおよびＹ軸方向のセル番号sellYを付与する。そして、Ｘ軸方向の最後の列の最後の分割画像まで達したら、処理を終了する。

スクロール制御
次に、以上のようにして初期表示がなされた後に、閲覧者のスクロール操作によりブラウザの表示画面上で画像を任意の位置に移動させる（つまり、閲覧位置を移動する）方法について説明する。図１１は、スクロール操作による画像の移動動作を示す。図１１では、画像１８をＸ軸方向の右方向にＸ_ｄ（ピクセル値）、Ｙ軸方向の下方向にＹ_ｄ（ピクセル値）移動させた場合（移動後の画像位置を符号１８’で示す。）を示す。ブロック２０は画像１８と一体に移動するが、この移動によってブロック２０はブラウザの表示領域１６に対し相対移動し、何も手当をしなければ、ブロック２０はいずれブラウザの表示領域１６から外れてしまう。そこで、移動量に応じて画像１８に対するブロック２０の位置を変更し、これに伴い該ブロック２０を構成する各セル２２に対する分割画像の当てはめを更新する制御（ブロックの再設定）を併せて行う。このブロックの再設定により、ブロック２０は常にブラウザの表示領域１６全体を含む（ブラウザの表示領域１６全体が常にブロック２０内に含まれる）ように制御される。図１１の例では、スクロール操作によりブロック２０がブラウザの表示領域１６に対し相対的に右方向に移動して、セルの境界線が１本ブラウザの原点を越えているので、ブロックの再設定により、右端の１列のセルが削除され、その分左端に１列のセルが追加されている。それらの間の５列のセルには変更はない。

スクロール操作時の制御フローを図１２に示す。図１２の制御は、Ｗｅｂサーバから送信されるＨＴＭＬに記述されているJavaScriptによって行われる。スクロール操作時の制御は、画像を移動させる制御と、ブロックの再設定制御で構成される。はじめに、画像の移動制御について説明する。新聞紙面の画像が表示されている画面上の任意の位置にマウスカーソル（ポインタ）を当ててマウス左ボタンを押下し（マウスダウン操作）（図１２のステップＳ１１）、押下したままマウスカーソルを移動させると（ドラッグ操作）、マウスカーソルに追従して画像が移動する（同Ｓ１２）。この場合、セル単位で移動量の演算をすると、演算処理に時間がかかり、移動動作が遅くなる。そこで、図４のＨＴＭＬのように、６×６個のセルを設定する＜ＤＩＶ＞タグ全体を、名前がcanvas BLOCKである＜ＤＩＶ＞タグで１つのブロックとして束ねて、該１つのブロックについて移動量を演算して該ブロックの移動後の原点を求め、該求められたブロックの原点の座標に基づき、該ブロックを構成する各セルの原点の座標を演算して求める。これによれば、ブロックの原点に対する各セルの原点の相対位置は予め定まっており、簡単な演算で求めることができ、一方複雑な演算を要する移動量の演算は１つのブロックについてのみ行えばよいので、セル単位で（セルごとに）移動量の演算をする場合に比べて全体として演算量が少なくて済み、移動動作を高速化することができる。

図１３は、ブロック（画像）の移動量（＝マウスカーソルの移動量）を計算してブロックの原点の移動すべき座標を求めるためのJavaScriptの関数を示す。この関数によりブロックの原点の移動すべき座標が求められたら、この座標がブロックの最初セル〔Ｓ_ｘｆ，Ｓ_ｙｆ〕の原点の座標になるので、他のセルについてもX軸方向およびＹ軸方向にそれぞれ４８０ずつ順次足していくことによりそれぞれの原点の座標を求める。このような演算をマウスカーソルが移動されている間中繰り返すことにより、マウスカーソルに追従して画像を移動させることができる。マウスカーソルを任意の位置に移動後、マウスボタンを離す（マウスアップ操作をする）と、画像はその位置で停止する。

次に、ブロックの再設定制御について説明する。ドラッグ操作を終了して、マウスアップ操作をすると、移動後の画像上でブラウザの原点（０，０）が属するセル位置（分割画像位置）が判断され、ドラッグ前の位置に対して変化しているかどうか｛つまり、ブラウザの原点（０，０）がセルの境界を超えたかどうか｝が判断される（図１２のステップＳ１３）。そして、変化している場合（セルの境界を越えた場合）は、その変化した分（セルの境界を越えた本数分）ブロック位置を画像の移動と同じ方向に移動させるとともに、該ブロックを構成する各セルに対する分割画像の当てはめを更新することによりブロックの再設定を行う（同Ｓ１４）。

ブロックの再設定制御は次の演算により実現される。ドラッグ操作による画像の移動量を図１１のようにＸ軸方向の右方向にＸ_ｄ、Ｙ軸方向の下方向にＹ_ｄとすると｛画像の移動量Ｘ_ｄ、Ｙ_ｄは、ドラッグ終了位置（マウスアップ操作位置）でのマウスカーソル座標値からドラッグ開始位置（マウスダウン操作位置）でのマウスカーソル座標値を引算することにより得られる。｝、移動後の画像の原点の座標値（Ｘ_ｄ０，Ｙ_ｄ０）は、次式によって与えられる。
Ｘ_ｄ０＝Ｘ_ｆ０＋Ｘ_ｄ：移動後の画像のＸ軸原点 …（式２３）
Ｙ_ｄ０＝Ｙ_ｆ０＋Ｙ_ｄ：移動後の画像のＹ軸原点 …（式２４）
ただし、Ｘ_ｆ０：前回のスクロール操作による画像の最終的なＸ軸原点。初回のスクロール操作であれば、Ｘ_ｆ０＝Ｘ_０（初期表示時の画像のＸ軸原点）である。
Ｙ_ｆ０：前回のスクロール操作による画像の最終的なＹ軸原点。初回のスクロール操作であれば、Ｙ_ｆ０＝Ｙ_０（初期表示時の画像のＹ軸原点）である。

また、移動後にブラウザの表示領域に入る最初の分割画像｛ブラウザの原点（０，０）が属する分割画像｝の座標［ｘ_ｄｆ，ｙ_ｄｆ］は、次式によって与えられる。
ｘ_ｄｆ＝−｛（Ｘ_ｄ０／４８０）の商の小数点以下を切り捨てた値｝ …（式２５）
ｙ_ｄｆ＝−｛（Ｙ_ｄ０／４８０）の商の小数点以下を切り捨てた値｝ …（式２６）
したがって、ドラッグによってセルの境界がブラウザの原点（０，０）を越えた数Ｓ_ｘｄ，Ｓ_ｙｄは、次式によって与えられる。
Ｓ_ｘｄ＝ｘ_ｆ０−ｘ_ｄｆ …（式２７）
Ｓ_ｙｄ＝ｙ_ｆ０−ｙ_ｄｆ …（式２８）
ただし、ｘ_ｆ０：前回のブロックの再設定時のブラウザの表示領域に入る最初の分割画像のX軸座標
ｙ_ｆ０：前回のブロックの再設定時のブラウザの表示領域に入る最初の分割画像のＹ軸座標

（式２７）によって求められるＳ_ｘｄが０であれば、セルの境界はブラウザの原点（０，０）をX軸方向に越えてないことがわかり、＋の値であれば、その本数分のセルの境界がブラウザの原点（０，０）を右方向に越えたことがわかり、−の値であれば、その本数分のセルの境界がブラウザの原点（０，０）を左方向に越えたことがわかる。また、（式２８）によって求められるＳ_ｙｄが０であれば、セルの境界はブラウザの原点（０，０）をＹ軸方向に越えてないことがわかり、＋の値であれば、その本数分のセルの境界がブラウザの原点（０，０）を下方向に越えたことがわかり、−の値であれば、その本数分のセルの境界がブラウザの原点（０，０）を上方向に越えたことがわかる。

（式２７）、（式２８）の演算の結果、Ｓ_ｘｄ，Ｓ_ｙｄがいずれも０の場合は、ブラウザの原点（０，０）が属する分割画像の位置はドラッグの前後で変化がないことになるから、ブロックの再設定は行われない。これに対し、（式２７）、（式２８）の演算の結果、Ｓ_ｘｄ，Ｓ_ｙｄのうち少なくとも一方が０以外の場合は、ブラウザの原点（０，０）が属する分割画像の位置がドラッグの前後で変化したことになるから、ブロックの再設定が行われる。

ブロックの再設定は、Ｓ_ｘｄ，Ｓ_ｙｄに相当するセル数分、ブロック全体を、画像に対し、画像の移動方向と逆方向に相対的に移動させることで実現される。このブロックの再設定によって、該ブロックを構成する各セルには次のように分割画像が当てはめられる。ブロックの左端に配置されるセル（Ｘ軸最初セル）Ｓ_ｘｄｆには、Ｘ軸方向の分割画像座標値がｘ_ｄｆ−１の分割画像が当てはめられる。同様に、ブロックの上端に配置されるセル（Ｙ軸最初セル）には、Ｙ軸方向の分割画像座標値がｙ_ｄｆ−１の分割画像が当てはめられる。すなわち、
Ｓ_ｘｄｆ＝ｘ_ｄｆ−１ …（式２９）
Ｓ_ｙｄｆ＝ｙ_ｄｆ−１ …（式３０）
とする。これによれば、再設定後のブロックの左上角に配置されるセル（最初セル）〔Ｓ_ｘｄｆ，Ｓ_ｙｄｆ〕には、［ｘ_ｄｆ−１，ｙ_ｄｆ−１］の分割画像が当てはめられる。−１を付加するのは、（式１３）、（式１４）で−１を付加したのと同じ目的である。すなわち、ブロックをブラウザの表示領域に対して１セル分以上左方向および上方向にオフセットして配置することにより、画像を右下方向に移動させた際に、ブラウザの表示領域の左端部分および上端部分に空白部分を生じにくくする。

ブロックを構成するその他のセルに当てはめる分割画像の座標は、最初セル〔Ｓ_ｘｄｆ，Ｓ_ｙｄｆ〕に当てはめる分割画像の座標［ｘ_ｄｆ−１，ｙ_ｄｆ−１］に、Ｘ軸方向並びにＹ軸方向に１ずつ順次足していくことにより求められる。すなわち、最初セル〔Ｓ_ｘｄｆ，Ｓ_ｙｄｆ〕を０番目のセルとして、Ｘ軸方向にｍ番目（ｍ＝０，１，…，５）、Ｙ軸方向にｎ番目（ｎ＝０，１，…，５）のセル〔Ｓ_ｘｄｍ，Ｓ_ｙｄｎ〕に当てはめられる分割画像座標値は、
Ｓ_ｘｄｍ＝Ｓ_ｘｄｆ＋ｍ＝ｘ_ｄｆ−１＋ｍ …（式３１）
Ｓ_ｙｄｎ＝Ｓ_ｙｄｆ＋ｎ＝ｙ_ｄｆ−１＋ｎ …（式３２）
で与えられる。したがって、ブロックの右下角に配置されるセル（最後セル）〔Ｓ_ｘｄｌ，Ｓ_ｙｄｌ〕に当てはめる分割画像の座標は、
Ｓ_ｘｄｌ＝Ｓ_ｘｄｆ＋５＝ｘ_ｆ＋４ …（式３３）
Ｓ_ｙｄｌ＝Ｓ_ｙｄｆ＋５＝ｙ_ｆ＋４ …（式３４）
となる。

以上のようにして、再設定されたブロックを構成する６×６個のセルに当てはめるべき分割画像が求められる。６×６個のセルに当てはめるべき分割画像が求められたら、新たにブロックの領域に入ってきた分割画像について、未取得の場合はＷｅｂサーバに要求し、Ｗｅｂサーバから既にダウンロードされてキャッシュメモリに保存されている分割画像についてはそれを読み出して、それぞれ該当するセルに当てはめて表示する（図６、図７、図９、図１１等から明らかなように、セルに当てはめられてもブラウザの表示領域から外れている分割画像はその時点では表示されないが、スクロール操作によりブラウザの表示領域に入ってくれば表示できる状態になっている）。なお、図９に示したように、各分割画像が当てはめられるセルのセル番号（各分割画像に割り当てられるセル番号）は、分割画像ごとに一意的に定まっている。前回のブロックの再設定からブロック内にとどまっている（スクロール操作によってもブロック内から出なかった）分割画像については、セル番号の変更はない。

以上のブロックの再設定制御による、ブロックを構成する各セルに対する分割画像の当てはめの変更の一例を図１４に示す。図１４の各セル位置に記述されている数値のうち、上段は分割画像座標値を示し、下段はセル番号を示す。この例は、スクロール操作による画像の移動によって、セルの境界がブラウザの原点（０，０）をX軸方向の右方向に１本だけ越えて、Ｙ軸方向には１本も越えていない場合（図１１に示すように画像が移動した場合）を示す。

表示倍率変更制御
新聞を閲覧中に表示倍率を変更する場合の制御について説明する。この表示倍率変更制御は、マウスカーソル（ポインタ）位置を不動点として表示倍率が変更されるように（つまり、マウスカーソルが位置する紙面上の位置が倍率変更前と倍率変更後で変化しないように）制御している。図１５はその制御フローを示す。図１５の制御は、Ｗｅｂサーバから送信されるＨＴＭＬに記述されているJavaScriptによって行われる。新聞を閲覧中に、表示されている新聞紙面の画像上の任意の位置（表示倍率を変更して閲覧したい記事位置）にマウスカーソルを当てて（Ｓ２１）、マウスを右クリック操作すると（Ｓ２２）、その時のマウスカーソル（ポインタ）の座標値｛ブラウザの原点（０，０）を原点とするピクセル値｝が取得される（Ｓ２３）。なお、画像の原点の座標値（Ｘ_ｄ０，Ｙ_ｄ０）は、初期値（Ｘ_０，Ｙ_０）は（式５）、（式６）によって与えられ、その後はスクロール操作がされるごとに（式２３）、（式２４）によって更新されるので、表示倍率変更操作時の画像の原点の座標値（Ｘ_ｄ０，Ｙ_ｄ０）は、既に取得されている。

前記マウスの右クリック操作により表示倍率を選択するためのポップアップメニューが表示される（Ｓ２４）。閲覧者がポップアップメニューに表示された表示倍率の数値（長さ比）の中から任意の倍率を選択する操作をすると（Ｓ２５）、前記右クリックした時のマウスカーソル位置を不動点として、選択した倍率で画像を表示するために必要な、該画像の原点位置を求めるための演算が実行される（Ｓ２６）。その演算内容について図１６を参照して説明する。図１６の例は、表示倍率変更前に表示されていた画像１（１８−１）を、表示倍率変更操作位置（右クリックした時のマウスカーソル位置。以下「処理中心」と言う。）を不動点として画像２（１８−２）に拡大表示する場合について示したものである。

図１６において、各変数は次を意味する。
Ｘ_ｍ：ブラウザの原点と処理中心とのＸ軸方向距離
Ｘ_ｍ１１：ブラウザの原点と画像１の原点とのＸ軸方向距離
Ｘ_ｍ１２：画像１の原点と処理中心とのＸ軸方向距離
Ｘ_ｍ２１：ブラウザの原点と画像２の原点とのＸ軸方向距離
Ｘ_ｍ２２：画像２の原点と処理中心とのＸ軸方向距離
Ｙ_ｍ：ブラウザの原点と処理中心とのＹ軸方向距離
Ｙ_ｍ１１：ブラウザの原点と画像１の原点とのＹ軸方向距離
Ｙ_ｍ１２：画像１の原点と処理中心とのＹ軸方向距離
Ｙ_ｍ２１：ブラウザの原点と画像２の原点とのＹ軸方向距離
Ｙ_ｍ２２：画像２の原点と処理中心とのＹ軸方向距離
画像１の表示倍率に対する画像２の表示倍率の比をα（α＞１）とすると、
Ｘ_ｍ２２＝α・Ｘ_ｍ１２ …（式３５）
Ｙ_ｍ２２＝α・Ｙ_ｍ１２ …（式３６）
が成り立つ。また、図１６から
Ｘ_ｍ１２＝Ｘ_ｍ＋Ｘ_ｍ１１ …（式３７）
Ｙ_ｍ１２＝Ｙ_ｍ＋Ｙ_ｍ１１ …（式３８）
である。（式３７）、（式３８）を（式３５）、（式３６）に代入すると、
Ｘ_ｍ２２＝α・Ｘ_ｍ＋α・Ｘ_ｍ１１ …（式３９）
Ｙ_ｍ２２＝α・Ｙ_ｍ＋α・Ｙ_ｍ１１ …（式４０）
となる。

図１６から
Ｘ_ｍ２１＝Ｘ_ｍ２２−Ｘ_ｍ …（式４１）
Ｙ_ｍ２１＝Ｙ_ｍ２２−Ｙ_ｍ …（式４２）
である。（式３９）、（式４０）を（式４１）、（式４２）に代入すると、
Ｘ_ｍ２１＝（α・Ｘ_ｍ＋α・Ｘ_ｍ１１）−Ｘ_ｍ＝（α−１）Ｘ_ｍ＋α・Ｘ_ｍ１１ …（式４３）
Ｙ_ｍ２１＝（α・Ｙ_ｍ＋α・Ｙ_ｍ１１）−Ｙ_ｍ＝（α−１）Ｙ_ｍ＋α・Ｙ_ｍ１１ …（式４４）
となる。（式４３）、（式４４）で求められる座標値（Ｘ_ｍ２１，Ｙ_ｍ２１）（ピクセル値）が、倍率変更後の画像の原点位置である。

図１５のステップＳ２６で、以上の演算により倍率変更後の画像の原点位置が求められたら、ブロックを構成する６×６個のセルに当てはめる分割画像を算出する（Ｓ２７）。なお、１つのセルに当てはめる１つの分割画像を構成する画素数は、前述のように倍率の違いにかかわらず一定であり、例えば４８０×４８０ピクセルである。各セルに当てはめる分割画像は、前記（式１１）〜（式１６）に基づいて算出することができる。すなわち、（式１１）、（式１２）からブラウザの表示領域に入る最初の分割画像｛ブラウザの原点（０，０）が属する分割画像｝の座標［ｘ_ｆ，ｙ_ｆ］を求める（ただし、（式１１）、（式１２）は、画像の原点の初期値Ｘ_０ 、Ｙ_０に代えて、（式４３）、（式４４）で求められた倍率変更後の画像の原点位置Ｘ_ｍ２１、Ｙ_ｍ２１を用いる。）。

ブラウザの表示領域に入る最初の分割画像の座標［ｘ_ｆ，ｙ_ｆ］が求まったら、前記（式１３）、（式１４）により、ブロックの左端に配置されるセルＳ_ｘｆ（Ｘ軸最初セル）に当てはめる分割画像座標値としてｘ_ｆ−１を求める。同様に、ブロックの上端に配置されるセルＳ_ｙｆ（Ｙ軸最初セル）に当てはめる分割画像座標値としてｙ_ｆ−１を求める。さらに、最初セル〔Ｓ_ｘｆ，Ｓ_ｙｆ〕を０番目のセルとして、前記（式１５）、（式１６）により、Ｘ軸方向にｍ番目（ｍ＝０，１，…，５）、Ｙ軸方向にｎ番目（ｎ＝０，１，…，５）のセル〔Ｓ_ｘｍ，Ｓ_ｙｎ〕に当てはめられる分割画像座標値として、［ｘ_ｆ−１＋ｍ、ｙ_ｆ−１＋ｎ］をそれぞれ求める。

図１５のステップＳ２７で、以上の演算により、ブロックを構成する６×６個のセルに当てはめる分割画像が算出されたら、前記（式１９）〜（式２２）により、ブロックを構成する６×６個のセルのブラウザ上における表示位置を求める（ただし、画像の原点の初期値Ｘ_０ 、Ｙ_０に代えて、倍率変更後の画像の原点位置Ｘ_ｍ２１、Ｙ_ｍ２１を用いる。）（Ｓ２８）。すなわち、（式１９）、（式２０）によりブロックの原点の座標を求め、さらに、（式２１）、（式２２）により各セルの原点の座標を求める。

以上のようにして、倍率変更後の６×６個のセルに当てはめるべき分割画像およびその表示位置が求められたら、未取得の分割画像についてはＷｅｂサーバに要求し（Ｓ２９）、Ｗｅｂサーバから既にダウンロードされてキャッシュメモリに保存されている分割画像についてはそれを読み出して、それぞれ該当するセルに当てはめて表示する（Ｓ３０）（図６、図７、図９、図１１等から明らかなように、セルに当てはめられてもブラウザの表示領域から外れている分割画像はその時点では表示されないが、スクロール操作によりブラウザの表示領域に入ってくれば表示できる状態になっている）。

以上のようにして、処理中心を不動点として表示倍率が変更される。なお、以上は画像を拡大表示する場合について説明したが、縮小表示する場合も、表示倍率の比αがα＜１に変わるだけで、処理内容は拡大表示する場合と同じである。

ページめくり制御
新聞紙面を閲覧している際に、ブラウザ画面上のツールバー等で所定のページめくり操作をすると、Ｗｅｂブラウザは、ＨＴＭＬに記述されているJavaScriptに基づき、指示されたページについて、所定倍率（紙面の記事全体が見渡せるように比較的低い倍率）の分割画像をＷｅｂサーバに要求し（Ｗｅｂサーバから既にダウンロードされてキャッシュメモリに保存されている分割画像についてはそれを読み出して用いる。）、前記閲覧開始当初の初期画面と同様に、ブラウザの表示領域の中心と画像の中心を一致させた状態に該画像を初期表示する。該初期表示後のスクロール制御、倍率変更制御は前述と同じに実行される。

なお、以上説明した実施の形態では、画像を縦横両方向に分割したが、縦横一方向にのみ分割することもできる。また、セル（枠要素）を縦横両方向に配列したが、縦横一方向のみに配列することもできる。また、分割画像およびセルを正方形としたが、長方形とすることもできる。分割画像およびセルを矩形以外の形状に分割することもできる。また、ブロックを構成するセル数を縦横同一としたが、縦横非同一とすることもできる。また、ブロックをブラウザの表示領域に対して予め１セル分左方向および上方向にオフセットさせが、オフセット量は２セル以上にすることもできる。また、分割画像をサーバに予め用意してビューアからの要求を待って送信するようにしたが、ビューアからの要求を待って分割画像を生成して送信することもできる。また、初期表示した後、スクロール操作を待ってその周囲の分割画像をダウンロードするようにしたが、初期表示した後、スクロール操作を待たずにその周囲の分割画像を順次ダウンロードすることもできる。また、新聞を閲覧する場合について説明したが、その他の画像（例えば漫画）を閲覧する場合にもこの発明を適用できる。また、Ｗｅｂブラウザを使用して閲覧する場合について説明したが、プラグインソフトウェアを使用して閲覧する場合にも、この発明を適用できる。

この出願には特許請求の範囲の請求項１，２に従属して記載できる発明として次の発明が記載されている。
《請求項３》
前記枠要素の配列が、ビューアの表示領域に少なくとも一部が入る分割画像を個々に当てはめる枠要素のほか、該分割画像の領域の周囲に隣接する分割画像を個々に当てはめる枠要素を具える請求項２記載の画像表示方法。
《請求項４》
前記分割画像が、前記画像を横方向もしくは縦方向の一方向にまたは横方向および縦方向の両方向に格子状に分割した画像である請求項２または３記載の画像表示方法。
《請求項５》
前記格子が、前記画像の左端位置を始点として所定ピクセル数ごとに横方向に分割して形成されたもの、もしくは、該画像の上端位置を始点として所定ピクセル数ごとに縦方向に分割して形成されたもの、または、該画像の左端位置を始点として所定ピクセル数ごとに横方向に分割しかつ該画像の上端位置を始点として所定ピクセル数ごとに縦方向に分割して形成されたものである請求項４記載の画像表示方法。
《請求項６》
前記各枠要素に固有の識別情報が付与され、
前記「画像の相対移動に伴いビューアの表示領域から離れる分割画像に該当する位置から枠要素を削除し、ビューアの表示領域に近づく分割画像に該当する位置に枠要素を追加」し、かつ「該追加する枠要素に、該当する位置の分割画像を当てはめ」る処理が、
前記削除する枠要素を前記追加する枠要素として使用し、かつ該枠要素に当てはめる分割画像を、前記削除する枠要素に当てはめられている分割画像から前記追加する枠要素に該当する位置の分割画像に変更することにより行われる請求項２から５のいずれか１つに記載の画像表示方法。
《請求項７》
ビューアは前記固有の識別情報に、ビューアの表示領域における該枠要素の表示位置の情報と、該枠要素に当てはめる分割画像の識別情報を関連づけて保持し、ビューアは該情報に基づき、各枠要素に当てはめる分割画像を、ビューアの表示領域の所定位置に表示する請求項６記載の画像表示方法。
《請求項８》
前記分割画像の識別情報が、画像全体におけるその番地に相当する情報をもって該画像全体における識別情報としてなる請求項７記載の画像表示方法。
《請求項９》
前記複数の枠要素全体でブロックを構成し、画像の相対移動が指示された時に、ビューアは、該ビューアの表示領域の原点に対する該ブロックの原点の移動すべき座標を演算し、該演算により求められたブロックの原点の座標に基づき、前記各枠要素の原点の移動すべき座標をそれぞれ演算し、該演算により求められた座標に各枠要素の原点をそれぞれ移動することにより、前記画像の相対移動を実現する請求項２から８のいずれか１つに記載の画像表示方法。
《請求項１０》
前記分割画像が前記画像を横方向に格子状に分割した画像でありかつ前記枠要素が横方向に複数の連続した分割画像を当てはめるものであり、もしくは、前記分割画像が前記画像を縦方向に格子状に分割した画像でありかつ前記枠要素が縦方向に複数の連続した分割画像を当てはめるものであり、または、前記分割画像が前記画像を横方向および縦方向に格子状に分割した画像でありかつ前記枠要素が横方向に複数の連続した分割画像もしくは縦方向に複数の連続した分割画像または横方向に複数で縦方向に複数の連続した分割画像を当てはめるものである請求項２から９のいずれか１つに記載の画像表示方法。
《請求項１１》
前記ビューアがＷｅｂブラウザであり、該Ｗｅｂブラウザでの各演算がJavaScript（登録商標）に基づき実行される請求項１から１０のいずれか１つに記載の画像表示方法。
《請求項１２》
前記枠要素が＜ＤＩＶ＞タグを使用して設定されている請求項１１記載の画像表示方法。

１０…Ｗｅｂサーバ（サーバコンピュータ）、１２…Ｗｅｂブラウザ（クライアントコンピュータ、ビューア）、１４…通信ネットワーク、１６…ブラウザの表示領域（ビューアの表示領域）、１８，１８−１，１８−２…画像、２０…ブロック、２２…セル（枠要素）、２４…分割画像

Claims (4)

1. ビューアの画像を表示する表示領域よりも大きい画像を分割し該ビューアの表示領域に少なくとも一部が入る分割画像を該ビューアの表示領域に表示する画像表示方法において、
   分割画像を個々に当てはめて表示する表示領域に相当する複数の枠要素の配列をビューアに設定し、該各枠要素に、該当する位置の分割画像をそれぞれ当てはめて表示しまたは表示できる状態にする画像表示方法。
2. ビューアの画像を表示する表示領域よりも大きい画像を分割し該ビューアの表示領域に少なくとも一部が入る分割画像を該ビューアの表示領域に表示する画像表示方法において、
   ビューアの表示領域に少なくとも一部が入る分割画像を含む、ビューアの表示領域に対し所定の位置関係にある、画像全体に対して限定された範囲の画像領域に含まれる分割画像を、個々に当てはめて表示する表示領域に相当する複数の枠要素の配列をビューアに設定し、該各枠要素に、該当する位置の分割画像をそれぞれ当てはめて表示しまたは表示できる状態にし、かつ、ビューアの表示領域に対する画像の相対移動が指示された時に、ビューアの表示領域に対する枠要素の移動すべき位置を演算して該位置に枠要素を移動し、該画像の相対移動に伴いビューアの表示領域から離れる分割画像に該当する位置から枠要素を削除し、ビューアの表示領域に近づく分割画像に該当する位置に枠要素を追加して画像に対する枠要素の配列の位置を変更し、該追加する枠要素に、該当する位置の分割画像を当てはめて表示しまたは表示できる状態にする画像表示方法。
3. 請求項１または２に記載の画像表示方法を処理装置に実行させることを特徴とする画像表示用プログラム。
4. ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法であって、該ビューアがＷｅｂブラウザであり、かつサーバから該画像を複数の領域に分割した画像ごとに送信可能にし、該画像とＷｅｂブラウザの表示領域との相対位置に応じてＷｅｂブラウザの表示領域に少なくとも一部が入る分割画像を判断し、サーバから該当する分割画像を優先的に送信し、Ｗｅｂブラウザに表示する画像表示方法。

Images