画像表示方法および画像表示用プログラム
【課題】ビューアの表示領域よりも大きい画像をビューアに表示し、ビューアの表示領域に対して画像を相対移動させる。
【解決手段】ビューアの表示領域16に枠要素22の配列を設定する。各枠要素22に、該当する位置の分割画像24をそれぞれ当てはめて表示する。ビューアの表示領域16に対する画像の相対移動が指示された時に、ビューアの表示領域16に対する枠要素22の移動すべき位置を演算して該位置に枠要素22を移動させる。該画像の相対移動に伴いビューアの表示領域16から離れる分割画像24に該当する位置の枠要素22を削除し、ビューアの表示領域16に近づく分割画像に該当する位置に枠要素22を追加して、画像に対する枠要素の22配列の位置を変更する。該追加した枠要素22に、該当する位置の分割画像を当てはめて表示する。
【解決手段】ビューアの表示領域16に枠要素22の配列を設定する。各枠要素22に、該当する位置の分割画像24をそれぞれ当てはめて表示する。ビューアの表示領域16に対する画像の相対移動が指示された時に、ビューアの表示領域16に対する枠要素22の移動すべき位置を演算して該位置に枠要素22を移動させる。該画像の相対移動に伴いビューアの表示領域16から離れる分割画像24に該当する位置の枠要素22を削除し、ビューアの表示領域16に近づく分割画像に該当する位置に枠要素22を追加して、画像に対する枠要素の22配列の位置を変更する。該追加した枠要素22に、該当する位置の分割画像を当てはめて表示する。
【発明の詳細な説明】
【技術分野】
【0001】
この発明は、ビューアの表示領域よりも大きい画像をビューアに表示する画像表示方法および画像表示用プログラムに関する。
【背景技術】
【0002】
インターネット技術の発展により、世界中からあらゆる情報をブラウザで閲覧することができるようになった。画像情報も同様にブラウザで閲覧できる。これは、Webサーバ上に、JPEGファイル等の画像ファイルを表示することを記述したHTMLファイルを保存しておくことにより実現される。インターネット技術を利用した新聞紙面画像の配信および閲覧も実用化されている。インターネット技術を利用した新聞紙面画像の配信・閲覧技術としては、例えば下記特許文献1に記載のものがある。
【先行技術文献】
【特許文献】
【0003】
【特許文献1】特開2002−236701号公報
【発明の概要】
【発明が解決しようとする課題】
【0004】
この発明は新聞紙面等の横縦のサイズ(画素数)が大きい画像をビューアに表示する画像表示方法および画像表示用プログラムを提供しようとするものである。
【課題を解決するための手段】
【0005】
この発明の画像表示方法はビューアの画像を表示する表示領域よりも大きい画像を分割し該ビューアの表示領域に少なくとも一部が入る分割画像を該ビューアの表示領域に表示する画像表示方法において、分割画像を個々に当てはめて表示する表示領域に相当する複数の枠要素の配列をビューアに設定し、該各枠要素に、該当する位置の分割画像をそれぞれ当てはめて表示しまたは表示できる状態にするものである。
【0006】
この発明の画像表示方法はビューアの画像を表示する表示領域よりも大きい画像を分割し該ビューアの表示領域に少なくとも一部が入る分割画像を該ビューアの表示領域に表示する画像表示方法において、ビューアの表示領域に少なくとも一部が入る分割画像を含む、ビューアの表示領域に対し所定の位置関係にある、画像全体に対して限定された範囲の画像領域に含まれる分割画像を、個々に当てはめて表示する表示領域に相当する複数の枠要素の配列をビューアに設定し、該各枠要素に、該当する位置の分割画像をそれぞれ当てはめて表示しまたは表示できる状態にし、かつ、ビューアの表示領域に対する画像の相対移動が指示された時に、ビューアの表示領域に対する枠要素の移動すべき位置を演算して該位置に枠要素を移動し、該画像の相対移動に伴いビューアの表示領域から離れる分割画像に該当する位置から枠要素を削除し、ビューアの表示領域に近づく分割画像に該当する位置に枠要素を追加して画像に対する枠要素の配列の位置を変更し、該追加する枠要素に、該当する位置の分割画像を当てはめて表示しまたは表示できる状態にするようにしたものである。これによればビューアの表示領域に対する画像の相対移動が指示された時に、ビューアの表示領域に対する枠要素の移動すべき位置を演算して該位置に枠要素を移動するので、画像全体(つまり全分割画像)を移動する場合に比べて演算量を減らすことができ、これにより画像の移動速度を速くする(追従性をよくする)ことができる。
【0007】
この発明の画像表示用プログラムは、この発明の画像表示方法を処理装置に実行させることを特徴とするものである。
【0008】
この発明の画像表示方法は例えば、ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法と組み合わせることができる。この組み合わせの様々な態様を以下に示す。各態様によれば、画像とビューアの表示領域との相対位置に応じてビューアの表示領域に少なくとも一部が入る分割画像を判断し、サーバから該当する分割画像を優先的に送信するようにしたので、画像全体を送信して表示する場合に比べて、少ない待ち時間でビューアに表示することができる。
《態様1》ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法であって、サーバから該画像を複数の領域に分割した画像ごとに送信可能にし、該画像とビューアの表示領域との相対位置に応じてビューアの表示領域に少なくとも一部が入る分割画像を判断し、サーバから該当する分割画像を優先的に送信し、ビューアに表示する画像表示方法。
《態様2》ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法であって、該画像を複数の領域に分割してサーバに予め用意し、該画像とビューアの表示領域との相対位置に応じてビューアの表示領域に少なくとも一部が入る分割画像を判断し、サーバから該当する分割画像を優先的に送信し、ビューアに表示する画像表示方法。
《態様3》ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法であって、該画像を、ビューアの表示領域よりも横方向もしくは縦方向の一方向または横方向および縦方向の両方向の長さがそれぞれ短い複数の領域に分割してサーバに予め用意し、該画像とビューアの表示領域との相対位置に応じてビューアの表示領域に少なくとも一部が入る複数の分割画像を判断し、サーバから該当する複数の分割画像を優先的に送信し、ビューアに元の並び状態に配列して表示する画像表示方法。
《態様4》ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法であって、該画像を複数の領域に分割してサーバに予め用意し、ビューアは該画像とビューアの表示領域との相対位置に応じてビューアの表示領域に少なくとも一部が入る分割画像を判断して該分割画像をサーバに優先的に要求し、サーバは該要求に応じた分割画像を優先的に送信し、ビューアは受け取った分割画像を表示する画像表示方法。
《態様5》ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法であって、該画像を、ビューアの表示領域よりも横方向もしくは縦方向の一方向または横方向および縦方向の両方向の長さがそれぞれ短い複数の領域に分割してサーバに予め用意し、ビューアは該画像とビューアの表示領域との相対位置に応じてビューアの表示領域に少なくとも一部が入る複数の分割画像を判断して該分割画像をサーバに優先的に要求し、サーバは該要求に応じた複数の分割画像を優先的に送信し、ビューアは受け取った分割画像を元の並び状態に配列して表示する画像表示方法。
《態様6》ビューアの表示領域に少なくとも一部が入る分割画像のほか、該分割画像の領域の周囲に隣接する分割画像を含む、ビューアの表示領域に対し所定の位置関係にある限定された範囲の画像領域に含まれる分割画像を併せて判断し、サーバから該当する分割画像を併せて優先的に送信する態様1から5のいずれか1つに記載の画像表示方法。
《態様7》前記分割画像がビューアに既にダウンロードされて保存されている分割画像であるかどうかを判断し、既に保存されている分割画像である場合は、サーバから再度ダウンロードすることなく、該保存されている分割画像を読み出して表示する態様1から6のいずれか1つに記載の画像表示方法。
《態様8》前記分割画像が、前記画像を横方向もしくは縦方向の一方向にまたは横方向および縦方向の両方向に格子状に分割した画像である態様1から7のいずれか1つに記載の画像表示方法。
《態様9》前記格子が、前記画像の左端位置を始点として所定ピクセル数ごとに横方向に分割して形成されたもの、もしくは、該画像の上端位置を始点として所定ピクセル数ごとに縦方向に分割して形成されたもの、または、該画像の左端位置を始点として所定ピクセル数ごとに横方向に分割しかつ該画像の上端位置を始点として所定ピクセル数ごとに縦方向に分割して形成されたものである態様8記載の画像表示方法。
《態様10》ビューアの表示領域に少なくとも一部が入る分割画像を含む、ビューアの表示領域に対し所定の位置関係にある限定された範囲の画像領域に含まれる分割画像を、個々に当てはめて表示する表示領域に相当する所定数の枠要素をビューアに設定し、該各枠要素に、該当する位置の分割画像をそれぞれ当てはめて表示しまたは表示できる状態にし、かつ、画像の相対移動に伴いビューアの表示領域から離れる分割画像を判断して枠要素への当てはめを解除し、ビューアの表示領域に近づく分割画像を判断して枠要素に新たに当てはめる態様1から9のいずれか1つに記載の画像表示方法。
《態様11》前記各枠要素に固有の識別情報が付与され、前記画像の相対移動に伴いビューアの表示領域から離れる分割画像の当てはめを解除する枠要素に、ビューアの表示領域に近づく分割画像を新たに当てはめる態様10記載の画像表示方法。
《態様12》前記各枠要素に固有の識別情報が付与され、ビューアは該固有の識別情報に、ビューアの表示領域における該枠要素の表示位置の情報と、該枠要素に当てはめる分割画像の識別情報を関連づけて保持し、ビューアは該情報に基づき、各枠要素に当てはめる分割画像を、ビューアの表示領域の所定位置に表示する態様10または11記載の画像表示方法。
《態様13》前記分割画像の識別情報が、画像全体におけるその番地に相当する情報をもって該画像全体における識別情報としてなり、ビューアは該分割画像の識別情報をもってサーバに該分割画像を要求し、サーバは該識別情報に該当する分割画像を判別してビューアに送信する態様12記載の画像表示方法。
《態様14》前記分割画像の識別情報が、各分割画像のファイル形式を識別する情報を有しない態様13記載の画像表示方法。
《態様15》前記所定数の枠要素全体でブロックを構成し、画像の相対移動が指示された時に、ビューアは、該ビューアの表示領域の原点に対する該ブロックの原点の移動すべき座標を演算し、該演算により求められたブロックの原点の座標に基づき、前記各枠要素の原点の移動すべき座標をそれぞれ演算し、該演算により求められた座標に各枠要素の原点をそれぞれ移動することにより、前記画像の相対移動を実現する態様10から14のいずれか1つに記載の画像表示方法。
《態様16》前記分割画像が前記画像を横方向に格子状に分割した画像でありかつ前記枠要素が横方向に所定数の連続した分割画像を当てはめるものであり、もしくは、前記分割画像が前記画像を縦方向に格子状に分割した画像でありかつ前記枠要素が縦方向に所定数の連続した分割画像を当てはめるものであり、または、前記分割画像が前記画像を横方向および縦方向に格子状に分割した画像でありかつ前記枠要素が横方向に所定数の連続した分割画像もしくは縦方向に所定数の連続した分割画像または横方向に所定数で縦方向に所定数の連続した分割画像を当てはめるものである態様10から15のいずれか1つに記載の画像表示方法。
《態様17》同じ内容の画像を複数の倍率でかつ倍率ごとにそれぞれ複数の領域に分割してサーバから送信可能にし、ビューアから指示される倍率の画像について態様1から16のいずれか1つに記載の方法を実行する画像表示方法。
《態様18》倍率にかかわらず、画像を横方向もしくは縦方向または横方向および縦方向に分割するピクセル数が同じである態様17記載の画像表示方法。
《態様19》1つの倍率で画像を表示している状態で該画像上の任意の位置にポインタを当てて倍率変更操作をした場合に、該ポインタが位置する画像上の位置を不動点として変更後の倍率の画像を表示する態様17または18記載の画像表示方法。
《態様20》同じ内容の画像を複数の倍率でかつ倍率ごとにそれぞれ複数の領域に分割してサーバから送信可能にし、ビューアから指示される倍率の画像について態様10から16のいずれか1つに記載の方法を実行する画像表示方法であって、倍率にかかわらず、前記枠要素の数を同じにしてなる画像表示方法。
《態様21》前記ビューアがWebブラウザであり、該Webブラウザでの各演算がサーバから送信されるHTMLに格納されているJavaScript(登録商標)に基づき実行される態様1から20のいずれか1つに記載の画像表示方法。これによれば、プラグインソフトウェアなしで画像表示を行うことができる。
《態様22》前記枠要素が、サーバから送信されるHTMLに記述されている<DIV>タグを使用して設定されている態様21記載の画像表示方法。
《態様23》前記サーバから送信されるHTMLに、前記分割画像ごとのファイル名及び/またはファイル形式等の属性の情報が組み込まれていない態様21または22記載の画像表示方法。
《態様24》前記画像が、異なるファイル形式の分割画像が混在して構成されている態様1〜23のいずれか1つに記載の画像表示方法。
【図面の簡単な説明】
【0009】
【図1】この発明の実施の形態を示すシステム構成図である。
【図2】画像分割の説明図である。
【図3】図1のシステムにおいて新聞紙面を閲覧する場合のWebブラウザ12とWebサーバ10との間の通信のやり取りを示す図である。
【図4】分割画像データを当てはめる6×6個のセルをブロック化するためのHTMLソースプログラムである。
【図5】図1のWebブラウザ12に表示される新聞紙面の画像の一例を示す図である。
【図6】新聞紙面1ページの画像とブラウザの表示領域およびブロックの位置関係の一例を示す図である。
【図7】ブロックとブラウザの表示領域の関係を示す図で、(a)はオフセットなしの場合、(b)は−1セル分のオフセットありの場合である。
【図8】ブロックを構成する各セルの原点の座標値の一例を示す図である。
【図9】新聞1ページの画像を構成する各分割画像の座標値と、該各分割画像が当てはめられるセルのセル番号を示す図である。
【図10】ブロックを構成する各セルに当てはめる分割画像座標値と、該各セルに付与するセル番号と、該各セルのブラウザ上における表示位置の関係を求め、該当する分割画像をWebサーバに要求し、該要求に応じてWebサーバから送られてきた分割画像を各セル当てはめるためのJavaScriptの関数(抜粋)を示す図である。
【図11】スクロール操作による画像の移動動作の一例を示す図である。
【図12】スクロール操作時の制御内容を示すフローチャートである。
【図13】ブロックの移動量を計算してブロックの原点の移動すべき座標を求めるためのJavaScriptの関数を示す図である。
【図14】ブロックの再設定制御による、ブロックを構成する各セルに対する分割画像の当てはめの変更の一例を示す
【図15】表示倍率変更制御の制御内容を示すフローチャートである。
【図16】図15のステップS26で実行する演算の内容を説明するための図である。
【発明を実施するための形態】
【0010】
この発明の実施の形態を以下説明する。この実施の形態では、プラグインソフトウェアなしで、新聞紙面画像を配信・閲覧する場合について説明する。図1にシステム構成を示す。Webサーバ(サーバコンピュータ)10とWebブラウザ(クライアントコンピュータ、ビューア)12とは、インターネット等の通信ネットワーク14を介して接続されている。Webサーバ10には、新聞紙面の画像データベースが予め格納されて用意されている。この画像データベースは、新聞1ページ全体を1つの画像とするもので、新聞を構成する各ページの画像を様々な倍率{長さ比で例えば、25%,33%,50%,67%(以上、実際の新聞紙面の縮小画像),100%(実際の新聞紙面と等倍画像),133%,200%,400%(以上、実際の新聞紙面の拡大画像)}で(すなわち、同一ページの画像を複数の倍率で)保存している。各分割画像のファイル形式は同一である必要はなく、例えば分割画像ごとの特徴(写真か文字か、カラーか白黒か等)に応じて圧縮率が高いファイル形式(JPEG形式、PNG形式、GIF形式等)で保存する。したがって、新聞1ページの画像は、異なるファイル形式の分割画像が混在して構成される場合がある。このように、分割画像ごとに圧縮率が高いファイル形式を用いることにより送信時間を短縮できる。
【0011】
1つの倍率の1ページの画像は、図2に示すように、左上位置(画像の原点位置)から横方向(X軸方向)および縦方向(Y軸方向)にそれぞれ所定画素数ごとに格子状に分割されて、複数の矩形の分割画像の集合で構成されている。1つの分割画像を構成する画素数は、倍率の違いにかかわらず一定であり、例えば480×480ピクセルである(ただし、1ページ横方向全体の画素数が1つの分割画像について定められた横方向の画素数で割り切れない場合は、右端位置の分割画像の画素数は端数となる。同様に、1ページ縦方向全体の画素数が1つの分割画像について定められた縦方向の画素数で割り切れない場合は、下端位置の分割画像の画素数は端数となる。)。これに対し、1ページ分の紙面を構成する画素数は、倍率に応じて変化する{倍率(=長さ比)の二乗に比例する}ので、1ページ分の紙面を構成する分割画像数は、倍率が低い画像ほど少なく、倍率が高い画像ほど多くなる。各分割画像には、1ページの画像における各分割画像の位置(番地)を示す座標値(分割画像座標値)として、図2に示すように、横方向の座標をx、縦方向の座標をyとし、左上角の分割画像位置を原点[0,0]とし、右に行くに従い、また下に行くに従い1ずつ増加する分割画像座標値[x,y]に相当するファイル名がそれぞれ付与されて保存されている。1ページの画像における右端の分割画像の横方向の座標値をxl、下端の分割画像の縦方向の座標値をylとすると、右下角の最後の分割画像の座標値は[xl,yl]となる。特定の新聞の、特定のページの、特定の倍率の、特定の分割画像は、新聞名、日付、朝/夕刊別、ページ番号、倍率、分割画像座標値[x,y]の各情報を組み合わせた識別情報で特定(指定)される。新聞紙面を閲覧する場合は、Webブラウザ12から、閲覧者により指示される閲覧位置に応じた該識別情報が送信され、Webサーバ10は該識別情報を解析して、該当する分割画像を送信し、Webブラウザ12は該分割画像を受け取って、元の画像の並びに配列して表示する。上記のような識別情報を用いれば、Webサーバ10から最初にWebブラウザ12に送信するHTML(後述する図3のステップS2)に、分割画像ごとのファイル名{ファイル形式を指定する識別子(.jpg、.png、.gif等)が付加されたデータ}を組み込んでおく必要がない(すなわち、Webブラウザ12はファイル名やそのファイル形式を予め知らなくても、個々の分割画像を要求できる。)ので、該HTMLのデータ量は少なくて済む。
【0012】
この実施例では、後述するように(図6)、画像上にブラウザの表示領域全体が入る大きさの『ブロック』を設定する。このブロックは、例えば6×6個の『セル』(枠要素)で構成される。1つのセルは1つの分割画像の大きさ(例えば480×480ピクセル)に相当し、該当する位置の分割画像が当てはめ(割り当て)られる。ブロックは、画像が移動(スクロール)しても常にブラウザの表示領域全体が入るように、ブラウザの表示領域に対する画像の移動に応じて、ブラウザの表示領域に対してセル単位で移動し、これに伴い、セルに当てはめられる分割画像も順次入れ替えられる。
【0013】
新聞紙面を閲覧する場合のWebブラウザ12とWebサーバ10との間の通信のやり取りを図3に示す。閲覧者がWebブラウザ12からWebサーバ10に○月○日付の○○新聞の○刊(朝刊または夕刊)を閲覧する旨の指示をすると、該当する内容のHTMLを要求する指示が出される(S1)。Webサーバ10はこの要求を受けて、図4に示す、分割画像データを当てはめる6×6個のセルを設定する<DIV>タグ、および、どの分割画像をどのセルに当てはめてブラウザ上のどの位置に表示するかを算出するためのJavaScriptを含んだHTMLをWebブラウザに返す(S2)。なお、6×6個のセルには、図4に示すように、「canvas0000」〜「canvas0505」の名前が付けられている。「canvas」に続く4桁の数字のうち、最初の2桁はブロック内でのセルのX軸方向の番地(00〜05)を示し、それに続く残りの2桁はブロック内でのセルのY軸方向の番地(00〜05)を示す。
【0014】
Webブラウザ12は、HTMLを受け取ると、該HTMLに記述されているJavaScriptに基づき、各セルにどの分割画像を当てはめるかおよび各セルに当てはめられた分割画像をブラウザ12上のどの位置に表示するかを算出する。そして、算出された分割画像がWebブラウザ12に既にダウンロードされてキャッシュメモリに保存されている分割画像であるかどうかを判断し、既に保存されている分割画像については、それを読み出して該当するセルに当てはめる。また、Webブラウザ12に保存されていない分割画像については、Webサーバ10に対し該当する分割画像を要求する(S3)。Webサーバ10は該要求に応じて、該当する分割画像データを送信する(S4)。Webブラウザ12は該分割画像データを受け取り、該当するセルに当てはめる。このようにして、6×6個のセルに分割画像がそれぞれ当てはめられて(関連づけられて)、前記算出された位置にそれぞれ表示される(S5)。これにより、Webブラウザ12の表示領域全体に、分割画像がつなぎ目なく表示されて、新聞紙面の画像が表示される。表示の一例を図5に示す(図5においてセルの境界線は仮想的に示したもので、実際の画面では表示されない。)。なお、閲覧開始当初は初期画面として、Webブラウザ12から閲覧の指示をした新聞の第1ページの所定倍率(紙面の記事全体が見渡せるように比較的低い倍率)の分割画像をWebブラウザ12がWebサーバ10に要求して表示するように、Webサーバ10から送信するHTMLが記述されている。
【0015】
初期表示制御
ブロックを構成する各セルに当てはめる分割画像について説明する。ここでは、図6に示すように、ブラウザの表示領域16よりも大きい画像18(新聞紙面1ページ分の画像)を、ブラウザの表示領域16の中心と画像18の中心を一致させた状態に初期表示するものとする。また、ブロック20を6×6個のセル22で構成し、ブロック20の左側および上側を1セルずつ空けて(つまり、ブラウザの表示領域16の左上角が、ブロック20の左から2番目、上から2番目のセルに位置するように)表示するものとする。なお、以下の説明において、座標値あるいは番号(番地)はその種類に応じて次のように区別して表記する。
( , ):ピクセル座標値(ピクセル単位の座標値)
[ , ]:分割画像座標値(画像全体における分割画像ごとの座標値)
〔 , 〕:セル番号(ブロックにおけるセルごとの番号値)
ピクセル座標値は、ブラウザの原点(左上角)を原点(0,0)とし、X軸方向の極性は右方向を+、左方向を−とし、Y軸方向の極性は下方向を+、上方向を−とする。
【0016】
図6において、各変数は次を意味する。
Xi:画像(新聞紙面1ページ)全体の幅(ピクセル値)
Yi:画像(新聞紙面1ページ)全体の高さ(ピクセル値)
Xb:ブラウザの幅(ピクセル値)
Yb:ブラウザの高さ(ピクセル値)
X1=Xi/2:画像幅の半値 …(式1)
Y1=Yi/2:画像高さの半値 …(式2)
X2=Xb/2:ブラウザ幅の半値 …(式3)
Y2=Yb/2:ブラウザ高さの半値 …(式4)
【0017】
なお、画像全体の幅Xiおよび高さYiの値は、WebサーバがHTMLにhiddenタグの属性値として埋め込んで送信する(図3のステップS2)ことにより、Webブラウザに与えられる。このhiddenタグの例を以下に示す。
<INPUT TYPE="hidden" NAME="imageWidth" VALUE="5986">
<INPUT TYPE="hidden" NAME="imageHeight" VALUE="8130">
この例によれば、Xi=5986(ピクセル)、Yi=8130(ピクセル)が与えられる。また、ブラウザの幅および高さの値Xb、Ybは、Webサーバから送信されるHTML(図3のステップS2)に記述されているJavaScriptに基づきブラウザ自身で取得する。ブラウザの幅および高さの値Xb、YbはJavaScriptの次の関数で求められる。
browserWidth=document.body.clientWidth; //表示されているブラウザの幅
browserHeight=document.body.clientHeight; //表示されているブラウザの高さ
【0018】
図6において、ブラウザの原点(左上角)を原点(0,0)とすると、画像の原点の座標値(X0,Y0)は次式によって与えられる。
X0=X2−X1:画像のX軸原点 …(式5)
Y0=Y2−Y1:画像のY軸原点 …(式6)
1つの分割画像の大きさ(=1つのセルの大きさ)を480×480ピクセルとすると、画像全体の分割画像数は次式によって与えられる。
Gxi=Xi/480:X軸方向の全分割画像数 …(式7)
Gyi=Yi/480:Y軸方向の全分割画像数 …(式8)
このGxi、Gyiが小数点以下の桁を有する場合は、小数点以下を切り上げた整数値が実際のX軸方向およびY軸方向の全分割画像数である。また、Gxiの小数点以下を切り捨てた値が右端の分割画像の横方向の座標値xl(図2)であり、Gyiの小数点以下を切り捨てた値が下端の分割画像の縦方向の座標値yl(同)である。
【0019】
一方、ブラウザの表示領域16に必要な分割画像数は次式によって与えられる。
Gxb=Xb/480:X軸方向の表示に必要な分割画像数 …(式9)
Gyb=Yb/480:Y軸方向の表示に必要な分割画像数 …(式10)
ブラウザの表示領域16に入る最初の分割画像{ブラウザの原点(0,0)が属する(位置する)分割画像}の座標[xf,yf]は、次式によって与えられる。
xf=−{(X0/480)の商の小数点以下を切り捨てた値} …(式11)
yf=−{(Y0/480)の商の小数点以下を切り捨てた値} …(式12)
【0020】
ブロックの左端に配置されるセル(X軸方向のセル番号をSxfとする。以下「X軸最初セル」という。)には、X軸方向の分割画像座標値がxf−1の分割画像を当てはめる。同様に、ブロックの上端に配置されるセル(Y軸方向のセル番号をSyfとする。以下「Y軸最初セル」という。)には、Y軸方向の分割画像座標値がyf−1の分割画像を当てはめる。すなわち、
Sxf=xf−1 …(式13)
Syf=yf−1 …(式14)
とする。これによれば、ブロックの最初のセル〔Sxf,Syf〕(ブロックの左上角に配置されるセル。以下「最初セル」という。)には、[xf−1,yf−1]の分割画像が当てはめられる。−1を付加するのは、Sxf=xf、Syf=yfに設定すると、図7(a)に示すように、ブロック20の左端部分および上端部分がブラウザの表示領域16の左端部分および上端部分に接近して配置されることになり、画像を右下方向に移動(スクロール)させた際に、新たに左側および上側からブラウザの表示領域16に入るべき分割画像がWebサーバから新たに転送されて来るまでの待ち時間に、ブラウザの表示領域16の左端部分および上端部分に空白部分(画像が表示されない部分)が生じ易くなるためである。これに対し、−1を付加すると、図7(b)に示すように、ブロック20は予めブラウザの表示領域16に対して1セル分以上左方向および上方向にオフセットして配置されることになり、画像を右下方向に移動させた際に、ブラウザの表示領域16の左端部分および上端部分に空白部分を生じにくくさせることができる。
【0021】
ブロックを構成するその他のセルに当てはめる分割画像の座標は、最初セル〔Sxf,Syf〕に当てはめる分割画像の座標[xf−1,yf−1]に、X軸方向並びにY軸方向に1ずつ順次足していくことにより求められる。すなわち、最初セル〔Sxf,Syf〕を0番目のセルとして、X軸方向にm番目(m=0,1,…,5)、Y軸方向にn番目(n=0,1,…,5)のセル〔Sxm,Syn〕に当てはめられる分割画像座標値は、
Sxm=Sxf+m=xf−1+m …(式15)
Syn=Syf+n=yf−1+n …(式16)
で与えられる。したがって、ブロックの最後のセル〔Sxl,Syl〕(ブロックの右下角に配置されるセル。以下「最後セル」という。なお、ブロックの右端に配置されるセルをそれぞれ「X軸最後セル」、ブロックの下端に配置されるセルをそれぞれ「Y軸最後セル」という。)に当てはめる分割画像の座標は、
Sxl=Sxf+5=xf+4 …(式17)
Syl=Syf+5=yf+4 …(式18)
となる。以上のようにして、ブロック20を構成する6×6個のセル22に当てはめるべき分割画像が求められる。
【0022】
次に、ブロック20を構成する6×6個のセル22のブラウザ上における表示位置について説明する。各セルのブラウザ上における表示位置は、該各セルの原点(左上角の位置)の座標値(ピクセル値)で特定(指定)される。各セルの原点の座標値は以下のようにして求められる。まず、最初セル〔Sxf,Syf〕の原点(Xb0,Yb0)は、ブロックの原点に相当し(図6参照)、
Xb0=X0+(Sxf×480) …(式19)
Yb0=Y0+(Syf×480) …(式20)
で与えられる。ブロックを構成するその他のセルの原点は、このようにして求められた最初セル〔Sxf,Syf〕の原点(Xb0,Yb0)にX軸方向並びにY軸方向に480ずつ順次足していくことにより求められる。すなわち、最初セル〔Sxf,Syf〕を0番目のセルとして、X軸方向にm番目(m=0,1,…,5)、Y軸方向にn番目(n=0,1,…,5)のセル〔Sxm,Syn〕の原点(Xbm,Ybn)は、
Xbm=Xb0+(m×480) …(式21)
Ybn=Yb0+(n×480) …(式22)
で与えられる。
【0023】
Webサーバから送信されるHTML(図3のステップS2)には、以上の(式1)〜(式22)に相当する演算を実行するJavaScriptが記述されており、Webブラウザは、該HTMLを受け取ると、該JavaScriptに基づき、ブロックを構成する6×6個のセルに当てはめる分割画像座標値と、各セルのブラウザ上における表示位置(各セルの原点位置を表示するピクセル座標位置)を算出する。そして、Webブラウザは、算出された分割画像座標値を識別情報としてWebサーバに該当する分割画像を要求する(Webサーバから既にダウンロードされてキャッシュメモリに保存されている分割画像についてはそれを使用する。)(図3のステップS3)。Webサーバ10は該要求に応じて、該当する分割画像データを送信し(同S4)、Webブラウザ12は該分割画像データを受け取り、該当するセルに当てはめて、それぞれ前記求められた位置に表示する(同S5)(図6、図7、図9、図11等から明らかなように、セルに当てはめられてもブラウザの表示領域から外れている分割画像はその時点では表示されないが、スクロール操作によりブラウザの表示領域に入ってくれば表示できる状態になっている)。
【0024】
ここで、(式1)〜(式22)に実際の値を入れて、ブラウザによって求められる、各セルに当てはめる分割画像座標値と、各セルのブラウザ上における表示位置を確かめてみる。画像の大きさをX軸方向:5986ピクセル、Y軸方向:8130ピクセルとし、ブラウザの幅をX軸方向:1020ピクセル、Y軸方向:556ピクセルとすると、Xi=5986、Yi=8130、Xb=1020、Yb=556となる。(式1)、(式2)により、画像幅の半値X1、画像高さの半値Y1は、
X1=5986/2=2993
Y1=8130/2=4065
となる。また、(式3)、(式4)により、ブラウザ幅の半値X2、ブラウザ高さの半値Y2は、
X2=1020/2=510
Y2=556/2=278
となる。また、(式5)、(式6)により、画像の原点(X0,Y0)は、
X0=510−2993=−2483
Y0=278−4065=−3787
となる。
【0025】
1つの分割画像の大きさを480×480ピクセルとすると、(式7)、(式8)により、画像全体の分割画像数は、
Gxi=5986/480=12.4708
Gyi=8130/480=16.9375
となる。このGxi=12.4708、Gyi=16.9375という数値は、画像全体の分割画像数が、X軸方向に13個、Y軸方向に17個で、全体として13×17=221個となることを示す。また、Gxiの小数点以下を切り捨てた値が右端の分割画像の横方向の座標値xlであり、Gyiの小数点以下を切り捨てた値が下端の分割画像の縦方向の座標値がylである。すなわち、xl=12、yl=16となる。
(式9)、(式10)により、ブラウザの表示領域に必要な分割画像数は、
Gxb=1020/480=2.125
Gyb=556/480=1.15833
となる。このGxb=2.125、Gyb=1.15833という数値は、ブラウザの表示領域全体に画像を表示するためには、ブロックを構成するセルが、X軸方向に少なくとも4個、Y軸方向に少なくとも3個必要であることを示す。この実施例では、画像の移動(スクロール)動作時に、空白部分(画像が表示されない部分)を生じにくくさせるために、前述のようにX軸方向が6個、Y軸方向が6個の合計6×6=36個のセルでブロックを構成している。ブロックを構成するセル数をより多くすれば、画像の移動動作時に空白部分をより生じにくくさせることができるが、その反面、該画像の移動動作時に各セルの座標計算に時間を要し、移動速度が遅くなる可能性がある(ただし、CPUの能力による)ので、移動動作時に空白部分が発生するのを防止することと画像の移動速度との兼ね合いで、ブロックを構成するセル数を設定する。
【0026】
(式11)、(式12)により、ブラウザの表示領域に入る最初の分割画像の座標[xf,yf]は、
xf=−{(−2483/480)の商の小数点以下を切り捨てた値}=5
yf=−{(−3787/480)の商の小数点以下を切り捨てた値}=7
となる。したがって、ブロックの最初セル〔Sxf,Syf〕に当てはめる分割画像の座標は、(式13)、(式14)により、
Sxf=5−1=4
Syf=7−1=6
となる。また、ブロックの最後セル〔Sxl,Syl〕に当てはめる分割画像の座標は、(式17)、(式18)により、
Sxl=Sxf+5=9
Syl=Syf+5=11
となる。
【0027】
(式19)、(式20)により、最初セル〔Sxf,Syf〕の原点(Xb0,Yb0)は、
Xb0=−2483+(4×480)=−563
Yb0=−3787+(6×480)=−907
となる。この最初セルの座標(Xb0,Yb0)を基に(式21)、(式22)により求められる各セルの原点の座標値を図8に示す。
【0028】
ここで、ブロック20を構成する各セル22のセル番号の付与方法について説明する。このセル番号の付与もWebサーバから送信されるHTMLに記述されているJavaScriptに基づき実行される。各セルのセル番号〔Sx,Sy〕は、該各セルに当てはめられる分割画像の座標[x,y]を、X軸方向についてはブロックを構成するX軸方向の総セル数、Y軸方向についてはブロックを構成するY軸方向の総セル数でそれぞれ割った余りの値として付与する。これによれば、各分割画像が当てはめられるセルのセル番号(各分割画像に割り当てられるセル番号)は、分割画像ごとに一意的に定まる。この実施例では、X軸方向、Y軸方向の総セル数はそれぞれ6であるから、セル番号は、X軸方向,Y軸方向ともに0,1,2,…,5の繰り返しとなる。この場合、各分割画像が当てはめられるセルのセル番号を図9に示す。図9の各分割画像位置に記述されている数値のうち、上段は各分割画像24の座標値を示し、下段は当てはめられるセルのセル番号を示す。セル番号が繰り返し使われても、ブロック内のセル数は6×6個だけであるから、ブロック内で同時に同じセル番号が重複して使用されることはない。このようにセル番号を繰り返し用いることにより、図4に示すように、HTMLに記述する、セルを設定するための<DIV>タグは6×6個だけ用意すれば足りることになる。
【0029】
以上のようにして、Webサーバから送信されるHTMLに記述されているJavaScriptに基づき、ブロック20を構成する6×6個のセル22に当てはめる各分割画像24の座標値と該各セル22のセル番号および該各セル22のブラウザ上における表示位置(各セルの原点位置を表示するピクセル座標位置)が求められたら、Webサーバに対し該当する分割画像24の送信を要求し(図3のステップS3)、Webサーバから該要求に応じた分割画像データが送られてきたら(同S4)、該当するセル番号に当てはめてブラウザに表示する(同S5)。これにより、Webブラウザ12の表示領域全体に、分割画像24がつなぎ目なく表示されて、新聞紙面の画像18が表示される。
【0030】
図10は、ブロック20を構成する各セル22に当てはめる各分割画像24の座標値と、該各セル22に付与するセル番号と、該各セル22のブラウザ上における表示位置(各セルの原点位置)の関係を求め、該当する分割画像をWebサーバに要求し、該要求に応じてWebサーバから送られてきた分割画像24を各セル22に当てはめるためのJavaScriptの関数(抜粋)を示す。このJavaScriptの関数は、画像の左上角の分割画像[0,0]を始点として、分割画像位置をY軸方向に走査してブロックに含まれる分割画像の有無を判断し、ブロックに含まれる分割画像があった場合は、該分割画像が当てはめられるセルに、該分割画像のX軸方向の座標値xを6で割った余りをX軸方向のセル番号sellXとして付与し、該分割画像のY軸方向の座標値yを6で割った余りをY軸方向のセル番号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 + ";'>"; 」により、該当する分割画像をWebサーバに要求し、該要求に応じてWebサーバから送られてきた分割画像を該当するセルに当てはめる。なお、上のJavaScriptの関数は、「canvas sellX sellY」(sellX=00〜05、sellY=00〜05)のIDを持つDIVタグ(図4参照)を、このセルに当てはめる分割画像の座標値「image x y」のIDを持つIMGタグに変換し、該IMGタグのソースとして「image.cgi」(Webサーバ側の画像データ検索および転送モジュール)からの分割画像データを埋め込むことを意味する。そのとき「a=xxx&b=xxx&c=xxx&d=xxx&e=xxx&f=xxx&g=xxx」は、Webサーバに保存されている画像を特定するためのパラメータ(新聞名、日付、朝/夕刊別、ページ番号、倍率等の情報)として、特定の画像ファイルを検索するための値となる。「STYLE='left:" +originX +";top:" + originY 」はこのセル(分割画像)の原点(左上の位置)を表示するブラウザの表示領域上の座標位置(ピクセル値)を示す。
【0031】
以上の処理をその列のY軸方向の最後の分割画像まで行ったら、その1つ右隣の列に移って同様に上端からブロックに含まれる分割画像の有無を判断し、ブロックに含まれる分割画像が当てはめられるセルに、X軸方向のセル番号sellXおよびY軸方向のセル番号sellYを付与する。そして、X軸方向の最後の列の最後の分割画像まで達したら、処理を終了する。
【0032】
スクロール制御
次に、以上のようにして初期表示がなされた後に、閲覧者のスクロール操作によりブラウザの表示画面上で画像を任意の位置に移動させる(つまり、閲覧位置を移動する)方法について説明する。図11は、スクロール操作による画像の移動動作を示す。図11では、画像18をX軸方向の右方向にXd(ピクセル値)、Y軸方向の下方向にYd(ピクセル値)移動させた場合(移動後の画像位置を符号18’で示す。)を示す。ブロック20は画像18と一体に移動するが、この移動によってブロック20はブラウザの表示領域16に対し相対移動し、何も手当をしなければ、ブロック20はいずれブラウザの表示領域16から外れてしまう。そこで、移動量に応じて画像18に対するブロック20の位置を変更し、これに伴い該ブロック20を構成する各セル22に対する分割画像の当てはめを更新する制御(ブロックの再設定)を併せて行う。このブロックの再設定により、ブロック20は常にブラウザの表示領域16全体を含む(ブラウザの表示領域16全体が常にブロック20内に含まれる)ように制御される。図11の例では、スクロール操作によりブロック20がブラウザの表示領域16に対し相対的に右方向に移動して、セルの境界線が1本ブラウザの原点を越えているので、ブロックの再設定により、右端の1列のセルが削除され、その分左端に1列のセルが追加されている。それらの間の5列のセルには変更はない。
【0033】
スクロール操作時の制御フローを図12に示す。図12の制御は、Webサーバから送信されるHTMLに記述されているJavaScriptによって行われる。スクロール操作時の制御は、画像を移動させる制御と、ブロックの再設定制御で構成される。はじめに、画像の移動制御について説明する。新聞紙面の画像が表示されている画面上の任意の位置にマウスカーソル(ポインタ)を当ててマウス左ボタンを押下し(マウスダウン操作)(図12のステップS11)、押下したままマウスカーソルを移動させると(ドラッグ操作)、マウスカーソルに追従して画像が移動する(同S12)。この場合、セル単位で移動量の演算をすると、演算処理に時間がかかり、移動動作が遅くなる。そこで、図4のHTMLのように、6×6個のセルを設定する<DIV>タグ全体を、名前がcanvas BLOCKである<DIV>タグで1つのブロックとして束ねて、該1つのブロックについて移動量を演算して該ブロックの移動後の原点を求め、該求められたブロックの原点の座標に基づき、該ブロックを構成する各セルの原点の座標を演算して求める。これによれば、ブロックの原点に対する各セルの原点の相対位置は予め定まっており、簡単な演算で求めることができ、一方複雑な演算を要する移動量の演算は1つのブロックについてのみ行えばよいので、セル単位で(セルごとに)移動量の演算をする場合に比べて全体として演算量が少なくて済み、移動動作を高速化することができる。
【0034】
図13は、ブロック(画像)の移動量(=マウスカーソルの移動量)を計算してブロックの原点の移動すべき座標を求めるためのJavaScriptの関数を示す。この関数によりブロックの原点の移動すべき座標が求められたら、この座標がブロックの最初セル〔Sxf,Syf〕の原点の座標になるので、他のセルについてもX軸方向およびY軸方向にそれぞれ480ずつ順次足していくことによりそれぞれの原点の座標を求める。このような演算をマウスカーソルが移動されている間中繰り返すことにより、マウスカーソルに追従して画像を移動させることができる。マウスカーソルを任意の位置に移動後、マウスボタンを離す(マウスアップ操作をする)と、画像はその位置で停止する。
【0035】
次に、ブロックの再設定制御について説明する。ドラッグ操作を終了して、マウスアップ操作をすると、移動後の画像上でブラウザの原点(0,0)が属するセル位置(分割画像位置)が判断され、ドラッグ前の位置に対して変化しているかどうか{つまり、ブラウザの原点(0,0)がセルの境界を超えたかどうか}が判断される(図12のステップS13)。そして、変化している場合(セルの境界を越えた場合)は、その変化した分(セルの境界を越えた本数分)ブロック位置を画像の移動と同じ方向に移動させるとともに、該ブロックを構成する各セルに対する分割画像の当てはめを更新することによりブロックの再設定を行う(同S14)。
【0036】
ブロックの再設定制御は次の演算により実現される。ドラッグ操作による画像の移動量を図11のようにX軸方向の右方向にXd、Y軸方向の下方向にYdとすると{画像の移動量Xd、Ydは、ドラッグ終了位置(マウスアップ操作位置)でのマウスカーソル座標値からドラッグ開始位置(マウスダウン操作位置)でのマウスカーソル座標値を引算することにより得られる。}、移動後の画像の原点の座標値(Xd0,Yd0)は、次式によって与えられる。
Xd0=Xf0+Xd:移動後の画像のX軸原点 …(式23)
Yd0=Yf0+Yd:移動後の画像のY軸原点 …(式24)
ただし、Xf0:前回のスクロール操作による画像の最終的なX軸原点。初回のスクロール操作であれば、Xf0=X0(初期表示時の画像のX軸原点)である。
Yf0:前回のスクロール操作による画像の最終的なY軸原点。初回のスクロール操作であれば、Yf0=Y0(初期表示時の画像のY軸原点)である。
【0037】
また、移動後にブラウザの表示領域に入る最初の分割画像{ブラウザの原点(0,0)が属する分割画像}の座標[xdf,ydf]は、次式によって与えられる。
xdf=−{(Xd0/480)の商の小数点以下を切り捨てた値} …(式25)
ydf=−{(Yd0/480)の商の小数点以下を切り捨てた値} …(式26)
したがって、ドラッグによってセルの境界がブラウザの原点(0,0)を越えた数Sxd,Sydは、次式によって与えられる。
Sxd=xf0−xdf …(式27)
Syd=yf0−ydf …(式28)
ただし、xf0:前回のブロックの再設定時のブラウザの表示領域に入る最初の分割画像のX軸座標
yf0:前回のブロックの再設定時のブラウザの表示領域に入る最初の分割画像のY軸座標
【0038】
(式27)によって求められるSxdが0であれば、セルの境界はブラウザの原点(0,0)をX軸方向に越えてないことがわかり、+の値であれば、その本数分のセルの境界がブラウザの原点(0,0)を右方向に越えたことがわかり、−の値であれば、その本数分のセルの境界がブラウザの原点(0,0)を左方向に越えたことがわかる。また、(式28)によって求められるSydが0であれば、セルの境界はブラウザの原点(0,0)をY軸方向に越えてないことがわかり、+の値であれば、その本数分のセルの境界がブラウザの原点(0,0)を下方向に越えたことがわかり、−の値であれば、その本数分のセルの境界がブラウザの原点(0,0)を上方向に越えたことがわかる。
【0039】
(式27)、(式28)の演算の結果、Sxd,Sydがいずれも0の場合は、ブラウザの原点(0,0)が属する分割画像の位置はドラッグの前後で変化がないことになるから、ブロックの再設定は行われない。これに対し、(式27)、(式28)の演算の結果、Sxd,Sydのうち少なくとも一方が0以外の場合は、ブラウザの原点(0,0)が属する分割画像の位置がドラッグの前後で変化したことになるから、ブロックの再設定が行われる。
【0040】
ブロックの再設定は、Sxd,Sydに相当するセル数分、ブロック全体を、画像に対し、画像の移動方向と逆方向に相対的に移動させることで実現される。このブロックの再設定によって、該ブロックを構成する各セルには次のように分割画像が当てはめられる。ブロックの左端に配置されるセル(X軸最初セル)Sxdfには、X軸方向の分割画像座標値がxdf−1の分割画像が当てはめられる。同様に、ブロックの上端に配置されるセル(Y軸最初セル)には、Y軸方向の分割画像座標値がydf−1の分割画像が当てはめられる。すなわち、
Sxdf=xdf−1 …(式29)
Sydf=ydf−1 …(式30)
とする。これによれば、再設定後のブロックの左上角に配置されるセル(最初セル)〔Sxdf,Sydf〕には、[xdf−1,ydf−1]の分割画像が当てはめられる。−1を付加するのは、(式13)、(式14)で−1を付加したのと同じ目的である。すなわち、ブロックをブラウザの表示領域に対して1セル分以上左方向および上方向にオフセットして配置することにより、画像を右下方向に移動させた際に、ブラウザの表示領域の左端部分および上端部分に空白部分を生じにくくする。
【0041】
ブロックを構成するその他のセルに当てはめる分割画像の座標は、最初セル〔Sxdf,Sydf〕に当てはめる分割画像の座標[xdf−1,ydf−1]に、X軸方向並びにY軸方向に1ずつ順次足していくことにより求められる。すなわち、最初セル〔Sxdf,Sydf〕を0番目のセルとして、X軸方向にm番目(m=0,1,…,5)、Y軸方向にn番目(n=0,1,…,5)のセル〔Sxdm,Sydn〕に当てはめられる分割画像座標値は、
Sxdm=Sxdf+m=xdf−1+m …(式31)
Sydn=Sydf+n=ydf−1+n …(式32)
で与えられる。したがって、ブロックの右下角に配置されるセル(最後セル)〔Sxdl,Sydl〕に当てはめる分割画像の座標は、
Sxdl=Sxdf+5=xf+4 …(式33)
Sydl=Sydf+5=yf+4 …(式34)
となる。
【0042】
以上のようにして、再設定されたブロックを構成する6×6個のセルに当てはめるべき分割画像が求められる。6×6個のセルに当てはめるべき分割画像が求められたら、新たにブロックの領域に入ってきた分割画像について、未取得の場合はWebサーバに要求し、Webサーバから既にダウンロードされてキャッシュメモリに保存されている分割画像についてはそれを読み出して、それぞれ該当するセルに当てはめて表示する(図6、図7、図9、図11等から明らかなように、セルに当てはめられてもブラウザの表示領域から外れている分割画像はその時点では表示されないが、スクロール操作によりブラウザの表示領域に入ってくれば表示できる状態になっている)。なお、図9に示したように、各分割画像が当てはめられるセルのセル番号(各分割画像に割り当てられるセル番号)は、分割画像ごとに一意的に定まっている。前回のブロックの再設定からブロック内にとどまっている(スクロール操作によってもブロック内から出なかった)分割画像については、セル番号の変更はない。
【0043】
以上のブロックの再設定制御による、ブロックを構成する各セルに対する分割画像の当てはめの変更の一例を図14に示す。図14の各セル位置に記述されている数値のうち、上段は分割画像座標値を示し、下段はセル番号を示す。この例は、スクロール操作による画像の移動によって、セルの境界がブラウザの原点(0,0)をX軸方向の右方向に1本だけ越えて、Y軸方向には1本も越えていない場合(図11に示すように画像が移動した場合)を示す。
【0044】
表示倍率変更制御
新聞を閲覧中に表示倍率を変更する場合の制御について説明する。この表示倍率変更制御は、マウスカーソル(ポインタ)位置を不動点として表示倍率が変更されるように(つまり、マウスカーソルが位置する紙面上の位置が倍率変更前と倍率変更後で変化しないように)制御している。図15はその制御フローを示す。図15の制御は、Webサーバから送信されるHTMLに記述されているJavaScriptによって行われる。新聞を閲覧中に、表示されている新聞紙面の画像上の任意の位置(表示倍率を変更して閲覧したい記事位置)にマウスカーソルを当てて(S21)、マウスを右クリック操作すると(S22)、その時のマウスカーソル(ポインタ)の座標値{ブラウザの原点(0,0)を原点とするピクセル値}が取得される(S23)。なお、画像の原点の座標値(Xd0,Yd0)は、初期値(X0,Y0)は(式5)、(式6)によって与えられ、その後はスクロール操作がされるごとに(式23)、(式24)によって更新されるので、表示倍率変更操作時の画像の原点の座標値(Xd0,Yd0)は、既に取得されている。
【0045】
前記マウスの右クリック操作により表示倍率を選択するためのポップアップメニューが表示される(S24)。閲覧者がポップアップメニューに表示された表示倍率の数値(長さ比)の中から任意の倍率を選択する操作をすると(S25)、前記右クリックした時のマウスカーソル位置を不動点として、選択した倍率で画像を表示するために必要な、該画像の原点位置を求めるための演算が実行される(S26)。その演算内容について図16を参照して説明する。図16の例は、表示倍率変更前に表示されていた画像1(18−1)を、表示倍率変更操作位置(右クリックした時のマウスカーソル位置。以下「処理中心」と言う。)を不動点として画像2(18−2)に拡大表示する場合について示したものである。
【0046】
図16において、各変数は次を意味する。
Xm:ブラウザの原点と処理中心とのX軸方向距離
Xm11:ブラウザの原点と画像1の原点とのX軸方向距離
Xm12:画像1の原点と処理中心とのX軸方向距離
Xm21:ブラウザの原点と画像2の原点とのX軸方向距離
Xm22:画像2の原点と処理中心とのX軸方向距離
Ym:ブラウザの原点と処理中心とのY軸方向距離
Ym11:ブラウザの原点と画像1の原点とのY軸方向距離
Ym12:画像1の原点と処理中心とのY軸方向距離
Ym21:ブラウザの原点と画像2の原点とのY軸方向距離
Ym22:画像2の原点と処理中心とのY軸方向距離
画像1の表示倍率に対する画像2の表示倍率の比をα(α>1)とすると、
Xm22=α・Xm12 …(式35)
Ym22=α・Ym12 …(式36)
が成り立つ。また、図16から
Xm12=Xm+Xm11 …(式37)
Ym12=Ym+Ym11 …(式38)
である。(式37)、(式38)を(式35)、(式36)に代入すると、
Xm22=α・Xm+α・Xm11 …(式39)
Ym22=α・Ym+α・Ym11 …(式40)
となる。
【0047】
図16から
Xm21=Xm22−Xm …(式41)
Ym21=Ym22−Ym …(式42)
である。(式39)、(式40)を(式41)、(式42)に代入すると、
Xm21=(α・Xm+α・Xm11)−Xm=(α−1)Xm+α・Xm11 …(式43)
Ym21=(α・Ym+α・Ym11)−Ym=(α−1)Ym+α・Ym11 …(式44)
となる。(式43)、(式44)で求められる座標値(Xm21,Ym21)(ピクセル値)が、倍率変更後の画像の原点位置である。
【0048】
図15のステップS26で、以上の演算により倍率変更後の画像の原点位置が求められたら、ブロックを構成する6×6個のセルに当てはめる分割画像を算出する(S27)。なお、1つのセルに当てはめる1つの分割画像を構成する画素数は、前述のように倍率の違いにかかわらず一定であり、例えば480×480ピクセルである。各セルに当てはめる分割画像は、前記(式11)〜(式16)に基づいて算出することができる。すなわち、(式11)、(式12)からブラウザの表示領域に入る最初の分割画像{ブラウザの原点(0,0)が属する分割画像}の座標[xf,yf]を求める(ただし、(式11)、(式12)は、画像の原点の初期値X0 、Y0に代えて、(式43)、(式44)で求められた倍率変更後の画像の原点位置Xm21、Ym21を用いる。)。
【0049】
ブラウザの表示領域に入る最初の分割画像の座標[xf,yf]が求まったら、前記(式13)、(式14)により、ブロックの左端に配置されるセルSxf(X軸最初セル)に当てはめる分割画像座標値としてxf−1を求める。同様に、ブロックの上端に配置されるセルSyf(Y軸最初セル)に当てはめる分割画像座標値としてyf−1を求める。さらに、最初セル〔Sxf,Syf〕を0番目のセルとして、前記(式15)、(式16)により、X軸方向にm番目(m=0,1,…,5)、Y軸方向にn番目(n=0,1,…,5)のセル〔Sxm,Syn〕に当てはめられる分割画像座標値として、[xf−1+m、yf−1+n]をそれぞれ求める。
【0050】
図15のステップS27で、以上の演算により、ブロックを構成する6×6個のセルに当てはめる分割画像が算出されたら、前記(式19)〜(式22)により、ブロックを構成する6×6個のセルのブラウザ上における表示位置を求める(ただし、画像の原点の初期値X0 、Y0に代えて、倍率変更後の画像の原点位置Xm21、Ym21を用いる。)(S28)。すなわち、(式19)、(式20)によりブロックの原点の座標を求め、さらに、(式21)、(式22)により各セルの原点の座標を求める。
【0051】
以上のようにして、倍率変更後の6×6個のセルに当てはめるべき分割画像およびその表示位置が求められたら、未取得の分割画像についてはWebサーバに要求し(S29)、Webサーバから既にダウンロードされてキャッシュメモリに保存されている分割画像についてはそれを読み出して、それぞれ該当するセルに当てはめて表示する(S30)(図6、図7、図9、図11等から明らかなように、セルに当てはめられてもブラウザの表示領域から外れている分割画像はその時点では表示されないが、スクロール操作によりブラウザの表示領域に入ってくれば表示できる状態になっている)。
【0052】
以上のようにして、処理中心を不動点として表示倍率が変更される。なお、以上は画像を拡大表示する場合について説明したが、縮小表示する場合も、表示倍率の比αがα<1に変わるだけで、処理内容は拡大表示する場合と同じである。
【0053】
ページめくり制御
新聞紙面を閲覧している際に、ブラウザ画面上のツールバー等で所定のページめくり操作をすると、Webブラウザは、HTMLに記述されているJavaScriptに基づき、指示されたページについて、所定倍率(紙面の記事全体が見渡せるように比較的低い倍率)の分割画像をWebサーバに要求し(Webサーバから既にダウンロードされてキャッシュメモリに保存されている分割画像についてはそれを読み出して用いる。)、前記閲覧開始当初の初期画面と同様に、ブラウザの表示領域の中心と画像の中心を一致させた状態に該画像を初期表示する。該初期表示後のスクロール制御、倍率変更制御は前述と同じに実行される。
【0054】
なお、以上説明した実施の形態では、画像を縦横両方向に分割したが、縦横一方向にのみ分割することもできる。また、セル(枠要素)を縦横両方向に配列したが、縦横一方向のみに配列することもできる。また、分割画像およびセルを正方形としたが、長方形とすることもできる。分割画像およびセルを矩形以外の形状に分割することもできる。また、ブロックを構成するセル数を縦横同一としたが、縦横非同一とすることもできる。また、ブロックをブラウザの表示領域に対して予め1セル分左方向および上方向にオフセットさせが、オフセット量は2セル以上にすることもできる。また、分割画像をサーバに予め用意してビューアからの要求を待って送信するようにしたが、ビューアからの要求を待って分割画像を生成して送信することもできる。また、初期表示した後、スクロール操作を待ってその周囲の分割画像をダウンロードするようにしたが、初期表示した後、スクロール操作を待たずにその周囲の分割画像を順次ダウンロードすることもできる。また、新聞を閲覧する場合について説明したが、その他の画像(例えば漫画)を閲覧する場合にもこの発明を適用できる。また、Webブラウザを使用して閲覧する場合について説明したが、プラグインソフトウェアを使用して閲覧する場合にも、この発明を適用できる。
【0055】
この出願には特許請求の範囲の請求項1,2に従属して記載できる発明として次の発明が記載されている。
《請求項3》
前記枠要素の配列が、ビューアの表示領域に少なくとも一部が入る分割画像を個々に当てはめる枠要素のほか、該分割画像の領域の周囲に隣接する分割画像を個々に当てはめる枠要素を具える請求項2記載の画像表示方法。
《請求項4》
前記分割画像が、前記画像を横方向もしくは縦方向の一方向にまたは横方向および縦方向の両方向に格子状に分割した画像である請求項2または3記載の画像表示方法。
《請求項5》
前記格子が、前記画像の左端位置を始点として所定ピクセル数ごとに横方向に分割して形成されたもの、もしくは、該画像の上端位置を始点として所定ピクセル数ごとに縦方向に分割して形成されたもの、または、該画像の左端位置を始点として所定ピクセル数ごとに横方向に分割しかつ該画像の上端位置を始点として所定ピクセル数ごとに縦方向に分割して形成されたものである請求項4記載の画像表示方法。
《請求項6》
前記各枠要素に固有の識別情報が付与され、
前記「画像の相対移動に伴いビューアの表示領域から離れる分割画像に該当する位置から枠要素を削除し、ビューアの表示領域に近づく分割画像に該当する位置に枠要素を追加」し、かつ「該追加する枠要素に、該当する位置の分割画像を当てはめ」る処理が、
前記削除する枠要素を前記追加する枠要素として使用し、かつ該枠要素に当てはめる分割画像を、前記削除する枠要素に当てはめられている分割画像から前記追加する枠要素に該当する位置の分割画像に変更することにより行われる請求項2から5のいずれか1つに記載の画像表示方法。
《請求項7》
ビューアは前記固有の識別情報に、ビューアの表示領域における該枠要素の表示位置の情報と、該枠要素に当てはめる分割画像の識別情報を関連づけて保持し、ビューアは該情報に基づき、各枠要素に当てはめる分割画像を、ビューアの表示領域の所定位置に表示する請求項6記載の画像表示方法。
《請求項8》
前記分割画像の識別情報が、画像全体におけるその番地に相当する情報をもって該画像全体における識別情報としてなる請求項7記載の画像表示方法。
《請求項9》
前記複数の枠要素全体でブロックを構成し、画像の相対移動が指示された時に、ビューアは、該ビューアの表示領域の原点に対する該ブロックの原点の移動すべき座標を演算し、該演算により求められたブロックの原点の座標に基づき、前記各枠要素の原点の移動すべき座標をそれぞれ演算し、該演算により求められた座標に各枠要素の原点をそれぞれ移動することにより、前記画像の相対移動を実現する請求項2から8のいずれか1つに記載の画像表示方法。
《請求項10》
前記分割画像が前記画像を横方向に格子状に分割した画像でありかつ前記枠要素が横方向に複数の連続した分割画像を当てはめるものであり、もしくは、前記分割画像が前記画像を縦方向に格子状に分割した画像でありかつ前記枠要素が縦方向に複数の連続した分割画像を当てはめるものであり、または、前記分割画像が前記画像を横方向および縦方向に格子状に分割した画像でありかつ前記枠要素が横方向に複数の連続した分割画像もしくは縦方向に複数の連続した分割画像または横方向に複数で縦方向に複数の連続した分割画像を当てはめるものである請求項2から9のいずれか1つに記載の画像表示方法。
《請求項11》
前記ビューアがWebブラウザであり、該Webブラウザでの各演算がJavaScript(登録商標)に基づき実行される請求項1から10のいずれか1つに記載の画像表示方法。
《請求項12》
前記枠要素が<DIV>タグを使用して設定されている請求項11記載の画像表示方法。
【符号の説明】
【0056】
10…Webサーバ(サーバコンピュータ)、12…Webブラウザ(クライアントコンピュータ、ビューア)、14…通信ネットワーク、16…ブラウザの表示領域(ビューアの表示領域)、18,18−1,18−2…画像、20…ブロック、22…セル(枠要素)、24…分割画像
【技術分野】
【0001】
この発明は、ビューアの表示領域よりも大きい画像をビューアに表示する画像表示方法および画像表示用プログラムに関する。
【背景技術】
【0002】
インターネット技術の発展により、世界中からあらゆる情報をブラウザで閲覧することができるようになった。画像情報も同様にブラウザで閲覧できる。これは、Webサーバ上に、JPEGファイル等の画像ファイルを表示することを記述したHTMLファイルを保存しておくことにより実現される。インターネット技術を利用した新聞紙面画像の配信および閲覧も実用化されている。インターネット技術を利用した新聞紙面画像の配信・閲覧技術としては、例えば下記特許文献1に記載のものがある。
【先行技術文献】
【特許文献】
【0003】
【特許文献1】特開2002−236701号公報
【発明の概要】
【発明が解決しようとする課題】
【0004】
この発明は新聞紙面等の横縦のサイズ(画素数)が大きい画像をビューアに表示する画像表示方法および画像表示用プログラムを提供しようとするものである。
【課題を解決するための手段】
【0005】
この発明の画像表示方法はビューアの画像を表示する表示領域よりも大きい画像を分割し該ビューアの表示領域に少なくとも一部が入る分割画像を該ビューアの表示領域に表示する画像表示方法において、分割画像を個々に当てはめて表示する表示領域に相当する複数の枠要素の配列をビューアに設定し、該各枠要素に、該当する位置の分割画像をそれぞれ当てはめて表示しまたは表示できる状態にするものである。
【0006】
この発明の画像表示方法はビューアの画像を表示する表示領域よりも大きい画像を分割し該ビューアの表示領域に少なくとも一部が入る分割画像を該ビューアの表示領域に表示する画像表示方法において、ビューアの表示領域に少なくとも一部が入る分割画像を含む、ビューアの表示領域に対し所定の位置関係にある、画像全体に対して限定された範囲の画像領域に含まれる分割画像を、個々に当てはめて表示する表示領域に相当する複数の枠要素の配列をビューアに設定し、該各枠要素に、該当する位置の分割画像をそれぞれ当てはめて表示しまたは表示できる状態にし、かつ、ビューアの表示領域に対する画像の相対移動が指示された時に、ビューアの表示領域に対する枠要素の移動すべき位置を演算して該位置に枠要素を移動し、該画像の相対移動に伴いビューアの表示領域から離れる分割画像に該当する位置から枠要素を削除し、ビューアの表示領域に近づく分割画像に該当する位置に枠要素を追加して画像に対する枠要素の配列の位置を変更し、該追加する枠要素に、該当する位置の分割画像を当てはめて表示しまたは表示できる状態にするようにしたものである。これによればビューアの表示領域に対する画像の相対移動が指示された時に、ビューアの表示領域に対する枠要素の移動すべき位置を演算して該位置に枠要素を移動するので、画像全体(つまり全分割画像)を移動する場合に比べて演算量を減らすことができ、これにより画像の移動速度を速くする(追従性をよくする)ことができる。
【0007】
この発明の画像表示用プログラムは、この発明の画像表示方法を処理装置に実行させることを特徴とするものである。
【0008】
この発明の画像表示方法は例えば、ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法と組み合わせることができる。この組み合わせの様々な態様を以下に示す。各態様によれば、画像とビューアの表示領域との相対位置に応じてビューアの表示領域に少なくとも一部が入る分割画像を判断し、サーバから該当する分割画像を優先的に送信するようにしたので、画像全体を送信して表示する場合に比べて、少ない待ち時間でビューアに表示することができる。
《態様1》ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法であって、サーバから該画像を複数の領域に分割した画像ごとに送信可能にし、該画像とビューアの表示領域との相対位置に応じてビューアの表示領域に少なくとも一部が入る分割画像を判断し、サーバから該当する分割画像を優先的に送信し、ビューアに表示する画像表示方法。
《態様2》ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法であって、該画像を複数の領域に分割してサーバに予め用意し、該画像とビューアの表示領域との相対位置に応じてビューアの表示領域に少なくとも一部が入る分割画像を判断し、サーバから該当する分割画像を優先的に送信し、ビューアに表示する画像表示方法。
《態様3》ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法であって、該画像を、ビューアの表示領域よりも横方向もしくは縦方向の一方向または横方向および縦方向の両方向の長さがそれぞれ短い複数の領域に分割してサーバに予め用意し、該画像とビューアの表示領域との相対位置に応じてビューアの表示領域に少なくとも一部が入る複数の分割画像を判断し、サーバから該当する複数の分割画像を優先的に送信し、ビューアに元の並び状態に配列して表示する画像表示方法。
《態様4》ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法であって、該画像を複数の領域に分割してサーバに予め用意し、ビューアは該画像とビューアの表示領域との相対位置に応じてビューアの表示領域に少なくとも一部が入る分割画像を判断して該分割画像をサーバに優先的に要求し、サーバは該要求に応じた分割画像を優先的に送信し、ビューアは受け取った分割画像を表示する画像表示方法。
《態様5》ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法であって、該画像を、ビューアの表示領域よりも横方向もしくは縦方向の一方向または横方向および縦方向の両方向の長さがそれぞれ短い複数の領域に分割してサーバに予め用意し、ビューアは該画像とビューアの表示領域との相対位置に応じてビューアの表示領域に少なくとも一部が入る複数の分割画像を判断して該分割画像をサーバに優先的に要求し、サーバは該要求に応じた複数の分割画像を優先的に送信し、ビューアは受け取った分割画像を元の並び状態に配列して表示する画像表示方法。
《態様6》ビューアの表示領域に少なくとも一部が入る分割画像のほか、該分割画像の領域の周囲に隣接する分割画像を含む、ビューアの表示領域に対し所定の位置関係にある限定された範囲の画像領域に含まれる分割画像を併せて判断し、サーバから該当する分割画像を併せて優先的に送信する態様1から5のいずれか1つに記載の画像表示方法。
《態様7》前記分割画像がビューアに既にダウンロードされて保存されている分割画像であるかどうかを判断し、既に保存されている分割画像である場合は、サーバから再度ダウンロードすることなく、該保存されている分割画像を読み出して表示する態様1から6のいずれか1つに記載の画像表示方法。
《態様8》前記分割画像が、前記画像を横方向もしくは縦方向の一方向にまたは横方向および縦方向の両方向に格子状に分割した画像である態様1から7のいずれか1つに記載の画像表示方法。
《態様9》前記格子が、前記画像の左端位置を始点として所定ピクセル数ごとに横方向に分割して形成されたもの、もしくは、該画像の上端位置を始点として所定ピクセル数ごとに縦方向に分割して形成されたもの、または、該画像の左端位置を始点として所定ピクセル数ごとに横方向に分割しかつ該画像の上端位置を始点として所定ピクセル数ごとに縦方向に分割して形成されたものである態様8記載の画像表示方法。
《態様10》ビューアの表示領域に少なくとも一部が入る分割画像を含む、ビューアの表示領域に対し所定の位置関係にある限定された範囲の画像領域に含まれる分割画像を、個々に当てはめて表示する表示領域に相当する所定数の枠要素をビューアに設定し、該各枠要素に、該当する位置の分割画像をそれぞれ当てはめて表示しまたは表示できる状態にし、かつ、画像の相対移動に伴いビューアの表示領域から離れる分割画像を判断して枠要素への当てはめを解除し、ビューアの表示領域に近づく分割画像を判断して枠要素に新たに当てはめる態様1から9のいずれか1つに記載の画像表示方法。
《態様11》前記各枠要素に固有の識別情報が付与され、前記画像の相対移動に伴いビューアの表示領域から離れる分割画像の当てはめを解除する枠要素に、ビューアの表示領域に近づく分割画像を新たに当てはめる態様10記載の画像表示方法。
《態様12》前記各枠要素に固有の識別情報が付与され、ビューアは該固有の識別情報に、ビューアの表示領域における該枠要素の表示位置の情報と、該枠要素に当てはめる分割画像の識別情報を関連づけて保持し、ビューアは該情報に基づき、各枠要素に当てはめる分割画像を、ビューアの表示領域の所定位置に表示する態様10または11記載の画像表示方法。
《態様13》前記分割画像の識別情報が、画像全体におけるその番地に相当する情報をもって該画像全体における識別情報としてなり、ビューアは該分割画像の識別情報をもってサーバに該分割画像を要求し、サーバは該識別情報に該当する分割画像を判別してビューアに送信する態様12記載の画像表示方法。
《態様14》前記分割画像の識別情報が、各分割画像のファイル形式を識別する情報を有しない態様13記載の画像表示方法。
《態様15》前記所定数の枠要素全体でブロックを構成し、画像の相対移動が指示された時に、ビューアは、該ビューアの表示領域の原点に対する該ブロックの原点の移動すべき座標を演算し、該演算により求められたブロックの原点の座標に基づき、前記各枠要素の原点の移動すべき座標をそれぞれ演算し、該演算により求められた座標に各枠要素の原点をそれぞれ移動することにより、前記画像の相対移動を実現する態様10から14のいずれか1つに記載の画像表示方法。
《態様16》前記分割画像が前記画像を横方向に格子状に分割した画像でありかつ前記枠要素が横方向に所定数の連続した分割画像を当てはめるものであり、もしくは、前記分割画像が前記画像を縦方向に格子状に分割した画像でありかつ前記枠要素が縦方向に所定数の連続した分割画像を当てはめるものであり、または、前記分割画像が前記画像を横方向および縦方向に格子状に分割した画像でありかつ前記枠要素が横方向に所定数の連続した分割画像もしくは縦方向に所定数の連続した分割画像または横方向に所定数で縦方向に所定数の連続した分割画像を当てはめるものである態様10から15のいずれか1つに記載の画像表示方法。
《態様17》同じ内容の画像を複数の倍率でかつ倍率ごとにそれぞれ複数の領域に分割してサーバから送信可能にし、ビューアから指示される倍率の画像について態様1から16のいずれか1つに記載の方法を実行する画像表示方法。
《態様18》倍率にかかわらず、画像を横方向もしくは縦方向または横方向および縦方向に分割するピクセル数が同じである態様17記載の画像表示方法。
《態様19》1つの倍率で画像を表示している状態で該画像上の任意の位置にポインタを当てて倍率変更操作をした場合に、該ポインタが位置する画像上の位置を不動点として変更後の倍率の画像を表示する態様17または18記載の画像表示方法。
《態様20》同じ内容の画像を複数の倍率でかつ倍率ごとにそれぞれ複数の領域に分割してサーバから送信可能にし、ビューアから指示される倍率の画像について態様10から16のいずれか1つに記載の方法を実行する画像表示方法であって、倍率にかかわらず、前記枠要素の数を同じにしてなる画像表示方法。
《態様21》前記ビューアがWebブラウザであり、該Webブラウザでの各演算がサーバから送信されるHTMLに格納されているJavaScript(登録商標)に基づき実行される態様1から20のいずれか1つに記載の画像表示方法。これによれば、プラグインソフトウェアなしで画像表示を行うことができる。
《態様22》前記枠要素が、サーバから送信されるHTMLに記述されている<DIV>タグを使用して設定されている態様21記載の画像表示方法。
《態様23》前記サーバから送信されるHTMLに、前記分割画像ごとのファイル名及び/またはファイル形式等の属性の情報が組み込まれていない態様21または22記載の画像表示方法。
《態様24》前記画像が、異なるファイル形式の分割画像が混在して構成されている態様1〜23のいずれか1つに記載の画像表示方法。
【図面の簡単な説明】
【0009】
【図1】この発明の実施の形態を示すシステム構成図である。
【図2】画像分割の説明図である。
【図3】図1のシステムにおいて新聞紙面を閲覧する場合のWebブラウザ12とWebサーバ10との間の通信のやり取りを示す図である。
【図4】分割画像データを当てはめる6×6個のセルをブロック化するためのHTMLソースプログラムである。
【図5】図1のWebブラウザ12に表示される新聞紙面の画像の一例を示す図である。
【図6】新聞紙面1ページの画像とブラウザの表示領域およびブロックの位置関係の一例を示す図である。
【図7】ブロックとブラウザの表示領域の関係を示す図で、(a)はオフセットなしの場合、(b)は−1セル分のオフセットありの場合である。
【図8】ブロックを構成する各セルの原点の座標値の一例を示す図である。
【図9】新聞1ページの画像を構成する各分割画像の座標値と、該各分割画像が当てはめられるセルのセル番号を示す図である。
【図10】ブロックを構成する各セルに当てはめる分割画像座標値と、該各セルに付与するセル番号と、該各セルのブラウザ上における表示位置の関係を求め、該当する分割画像をWebサーバに要求し、該要求に応じてWebサーバから送られてきた分割画像を各セル当てはめるためのJavaScriptの関数(抜粋)を示す図である。
【図11】スクロール操作による画像の移動動作の一例を示す図である。
【図12】スクロール操作時の制御内容を示すフローチャートである。
【図13】ブロックの移動量を計算してブロックの原点の移動すべき座標を求めるためのJavaScriptの関数を示す図である。
【図14】ブロックの再設定制御による、ブロックを構成する各セルに対する分割画像の当てはめの変更の一例を示す
【図15】表示倍率変更制御の制御内容を示すフローチャートである。
【図16】図15のステップS26で実行する演算の内容を説明するための図である。
【発明を実施するための形態】
【0010】
この発明の実施の形態を以下説明する。この実施の形態では、プラグインソフトウェアなしで、新聞紙面画像を配信・閲覧する場合について説明する。図1にシステム構成を示す。Webサーバ(サーバコンピュータ)10とWebブラウザ(クライアントコンピュータ、ビューア)12とは、インターネット等の通信ネットワーク14を介して接続されている。Webサーバ10には、新聞紙面の画像データベースが予め格納されて用意されている。この画像データベースは、新聞1ページ全体を1つの画像とするもので、新聞を構成する各ページの画像を様々な倍率{長さ比で例えば、25%,33%,50%,67%(以上、実際の新聞紙面の縮小画像),100%(実際の新聞紙面と等倍画像),133%,200%,400%(以上、実際の新聞紙面の拡大画像)}で(すなわち、同一ページの画像を複数の倍率で)保存している。各分割画像のファイル形式は同一である必要はなく、例えば分割画像ごとの特徴(写真か文字か、カラーか白黒か等)に応じて圧縮率が高いファイル形式(JPEG形式、PNG形式、GIF形式等)で保存する。したがって、新聞1ページの画像は、異なるファイル形式の分割画像が混在して構成される場合がある。このように、分割画像ごとに圧縮率が高いファイル形式を用いることにより送信時間を短縮できる。
【0011】
1つの倍率の1ページの画像は、図2に示すように、左上位置(画像の原点位置)から横方向(X軸方向)および縦方向(Y軸方向)にそれぞれ所定画素数ごとに格子状に分割されて、複数の矩形の分割画像の集合で構成されている。1つの分割画像を構成する画素数は、倍率の違いにかかわらず一定であり、例えば480×480ピクセルである(ただし、1ページ横方向全体の画素数が1つの分割画像について定められた横方向の画素数で割り切れない場合は、右端位置の分割画像の画素数は端数となる。同様に、1ページ縦方向全体の画素数が1つの分割画像について定められた縦方向の画素数で割り切れない場合は、下端位置の分割画像の画素数は端数となる。)。これに対し、1ページ分の紙面を構成する画素数は、倍率に応じて変化する{倍率(=長さ比)の二乗に比例する}ので、1ページ分の紙面を構成する分割画像数は、倍率が低い画像ほど少なく、倍率が高い画像ほど多くなる。各分割画像には、1ページの画像における各分割画像の位置(番地)を示す座標値(分割画像座標値)として、図2に示すように、横方向の座標をx、縦方向の座標をyとし、左上角の分割画像位置を原点[0,0]とし、右に行くに従い、また下に行くに従い1ずつ増加する分割画像座標値[x,y]に相当するファイル名がそれぞれ付与されて保存されている。1ページの画像における右端の分割画像の横方向の座標値をxl、下端の分割画像の縦方向の座標値をylとすると、右下角の最後の分割画像の座標値は[xl,yl]となる。特定の新聞の、特定のページの、特定の倍率の、特定の分割画像は、新聞名、日付、朝/夕刊別、ページ番号、倍率、分割画像座標値[x,y]の各情報を組み合わせた識別情報で特定(指定)される。新聞紙面を閲覧する場合は、Webブラウザ12から、閲覧者により指示される閲覧位置に応じた該識別情報が送信され、Webサーバ10は該識別情報を解析して、該当する分割画像を送信し、Webブラウザ12は該分割画像を受け取って、元の画像の並びに配列して表示する。上記のような識別情報を用いれば、Webサーバ10から最初にWebブラウザ12に送信するHTML(後述する図3のステップS2)に、分割画像ごとのファイル名{ファイル形式を指定する識別子(.jpg、.png、.gif等)が付加されたデータ}を組み込んでおく必要がない(すなわち、Webブラウザ12はファイル名やそのファイル形式を予め知らなくても、個々の分割画像を要求できる。)ので、該HTMLのデータ量は少なくて済む。
【0012】
この実施例では、後述するように(図6)、画像上にブラウザの表示領域全体が入る大きさの『ブロック』を設定する。このブロックは、例えば6×6個の『セル』(枠要素)で構成される。1つのセルは1つの分割画像の大きさ(例えば480×480ピクセル)に相当し、該当する位置の分割画像が当てはめ(割り当て)られる。ブロックは、画像が移動(スクロール)しても常にブラウザの表示領域全体が入るように、ブラウザの表示領域に対する画像の移動に応じて、ブラウザの表示領域に対してセル単位で移動し、これに伴い、セルに当てはめられる分割画像も順次入れ替えられる。
【0013】
新聞紙面を閲覧する場合のWebブラウザ12とWebサーバ10との間の通信のやり取りを図3に示す。閲覧者がWebブラウザ12からWebサーバ10に○月○日付の○○新聞の○刊(朝刊または夕刊)を閲覧する旨の指示をすると、該当する内容のHTMLを要求する指示が出される(S1)。Webサーバ10はこの要求を受けて、図4に示す、分割画像データを当てはめる6×6個のセルを設定する<DIV>タグ、および、どの分割画像をどのセルに当てはめてブラウザ上のどの位置に表示するかを算出するためのJavaScriptを含んだHTMLをWebブラウザに返す(S2)。なお、6×6個のセルには、図4に示すように、「canvas0000」〜「canvas0505」の名前が付けられている。「canvas」に続く4桁の数字のうち、最初の2桁はブロック内でのセルのX軸方向の番地(00〜05)を示し、それに続く残りの2桁はブロック内でのセルのY軸方向の番地(00〜05)を示す。
【0014】
Webブラウザ12は、HTMLを受け取ると、該HTMLに記述されているJavaScriptに基づき、各セルにどの分割画像を当てはめるかおよび各セルに当てはめられた分割画像をブラウザ12上のどの位置に表示するかを算出する。そして、算出された分割画像がWebブラウザ12に既にダウンロードされてキャッシュメモリに保存されている分割画像であるかどうかを判断し、既に保存されている分割画像については、それを読み出して該当するセルに当てはめる。また、Webブラウザ12に保存されていない分割画像については、Webサーバ10に対し該当する分割画像を要求する(S3)。Webサーバ10は該要求に応じて、該当する分割画像データを送信する(S4)。Webブラウザ12は該分割画像データを受け取り、該当するセルに当てはめる。このようにして、6×6個のセルに分割画像がそれぞれ当てはめられて(関連づけられて)、前記算出された位置にそれぞれ表示される(S5)。これにより、Webブラウザ12の表示領域全体に、分割画像がつなぎ目なく表示されて、新聞紙面の画像が表示される。表示の一例を図5に示す(図5においてセルの境界線は仮想的に示したもので、実際の画面では表示されない。)。なお、閲覧開始当初は初期画面として、Webブラウザ12から閲覧の指示をした新聞の第1ページの所定倍率(紙面の記事全体が見渡せるように比較的低い倍率)の分割画像をWebブラウザ12がWebサーバ10に要求して表示するように、Webサーバ10から送信するHTMLが記述されている。
【0015】
初期表示制御
ブロックを構成する各セルに当てはめる分割画像について説明する。ここでは、図6に示すように、ブラウザの表示領域16よりも大きい画像18(新聞紙面1ページ分の画像)を、ブラウザの表示領域16の中心と画像18の中心を一致させた状態に初期表示するものとする。また、ブロック20を6×6個のセル22で構成し、ブロック20の左側および上側を1セルずつ空けて(つまり、ブラウザの表示領域16の左上角が、ブロック20の左から2番目、上から2番目のセルに位置するように)表示するものとする。なお、以下の説明において、座標値あるいは番号(番地)はその種類に応じて次のように区別して表記する。
( , ):ピクセル座標値(ピクセル単位の座標値)
[ , ]:分割画像座標値(画像全体における分割画像ごとの座標値)
〔 , 〕:セル番号(ブロックにおけるセルごとの番号値)
ピクセル座標値は、ブラウザの原点(左上角)を原点(0,0)とし、X軸方向の極性は右方向を+、左方向を−とし、Y軸方向の極性は下方向を+、上方向を−とする。
【0016】
図6において、各変数は次を意味する。
Xi:画像(新聞紙面1ページ)全体の幅(ピクセル値)
Yi:画像(新聞紙面1ページ)全体の高さ(ピクセル値)
Xb:ブラウザの幅(ピクセル値)
Yb:ブラウザの高さ(ピクセル値)
X1=Xi/2:画像幅の半値 …(式1)
Y1=Yi/2:画像高さの半値 …(式2)
X2=Xb/2:ブラウザ幅の半値 …(式3)
Y2=Yb/2:ブラウザ高さの半値 …(式4)
【0017】
なお、画像全体の幅Xiおよび高さYiの値は、WebサーバがHTMLにhiddenタグの属性値として埋め込んで送信する(図3のステップS2)ことにより、Webブラウザに与えられる。このhiddenタグの例を以下に示す。
<INPUT TYPE="hidden" NAME="imageWidth" VALUE="5986">
<INPUT TYPE="hidden" NAME="imageHeight" VALUE="8130">
この例によれば、Xi=5986(ピクセル)、Yi=8130(ピクセル)が与えられる。また、ブラウザの幅および高さの値Xb、Ybは、Webサーバから送信されるHTML(図3のステップS2)に記述されているJavaScriptに基づきブラウザ自身で取得する。ブラウザの幅および高さの値Xb、YbはJavaScriptの次の関数で求められる。
browserWidth=document.body.clientWidth; //表示されているブラウザの幅
browserHeight=document.body.clientHeight; //表示されているブラウザの高さ
【0018】
図6において、ブラウザの原点(左上角)を原点(0,0)とすると、画像の原点の座標値(X0,Y0)は次式によって与えられる。
X0=X2−X1:画像のX軸原点 …(式5)
Y0=Y2−Y1:画像のY軸原点 …(式6)
1つの分割画像の大きさ(=1つのセルの大きさ)を480×480ピクセルとすると、画像全体の分割画像数は次式によって与えられる。
Gxi=Xi/480:X軸方向の全分割画像数 …(式7)
Gyi=Yi/480:Y軸方向の全分割画像数 …(式8)
このGxi、Gyiが小数点以下の桁を有する場合は、小数点以下を切り上げた整数値が実際のX軸方向およびY軸方向の全分割画像数である。また、Gxiの小数点以下を切り捨てた値が右端の分割画像の横方向の座標値xl(図2)であり、Gyiの小数点以下を切り捨てた値が下端の分割画像の縦方向の座標値yl(同)である。
【0019】
一方、ブラウザの表示領域16に必要な分割画像数は次式によって与えられる。
Gxb=Xb/480:X軸方向の表示に必要な分割画像数 …(式9)
Gyb=Yb/480:Y軸方向の表示に必要な分割画像数 …(式10)
ブラウザの表示領域16に入る最初の分割画像{ブラウザの原点(0,0)が属する(位置する)分割画像}の座標[xf,yf]は、次式によって与えられる。
xf=−{(X0/480)の商の小数点以下を切り捨てた値} …(式11)
yf=−{(Y0/480)の商の小数点以下を切り捨てた値} …(式12)
【0020】
ブロックの左端に配置されるセル(X軸方向のセル番号をSxfとする。以下「X軸最初セル」という。)には、X軸方向の分割画像座標値がxf−1の分割画像を当てはめる。同様に、ブロックの上端に配置されるセル(Y軸方向のセル番号をSyfとする。以下「Y軸最初セル」という。)には、Y軸方向の分割画像座標値がyf−1の分割画像を当てはめる。すなわち、
Sxf=xf−1 …(式13)
Syf=yf−1 …(式14)
とする。これによれば、ブロックの最初のセル〔Sxf,Syf〕(ブロックの左上角に配置されるセル。以下「最初セル」という。)には、[xf−1,yf−1]の分割画像が当てはめられる。−1を付加するのは、Sxf=xf、Syf=yfに設定すると、図7(a)に示すように、ブロック20の左端部分および上端部分がブラウザの表示領域16の左端部分および上端部分に接近して配置されることになり、画像を右下方向に移動(スクロール)させた際に、新たに左側および上側からブラウザの表示領域16に入るべき分割画像がWebサーバから新たに転送されて来るまでの待ち時間に、ブラウザの表示領域16の左端部分および上端部分に空白部分(画像が表示されない部分)が生じ易くなるためである。これに対し、−1を付加すると、図7(b)に示すように、ブロック20は予めブラウザの表示領域16に対して1セル分以上左方向および上方向にオフセットして配置されることになり、画像を右下方向に移動させた際に、ブラウザの表示領域16の左端部分および上端部分に空白部分を生じにくくさせることができる。
【0021】
ブロックを構成するその他のセルに当てはめる分割画像の座標は、最初セル〔Sxf,Syf〕に当てはめる分割画像の座標[xf−1,yf−1]に、X軸方向並びにY軸方向に1ずつ順次足していくことにより求められる。すなわち、最初セル〔Sxf,Syf〕を0番目のセルとして、X軸方向にm番目(m=0,1,…,5)、Y軸方向にn番目(n=0,1,…,5)のセル〔Sxm,Syn〕に当てはめられる分割画像座標値は、
Sxm=Sxf+m=xf−1+m …(式15)
Syn=Syf+n=yf−1+n …(式16)
で与えられる。したがって、ブロックの最後のセル〔Sxl,Syl〕(ブロックの右下角に配置されるセル。以下「最後セル」という。なお、ブロックの右端に配置されるセルをそれぞれ「X軸最後セル」、ブロックの下端に配置されるセルをそれぞれ「Y軸最後セル」という。)に当てはめる分割画像の座標は、
Sxl=Sxf+5=xf+4 …(式17)
Syl=Syf+5=yf+4 …(式18)
となる。以上のようにして、ブロック20を構成する6×6個のセル22に当てはめるべき分割画像が求められる。
【0022】
次に、ブロック20を構成する6×6個のセル22のブラウザ上における表示位置について説明する。各セルのブラウザ上における表示位置は、該各セルの原点(左上角の位置)の座標値(ピクセル値)で特定(指定)される。各セルの原点の座標値は以下のようにして求められる。まず、最初セル〔Sxf,Syf〕の原点(Xb0,Yb0)は、ブロックの原点に相当し(図6参照)、
Xb0=X0+(Sxf×480) …(式19)
Yb0=Y0+(Syf×480) …(式20)
で与えられる。ブロックを構成するその他のセルの原点は、このようにして求められた最初セル〔Sxf,Syf〕の原点(Xb0,Yb0)にX軸方向並びにY軸方向に480ずつ順次足していくことにより求められる。すなわち、最初セル〔Sxf,Syf〕を0番目のセルとして、X軸方向にm番目(m=0,1,…,5)、Y軸方向にn番目(n=0,1,…,5)のセル〔Sxm,Syn〕の原点(Xbm,Ybn)は、
Xbm=Xb0+(m×480) …(式21)
Ybn=Yb0+(n×480) …(式22)
で与えられる。
【0023】
Webサーバから送信されるHTML(図3のステップS2)には、以上の(式1)〜(式22)に相当する演算を実行するJavaScriptが記述されており、Webブラウザは、該HTMLを受け取ると、該JavaScriptに基づき、ブロックを構成する6×6個のセルに当てはめる分割画像座標値と、各セルのブラウザ上における表示位置(各セルの原点位置を表示するピクセル座標位置)を算出する。そして、Webブラウザは、算出された分割画像座標値を識別情報としてWebサーバに該当する分割画像を要求する(Webサーバから既にダウンロードされてキャッシュメモリに保存されている分割画像についてはそれを使用する。)(図3のステップS3)。Webサーバ10は該要求に応じて、該当する分割画像データを送信し(同S4)、Webブラウザ12は該分割画像データを受け取り、該当するセルに当てはめて、それぞれ前記求められた位置に表示する(同S5)(図6、図7、図9、図11等から明らかなように、セルに当てはめられてもブラウザの表示領域から外れている分割画像はその時点では表示されないが、スクロール操作によりブラウザの表示領域に入ってくれば表示できる状態になっている)。
【0024】
ここで、(式1)〜(式22)に実際の値を入れて、ブラウザによって求められる、各セルに当てはめる分割画像座標値と、各セルのブラウザ上における表示位置を確かめてみる。画像の大きさをX軸方向:5986ピクセル、Y軸方向:8130ピクセルとし、ブラウザの幅をX軸方向:1020ピクセル、Y軸方向:556ピクセルとすると、Xi=5986、Yi=8130、Xb=1020、Yb=556となる。(式1)、(式2)により、画像幅の半値X1、画像高さの半値Y1は、
X1=5986/2=2993
Y1=8130/2=4065
となる。また、(式3)、(式4)により、ブラウザ幅の半値X2、ブラウザ高さの半値Y2は、
X2=1020/2=510
Y2=556/2=278
となる。また、(式5)、(式6)により、画像の原点(X0,Y0)は、
X0=510−2993=−2483
Y0=278−4065=−3787
となる。
【0025】
1つの分割画像の大きさを480×480ピクセルとすると、(式7)、(式8)により、画像全体の分割画像数は、
Gxi=5986/480=12.4708
Gyi=8130/480=16.9375
となる。このGxi=12.4708、Gyi=16.9375という数値は、画像全体の分割画像数が、X軸方向に13個、Y軸方向に17個で、全体として13×17=221個となることを示す。また、Gxiの小数点以下を切り捨てた値が右端の分割画像の横方向の座標値xlであり、Gyiの小数点以下を切り捨てた値が下端の分割画像の縦方向の座標値がylである。すなわち、xl=12、yl=16となる。
(式9)、(式10)により、ブラウザの表示領域に必要な分割画像数は、
Gxb=1020/480=2.125
Gyb=556/480=1.15833
となる。このGxb=2.125、Gyb=1.15833という数値は、ブラウザの表示領域全体に画像を表示するためには、ブロックを構成するセルが、X軸方向に少なくとも4個、Y軸方向に少なくとも3個必要であることを示す。この実施例では、画像の移動(スクロール)動作時に、空白部分(画像が表示されない部分)を生じにくくさせるために、前述のようにX軸方向が6個、Y軸方向が6個の合計6×6=36個のセルでブロックを構成している。ブロックを構成するセル数をより多くすれば、画像の移動動作時に空白部分をより生じにくくさせることができるが、その反面、該画像の移動動作時に各セルの座標計算に時間を要し、移動速度が遅くなる可能性がある(ただし、CPUの能力による)ので、移動動作時に空白部分が発生するのを防止することと画像の移動速度との兼ね合いで、ブロックを構成するセル数を設定する。
【0026】
(式11)、(式12)により、ブラウザの表示領域に入る最初の分割画像の座標[xf,yf]は、
xf=−{(−2483/480)の商の小数点以下を切り捨てた値}=5
yf=−{(−3787/480)の商の小数点以下を切り捨てた値}=7
となる。したがって、ブロックの最初セル〔Sxf,Syf〕に当てはめる分割画像の座標は、(式13)、(式14)により、
Sxf=5−1=4
Syf=7−1=6
となる。また、ブロックの最後セル〔Sxl,Syl〕に当てはめる分割画像の座標は、(式17)、(式18)により、
Sxl=Sxf+5=9
Syl=Syf+5=11
となる。
【0027】
(式19)、(式20)により、最初セル〔Sxf,Syf〕の原点(Xb0,Yb0)は、
Xb0=−2483+(4×480)=−563
Yb0=−3787+(6×480)=−907
となる。この最初セルの座標(Xb0,Yb0)を基に(式21)、(式22)により求められる各セルの原点の座標値を図8に示す。
【0028】
ここで、ブロック20を構成する各セル22のセル番号の付与方法について説明する。このセル番号の付与もWebサーバから送信されるHTMLに記述されているJavaScriptに基づき実行される。各セルのセル番号〔Sx,Sy〕は、該各セルに当てはめられる分割画像の座標[x,y]を、X軸方向についてはブロックを構成するX軸方向の総セル数、Y軸方向についてはブロックを構成するY軸方向の総セル数でそれぞれ割った余りの値として付与する。これによれば、各分割画像が当てはめられるセルのセル番号(各分割画像に割り当てられるセル番号)は、分割画像ごとに一意的に定まる。この実施例では、X軸方向、Y軸方向の総セル数はそれぞれ6であるから、セル番号は、X軸方向,Y軸方向ともに0,1,2,…,5の繰り返しとなる。この場合、各分割画像が当てはめられるセルのセル番号を図9に示す。図9の各分割画像位置に記述されている数値のうち、上段は各分割画像24の座標値を示し、下段は当てはめられるセルのセル番号を示す。セル番号が繰り返し使われても、ブロック内のセル数は6×6個だけであるから、ブロック内で同時に同じセル番号が重複して使用されることはない。このようにセル番号を繰り返し用いることにより、図4に示すように、HTMLに記述する、セルを設定するための<DIV>タグは6×6個だけ用意すれば足りることになる。
【0029】
以上のようにして、Webサーバから送信されるHTMLに記述されているJavaScriptに基づき、ブロック20を構成する6×6個のセル22に当てはめる各分割画像24の座標値と該各セル22のセル番号および該各セル22のブラウザ上における表示位置(各セルの原点位置を表示するピクセル座標位置)が求められたら、Webサーバに対し該当する分割画像24の送信を要求し(図3のステップS3)、Webサーバから該要求に応じた分割画像データが送られてきたら(同S4)、該当するセル番号に当てはめてブラウザに表示する(同S5)。これにより、Webブラウザ12の表示領域全体に、分割画像24がつなぎ目なく表示されて、新聞紙面の画像18が表示される。
【0030】
図10は、ブロック20を構成する各セル22に当てはめる各分割画像24の座標値と、該各セル22に付与するセル番号と、該各セル22のブラウザ上における表示位置(各セルの原点位置)の関係を求め、該当する分割画像をWebサーバに要求し、該要求に応じてWebサーバから送られてきた分割画像24を各セル22に当てはめるためのJavaScriptの関数(抜粋)を示す。このJavaScriptの関数は、画像の左上角の分割画像[0,0]を始点として、分割画像位置をY軸方向に走査してブロックに含まれる分割画像の有無を判断し、ブロックに含まれる分割画像があった場合は、該分割画像が当てはめられるセルに、該分割画像のX軸方向の座標値xを6で割った余りをX軸方向のセル番号sellXとして付与し、該分割画像のY軸方向の座標値yを6で割った余りをY軸方向のセル番号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 + ";'>"; 」により、該当する分割画像をWebサーバに要求し、該要求に応じてWebサーバから送られてきた分割画像を該当するセルに当てはめる。なお、上のJavaScriptの関数は、「canvas sellX sellY」(sellX=00〜05、sellY=00〜05)のIDを持つDIVタグ(図4参照)を、このセルに当てはめる分割画像の座標値「image x y」のIDを持つIMGタグに変換し、該IMGタグのソースとして「image.cgi」(Webサーバ側の画像データ検索および転送モジュール)からの分割画像データを埋め込むことを意味する。そのとき「a=xxx&b=xxx&c=xxx&d=xxx&e=xxx&f=xxx&g=xxx」は、Webサーバに保存されている画像を特定するためのパラメータ(新聞名、日付、朝/夕刊別、ページ番号、倍率等の情報)として、特定の画像ファイルを検索するための値となる。「STYLE='left:" +originX +";top:" + originY 」はこのセル(分割画像)の原点(左上の位置)を表示するブラウザの表示領域上の座標位置(ピクセル値)を示す。
【0031】
以上の処理をその列のY軸方向の最後の分割画像まで行ったら、その1つ右隣の列に移って同様に上端からブロックに含まれる分割画像の有無を判断し、ブロックに含まれる分割画像が当てはめられるセルに、X軸方向のセル番号sellXおよびY軸方向のセル番号sellYを付与する。そして、X軸方向の最後の列の最後の分割画像まで達したら、処理を終了する。
【0032】
スクロール制御
次に、以上のようにして初期表示がなされた後に、閲覧者のスクロール操作によりブラウザの表示画面上で画像を任意の位置に移動させる(つまり、閲覧位置を移動する)方法について説明する。図11は、スクロール操作による画像の移動動作を示す。図11では、画像18をX軸方向の右方向にXd(ピクセル値)、Y軸方向の下方向にYd(ピクセル値)移動させた場合(移動後の画像位置を符号18’で示す。)を示す。ブロック20は画像18と一体に移動するが、この移動によってブロック20はブラウザの表示領域16に対し相対移動し、何も手当をしなければ、ブロック20はいずれブラウザの表示領域16から外れてしまう。そこで、移動量に応じて画像18に対するブロック20の位置を変更し、これに伴い該ブロック20を構成する各セル22に対する分割画像の当てはめを更新する制御(ブロックの再設定)を併せて行う。このブロックの再設定により、ブロック20は常にブラウザの表示領域16全体を含む(ブラウザの表示領域16全体が常にブロック20内に含まれる)ように制御される。図11の例では、スクロール操作によりブロック20がブラウザの表示領域16に対し相対的に右方向に移動して、セルの境界線が1本ブラウザの原点を越えているので、ブロックの再設定により、右端の1列のセルが削除され、その分左端に1列のセルが追加されている。それらの間の5列のセルには変更はない。
【0033】
スクロール操作時の制御フローを図12に示す。図12の制御は、Webサーバから送信されるHTMLに記述されているJavaScriptによって行われる。スクロール操作時の制御は、画像を移動させる制御と、ブロックの再設定制御で構成される。はじめに、画像の移動制御について説明する。新聞紙面の画像が表示されている画面上の任意の位置にマウスカーソル(ポインタ)を当ててマウス左ボタンを押下し(マウスダウン操作)(図12のステップS11)、押下したままマウスカーソルを移動させると(ドラッグ操作)、マウスカーソルに追従して画像が移動する(同S12)。この場合、セル単位で移動量の演算をすると、演算処理に時間がかかり、移動動作が遅くなる。そこで、図4のHTMLのように、6×6個のセルを設定する<DIV>タグ全体を、名前がcanvas BLOCKである<DIV>タグで1つのブロックとして束ねて、該1つのブロックについて移動量を演算して該ブロックの移動後の原点を求め、該求められたブロックの原点の座標に基づき、該ブロックを構成する各セルの原点の座標を演算して求める。これによれば、ブロックの原点に対する各セルの原点の相対位置は予め定まっており、簡単な演算で求めることができ、一方複雑な演算を要する移動量の演算は1つのブロックについてのみ行えばよいので、セル単位で(セルごとに)移動量の演算をする場合に比べて全体として演算量が少なくて済み、移動動作を高速化することができる。
【0034】
図13は、ブロック(画像)の移動量(=マウスカーソルの移動量)を計算してブロックの原点の移動すべき座標を求めるためのJavaScriptの関数を示す。この関数によりブロックの原点の移動すべき座標が求められたら、この座標がブロックの最初セル〔Sxf,Syf〕の原点の座標になるので、他のセルについてもX軸方向およびY軸方向にそれぞれ480ずつ順次足していくことによりそれぞれの原点の座標を求める。このような演算をマウスカーソルが移動されている間中繰り返すことにより、マウスカーソルに追従して画像を移動させることができる。マウスカーソルを任意の位置に移動後、マウスボタンを離す(マウスアップ操作をする)と、画像はその位置で停止する。
【0035】
次に、ブロックの再設定制御について説明する。ドラッグ操作を終了して、マウスアップ操作をすると、移動後の画像上でブラウザの原点(0,0)が属するセル位置(分割画像位置)が判断され、ドラッグ前の位置に対して変化しているかどうか{つまり、ブラウザの原点(0,0)がセルの境界を超えたかどうか}が判断される(図12のステップS13)。そして、変化している場合(セルの境界を越えた場合)は、その変化した分(セルの境界を越えた本数分)ブロック位置を画像の移動と同じ方向に移動させるとともに、該ブロックを構成する各セルに対する分割画像の当てはめを更新することによりブロックの再設定を行う(同S14)。
【0036】
ブロックの再設定制御は次の演算により実現される。ドラッグ操作による画像の移動量を図11のようにX軸方向の右方向にXd、Y軸方向の下方向にYdとすると{画像の移動量Xd、Ydは、ドラッグ終了位置(マウスアップ操作位置)でのマウスカーソル座標値からドラッグ開始位置(マウスダウン操作位置)でのマウスカーソル座標値を引算することにより得られる。}、移動後の画像の原点の座標値(Xd0,Yd0)は、次式によって与えられる。
Xd0=Xf0+Xd:移動後の画像のX軸原点 …(式23)
Yd0=Yf0+Yd:移動後の画像のY軸原点 …(式24)
ただし、Xf0:前回のスクロール操作による画像の最終的なX軸原点。初回のスクロール操作であれば、Xf0=X0(初期表示時の画像のX軸原点)である。
Yf0:前回のスクロール操作による画像の最終的なY軸原点。初回のスクロール操作であれば、Yf0=Y0(初期表示時の画像のY軸原点)である。
【0037】
また、移動後にブラウザの表示領域に入る最初の分割画像{ブラウザの原点(0,0)が属する分割画像}の座標[xdf,ydf]は、次式によって与えられる。
xdf=−{(Xd0/480)の商の小数点以下を切り捨てた値} …(式25)
ydf=−{(Yd0/480)の商の小数点以下を切り捨てた値} …(式26)
したがって、ドラッグによってセルの境界がブラウザの原点(0,0)を越えた数Sxd,Sydは、次式によって与えられる。
Sxd=xf0−xdf …(式27)
Syd=yf0−ydf …(式28)
ただし、xf0:前回のブロックの再設定時のブラウザの表示領域に入る最初の分割画像のX軸座標
yf0:前回のブロックの再設定時のブラウザの表示領域に入る最初の分割画像のY軸座標
【0038】
(式27)によって求められるSxdが0であれば、セルの境界はブラウザの原点(0,0)をX軸方向に越えてないことがわかり、+の値であれば、その本数分のセルの境界がブラウザの原点(0,0)を右方向に越えたことがわかり、−の値であれば、その本数分のセルの境界がブラウザの原点(0,0)を左方向に越えたことがわかる。また、(式28)によって求められるSydが0であれば、セルの境界はブラウザの原点(0,0)をY軸方向に越えてないことがわかり、+の値であれば、その本数分のセルの境界がブラウザの原点(0,0)を下方向に越えたことがわかり、−の値であれば、その本数分のセルの境界がブラウザの原点(0,0)を上方向に越えたことがわかる。
【0039】
(式27)、(式28)の演算の結果、Sxd,Sydがいずれも0の場合は、ブラウザの原点(0,0)が属する分割画像の位置はドラッグの前後で変化がないことになるから、ブロックの再設定は行われない。これに対し、(式27)、(式28)の演算の結果、Sxd,Sydのうち少なくとも一方が0以外の場合は、ブラウザの原点(0,0)が属する分割画像の位置がドラッグの前後で変化したことになるから、ブロックの再設定が行われる。
【0040】
ブロックの再設定は、Sxd,Sydに相当するセル数分、ブロック全体を、画像に対し、画像の移動方向と逆方向に相対的に移動させることで実現される。このブロックの再設定によって、該ブロックを構成する各セルには次のように分割画像が当てはめられる。ブロックの左端に配置されるセル(X軸最初セル)Sxdfには、X軸方向の分割画像座標値がxdf−1の分割画像が当てはめられる。同様に、ブロックの上端に配置されるセル(Y軸最初セル)には、Y軸方向の分割画像座標値がydf−1の分割画像が当てはめられる。すなわち、
Sxdf=xdf−1 …(式29)
Sydf=ydf−1 …(式30)
とする。これによれば、再設定後のブロックの左上角に配置されるセル(最初セル)〔Sxdf,Sydf〕には、[xdf−1,ydf−1]の分割画像が当てはめられる。−1を付加するのは、(式13)、(式14)で−1を付加したのと同じ目的である。すなわち、ブロックをブラウザの表示領域に対して1セル分以上左方向および上方向にオフセットして配置することにより、画像を右下方向に移動させた際に、ブラウザの表示領域の左端部分および上端部分に空白部分を生じにくくする。
【0041】
ブロックを構成するその他のセルに当てはめる分割画像の座標は、最初セル〔Sxdf,Sydf〕に当てはめる分割画像の座標[xdf−1,ydf−1]に、X軸方向並びにY軸方向に1ずつ順次足していくことにより求められる。すなわち、最初セル〔Sxdf,Sydf〕を0番目のセルとして、X軸方向にm番目(m=0,1,…,5)、Y軸方向にn番目(n=0,1,…,5)のセル〔Sxdm,Sydn〕に当てはめられる分割画像座標値は、
Sxdm=Sxdf+m=xdf−1+m …(式31)
Sydn=Sydf+n=ydf−1+n …(式32)
で与えられる。したがって、ブロックの右下角に配置されるセル(最後セル)〔Sxdl,Sydl〕に当てはめる分割画像の座標は、
Sxdl=Sxdf+5=xf+4 …(式33)
Sydl=Sydf+5=yf+4 …(式34)
となる。
【0042】
以上のようにして、再設定されたブロックを構成する6×6個のセルに当てはめるべき分割画像が求められる。6×6個のセルに当てはめるべき分割画像が求められたら、新たにブロックの領域に入ってきた分割画像について、未取得の場合はWebサーバに要求し、Webサーバから既にダウンロードされてキャッシュメモリに保存されている分割画像についてはそれを読み出して、それぞれ該当するセルに当てはめて表示する(図6、図7、図9、図11等から明らかなように、セルに当てはめられてもブラウザの表示領域から外れている分割画像はその時点では表示されないが、スクロール操作によりブラウザの表示領域に入ってくれば表示できる状態になっている)。なお、図9に示したように、各分割画像が当てはめられるセルのセル番号(各分割画像に割り当てられるセル番号)は、分割画像ごとに一意的に定まっている。前回のブロックの再設定からブロック内にとどまっている(スクロール操作によってもブロック内から出なかった)分割画像については、セル番号の変更はない。
【0043】
以上のブロックの再設定制御による、ブロックを構成する各セルに対する分割画像の当てはめの変更の一例を図14に示す。図14の各セル位置に記述されている数値のうち、上段は分割画像座標値を示し、下段はセル番号を示す。この例は、スクロール操作による画像の移動によって、セルの境界がブラウザの原点(0,0)をX軸方向の右方向に1本だけ越えて、Y軸方向には1本も越えていない場合(図11に示すように画像が移動した場合)を示す。
【0044】
表示倍率変更制御
新聞を閲覧中に表示倍率を変更する場合の制御について説明する。この表示倍率変更制御は、マウスカーソル(ポインタ)位置を不動点として表示倍率が変更されるように(つまり、マウスカーソルが位置する紙面上の位置が倍率変更前と倍率変更後で変化しないように)制御している。図15はその制御フローを示す。図15の制御は、Webサーバから送信されるHTMLに記述されているJavaScriptによって行われる。新聞を閲覧中に、表示されている新聞紙面の画像上の任意の位置(表示倍率を変更して閲覧したい記事位置)にマウスカーソルを当てて(S21)、マウスを右クリック操作すると(S22)、その時のマウスカーソル(ポインタ)の座標値{ブラウザの原点(0,0)を原点とするピクセル値}が取得される(S23)。なお、画像の原点の座標値(Xd0,Yd0)は、初期値(X0,Y0)は(式5)、(式6)によって与えられ、その後はスクロール操作がされるごとに(式23)、(式24)によって更新されるので、表示倍率変更操作時の画像の原点の座標値(Xd0,Yd0)は、既に取得されている。
【0045】
前記マウスの右クリック操作により表示倍率を選択するためのポップアップメニューが表示される(S24)。閲覧者がポップアップメニューに表示された表示倍率の数値(長さ比)の中から任意の倍率を選択する操作をすると(S25)、前記右クリックした時のマウスカーソル位置を不動点として、選択した倍率で画像を表示するために必要な、該画像の原点位置を求めるための演算が実行される(S26)。その演算内容について図16を参照して説明する。図16の例は、表示倍率変更前に表示されていた画像1(18−1)を、表示倍率変更操作位置(右クリックした時のマウスカーソル位置。以下「処理中心」と言う。)を不動点として画像2(18−2)に拡大表示する場合について示したものである。
【0046】
図16において、各変数は次を意味する。
Xm:ブラウザの原点と処理中心とのX軸方向距離
Xm11:ブラウザの原点と画像1の原点とのX軸方向距離
Xm12:画像1の原点と処理中心とのX軸方向距離
Xm21:ブラウザの原点と画像2の原点とのX軸方向距離
Xm22:画像2の原点と処理中心とのX軸方向距離
Ym:ブラウザの原点と処理中心とのY軸方向距離
Ym11:ブラウザの原点と画像1の原点とのY軸方向距離
Ym12:画像1の原点と処理中心とのY軸方向距離
Ym21:ブラウザの原点と画像2の原点とのY軸方向距離
Ym22:画像2の原点と処理中心とのY軸方向距離
画像1の表示倍率に対する画像2の表示倍率の比をα(α>1)とすると、
Xm22=α・Xm12 …(式35)
Ym22=α・Ym12 …(式36)
が成り立つ。また、図16から
Xm12=Xm+Xm11 …(式37)
Ym12=Ym+Ym11 …(式38)
である。(式37)、(式38)を(式35)、(式36)に代入すると、
Xm22=α・Xm+α・Xm11 …(式39)
Ym22=α・Ym+α・Ym11 …(式40)
となる。
【0047】
図16から
Xm21=Xm22−Xm …(式41)
Ym21=Ym22−Ym …(式42)
である。(式39)、(式40)を(式41)、(式42)に代入すると、
Xm21=(α・Xm+α・Xm11)−Xm=(α−1)Xm+α・Xm11 …(式43)
Ym21=(α・Ym+α・Ym11)−Ym=(α−1)Ym+α・Ym11 …(式44)
となる。(式43)、(式44)で求められる座標値(Xm21,Ym21)(ピクセル値)が、倍率変更後の画像の原点位置である。
【0048】
図15のステップS26で、以上の演算により倍率変更後の画像の原点位置が求められたら、ブロックを構成する6×6個のセルに当てはめる分割画像を算出する(S27)。なお、1つのセルに当てはめる1つの分割画像を構成する画素数は、前述のように倍率の違いにかかわらず一定であり、例えば480×480ピクセルである。各セルに当てはめる分割画像は、前記(式11)〜(式16)に基づいて算出することができる。すなわち、(式11)、(式12)からブラウザの表示領域に入る最初の分割画像{ブラウザの原点(0,0)が属する分割画像}の座標[xf,yf]を求める(ただし、(式11)、(式12)は、画像の原点の初期値X0 、Y0に代えて、(式43)、(式44)で求められた倍率変更後の画像の原点位置Xm21、Ym21を用いる。)。
【0049】
ブラウザの表示領域に入る最初の分割画像の座標[xf,yf]が求まったら、前記(式13)、(式14)により、ブロックの左端に配置されるセルSxf(X軸最初セル)に当てはめる分割画像座標値としてxf−1を求める。同様に、ブロックの上端に配置されるセルSyf(Y軸最初セル)に当てはめる分割画像座標値としてyf−1を求める。さらに、最初セル〔Sxf,Syf〕を0番目のセルとして、前記(式15)、(式16)により、X軸方向にm番目(m=0,1,…,5)、Y軸方向にn番目(n=0,1,…,5)のセル〔Sxm,Syn〕に当てはめられる分割画像座標値として、[xf−1+m、yf−1+n]をそれぞれ求める。
【0050】
図15のステップS27で、以上の演算により、ブロックを構成する6×6個のセルに当てはめる分割画像が算出されたら、前記(式19)〜(式22)により、ブロックを構成する6×6個のセルのブラウザ上における表示位置を求める(ただし、画像の原点の初期値X0 、Y0に代えて、倍率変更後の画像の原点位置Xm21、Ym21を用いる。)(S28)。すなわち、(式19)、(式20)によりブロックの原点の座標を求め、さらに、(式21)、(式22)により各セルの原点の座標を求める。
【0051】
以上のようにして、倍率変更後の6×6個のセルに当てはめるべき分割画像およびその表示位置が求められたら、未取得の分割画像についてはWebサーバに要求し(S29)、Webサーバから既にダウンロードされてキャッシュメモリに保存されている分割画像についてはそれを読み出して、それぞれ該当するセルに当てはめて表示する(S30)(図6、図7、図9、図11等から明らかなように、セルに当てはめられてもブラウザの表示領域から外れている分割画像はその時点では表示されないが、スクロール操作によりブラウザの表示領域に入ってくれば表示できる状態になっている)。
【0052】
以上のようにして、処理中心を不動点として表示倍率が変更される。なお、以上は画像を拡大表示する場合について説明したが、縮小表示する場合も、表示倍率の比αがα<1に変わるだけで、処理内容は拡大表示する場合と同じである。
【0053】
ページめくり制御
新聞紙面を閲覧している際に、ブラウザ画面上のツールバー等で所定のページめくり操作をすると、Webブラウザは、HTMLに記述されているJavaScriptに基づき、指示されたページについて、所定倍率(紙面の記事全体が見渡せるように比較的低い倍率)の分割画像をWebサーバに要求し(Webサーバから既にダウンロードされてキャッシュメモリに保存されている分割画像についてはそれを読み出して用いる。)、前記閲覧開始当初の初期画面と同様に、ブラウザの表示領域の中心と画像の中心を一致させた状態に該画像を初期表示する。該初期表示後のスクロール制御、倍率変更制御は前述と同じに実行される。
【0054】
なお、以上説明した実施の形態では、画像を縦横両方向に分割したが、縦横一方向にのみ分割することもできる。また、セル(枠要素)を縦横両方向に配列したが、縦横一方向のみに配列することもできる。また、分割画像およびセルを正方形としたが、長方形とすることもできる。分割画像およびセルを矩形以外の形状に分割することもできる。また、ブロックを構成するセル数を縦横同一としたが、縦横非同一とすることもできる。また、ブロックをブラウザの表示領域に対して予め1セル分左方向および上方向にオフセットさせが、オフセット量は2セル以上にすることもできる。また、分割画像をサーバに予め用意してビューアからの要求を待って送信するようにしたが、ビューアからの要求を待って分割画像を生成して送信することもできる。また、初期表示した後、スクロール操作を待ってその周囲の分割画像をダウンロードするようにしたが、初期表示した後、スクロール操作を待たずにその周囲の分割画像を順次ダウンロードすることもできる。また、新聞を閲覧する場合について説明したが、その他の画像(例えば漫画)を閲覧する場合にもこの発明を適用できる。また、Webブラウザを使用して閲覧する場合について説明したが、プラグインソフトウェアを使用して閲覧する場合にも、この発明を適用できる。
【0055】
この出願には特許請求の範囲の請求項1,2に従属して記載できる発明として次の発明が記載されている。
《請求項3》
前記枠要素の配列が、ビューアの表示領域に少なくとも一部が入る分割画像を個々に当てはめる枠要素のほか、該分割画像の領域の周囲に隣接する分割画像を個々に当てはめる枠要素を具える請求項2記載の画像表示方法。
《請求項4》
前記分割画像が、前記画像を横方向もしくは縦方向の一方向にまたは横方向および縦方向の両方向に格子状に分割した画像である請求項2または3記載の画像表示方法。
《請求項5》
前記格子が、前記画像の左端位置を始点として所定ピクセル数ごとに横方向に分割して形成されたもの、もしくは、該画像の上端位置を始点として所定ピクセル数ごとに縦方向に分割して形成されたもの、または、該画像の左端位置を始点として所定ピクセル数ごとに横方向に分割しかつ該画像の上端位置を始点として所定ピクセル数ごとに縦方向に分割して形成されたものである請求項4記載の画像表示方法。
《請求項6》
前記各枠要素に固有の識別情報が付与され、
前記「画像の相対移動に伴いビューアの表示領域から離れる分割画像に該当する位置から枠要素を削除し、ビューアの表示領域に近づく分割画像に該当する位置に枠要素を追加」し、かつ「該追加する枠要素に、該当する位置の分割画像を当てはめ」る処理が、
前記削除する枠要素を前記追加する枠要素として使用し、かつ該枠要素に当てはめる分割画像を、前記削除する枠要素に当てはめられている分割画像から前記追加する枠要素に該当する位置の分割画像に変更することにより行われる請求項2から5のいずれか1つに記載の画像表示方法。
《請求項7》
ビューアは前記固有の識別情報に、ビューアの表示領域における該枠要素の表示位置の情報と、該枠要素に当てはめる分割画像の識別情報を関連づけて保持し、ビューアは該情報に基づき、各枠要素に当てはめる分割画像を、ビューアの表示領域の所定位置に表示する請求項6記載の画像表示方法。
《請求項8》
前記分割画像の識別情報が、画像全体におけるその番地に相当する情報をもって該画像全体における識別情報としてなる請求項7記載の画像表示方法。
《請求項9》
前記複数の枠要素全体でブロックを構成し、画像の相対移動が指示された時に、ビューアは、該ビューアの表示領域の原点に対する該ブロックの原点の移動すべき座標を演算し、該演算により求められたブロックの原点の座標に基づき、前記各枠要素の原点の移動すべき座標をそれぞれ演算し、該演算により求められた座標に各枠要素の原点をそれぞれ移動することにより、前記画像の相対移動を実現する請求項2から8のいずれか1つに記載の画像表示方法。
《請求項10》
前記分割画像が前記画像を横方向に格子状に分割した画像でありかつ前記枠要素が横方向に複数の連続した分割画像を当てはめるものであり、もしくは、前記分割画像が前記画像を縦方向に格子状に分割した画像でありかつ前記枠要素が縦方向に複数の連続した分割画像を当てはめるものであり、または、前記分割画像が前記画像を横方向および縦方向に格子状に分割した画像でありかつ前記枠要素が横方向に複数の連続した分割画像もしくは縦方向に複数の連続した分割画像または横方向に複数で縦方向に複数の連続した分割画像を当てはめるものである請求項2から9のいずれか1つに記載の画像表示方法。
《請求項11》
前記ビューアがWebブラウザであり、該Webブラウザでの各演算がJavaScript(登録商標)に基づき実行される請求項1から10のいずれか1つに記載の画像表示方法。
《請求項12》
前記枠要素が<DIV>タグを使用して設定されている請求項11記載の画像表示方法。
【符号の説明】
【0056】
10…Webサーバ(サーバコンピュータ)、12…Webブラウザ(クライアントコンピュータ、ビューア)、14…通信ネットワーク、16…ブラウザの表示領域(ビューアの表示領域)、18,18−1,18−2…画像、20…ブロック、22…セル(枠要素)、24…分割画像
【特許請求の範囲】
【請求項1】
ビューアの画像を表示する表示領域よりも大きい画像を分割し該ビューアの表示領域に少なくとも一部が入る分割画像を該ビューアの表示領域に表示する画像表示方法において、
分割画像を個々に当てはめて表示する表示領域に相当する複数の枠要素の配列をビューアに設定し、該各枠要素に、該当する位置の分割画像をそれぞれ当てはめて表示しまたは表示できる状態にする画像表示方法。
【請求項2】
ビューアの画像を表示する表示領域よりも大きい画像を分割し該ビューアの表示領域に少なくとも一部が入る分割画像を該ビューアの表示領域に表示する画像表示方法において、
ビューアの表示領域に少なくとも一部が入る分割画像を含む、ビューアの表示領域に対し所定の位置関係にある、画像全体に対して限定された範囲の画像領域に含まれる分割画像を、個々に当てはめて表示する表示領域に相当する複数の枠要素の配列をビューアに設定し、該各枠要素に、該当する位置の分割画像をそれぞれ当てはめて表示しまたは表示できる状態にし、かつ、ビューアの表示領域に対する画像の相対移動が指示された時に、ビューアの表示領域に対する枠要素の移動すべき位置を演算して該位置に枠要素を移動し、該画像の相対移動に伴いビューアの表示領域から離れる分割画像に該当する位置から枠要素を削除し、ビューアの表示領域に近づく分割画像に該当する位置に枠要素を追加して画像に対する枠要素の配列の位置を変更し、該追加する枠要素に、該当する位置の分割画像を当てはめて表示しまたは表示できる状態にする画像表示方法。
【請求項3】
請求項1または2に記載の画像表示方法を処理装置に実行させることを特徴とする画像表示用プログラム。
【請求項4】
ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法であって、該ビューアがWebブラウザであり、かつサーバから該画像を複数の領域に分割した画像ごとに送信可能にし、該画像とWebブラウザの表示領域との相対位置に応じてWebブラウザの表示領域に少なくとも一部が入る分割画像を判断し、サーバから該当する分割画像を優先的に送信し、Webブラウザに表示する画像表示方法。
【請求項1】
ビューアの画像を表示する表示領域よりも大きい画像を分割し該ビューアの表示領域に少なくとも一部が入る分割画像を該ビューアの表示領域に表示する画像表示方法において、
分割画像を個々に当てはめて表示する表示領域に相当する複数の枠要素の配列をビューアに設定し、該各枠要素に、該当する位置の分割画像をそれぞれ当てはめて表示しまたは表示できる状態にする画像表示方法。
【請求項2】
ビューアの画像を表示する表示領域よりも大きい画像を分割し該ビューアの表示領域に少なくとも一部が入る分割画像を該ビューアの表示領域に表示する画像表示方法において、
ビューアの表示領域に少なくとも一部が入る分割画像を含む、ビューアの表示領域に対し所定の位置関係にある、画像全体に対して限定された範囲の画像領域に含まれる分割画像を、個々に当てはめて表示する表示領域に相当する複数の枠要素の配列をビューアに設定し、該各枠要素に、該当する位置の分割画像をそれぞれ当てはめて表示しまたは表示できる状態にし、かつ、ビューアの表示領域に対する画像の相対移動が指示された時に、ビューアの表示領域に対する枠要素の移動すべき位置を演算して該位置に枠要素を移動し、該画像の相対移動に伴いビューアの表示領域から離れる分割画像に該当する位置から枠要素を削除し、ビューアの表示領域に近づく分割画像に該当する位置に枠要素を追加して画像に対する枠要素の配列の位置を変更し、該追加する枠要素に、該当する位置の分割画像を当てはめて表示しまたは表示できる状態にする画像表示方法。
【請求項3】
請求項1または2に記載の画像表示方法を処理装置に実行させることを特徴とする画像表示用プログラム。
【請求項4】
ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法であって、該ビューアがWebブラウザであり、かつサーバから該画像を複数の領域に分割した画像ごとに送信可能にし、該画像とWebブラウザの表示領域との相対位置に応じてWebブラウザの表示領域に少なくとも一部が入る分割画像を判断し、サーバから該当する分割画像を優先的に送信し、Webブラウザに表示する画像表示方法。
【図1】
【図2】
【図3】
【図4】
【図5】
【図6】
【図7】
【図8】
【図9】
【図10】
【図11】
【図12】
【図13】
【図14】
【図15】
【図16】
【図2】
【図3】
【図4】
【図5】
【図6】
【図7】
【図8】
【図9】
【図10】
【図11】
【図12】
【図13】
【図14】
【図15】
【図16】
【公開番号】特開2011−158911(P2011−158911A)
【公開日】平成23年8月18日(2011.8.18)
【国際特許分類】
【出願番号】特願2011−49096(P2011−49096)
【出願日】平成23年3月7日(2011.3.7)
【分割の表示】特願2007−293603(P2007−293603)の分割
【原出願日】平成15年4月17日(2003.4.17)
【出願人】(594164379)株式会社サピエンス (5)
【Fターム(参考)】
【公開日】平成23年8月18日(2011.8.18)
【国際特許分類】
【出願日】平成23年3月7日(2011.3.7)
【分割の表示】特願2007−293603(P2007−293603)の分割
【原出願日】平成15年4月17日(2003.4.17)
【出願人】(594164379)株式会社サピエンス (5)
【Fターム(参考)】
[ Back to top ]