JP4059802B2 - 画像表示方法 - Google Patents
画像表示方法 Download PDFInfo
- Publication number
- JP4059802B2 JP4059802B2 JP2003112998A JP2003112998A JP4059802B2 JP 4059802 B2 JP4059802 B2 JP 4059802B2 JP 2003112998 A JP2003112998 A JP 2003112998A JP 2003112998 A JP2003112998 A JP 2003112998A JP 4059802 B2 JP4059802 B2 JP 4059802B2
- Authority
- JP
- Japan
- Prior art keywords
- image
- divided
- web browser
- display area
- server
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Expired - Lifetime
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Controls And Circuits For Display Device (AREA)
- Information Transfer Between Computers (AREA)
- Digital Computer Display Output (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- Facsimiles In General (AREA)
- Editing Of Facsimile Originals (AREA)
Description
【０００１】
【発明の属する技術分野】
この発明は、ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法に関する。
【０００２】
【従来の技術】
インターネット技術の発展により、世界中からあらゆる情報をブラウザで閲覧することができるようになった。画像情報も同様にブラウザで閲覧できる。これは、Ｗｅｂサーバ上に、ＪＰＥＧファイル等の画像ファイルを表示することを記述したＨＴＭＬファイルを保存しておくことにより実現される。インターネット技術を利用した新聞紙面画像の配信および閲覧も実用化されている。インターネット技術を利用した新聞紙面画像の配信・閲覧技術としては、例えば下記特許文献１に記載のものがある。
【０００３】
【特許文献１】
特開２００２−２３６７０１号公報
【０００４】
【発明が解決しようとする課題】
インターネット技術を利用して新聞紙面等の横縦のサイズ（画素数）の大きい画像をダウンロードしてブラウザに表示するのに、従来は長い待ち時間を要していた。
【０００５】
また、インターネット技術を利用した新聞紙面画像の配信・閲覧は、従来は、ブラウザから起動される専用のソフトウェア（プラグインソフトウェア、専用ビューア）を別途入手して実現していた。よく知られているVeriSign（登録商標）などの認証機関によって確認されるソフトウェアさえも、製作した会社を証明するものであって、ソフトウェア自体を保証するものではないことからソフトウェアの使用はユーザの責任になる。実際、ブラウザには新しい技術が続々と追加されるので、一般ユーザがブラウザの動きを理解し、自己責任でソフトウェアを選別して使用することは非常に難しい。このことから、一般ユーザはプラグインソフトウェアの使用に不安を感じることが多く、セキュリティやウィルス、ハードディスクの破損などの問題からプラグインソフトウェアの使用を拒否するユーザも少なくない。
【０００６】
この発明は、上述の点に鑑みてなされたもので、横縦のサイズ（画素数）が大きい画像をダウンロードして、少ない待ち時間でビューアに表示できるようにした画像表示方法を提供しようとするものである。また、この発明は、併せて、プラグインソフトウェアなしで、該画像表示方法を実現する方法を提供しようとするものである。
【０００７】
【課題を解決するための手段】
この発明の画像表示方法は、Ｗｅｂブラウザの画像を表示する表示領域よりも大きい画像を分割し該Ｗｅｂブラウザの表示領域に少なくとも一部が入る分割画像をサーバから優先的にダウンロードして該Ｗｅｂブラウザの表示領域に表示する画像表示方法において、Ｗｅｂブラウザの表示領域に少なくとも一部が入る分割画像を含む、Ｗｅｂブラウザの表示領域に対し所定の位置関係にある、画像全体に対して限定された範囲の画像領域に含まれる分割画像を、個々に当てはめて表示する表示領域に相当する複数の枠要素の配列をＷｅｂブラウザに設定し、該各枠要素に、該当する位置の分割画像をそれぞれ当てはめて表示しまたは表示できる状態にし、かつ、Ｗｅｂブラウザの表示領域に対する画像の相対移動が指示された時に、Ｗｅｂブラウザの表示領域に対する枠要素の移動すべき位置を演算して該位置に枠要素を移動し、該画像の相対移動に伴いＷｅｂブラウザの表示領域から離れる分割画像に該当する位置から枠要素を削除し、Ｗｅｂブラウザの表示領域に近づく分割画像に該当する位置に枠要素を追加して画像に対する枠要素の配列の位置を変更し、該追加する枠要素に、該当する位置の分割画像を当てはめて表示しまたは表示できる状態にするものである。
【００１２】
この発明の画像表示方法によれば、Ｗｅｂブラウザの画像を表示する表示領域よりも大きい画像を分割し該Ｗｅｂブラウザの表示領域に少なくとも一部が入る分割画像をサーバから優先的にダウンロードして該Ｗｅｂブラウザの表示領域に表示するようにしたので、少ない待ち時間でビューアに表示することができる。また、この発明によればＷｅｂブラウザの表示領域に少なくとも一部が入る分割画像を含む、Ｗｅｂブラウザの表示領域に対し所定の位置関係にある、画像全体に対して限定された範囲の画像領域に含まれる分割画像を、個々に当てはめて表示する表示領域に相当する複数の枠要素の配列をＷｅｂブラウザに設定し、該各枠要素に、該当する位置の分割画像をそれぞれ当てはめて表示しまたは表示できる状態にし、かつ、Ｗｅｂブラウザの表示領域に対する画像の相対移動が指示された時に、Ｗｅｂブラウザの表示領域に対する枠要素の移動すべき位置を演算して該位置に枠要素を移動し、該画像の相対移動に伴いＷｅｂブラウザの表示領域から離れる分割画像に該当する位置から枠要素を削除し、Ｗｅｂブラウザの表示領域に近づく分割画像に該当する位置に枠要素を追加して画像に対する枠要素の配列の位置を変更し、該追加する枠要素に、該当する位置の分割画像を当てはめて表示しまたは表示できる状態にしたので、画像の移動が指示されたときに、全分割画像数に比べて限られた数の枠要素を移動するように演算をすればよいので、画像全体（つまり全分割画像）を移動する場合に比べて演算量を減らすことができ、これにより画像の移動速度を速くする（つまり追従性をよくする）ことができる。
【００２０】
【発明の実施の形態】
この発明の実施の形態を以下説明する。この実施の形態では、プラグインソフトウェアなしで、新聞紙面画像を配信・閲覧する場合について説明する。図１にシステム構成を示す。Ｗｅｂサーバ（サーバコンピュータ）１０とＷｅｂブラウザ（クライアントコンピュータ、ビューア）１２とは、インターネット等の通信ネットワーク１４を介して接続されている。Ｗｅｂサーバ１０には、新聞紙面の画像データベースが予め格納されて用意されている。この画像データベースは、新聞１ページ全体を１つの画像とするもので、新聞を構成する各ページの画像を様々な倍率｛長さ比で例えば、２５％，３３％，５０％，６７％（以上、実際の新聞紙面の縮小画像），１００％（実際の新聞紙面と等倍画像），１３３％，２００％，４００％（以上、実際の新聞紙面の拡大画像）｝で（すなわち、同一ページの画像を複数の倍率で）保存している。各分割画像のファイル形式は同一である必要はなく、例えば分割画像ごとの特徴（写真か文字か、カラーか白黒か等）に応じて圧縮率が高いファイル形式（ＪＰＥＧ形式、ＰＮＧ形式、ＧＩＦ形式等）で保存する。したがって、新聞１ページの画像は、異なるファイル形式の分割画像が混在して構成される場合がある。このように、分割画像ごとに圧縮率が高いファイル形式を用いることにより送信時間を短縮できる。
【００２１】
１つの倍率の１ページの画像は、図２に示すように、左上位置（画像の原点位置）から横方向（Ｘ軸方向）および縦方向（Ｙ軸方向）にそれぞれ所定画素数ごとに格子状に分割されて、複数の矩形の分割画像の集合で構成されている。１つの分割画像を構成する画素数は、倍率の違いにかかわらず一定であり、例えば４８０×４８０ピクセルである（ただし、１ページ横方向全体の画素数が１つの分割画像について定められた横方向の画素数で割り切れない場合は、右端位置の分割画像の画素数は端数となる。同様に、１ページ縦方向全体の画素数が１つの分割画像について定められた縦方向の画素数で割り切れない場合は、下端位置の分割画像の画素数は端数となる。）。これに対し、１ページ分の紙面を構成する画素数は、倍率に応じて変化する｛倍率（＝長さ比）の二乗に比例する｝ので、１ページ分の紙面を構成する分割画像数は、倍率が低い画像ほど少なく、倍率が高い画像ほど多くなる。各分割画像には、１ページの画像における各分割画像の位置（番地）を示す座標値（分割画像座標値）として、図２に示すように、横方向の座標をｘ、縦方向の座標をｙとし、左上角の分割画像位置を原点［０，０］とし、右に行くに従い、また下に行くに従い１ずつ増加する分割画像座標値［ｘ，ｙ］に相当するファイル名がそれぞれ付与されて保存されている。１ページの画像における右端の分割画像の横方向の座標値をｘｌ、下端の分割画像の縦方向の座標値をｙｌとすると、右下角の最後の分割画像の座標値は［ｘｌ，ｙｌ］となる。特定の新聞の、特定のページの、特定の倍率の、特定の分割画像は、新聞名、日付、朝／夕刊別、ページ番号、倍率、分割画像座標値［ｘ，ｙ］の各情報を組み合わせた識別情報で特定（指定）される。新聞紙面を閲覧する場合は、Ｗｅｂブラウザ１２から、閲覧者により指示される閲覧位置に応じた該識別情報が送信され、Ｗｅｂサーバ１０は該識別情報を解析して、該当する分割画像を送信し、Ｗｅｂブラウザ１２は該分割画像を受け取って、元の画像の並びに配列して表示する。上記のような識別情報を用いれば、Ｗｅｂサーバ１０から最初にＷｅｂブラウザ１２に送信するＨＴＭＬ（後述する図３のステップＳ２）に、分割画像ごとのファイル名｛ファイル形式を指定する識別子(.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の関数（抜粋）を示す図である。
【図１１】 スクロール操作による画像の移動動作の一例を示す図である。
【図１２】 スクロール操作時の制御内容を示すフローチャートである。
【図１３】 ブロックの移動量を計算してブロックの原点の移動すべき座標を求めるためのJavaScriptの関数を示す図である。
【図１４】 ブロックの再設定制御による、ブロックを構成する各セルに対する分割画像の当てはめの変更の一例を示す
【図１５】 表示倍率変更制御の制御内容を示すフローチャートである。
【図１６】 図１５のステップＳ２６で実行する演算の内容を説明するための図である。
【符号の説明】
１０…Ｗｅｂサーバ（サーバコンピュータ）、１２…Ｗｅｂブラウザ（クライアントコンピュータ、ビューア）、１４…通信ネットワーク、１６…ブラウザの表示領域（ビューアの表示領域）、１８，１８−１，１８−２…画像、２０…ブロック、２２…セル（枠要素）、２４…分割画像
【発明の属する技術分野】
この発明は、ビューアの表示領域よりも大きい画像をサーバからダウンロードしてビューアに表示する方法に関する。
【０００２】
【従来の技術】
インターネット技術の発展により、世界中からあらゆる情報をブラウザで閲覧することができるようになった。画像情報も同様にブラウザで閲覧できる。これは、Ｗｅｂサーバ上に、ＪＰＥＧファイル等の画像ファイルを表示することを記述したＨＴＭＬファイルを保存しておくことにより実現される。インターネット技術を利用した新聞紙面画像の配信および閲覧も実用化されている。インターネット技術を利用した新聞紙面画像の配信・閲覧技術としては、例えば下記特許文献１に記載のものがある。
【０００３】
【特許文献１】
特開２００２−２３６７０１号公報
【０００４】
【発明が解決しようとする課題】
インターネット技術を利用して新聞紙面等の横縦のサイズ（画素数）の大きい画像をダウンロードしてブラウザに表示するのに、従来は長い待ち時間を要していた。
【０００５】
また、インターネット技術を利用した新聞紙面画像の配信・閲覧は、従来は、ブラウザから起動される専用のソフトウェア（プラグインソフトウェア、専用ビューア）を別途入手して実現していた。よく知られているVeriSign（登録商標）などの認証機関によって確認されるソフトウェアさえも、製作した会社を証明するものであって、ソフトウェア自体を保証するものではないことからソフトウェアの使用はユーザの責任になる。実際、ブラウザには新しい技術が続々と追加されるので、一般ユーザがブラウザの動きを理解し、自己責任でソフトウェアを選別して使用することは非常に難しい。このことから、一般ユーザはプラグインソフトウェアの使用に不安を感じることが多く、セキュリティやウィルス、ハードディスクの破損などの問題からプラグインソフトウェアの使用を拒否するユーザも少なくない。
【０００６】
この発明は、上述の点に鑑みてなされたもので、横縦のサイズ（画素数）が大きい画像をダウンロードして、少ない待ち時間でビューアに表示できるようにした画像表示方法を提供しようとするものである。また、この発明は、併せて、プラグインソフトウェアなしで、該画像表示方法を実現する方法を提供しようとするものである。
【０００７】
【課題を解決するための手段】
この発明の画像表示方法は、Ｗｅｂブラウザの画像を表示する表示領域よりも大きい画像を分割し該Ｗｅｂブラウザの表示領域に少なくとも一部が入る分割画像をサーバから優先的にダウンロードして該Ｗｅｂブラウザの表示領域に表示する画像表示方法において、Ｗｅｂブラウザの表示領域に少なくとも一部が入る分割画像を含む、Ｗｅｂブラウザの表示領域に対し所定の位置関係にある、画像全体に対して限定された範囲の画像領域に含まれる分割画像を、個々に当てはめて表示する表示領域に相当する複数の枠要素の配列をＷｅｂブラウザに設定し、該各枠要素に、該当する位置の分割画像をそれぞれ当てはめて表示しまたは表示できる状態にし、かつ、Ｗｅｂブラウザの表示領域に対する画像の相対移動が指示された時に、Ｗｅｂブラウザの表示領域に対する枠要素の移動すべき位置を演算して該位置に枠要素を移動し、該画像の相対移動に伴いＷｅｂブラウザの表示領域から離れる分割画像に該当する位置から枠要素を削除し、Ｗｅｂブラウザの表示領域に近づく分割画像に該当する位置に枠要素を追加して画像に対する枠要素の配列の位置を変更し、該追加する枠要素に、該当する位置の分割画像を当てはめて表示しまたは表示できる状態にするものである。
【００１２】
この発明の画像表示方法によれば、Ｗｅｂブラウザの画像を表示する表示領域よりも大きい画像を分割し該Ｗｅｂブラウザの表示領域に少なくとも一部が入る分割画像をサーバから優先的にダウンロードして該Ｗｅｂブラウザの表示領域に表示するようにしたので、少ない待ち時間でビューアに表示することができる。また、この発明によればＷｅｂブラウザの表示領域に少なくとも一部が入る分割画像を含む、Ｗｅｂブラウザの表示領域に対し所定の位置関係にある、画像全体に対して限定された範囲の画像領域に含まれる分割画像を、個々に当てはめて表示する表示領域に相当する複数の枠要素の配列をＷｅｂブラウザに設定し、該各枠要素に、該当する位置の分割画像をそれぞれ当てはめて表示しまたは表示できる状態にし、かつ、Ｗｅｂブラウザの表示領域に対する画像の相対移動が指示された時に、Ｗｅｂブラウザの表示領域に対する枠要素の移動すべき位置を演算して該位置に枠要素を移動し、該画像の相対移動に伴いＷｅｂブラウザの表示領域から離れる分割画像に該当する位置から枠要素を削除し、Ｗｅｂブラウザの表示領域に近づく分割画像に該当する位置に枠要素を追加して画像に対する枠要素の配列の位置を変更し、該追加する枠要素に、該当する位置の分割画像を当てはめて表示しまたは表示できる状態にしたので、画像の移動が指示されたときに、全分割画像数に比べて限られた数の枠要素を移動するように演算をすればよいので、画像全体（つまり全分割画像）を移動する場合に比べて演算量を減らすことができ、これにより画像の移動速度を速くする（つまり追従性をよくする）ことができる。
【００２０】
【発明の実施の形態】
この発明の実施の形態を以下説明する。この実施の形態では、プラグインソフトウェアなしで、新聞紙面画像を配信・閲覧する場合について説明する。図１にシステム構成を示す。Ｗｅｂサーバ（サーバコンピュータ）１０とＷｅｂブラウザ（クライアントコンピュータ、ビューア）１２とは、インターネット等の通信ネットワーク１４を介して接続されている。Ｗｅｂサーバ１０には、新聞紙面の画像データベースが予め格納されて用意されている。この画像データベースは、新聞１ページ全体を１つの画像とするもので、新聞を構成する各ページの画像を様々な倍率｛長さ比で例えば、２５％，３３％，５０％，６７％（以上、実際の新聞紙面の縮小画像），１００％（実際の新聞紙面と等倍画像），１３３％，２００％，４００％（以上、実際の新聞紙面の拡大画像）｝で（すなわち、同一ページの画像を複数の倍率で）保存している。各分割画像のファイル形式は同一である必要はなく、例えば分割画像ごとの特徴（写真か文字か、カラーか白黒か等）に応じて圧縮率が高いファイル形式（ＪＰＥＧ形式、ＰＮＧ形式、ＧＩＦ形式等）で保存する。したがって、新聞１ページの画像は、異なるファイル形式の分割画像が混在して構成される場合がある。このように、分割画像ごとに圧縮率が高いファイル形式を用いることにより送信時間を短縮できる。
【００２１】
１つの倍率の１ページの画像は、図２に示すように、左上位置（画像の原点位置）から横方向（Ｘ軸方向）および縦方向（Ｙ軸方向）にそれぞれ所定画素数ごとに格子状に分割されて、複数の矩形の分割画像の集合で構成されている。１つの分割画像を構成する画素数は、倍率の違いにかかわらず一定であり、例えば４８０×４８０ピクセルである（ただし、１ページ横方向全体の画素数が１つの分割画像について定められた横方向の画素数で割り切れない場合は、右端位置の分割画像の画素数は端数となる。同様に、１ページ縦方向全体の画素数が１つの分割画像について定められた縦方向の画素数で割り切れない場合は、下端位置の分割画像の画素数は端数となる。）。これに対し、１ページ分の紙面を構成する画素数は、倍率に応じて変化する｛倍率（＝長さ比）の二乗に比例する｝ので、１ページ分の紙面を構成する分割画像数は、倍率が低い画像ほど少なく、倍率が高い画像ほど多くなる。各分割画像には、１ページの画像における各分割画像の位置（番地）を示す座標値（分割画像座標値）として、図２に示すように、横方向の座標をｘ、縦方向の座標をｙとし、左上角の分割画像位置を原点［０，０］とし、右に行くに従い、また下に行くに従い１ずつ増加する分割画像座標値［ｘ，ｙ］に相当するファイル名がそれぞれ付与されて保存されている。１ページの画像における右端の分割画像の横方向の座標値をｘｌ、下端の分割画像の縦方向の座標値をｙｌとすると、右下角の最後の分割画像の座標値は［ｘｌ，ｙｌ］となる。特定の新聞の、特定のページの、特定の倍率の、特定の分割画像は、新聞名、日付、朝／夕刊別、ページ番号、倍率、分割画像座標値［ｘ，ｙ］の各情報を組み合わせた識別情報で特定（指定）される。新聞紙面を閲覧する場合は、Ｗｅｂブラウザ１２から、閲覧者により指示される閲覧位置に応じた該識別情報が送信され、Ｗｅｂサーバ１０は該識別情報を解析して、該当する分割画像を送信し、Ｗｅｂブラウザ１２は該分割画像を受け取って、元の画像の並びに配列して表示する。上記のような識別情報を用いれば、Ｗｅｂサーバ１０から最初にＷｅｂブラウザ１２に送信するＨＴＭＬ（後述する図３のステップＳ２）に、分割画像ごとのファイル名｛ファイル形式を指定する識別子(.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の関数（抜粋）を示す図である。
【図１１】 スクロール操作による画像の移動動作の一例を示す図である。
【図１２】 スクロール操作時の制御内容を示すフローチャートである。
【図１３】 ブロックの移動量を計算してブロックの原点の移動すべき座標を求めるためのJavaScriptの関数を示す図である。
【図１４】 ブロックの再設定制御による、ブロックを構成する各セルに対する分割画像の当てはめの変更の一例を示す
【図１５】 表示倍率変更制御の制御内容を示すフローチャートである。
【図１６】 図１５のステップＳ２６で実行する演算の内容を説明するための図である。
【符号の説明】
１０…Ｗｅｂサーバ（サーバコンピュータ）、１２…Ｗｅｂブラウザ（クライアントコンピュータ、ビューア）、１４…通信ネットワーク、１６…ブラウザの表示領域（ビューアの表示領域）、１８，１８−１，１８−２…画像、２０…ブロック、２２…セル（枠要素）、２４…分割画像
Claims (24)
- Ｗｅｂブラウザの画像を表示する表示領域よりも大きい画像を分割し該Ｗｅｂブラウザの表示領域に少なくとも一部が入る分割画像をサーバから優先的にダウンロードして該Ｗｅｂブラウザの表示領域に表示する画像表示方法において、
Ｗｅｂブラウザの表示領域に少なくとも一部が入る分割画像を含む、Ｗｅｂブラウザの表示領域に対し所定の位置関係にある、画像全体に対して限定された範囲の画像領域に含まれる分割画像を、個々に当てはめて表示する表示領域に相当する複数の枠要素の配列をＷｅｂブラウザに設定し、該各枠要素に、該当する位置の分割画像をそれぞれ当てはめて表示しまたは表示できる状態にし、かつ、Ｗｅｂブラウザの表示領域に対する画像の相対移動が指示された時に、Ｗｅｂブラウザの表示領域に対する枠要素の移動すべき位置を演算して該位置に枠要素を移動し、該画像の相対移動に伴いＷｅｂブラウザの表示領域から離れる分割画像に該当する位置から枠要素を削除し、Ｗｅｂブラウザの表示領域に近づく分割画像に該当する位置に枠要素を追加して画像に対する枠要素の配列の位置を変更し、該追加する枠要素に、該当する位置の分割画像を当てはめて表示しまたは表示できる状態にする画像表示方法。 - 前記「Ｗｅｂブラウザの画像を表示する表示領域よりも大きい画像を分割し該Ｗｅｂブラウザの表示領域に少なくとも一部が入る分割画像をサーバから優先的にダウンロードして該Ｗｅｂブラウザの表示領域に表示する画像表示方法」が、
サーバから該画像を複数の領域に分割した画像ごとに送信可能にし、該画像とＷｅｂブラウザの表示領域との相対位置に応じてＷｅｂブラウザの表示領域に少なくとも一部が入る分割画像を判断し、サーバから該当する分割画像を優先的に送信し、Ｗｅｂブラウザに表示する方法である請求項１記載の画像表示方法。 - 前記「Ｗｅｂブラウザの画像を表示する表示領域よりも大きい画像を分割し該Ｗｅｂブラウザの表示領域に少なくとも一部が入る分割画像をサーバから優先的にダウンロードして該Ｗｅｂブラウザの表示領域に表示する画像表示方法」が、
該画像を複数の領域に分割してサーバに予め用意し、該画像とＷｅｂブラウザの表示領域との相対位置に応じてＷｅｂブラウザの表示領域に少なくとも一部が入る分割画像を判断し、サーバから該当する分割画像を優先的に送信し、Ｗｅｂブラウザに表示する方法である請求項１記載の画像表示方法。 - 前記「Ｗｅｂブラウザの画像を表示する表示領域よりも大きい画像を分割し該Ｗｅｂブラウザの表示領域に少なくとも一部が入る分割画像をサーバから優先的にダウンロードして該Ｗｅｂブラウザの表示領域に表示する画像表示方法」が、
該画像を、Ｗｅｂブラウザの表示領域よりも横方向もしくは縦方向の一方向または横方向および縦方向の両方向の長さがそれぞれ短い複数の領域に分割してサーバに予め用意し、該画像とＷｅｂブラウザの表示領域との相対位置に応じてＷｅｂブラウザの表示領域に少なくとも一部が入る複数の分割画像を判断し、サーバから該当する複数の分割画像を優先的に送信し、Ｗｅｂブラウザに元の並び状態に配列して表示する方法である請求項１記載の画像表示方法。 - 前記「Ｗｅｂブラウザの画像を表示する表示領域よりも大きい画像を分割し該Ｗｅｂブラウザの表示領域に少なくとも一部が入る分割画像をサーバから優先的にダウンロードして該Ｗｅｂブラウザの表示領域に表示する画像表示方法」が、
該画像を複数の領域に分割してサーバに予め用意し、Ｗｅｂブラウザは該画像とＷｅｂブラウザの表示領域との相対位置に応じてＷｅｂブラウザの表示領域に少なくとも一部が入る分割画像を判断して該分割画像をサーバに優先的に要求し、サーバは該要求に応じた分割画像を優先的に送信し、Ｗｅｂブラウザは受け取った分割画像を表示する方法である 請求項１記載の画像表示方法。 - 前記「Ｗｅｂブラウザの画像を表示する表示領域よりも大きい画像を分割し該Ｗｅｂブラウザの表示領域に少なくとも一部が入る分割画像をサーバから優先的にダウンロードして該Ｗｅｂブラウザの表示領域に表示する画像表示方法」が、
該画像を、Ｗｅｂブラウザの表示領域よりも横方向もしくは縦方向の一方向または横方向および縦方向の両方向の長さがそれぞれ短い複数の領域に分割してサーバに予め用意し、Ｗｅｂブラウザは該画像とＷｅｂブラウザの表示領域との相対位置に応じてＷｅｂブラウザの表示領域に少なくとも一部が入る複数の分割画像を判断して該分割画像をサーバに優先的に要求し、サーバは該要求に応じた複数の分割画像を優先的に送信し、Ｗｅｂブラウザは受け取った分割画像を元の並び状態に配列して表示する方法である請求項１記載の画像表示方法。 - Ｗｅｂブラウザの表示領域に少なくとも一部が入る分割画像のほか、該分割画像の領域の周囲に隣接する分割画像を含む、Ｗｅｂブラウザの表示領域に対し所定の位置関係にある、画像全体に対して限定された範囲の画像領域に含まれる分割画像をサーバから併せて優先的にダウンロードする請求項１から６のいずれか１つに記載の画像表示方法。
- 前記分割画像がＷｅｂブラウザに既にダウンロードされて保存されている分割画像であるかどうかを判断し、既に保存されている分割画像である場合は、サーバから再度ダウンロードすることなく、該保存されている分割画像を読み出して表示する請求項１から７のいずれか１つに記載の画像表示方法。
- 前記分割画像が、前記画像を横方向もしくは縦方向の一方向にまたは横方向および縦方向の両方向に格子状に分割した画像である請求項１から８のいずれか１つに記載の画像表示方法。
- 前記格子が、前記画像の左端位置を始点として所定ピクセル数ごとに横方向に分割して形成されたもの、もしくは、該画像の上端位置を始点として所定ピクセル数ごとに縦方向に分割して形成されたもの、または、該画像の左端位置を始点として所定ピクセル数ごとに横方向に分割しかつ該画像の上端位置を始点として所定ピクセル数ごとに縦方向に分割して形成されたものである請求項９記載の画像表示方法。
- 前記各枠要素に固有の識別情報が付与され、
前記「画像の相対移動に伴いＷｅｂブラウザの表示領域から離れる分割画像に該当する位置から枠要素を削除し、Ｗｅｂブラウザの表示領域に近づく分割画像に該当する位置に枠要素を追加」し、かつ「該追加する枠要素に、該当する位置の分割画像を当てはめ」る処理が、
前記削除する枠要素を前記追加する枠要素として使用し、かつ該枠要素に当てはめる分割画像を、前記削除する枠要素に当てはめられている分割画像から前記追加する枠要素に該当する位置の分割画像に変更することにより行われる請求項１から１０のいずれか１つに記載の画像表示方法。 - Ｗｅｂブラウザは前記固有の識別情報に、Ｗｅｂブラウザの表示領域における該枠要素の表示位置の情報と、該枠要素に当てはめる分割画像の識別情報を関連づけて保持し、Ｗｅｂブラウザは該情報に基づき、各枠要素に当てはめる分割画像を、Ｗｅｂブラウザの表示領域の所定位置に表示する請求項１１記載の画像表示方法。
- 前記分割画像の識別情報が、画像全体におけるその番地に相当する情報をもって該画像全体における識別情報としてなり、Ｗｅｂブラウザは該分割画像の識別情報をもってサーバに該分割画像を要求し、サーバは該識別情報に該当する分割画像を判別してＷｅｂブラウザに送信する請求項１２記載の画像表示方法。
- 前記分割画像の識別情報が、各分割画像のファイル形式を識別する情報を有しない請求項１３記載の画像表示方法。
- 前記複数の枠要素全体でブロックを構成し、画像の相対移動が指示された時に、Ｗｅｂブラウザは、該Ｗｅｂブラウザの表示領域の原点に対する該ブロックの原点の移動すべき座標を演算し、該演算により求められたブロックの原点の座標に基づき、前記各枠要素の原点の移動すべき座標をそれぞれ演算し、該演算により求められた座標に各枠要素の原点をそれぞれ移動することにより、前記画像の相対移動を実現する請求項１から１４のいずれか１つに記載の画像表示方法。
- 前記分割画像が前記画像を横方向に格子状に分割した画像でありかつ前記枠要素が横方向に所定数の連続した分割画像を当てはめるものであり、もしくは、前記分割画像が前記画像を縦方向に格子状に分割した画像でありかつ前記枠要素が縦方向に所定数の連続した分割画像を当てはめるものであり、または、前記分割画像が前記画像を横方向および縦方向に格子状に分割した画像でありかつ前記枠要素が横方向に所定数の連続した分割画像もしくは縦方向に所定数の連続した分割画像または横方向に所定数で縦方向に所定数の連続した分割画像を当てはめるものである請求項１から１５のいずれか１つに記載の画像表示方法。
- 同じ内容の画像を複数の倍率でかつ倍率ごとにそれぞれ複数の領域に分割してサーバから送信可能にし、Ｗｅｂブラウザから指示される倍率の画像について請求項１から１６のいずれか１つに記載の方法を実行する画像表示方法。
- 倍率にかかわらず、画像を横方向もしくは縦方向または横方向および縦方向に分割するピクセル数が同じである請求項１７記載の画像表示方法。
- １つの倍率で画像を表示している状態で該画像上の任意の位置にポインタを当てて倍率変更操作をした場合に、該ポインタが位置する画像上の位置を不動点として変更後の倍率の画像を表示する請求項１７または１８記載の画像表示方法。
- 同じ内容の画像を複数の倍率でかつ倍率ごとにそれぞれ複数の領域に分割してサーバから送信可能にし、Ｗｅｂブラウザから指示される倍率の画像について請求項１から１６のいずれかに記載の方法を実行する画像表示方法であって、倍率にかかわらず、前記枠要素の数を同じにしてなる画像表示方法。
- 前記Ｗｅｂブラウザでの各演算がサーバから送信される JavaScript（登録商標）に基づき実行される請求項１から２０のいずれかに記載の画像表示方法。
- 前記枠要素が＜ＤＩＶ＞タグを使用して設定されている請求項２１記載の画像表示方法。
- 前記サーバから送信されるＨＴＭＬに、前記分割画像ごとのファイル名及び／またはファイル形式等の属性の情報が組み込まれていない請求項２１または２２記載の画像表示方法。
- 前記画像が、異なるファイル形式の分割画像が混在して構成されている請求項１〜２３のいずれかに記載の画像表示方法。
Priority Applications (3)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| JP2003112998A JP4059802B2 (ja) | 2003-04-17 | 2003-04-17 | 画像表示方法 |
| US10/824,388 US7646937B2 (en) | 2003-04-17 | 2004-04-14 | Image display method |
| US12/322,287 US7609911B2 (en) | 2003-04-17 | 2009-01-30 | Image display method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| JP2003112998A JP4059802B2 (ja) | 2003-04-17 | 2003-04-17 | 画像表示方法 |
Related Child Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| JP2007293603A Division JP4790693B2 (ja) | 2007-11-12 | 2007-11-12 | 画像表示方法および画像表示用プログラム |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| JP2004320534A JP2004320534A (ja) | 2004-11-11 |
| JP4059802B2 true JP4059802B2 (ja) | 2008-03-12 |
Family
ID=33157022
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| JP2003112998A Expired - Lifetime JP4059802B2 (ja) | 2003-04-17 | 2003-04-17 | 画像表示方法 |
Country Status (2)
| Country | Link |
|---|---|
| US (2) | US7646937B2 (ja) |
| JP (1) | JP4059802B2 (ja) |
Families Citing this family (28)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2006189936A (ja) * | 2004-12-28 | 2006-07-20 | Yappa Corp | 出版物発行配信システム |
| US20070086773A1 (en) * | 2005-10-14 | 2007-04-19 | Fredrik Ramsten | Method for creating and operating a user interface |
| US20070139446A1 (en) * | 2005-12-15 | 2007-06-21 | Xerox Corporation | Systems and methods for manipulating high resolution scan images using web-based user interfaces |
| JP4552005B2 (ja) * | 2006-05-31 | 2010-09-29 | 株式会社ヤッパ | 電子新聞表示装置 |
| JP2008011266A (ja) * | 2006-06-29 | 2008-01-17 | Ricoh Co Ltd | 複合画像形成方法及び複合画像形成装置 |
| US8234392B2 (en) | 2006-11-17 | 2012-07-31 | Apple Inc. | Methods and apparatuses for providing a hardware accelerated web engine |
| JP4085123B1 (ja) * | 2007-03-29 | 2008-05-14 | 株式会社サピエンス | 画像表示更新方法およびサーバ・クライアントシステム並びに描画操作エコーバックスクリプト |
| KR101434295B1 (ko) * | 2008-01-07 | 2014-09-25 | 삼성전자주식회사 | 디스플레이 장치에 표시된 화면의 일부분을 전자장치를통해 ｇｕｉ로 제공하는 방법 및 이를 적용한 전자장치 |
| JP4952627B2 (ja) * | 2008-03-21 | 2012-06-13 | 富士通株式会社 | 画像処理装置、画像処理方法および画像処理プログラム |
| JP5163233B2 (ja) * | 2008-03-31 | 2013-03-13 | 富士通株式会社 | 情報処理装置、プログラム、方法、処理回路及び通信システム |
| TW201009698A (en) * | 2008-08-19 | 2010-03-01 | Arcadyan Technology Corp | Method for improving the accessing efficiency of embedded web page |
| KR101028375B1 (ko) * | 2008-08-25 | 2011-04-11 | (주)씨앤에스 테크놀로지 | 사용자 관심도를 반영한 멀티미디어 스트림 재생방법 및 멀티미디어 재생 장치 |
| JP5415730B2 (ja) * | 2008-09-04 | 2014-02-12 | 任天堂株式会社 | 画像処理プログラム、画像処理装置、画像処理方法、および画像処理システム |
| CN102165515B (zh) * | 2008-09-30 | 2014-05-28 | 索尼电脑娱乐公司 | 图像处理装置以及图像处理方法 |
| JP2010160585A (ja) * | 2009-01-06 | 2010-07-22 | Sony Corp | サーバ装置、情報処理方法、情報処理システム |
| US10705692B2 (en) * | 2009-05-21 | 2020-07-07 | Sony Interactive Entertainment Inc. | Continuous and dynamic scene decomposition for user interface |
| WO2013009413A1 (en) | 2011-06-06 | 2013-01-17 | Intellitact Llc | Relative touch user interface enhancements |
| JP5874258B2 (ja) * | 2011-09-14 | 2016-03-02 | 大日本印刷株式会社 | 大型紙面閲覧システム |
| CN102346782A (zh) * | 2011-10-25 | 2012-02-08 | 中兴通讯股份有限公司 | 在用户终端浏览器上按需显示图片的方法及装置 |
| JP5622756B2 (ja) * | 2012-01-30 | 2014-11-12 | 東芝テック株式会社 | 商品読取装置及び商品読取プログラム |
| US9646362B2 (en) * | 2013-09-18 | 2017-05-09 | Oracle International Corporation | Algorithm for improved zooming in data visualization components |
| CN103618662B (zh) * | 2013-11-22 | 2016-10-05 | 北京奇虎科技有限公司 | 一种实现即时通讯的方法和装置 |
| CN104318897B (zh) * | 2014-11-13 | 2017-06-06 | 合肥鑫晟光电科技有限公司 | 一种像素电路、有机电致发光显示面板及显示装置 |
| JP6002263B2 (ja) * | 2015-03-13 | 2016-10-05 | 株式会社日立ソリューションズ東日本 | データ表示システム |
| JP6002268B1 (ja) * | 2015-03-25 | 2016-10-05 | 株式会社日立ソリューションズ東日本 | データ表示システム |
| JP6478226B2 (ja) * | 2016-03-01 | 2019-03-06 | Kddi株式会社 | 画像表示システム、サーバ装置、端末装置およびプログラム |
| CN107450824B (zh) * | 2016-06-01 | 2020-10-16 | 华为技术有限公司 | 一种对象删除方法和终端 |
| US10275425B2 (en) | 2017-02-14 | 2019-04-30 | Henry Edward Kernan | Method for compressing, slicing, and transmitting image files for display and interpretation |
Family Cites Families (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JPH06274587A (ja) | 1993-03-22 | 1994-09-30 | Mitsubishi Electric Corp | グラフィック編集方法 |
| US5745910A (en) * | 1993-05-10 | 1998-04-28 | Apple Computer, Inc. | Frame structure which provides an interface between parts of a compound document |
| JPH1188866A (ja) | 1997-07-18 | 1999-03-30 | Pfu Ltd | 高精細画像表示装置及びそのプログラム記憶媒体 |
| US6192393B1 (en) * | 1998-04-07 | 2001-02-20 | Mgi Software Corporation | Method and system for panorama viewing |
| US6230171B1 (en) * | 1998-08-29 | 2001-05-08 | International Business Machines Corporation | Markup system for shared HTML documents |
| KR100405060B1 (ko) | 2000-08-24 | 2003-11-07 | 휴먼드림 주식회사 | 데이터 통신망을 통한 디지털 확대 이미지 제공방법,디지털 확대 이미지 제공장치 |
| AUPR110400A0 (en) * | 2000-10-30 | 2000-11-23 | Canon Kabushiki Kaisha | Image transfer optimisation |
| JP2002236701A (ja) | 2001-02-09 | 2002-08-23 | Nihon Keizai Shimbun Inc | 段階的情報表示方法 |
| JP3581838B2 (ja) * | 2001-05-25 | 2004-10-27 | 株式会社村上開明堂 | 電動格納式ドアミラーの制御方式 |
-
2003
- 2003-04-17 JP JP2003112998A patent/JP4059802B2/ja not_active Expired - Lifetime
-
2004
- 2004-04-14 US US10/824,388 patent/US7646937B2/en active Active
-
2009
- 2009-01-30 US US12/322,287 patent/US7609911B2/en not_active Expired - Lifetime
Also Published As
| Publication number | Publication date |
|---|---|
| US20090153588A1 (en) | 2009-06-18 |
| US7646937B2 (en) | 2010-01-12 |
| JP2004320534A (ja) | 2004-11-11 |
| US7609911B2 (en) | 2009-10-27 |
| US20040207654A1 (en) | 2004-10-21 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP4059802B2 (ja) | 画像表示方法 | |
| JP2023169320A (ja) | 階層流動コンポーネントおよび動的レイアウトを統合した応答編集および表示を提供するシステムおよび方法 | |
| JP4639242B2 (ja) | テーブルレイアウトを行うブラウザプログラム、方法および装置 | |
| US20180285337A1 (en) | Method, apparatus, and computer program product for managing retrieval of content for display by a browser | |
| JP2007323369A (ja) | 電子新聞表示装置及び電子新聞表示システム | |
| JP6540116B2 (ja) | 電子ホワイトボードシステム、電子ホワイトボード検索結果表示方法およびそのプログラム | |
| US20170270218A1 (en) | Mapping of Defined Regions Within a Webpage | |
| JP4874363B2 (ja) | ブラウザのプラグインを用いるウェブページ表示方法 | |
| JP2014132468A (ja) | 画像表示方法および画像表示用プログラム | |
| JP4790693B2 (ja) | 画像表示方法および画像表示用プログラム | |
| JP2012014608A (ja) | 情報処理装置、情報処理方法、及びプログラム | |
| JP2017059067A (ja) | クライアント装置、および、データ表示プログラム | |
| CN104350456A (zh) | 信息处理装置和信息处理方法 | |
| JP5475856B2 (ja) | 画像表示方法および画像表示用プログラム | |
| JP5364746B2 (ja) | 画像表示方法および画像表示用プログラム | |
| US20100153682A1 (en) | Mixed techniques for html crosstab rendering | |
| KR20220107902A (ko) | 렌더링 방법, 장치, 전자 기기 및 저장 매체 | |
| JP2019021255A (ja) | デジタル出版システム、デジタル出版方法及びコンピュータプログラム | |
| CN112416503A (zh) | 小程序图标显示方法、装置、设备与计算机可读存储介质 | |
| JP4191670B2 (ja) | データファイル管理装置、データファイル管理の処理方法およびプログラム | |
| JPH11338456A (ja) | 地図表示システム及びそれにおける画像スクロール処理方法 | |
| JP4104562B2 (ja) | テーブルレイアウトを行うブラウザプログラム、方法および装置 | |
| JP7560087B1 (ja) | 情報処理装置、情報処理方法、情報処理システム又はプログラム | |
| CN111666459B (zh) | 一种数据显示的预处理方法、装置及其存储介质 | |
| JP4946397B2 (ja) | 情報処理システム、情報処理装置及び情報処理プログラム |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| A621 | Written request for application examination |
Free format text: JAPANESE INTERMEDIATE CODE: A621 Effective date: 20060112 |
|
| A977 | Report on retrieval |
Free format text: JAPANESE INTERMEDIATE CODE: A971007 Effective date: 20070831 |
|
| A131 | Notification of reasons for refusal |
Free format text: JAPANESE INTERMEDIATE CODE: A131 Effective date: 20070911 |
|
| A521 | Request for written amendment filed |
Free format text: JAPANESE INTERMEDIATE CODE: A523 Effective date: 20071112 |
|
| TRDD | Decision of grant or rejection written | ||
| A01 | Written decision to grant a patent or to grant a registration (utility model) |
Free format text: JAPANESE INTERMEDIATE CODE: A01 Effective date: 20071211 |
|
| A61 | First payment of annual fees (during grant procedure) |
Free format text: JAPANESE INTERMEDIATE CODE: A61 Effective date: 20071218 |
|
| FPAY | Renewal fee payment (event date is renewal date of database) |
Free format text: PAYMENT UNTIL: 20101228 Year of fee payment: 3 |
|
| R150 | Certificate of patent or registration of utility model |
Free format text: JAPANESE INTERMEDIATE CODE: R150 Ref document number: 4059802 Country of ref document: JP Free format text: JAPANESE INTERMEDIATE CODE: R150 |
|
| FPAY | Renewal fee payment (event date is renewal date of database) |
Free format text: PAYMENT UNTIL: 20101228 Year of fee payment: 3 |
|
| FPAY | Renewal fee payment (event date is renewal date of database) |
Free format text: PAYMENT UNTIL: 20111228 Year of fee payment: 4 |
|
| R250 | Receipt of annual fees |
Free format text: JAPANESE INTERMEDIATE CODE: R250 |
|
| FPAY | Renewal fee payment (event date is renewal date of database) |
Free format text: PAYMENT UNTIL: 20121228 Year of fee payment: 5 |
|
| R250 | Receipt of annual fees |
Free format text: JAPANESE INTERMEDIATE CODE: R250 |
|
| FPAY | Renewal fee payment (event date is renewal date of database) |
Free format text: PAYMENT UNTIL: 20131228 Year of fee payment: 6 |
|
| R250 | Receipt of annual fees |
Free format text: JAPANESE INTERMEDIATE CODE: R250 |
|
| R250 | Receipt of annual fees |
Free format text: JAPANESE INTERMEDIATE CODE: R250 |
|
| R250 | Receipt of annual fees |
Free format text: JAPANESE INTERMEDIATE CODE: R250 |
|
| S111 | Request for change of ownership or part of ownership |
Free format text: JAPANESE INTERMEDIATE CODE: R313113 |
|
| R350 | Written notification of registration of transfer |
Free format text: JAPANESE INTERMEDIATE CODE: R350 |
|
| R250 | Receipt of annual fees |
Free format text: JAPANESE INTERMEDIATE CODE: R250 |
|
| R250 | Receipt of annual fees |
Free format text: JAPANESE INTERMEDIATE CODE: R250 |
|
| R250 | Receipt of annual fees |
Free format text: JAPANESE INTERMEDIATE CODE: R250 |
|
| R250 | Receipt of annual fees |
Free format text: JAPANESE INTERMEDIATE CODE: R250 |
|
| R250 | Receipt of annual fees |
Free format text: JAPANESE INTERMEDIATE CODE: R250 |
|
| R250 | Receipt of annual fees |
Free format text: JAPANESE INTERMEDIATE CODE: R250 |
|
| R250 | Receipt of annual fees |
Free format text: JAPANESE INTERMEDIATE CODE: R250 |
|
| R250 | Receipt of annual fees |
Free format text: JAPANESE INTERMEDIATE CODE: R250 |
|
| EXPY | Cancellation because of completion of term |