JP7073070B2 - クライアント装置、方法、その処理プログラムおよびプログラムを提供するサーバ - Google Patents

Description

本発明は、データを表示する文書データを表示するクライアント装置、方法およびそのプログラムに関するものである。

サーバーコンピュータ側で業務データの管理や各種処理を行う形態として、クラウドコンピューティングシステムが普及し始めている。ユーザは、クライアントコンピュータのウェブブラウザからインターネットを介してクラウドコンピュータにアクセスし、そのクラウドコンピュータが提供するＷｅｂページ上で、画像データや電子文書を閲覧することができる。これにより、近年では紙ベースで運用されていた業務を、省資源化を目的としてＷｅｂベースでの業務に移行するケースも増えてきている。

Ｗｅｂベースでの業務へ移行したユースケースの一つに帳票を使った運用があげられる。Ｗｅｂベースでの業務へ移行するためには、ウェブブラウザ上での帳票の閲覧がストレスなく行われる必要がある。複数ページから作成される帳票を該当ページの表示だけではなくページ遷移なども含めてスムーズに表示するためには、表示中の帳票以外の前後の帳票を先読みしておくことが有効である。特許文献１には、ページの先読みを行い表示ページに応じて不要な先読みを中止することで効率的に先読みを行う技術が開示されている。

特開２０１５－２０７０２７号公報

しかしながら、例えば帳票のようにフォントファイルや画像などの多様なファイルを含むことでデータサイズが大きくなる場合にウェブブラウザでデータを表示する際、先読みするページが大量になるとＨＴＭＬに追加するデータ量が増える。その結果、ウェブブラウザのデータ読み込み容量制限によりエラーとなる虞、および／または大量のデータを読み込むことにより描画のパフォーマンスが劣化してしまう虞がある。

そこで、本発明では、帳票のようにフォントファイルや画像などの多様なファイルを含むことでデータサイズが大きくなる場合における、ウェブブラウザでの表示ページの制御を行う仕組みを提供する。これにより、データサイズが大きい帳票のようなデータの表示においてもウェブブラウザの操作性を損なうことなく表示することを目的とする。

本願発明の１つの側面としてのクライアント装置は、ページ単位でデータを生成するサーバと通信可能なクライアント装置であって、前記データをウェブブラウザ上に表示するため、画面のリクエストを送信する送信手段と、前記リクエストの応答としてＨＴＭＬと前記ウェブブラウザ上で動作するプログラムを受信する受信手段と、前記プログラムを動作させることにより、前記ウェブブラウザで表示しているページを基準に規定のページ数分の前記データをダウンロードし保存し、前記ＨＴＭＬにダウンロードした前記データを参照するＵＲＬを追加する追加手段と、を有し、前記ウェブブラウザは、前記ＵＲＬが追加された前記ＨＴＭＬを読み込み前記画面の表示を制御することを特徴とする。

本発明によれば、データサイズが大きい帳票のようなデータの表示においてもウェブブラウザの操作性を損なうことなく表示することが可能になる。

実施例１におけるシステム構成例を示す図 実施例１におけるハードウェア構成例を示す図 実施例１におけるＷｅｂサーバ上で動作するソフトウェアモジュールの構成例を示す図 実施例１におけるクライアント装置上で動作するソフトウェアモジュールの構成例を示す図 実施例１における帳票閲覧画面を生成する処理シーケンスを示す図 実施例１におけるログイン画面の例 実施例１における帳票選択画面の例 実施例１におけるＷｅｂ帳票閲覧画面用の出力ページ情報の例 実施例１における生成されたＷｅｂ帳票閲覧画面と表示する帳票を示す図 実施例１におけるＷｅｂ帳票閲覧画面の初回表示の処理フローを示す図 実施例１におけるＷｅｂ帳票閲覧画面の画面遷移時の処理フローを示す図 実施例１における画像データ取得のＪａｖａＳｃｒｉｐｔ（登録商標）の一例 実施例１における画面遷移の処理を示す図 実施例２におけるフォーカス機能を示す図 実施例２におけるＷｅｂサーバ上で動作するソフトウェアモジュールの構成を示す図 実施例２における帳票部品情報の例 実施例２におけるＷｅｂ帳票閲覧画面を生成する処理のシーケンス 実施例２におけるＷｅｂ帳票閲覧画面の表示切り替えの処理フローを示す図 実施例２における表示切り替え処理を示す図 実施例１におけるＷｅｂ帳票閲覧プログラムに含まれるＨＴＭＬを示す図

以下、本発明を実施するための最良の形態について図面を用いて説明する。

図１に示すシステムは、Ｗｅｂサーバ１０１とクライアント装置１０２を備え、夫々がインターネットを介して通信可能となっている。Ｗｅｂサーバ１０１は、クライアント装置１０２からリクエストを受信して帳票を生成し、Ｗｅｂ帳票閲覧プログラムの生成処理を実行する。なお、作成した帳票はＷｅｂサーバ１０１が外部ストレージへアップロードし、外部ストレージから作成された帳票は取得される。

Ｗｅｂ帳票閲覧プログラムとは、ネットワークを介して配信されるデータであって、ウェブブラウザ上で動作するウェブアプリケーションである。Ｗｅｂ帳票閲覧プログラムは、ウェブページを表現するＨＴＭＬ、スタイルシートであるＣＳＳ（Ｃａｓｃａｄｉｎｇ Ｓｔｙｌｅ Ｓｈｅｅｔｓ）およびウェブブラウザ上で動作するプログラミング言語（ＪａｖａＳｃｒｉｐｔ）を含む。

Ｗｅｂ帳票閲覧プログラムは、Ｗｅｂブラウザにより実行されることでその機能を発揮するプログラムである。Ｗｅｂ帳票閲覧プログラムの機能とは、Ｗｅｂサーバ１０１から生成された帳票をダウンロードし、先のＨＴＭＬへ帳票をＤＯＭ追加し、ウェブブラウザにそのＨＴＭＬを読み込ませることでウェブブラウザ上に帳票を表示させる機能である。Ｗｅｂ帳票閲覧プログラムに含まれるＨＴＭＬはウェブブラウザ上で帳票を表示するための画面情報であり、ＨＴＭＬに帳票がＤＯＭ追加されたことでＷｅｂ帳票閲覧プログラムにより表示される画面をＷｅｂ帳票閲覧画面と呼ぶ。なお、ＤＯＭとはＤｏｃｕｍｅｎｔ Ｏｂｊｅｃｔ Ｍｏｄｅｌであり、ＤＯＭ追加と称した場合はＨＴＭＬの要素に対し表示対象のファイルに関する記述を追加することを指す。実施例１におけるＤＯＭ追加の対象ファイルは帳票である。

クライアント装置１０２は、ウェブブラウザを用いてＷｅｂサーバ１０１から受信したＷｅｂ帳票閲覧プログラムにより帳票を表示する。Ｗｅｂ帳票閲覧プログラムは、Ｗｅｂサーバ１０１から帳票を取得しウェブブラウザ上に表示させる。なお、Ｗｅｂ帳票閲覧プログラムは、ウェブブラウザ上で動作するウェブアプリケーション以外、例えばコンピュータシステム上で実行するアプリケーションでも良い。また、Ｗｅｂサーバ１０１が画像ファイルのみを生成し、クライアント装置１０２が画像ファイルを使用して後述するＷｅｂ帳票閲覧操作を再現できるアプリケーションを備えるような構成でも良い。

また、上記各構成要素はネットワーク１００により通信可能に接続されている。ネットワークは、例えば、インターネット等のＬＡＮ、ＷＡＮ、電話回線、専用デジタル回線、ＡＴＭやフレームリレー回線、ケーブルテレビ回線、データ放送用無線回線等のいずれである。また、これらの組み合わせにより実現される、いわゆる通信ネットワークである。ネットワークはデータの送受信が可能であればよい。

図２は、図１のＷｅｂサーバ１０１、クライアント装置１０２のハードウェア構成を示すブロック図である。２０１は内部バスで接続される各デバイス（後述のＲＯＭ、ＲＡＭ他）を直接或いは間接的に制御し、本発明を実現するためのプログラムを実行するＣＰＵである。２０２はＢＩＯＳが格納してあるＲＯＭである。２０３はＣＰＵ２０１のワーク領域として利用されたり、本発明を実現するためのソフトウェアモジュールをロードするための一時記憶として利用されたりするＲＡＭ（直接記憶装置）である。

２０４は基本ソフトウェアであるＯＳやソフトウェアモジュールが記憶されているＨＤＤ（ハードディスクドライブ）、もしくはＳＳＤ（ソリッドステートドライブ）などの間接記憶装置である。２０５は入力装置であり不図示のキーボードやポインティングデバイス、タッチジェスチャ検出デバイスなどである。２０６は出力装置でありディスプレイが接続される。入力装置２０５と出力装置２０６は、タッチスクリーンディスプレイのような一体型モジュールでも構わない。

２０７はネットワーク１００に接続するためのネットワークＩ／Ｆである。これらのハードウェアでは、起動後ＣＰＵ２０１によりＢＩＯＳが実行されＯＳがＨＤＤ２０４からＲＡＭ２０３に実行可能にロードされる。ＣＰＵ２０１はＯＳの動作に従って後述する各種ソフトウェアモジュールをＨＤＤ２０４からＲＡＭ２０３に随時、実行可能にロードする。各種ソフトウェアモジュールは上記各デバイスの協調によりＣＰＵ２０１によって実行され動作する。また、ネットワークＩ／Ｆ２０７はネットワーク１００に接続されており、ＯＳの動作に従ってＣＰＵ２０１により制御され、上述した通信機能による通信を実現している。

図３は、Ｗｅｂサーバ１０１上で動作するソフトウェアモジュールの構成を示す図である。なお、各ソフトウェアモジュールは図２で示したＨＤＤ２０４に記憶されており、前述したようにＣＰＵ２０１によってＲＡＭ２０３にロードされ実行されることで機能を発揮する。アクセス制御部３０１は、クライアント装置１０２からのリクエストに応じてユーザ認証を行う。

帳票生成部３０２は、データアクセス部３０４を介して読み出したデータベース３０７に記憶されたフォームデータと、データベース３０８に記憶されたフィールドデータを重ね合わせて帳票を生成する。実施例１では、作成した帳票をＳＶＧ（スケーラブル・ベクター・グラフィックス）形式の帳票として保持する。ＳＶＧ形式の帳票の場合、ユーザからの操作に応じて、ウェブブラウザが帳票の情報や画像を適宜変更することが可能である。ただし、帳票は、ウェブブラウザで閲覧することができる形式であればＰＮＧ、ＪＰＥＧ、ＧＩＦなどその他の画像形式でも構わない。

ページ生成部３０３は、クライアント装置１０２にレスポンスとして返すＷｅｂページを生成する。そして、ページ生成部３０３は前述したＷｅｂ帳票閲覧プログラムに必要なＨＴＭＬ、ＣＳＳ、ＪａｖａＳｃｒｉｐｔなどのファイルを生成し、クライアント装置１０２に対してＷｅｂページとともにＷｅｂ帳票閲覧プログラムを送信する。

データアクセス部３０４は、各データベース３０５、３０６、３０７、３０８、３０９、３１０へのアクセス処理を行う。データベース３０５は、関連データを格納するデータベースである。関連データは、帳票名、所有者など帳票に関連する情報を表すデータである。データアクセス部３０４はデータベース３０６を利用することで、ログインユーザが閲覧できるフォームデータやフィールドデータを認識できる。

データベース３０６は、ユーザ情報を格納するデータベースである。データベース３０７は、フォームデータを格納するデータベースである。フォームデータはあらかじめデータベース３０７に保持されていても良いし、クライアント装置１０２からの帳票作成依頼の際にクライアント装置１０２から取得しても良い。データベース３０８は、フィールドデータを格納するデータベースである。フィールドデータはあらかじめデータベース３０７に保持されていても良いし、クライアント装置１０２からの帳票作成依頼の際にクライアント装置１０２から取得しても良い。

データベース３０９は、帳票を格納するデータベースである。帳票生成部３０２で作成された帳票を保持し、クライアント装置１０２からの要求に応じてデータアクセス部３０４がデータベース３０９から帳票を取得しレスポンスを返す。データベース３１０は、出力ページ情報を格納するデータベースである。オーバレイ処理時に生成される出力ページ情報を格納する。出力ページ情報については図８で後述する。

図４は、クライアント装置１０２上で動作するソフトウェアモジュールの構成を示す図である。各ソフトウェアモジュールは図２で示したＨＤＤ２０４にウェブブラウザ４００のモジュールとして記載されており、上述したようにＣＰＵ２０１によってウェブブラウザ４００のプログラムがＲＡＭ２０３にロードされ実行されることで機能を発揮する。

ウェブブラウザ４００は、ネットワーク１００を介して受信したファイルを用いてＷｅｂページを表示し、ユーザ操作に応じて出力装置２０６であるディスプレイの表示内容を変更する。また、ウェブブラウザ４００は、操作判断部４０１と制御部４０２と、取得部４０３、ページ管理部４０４を有する。

操作判断部４０１は、マウス操作やタッチ操作により入力されたジェスチャ情報に基づき、ウェブブラウザに対するユーザの操作内容を判断する。ウェブブラウザ４００がＷｅｂ帳票閲覧画面を表示している場合、スワイプは帳票切替え操作と判断する。左スワイプは、次のページの帳票への帳票切替え操作となり、右スワイプは前のページの帳票への帳票切り替え操作となる。そして、操作判断部４０１は、帳票切替え操作を操作情報として制御部４０２へ出力する。制御部４０２は、操作判断部４０１から入力された操作情報や後述する出力ページ情報８０１に基づき、ウェブブラウザ４００に対するＷｅｂページの表示制御を行う。取得部４０３は、制御部４０２からの要求に応じてＷｅｂサーバから帳票や出力ページ情報の取得を行う。ページ管理部４０４は、Ｗｅｂページの表示情報を保持する機能であり、取得部４０３で取得した出力ページ情報を基に各ページの帳票を保持し、表示中のページ番号の管理を行う。

次に、本実施例１の具体的な動作について説明する。図５は、実施例１における帳票閲覧画面を生成し表示する処理のシーケンスを示す図である。Ｓ５０１において、ユーザはクライアント装置１０２のウェブブラウザで表示されている図６に示すログイン画面６０１にてＷＥＢサーバ１０１にログインのリクエストを送信する。ユーザは、ログイン画面６０１のユーザ名入力テキストボックス６０２とパスワード入力テキストボックス６０３にユーザ名とパスワードを入力し、ログインボタン６０４を押下する。これによりウェブブラウザ４００はＷｅｂサーバ１０１にログインのリクエストを送信する。

Ｓ５０２において、アクセス制御部３０１はクライアント装置１０２から受信したログインリクエストの内容によりログイン処理を行う。アクセス制御部３０１は、Ｂａｓｉｃ認証を行い、ユーザ名とパスワードが有効であることを判断された場合、Ｓ５０３で帳票選択画面の生成を行う。なお、Ｂａｓｉｃ認証は一般的な認証処理のため、その説明を省略する。

Ｓ５０３において、Ｗｅｂサーバ１０１のページ生成部３０３はログインしたユーザの情報に応じて図７に示す帳票選択画面７０１を生成する。７０２は、ログインしたユーザが所有する帳票一覧を表示するドロップダウンリストである。ドロップダウンリスト７０２の中に表示する内容は、ページ生成部３０３がデータアクセス部３０４を介して帳票関連データのデータベース３０５から抽出したログインユーザが所有するフォームデータの帳票名である。ボタン７０３は、Ｗｅｂ帳票プレビューボタンであって、ドロップダウンリスト７０２で選択された帳票名に該当する帳票に対してＷｅｂ帳票プレビューを実行するためのボタンである。

Ｓ５０４において、Ｗｅｂサーバ１０１のアクセス制御部３０１はＳ５０３で生成された帳票選択画面７０１を、ネットワーク１００経由でクライアント装置１０２に返す。Ｓ５０５において、ウェブブラウザ４００はＷｅｂサーバ１０１からのレスポンスである帳票選択画面７０１を受け取り、帳票選択画面７０１がウェブブラウザ４００上に表示される。Ｓ５０６において、ユーザは帳票選択画面７０１内のドロップダウンリスト７０２から操作したい帳票のフォーム名を選択する。

Ｓ５０７において、ユーザは帳票選択画面７０１内のＷｅｂ帳票プレビューボタン７０３を押下することにより、Ｗｅｂサーバ１０１にＷｅｂ帳票閲覧画面の生成リクエストが送信される。Ｗｅｂ帳票閲覧画面の生成リクエストの中に、閲覧対象の帳票のフォームを特定できる情報を包含する。Ｓ５０８において、帳票生成部３０２は、データアクセス部３０４を介してフォームおよびフィールドデータを取得する。帳票生成部３０２は取得したフォームおよびフィールドデータを使用してオーバレイ出力処理を行う。オーバレイ出力処理とは、フォーム（帳票のひな型となる情報）にフィールドデータ（フォーム内のフィールドに流し込まれるテキスト形式のデータ）を重ね合わせることにより帳票を生成することである。本実施例ではＳＶＧ（スケーラブル・ベクター・グラフィックス）形式の帳票とし、ページ単位で帳票は生成される。

帳票生成部３０２は、データアクセス部３０４を介して生成されたＳＶＧ形式の帳票をデータベース３０９に格納する。そして、生成されたＳＶＧ形式の帳票を特定できる情報を帳票生成部３０２は、成されたＳＶＧ形式の帳票を特定できる情報を、データベース３１０の出力ページ情報に記載する。出力ページ情報は、帳票が初めの１ページ作成された段階で生成され、２ページ目以降の帳票の作成が完了するまで定期的に更新される。

ここで、図８を用いて出力ページ情報について説明する。図８（ａ）（ｂ）は、オーバレイ処理の際に作られる出力ページ情報の一例である。出力ページ情報は、Ｗｅｂ帳票閲覧画面が構築される際に利用される情報である。オーバレイ時にのみ取得できる情報が羅列されている。

実施例１の場合、出力ページ情報はファイル形式（ＪＳＯＮフォーマット）であるが、形式は問わない。出力ページ情報８０１は、複数のページブロック８０２と、変換終了フラグ８０７からなっている。ページブロック８０２は、ある特定の範囲の帳票についての情報をまとめたブロックである。例えば、出力ページ情報８０１の１つ目のページブロック８０２は、ページ番号８０３、利用フォーム名８０４、利用フェース名８０５およびデータ８０６を情報として持つ。ページ番号８０３は、このページブロックが帳票の何ページ目かを示す情報である。利用フォーム名８０４は、その帳票で利用されたフォームの名前である。利用フェース名８０５は、その帳票番号で利用されたフェースの名前である。データ８０６は、生成された帳票のファイル名である。出力ページ情報８０１を見れば、１ページ目ではフォーム「ＦＯＲＭ＿Ａ」のフェース「Ｆａｃｅ１」が、２ページではフォーム「ＦＯＲＭ＿Ａ」のフェース「Ｆａｃｅ２」が利用されたことが分かる。変換終了フラグ８０７は、オーバレイが完了したかどうかの情報である。変換終了フラグ８０７が「ｔｒｕｅ」であればオーバレイは完了し、「ｆａｌｓｅ」であれば変換途中であることを示す。

図８（ａ）は全ページのオーバレイ処理が完了した後の出力ページ情報である。出力ページ情報８０１を見れば、１ページ目ではフォーム「ＦＯＲＭ＿Ａ」のフェース「Ｆａｃｅ１」が、２ページ目ではフォーム「ＦＯＲＭ＿Ａ」のフェース「Ｆａｃｅ２」が利用されたことが分かる。図８（ｂ）はまだ全ページのオーバレイ処理が完了していない時の生成途中の出力ページ情報である。変換終了フラグ８０７の値が「ｆａｌｓｅ」であり、フォーム「ＦＯＲＭ＿Ａ」のフェース「Ｆａｃｅ１」が利用された帳票の１ページ目が生成されているが、２ページ目はまだ生成されていないことが分かる。帳票の２ページ目が生成されると出力ページ情報８０１に２ページ目の帳票に関する情報が記述され更新される。

Ｓ５０９において、ページ生成部３０３はＷｅｂ帳票閲覧プログラムを生成する。帳票が帳票９０１（図９－（ａ））、帳票９０２（図９－（ｂ））と複数ページ生成される場合、ページ生成部３０３は、２枚の帳票を閲覧できるＷｅｂ帳票閲覧プログラムを生成する。Ｓ５１０において、Ｗｅｂサーバ１０１は、Ｓ５０７のリクエストに対してＷｅｂ帳票閲覧プログラムをクライアント装置１０２に送信する。

Ｓ５１１において、ウェブブラウザ４００は、Ｗｅｂサーバ１０１からのレスポンスを受け取り、Ｗｅｂ帳票閲覧プログラムを実行する。Ｓ５１２において、クライアント装置１０２は、Ｗｅｂサーバ１０１へ出力ページ情報の取得リクエストを送信する。Ｊａｖａｓｃｒｉｐｔプログラムの実行によりウェブブラウザ４００がＡｊａｘ（Ａｓｙｎｃｈｒｏｎｏｕｓ ＪａｖａＳｃｒｉｐｔ ＋ ＸＭＬ）を利用し、Ｗｅｂサーバ１０１が開示するＲＥＳＴ（Ｒｅｐｒｅｓｅｎｔａｔｉｏｎａｌ Ｓｔａｔｅ Ｔｒａｎｓｆｅｒ）インターフェースに対しリクエストする。その際のウェブブラウザ４００は、Ｗｅｂサーバ１０１のＲＥＳＴインターフェースに対して、帳票名を指定して出力ページ情報取得リクエストを送信する。

Ｓ５１３において、Ｗｅｂサーバ１０１は、受信した出力ページ情報取得リクエストに含まれる帳票名をもとに、データアクセス部３０４を介してリクエスト対象帳票に関連する出力ページ情報８０１をデータベース３１０から取得する。

Ｓ５１４において、ウェブブラウザ４００はＳ５１２のリクエストの応答として取得した出力ページ情報８０１を基に、リクエスト対象帳票に関連する帳票のデータをデータベース３０９から取得する。複数の帳票がある場合、ウェブブラウザ４００は１ページ目を最初に表示する。ウェブブラウザ４００は、現在表示されている帳票が何ページ目であるか保持し、表示されている帳票の後ろのページの帳票をダウンロードする。帳票のページ取得のフローは後述の図１０のＷｅｂ帳票閲覧画面の初回表示の処理フローや図１１のＷｅｂ帳票閲覧画面９０３（図９－（ｃ））の画面遷移時の処理フローを用いて説明する。クライアント装置１０２は、Ｊａｖａｓｃｒｉｐｔプログラムを用いて複数の帳票とページ番号を紐付けて管理する。

図１０は、図５で説明したフローに従って生成されたＷｅｂ帳票閲覧画面９０３の表示の流れを示したフローチャートであり、Ｗｅｂ帳票閲覧プログラムのＪａｖａＳｃｒｉｐｔによる制御である。Ｓ１００１において、制御部４０２は取得部４０３を介しＷｅｂサーバ１０１から出力ページ情報８０１を取得する。Ｓ１００２において、Ｗｅｂ帳票閲覧プログラムのＪａｖａＳｃｒｉｐｔに従い、制御部４０２はＳ１００１で取得した出力ページ情報８０１を参照し、表示対象のＳＶＧ形式の帳票のファイル名８０６を取得する。帳票を初めて表示する初回表示であれば１ページ目、つまりページ番号８０３が１であるページブロック８０２の情報を取得する。制御部４０２は、取得したページブロック８０２の帳票のファイル名８０６を取得し取得部４０３を介して表示対象の帳票をＷｅｂサーバ１０１から取得する。

その後、制御部４０２は、Ｗｅｂ帳票閲覧プログラムのＪａｖａＳｃｒｉｐｔに従い、表示対象の帳票とその後ろの１ページの帳票を先読みする。本実施例では、１ページ目生成のタイミングで出力ページ情報８０１が作成されるため、まず１ページ目の帳票の取得を行う。その後、出力ページ情報８０１に２ページ目のページブロックが追加されていると２ページ目に対応する帳票の取得を行う。なお、実施例１では一度に先読みする規定のページ数を前後１ページとしたが、先読みするページ数を指定できる構成や帳票のサイズに応じて先読みするページ数が予め定められた複数ページ数になる構成であってもよい。課題を解決する形態であれば、先読みするページの規定数に制限はなく、ダウンロードする規定のページ数分は限定されるものではない。

Ｓ１００３において、ページ管理部４０４はＳ１００２で取得した帳票をＷｅｂ帳票閲覧画面のＨＴＭＬにＤＯＭ追加する。この際、ＪａｖａＳｃｒｉｐｔにより、ＤＯＭ追加されたＨＴＭＬをウェブブラウザ４００に読み込ませ、Ｗｅｂ帳票閲覧画面を表示させる。図１２－（ａ）は、帳票をダウンロードし、ダウンロードした帳票をＤＯＭ追加するＪａｖａＳｃｒｉｐｔの一例である。ＪａｖａＳｃｒｉｐｔはウェブブラウザ４００が実行することにより、そのプログラムに記述された処理が実行される。図１２－（ａ）の場合、ウェブブラウザ４００はＳＶＧ形式の帳票をダウンロードしウェブブラウザ４００のキャッシュ領域（不図示）に保存し、保存したデータをＵＲＬに変換し、そのＵＲＬをＨＴＭＬに追加することになる。その変化の状態を示したのが図２０である。

図２０（ａ）はＷｅｂ帳票閲覧プログラムをダウンロードした際に取得したＨＴＭＬを、図２０（ｂ）はＪａｖａＳｃｒｉｐｔを実行しＨＴＭＬに帳票をＤＯＭ追加したことにより変化したＨＴＭＬを示している。２００１はＷｅｂ帳票閲覧プログラムに含まれるＨＴＭＬであり、２００２はＨＴＭＬが利用するＣＳＳファイルのパスを、２００３は実行するＪａｖａＳｃｒｉｐｔを指定している。ＨＴＭＬを読み込んだ際にこのＪａｖａＳｃｒｉｐｔを実行することで、ＨＴＭＬへの帳票のＤＯＭ追加が行われる。その結果、２００４が示すように帳票のパスが挿入されることになる。このＵＲＬは上述したキャッシュ領域に保存された帳票のＵＲＬである。

Ｓ１００４において、制御部４０２は規定されたページ数分の読み込みが完了したか否かを判断する。具体的には、実施例１では規定されたページ数は１なので、表示ページの後ろ１ページの帳票が取得済みであるか判断し、取得済みである場合はＳ１００６へ進む。まだ、取得済みでないと判断した場合は、Ｓ１００５へ進む。

Ｓ１００５において、制御部４０２はＳ１００１で取得した出力ページ情報８０１の変換終了フラグ８０７をチェックし終了変換フラグがｔｒｕｅである場合は、ダウンロードする帳票がないと判断し処理を終了する。終了変換フラグがｆａｌｓｅである場合は、Ｓ１００１へ進み、再度出力ページ情報８０１を取得する。

Ｓ１００６において、制御部４０２はＳ１００１またはＳ１００７で取得した出力ページ情報８０１の変換終了フラグ８０７をチェックし終了変換フラグがｔｒｕｅである場合は、オーバレイ処理が完了したと判断し処理を終了する。終了変換フラグがｆａｌｓｅである場合は、Ｓ１００７へ進み、再度出力ページ情報８０１を取得する。制御部４０２は、Ｓ１００６～Ｓ１００７を出力ページ情報８０１の終了変換フラグがｔｒｕｅとなるまで繰り返す。

図１１は、図１０による表示処理の最中もしくはその後、ユーザのジェスチャ操作によってページ切替えを指示されたときのＷｅｂ帳票閲覧画面の表示切替時の処理の流れを示したフローチャートである。図１０と同じくＷｅｂ帳票閲覧プログラムのＪａｖａＳｃｒｉｐｔの指示による制御である。

Ｓ１１０１において、制御部４０２は、操作判断部４０１からの操作情報を待つ。Ｓ１１０２において、ユーザによるジェスチャ操作を受け、操作判断部４０１で判断された入力操作情報が帳票切替え操作の場合Ｓ１１０３に進む。帳票切替え操作以外の操作情報がきた場合はＳ１１０１に戻る。Ｓ１１０３において、Ｓ１１０２で入力された画面遷移に応じて表示する帳票を遷移させる。ＨＴＭＬにＤＯＭ追加済みの次のページの帳票を読み込むためのＵＲＬをウェブブラウザ４００が読み込み帳票を表示する。例えば、帳票２（図１３－（ａ））の帳票表示時に操作判断部４０１が右スワイプ操作を受けた場合、帳票３（図１３－（ｂ））の帳票を表示するという動作となる。すなわち、先読みによってダウンロード済みのページを表示する。

Ｓ１１０４において、制御部４０２はページ管理部４０４に保持している表示中のページ番号を取得する。制御部４０２はページ管理部４０４に保持している出力ページ情報から表示中のページの後ろのページのページブロック８０２を取得することで先読みする帳票が存在するか判断する。後ページのページブロック８０２が取得できた場合、先読みする帳票が存在すると判断しＳ１０５へ進む。先読みするページがない場合はＳ１１０６へ進む。

Ｓ１１０５において、制御部４０２はＳ１１０４で取得したページブロック８０２から帳票のファイル名８０６を取得する。制御部４０２は、取得したファイル名を基に表示切替により表示された現在のページを基準とし、次の先読み対象となる帳票を取得部４０３を介してＷｅｂサーバ１０１から取得する。

Ｓ１１０６において、制御部４０２はＳ１１０５で取得した帳票をＷｅｂ帳票閲覧画面のＨＴＭＬにＤＯＭ（Ｄｏｃｕｍｅｎｔ Ｏｂｊｅｃｔ Ｍｏｄｅｌ）追加する。図１３－（ｃ）のように帳票４が追加された状態となる。

Ｓ１１０７において、制御部４０２はページ遷移方向の反対側にある帳票をＷｅｂ帳票閲覧画面のＨＴＭＬから削除するため、ＤＯＭ削除を行う。図１２－（ｂ）は、ＨＴＭＬから対象のＤＯＭを削除するためのＪａｖａＳｃｒｉｐｔである。帳票をＤＯＭから削除することでウェブブラウザのキャッシュ領域から帳票が解放され、メモリ容量を削減することができる。図１３－（ｄ）のように帳票１が削除され、表示ページと表示ページの前後１ページ分の帳票が読み込まれた状態となる。なお、本フローには終了に関する処理はなく、ウェブブラウザ４００が終了した時点でワークメモリから解放され、それと同時に処理が終了する。

実施例１では、表示対象の帳票をダウンロードしまず表示を行う。帳票の表示と並行して、遷移先の帳票の中で必要な帳票をバックグラウンドで取得しＨＴＭＬへ追加していくことで、表示対象の帳票が大量にあってもユーザは操作性を損なうことなく帳票を閲覧することが可能である。

帳票はもともと印刷用に設計されたフォームから生成されることが多い。例えば、生命保険会社が顧客への保険プラン説明用に作成する保険帳票はＡ３サイズであることが多く、Ａ３用紙に印刷したうえで顧客へ説明するのが前提の構成となっている。文字フォントのサイズはその前提で設計されるため、例えば９ポイント等小さいケースが多い。

このような帳票をスマートフォンやタブレットＰＣ（パーソナルコンピュータ）に代表されるタッチデバイスのモバイル向けブラウザ上閲覧すると文字等が非常に小さく見づらくなってしまう。そのような帳票をタブレットデバイスで閲覧する際には、ユーザのピンチ操作により該帳票を都度拡大表示する必要があり、ユーザ操作の手間がかかる。

そこで、課題を解決する機能としてＷｅｂ帳票閲覧画面にフォーカス機能を用意することを本実施例では考えた。ここで、フォーカス機能について図１４を用いて説明する。フォーカス機能とはフォームに関連させ帳票部品としてフォーカス領域１４０１、１４０２（図１４－（ａ））を作成および保持する。そしてＷｅｂ帳票閲覧画面で帳票閲覧時に前記フォーカス領域情報に基づいて、表示画面内に特定領域を拡大表示する（図１４－（ｂ））。これにより、既存の印刷目的で設計された帳票であっても、Ｗｅｂページ上で閲覧する際の視認性が向上する。

また、フォーカス状態の時（図１４－（ｂ））に帳票切り替え操作を行うと次のフォーカス領域（図１４－（ｃ））へ遷移することができる。２つのフォーカス領域の間にページが存在したとしても、そのページは表示されないことになる。これにより閲覧個所の移動に際して、拡大縮小操作を都度行う必要がなくなるため全体感を見失うことなく帳票を閲覧することが可能となる。

実施例２では、このようなフォーカス機能を利用し、フォーカス状態となった際の帳票表示の処理について説明する。実施例２は実施例１と異なる部分のみ説明するものとし、説明を省略した部分については実施例１と同様である。

図１５は、実施例２におけるＷｅｂサーバ１０１で動作するソフトウェアモジュールの構成例を示す図である。データベース１５０１は、帳票部品情報１６０１を格納するデータベースである。データベース３０５は、関連データを格納するデータベースであって、帳票名、所有者、帳票部品情報など帳票に関連する情報を表すデータである。帳票部品情報１６０１の詳細は図１６を用いて説明する。

実施例２では、帳票部品情報１６０１は、ＪＳＯＮファイルである。１６０２は、帳票部品情報が適用されるフォームの名前である。１６０３は、フェースが複数ある場合に、各フェースに対する帳票部品を保持するためのブロックである。ブロックの先頭にはフェース名が記載される（Ｆａｃｅ１、Ｆａｃｅ２等）。１６０４は、フェースに定義された複数の帳票部品のリストを保持する要素（ｐａｒｔｓ要素）である。Ｆａｃｅ１、Ｆａｃｅ２それぞれに１つだけ帳票部品であるフォーカスが設定されている。１６０５は、帳票部品の種類で、ｆｏｃｕｓ（フォーカス領域）といった文字列となっている。１６０６は、帳票部品の外接句形情報である。左上の原点と幅・高さの情報である。１６０７は、ｏｒｄｅｒ情報で同一フェース１６０３に複数のフォーカス設定がされている場合のフォーカス遷移順を保持する。

図１７は、実施例２におけるＷｅｂ帳票閲覧画面を作成する処理のシーケンスを示す図である。基本的には図５と同じであるため異なる部分のみ説明する。Ｓ１７０１において、制御部４０２は表示されたＷｅｂ帳票閲覧画面の帳票がどのフォームから生成されたのか、出力ページ情報８０１からページ番号８０３をキーに対象のフォーム名８０４を特定する。

Ｓ１７０２において、制御部４０２はＷｅｂサーバ１０１へ取得部４０３を介してフォーム名を指定し帳票部品情報取得リクエストを行う。Ｓ１７０３において、Ｗｅｂサーバ１０１は受信したリクエストに含まれるフォーム名を基にデータアクセス部３０４を介してリクエスト対象の帳票部品情報をデータベース１５０１から取得する。Ｓ１７０４において、Ｗｅｂサーバ１０１はＳ１７０３で取得した帳票部品情報をレスポンスとしてクライアント装置１０２へ返す。

Ｓ１７０５において、制御部４０２はページ管理部４０４から現在表示中のページの帳票情報からフェース名８０５を取得する。帳票部品情報１６０１から取得したフェース名を基にフェースに設定されている帳票の部品の一覧を取得する。具体的には、Ｓ１７０４で取得した帳票部品情報１６０１内を検索し、現在のフェース名８０５に一致する帳票部品情報１６０１の帳票部品のブロック１６０３を見つける。例えば、Ｆａｃｅ２から生成された帳票を表示している場合には、帳票部品情報の”Ｆａｃｅ２”のブロックを見つけ出し、帳票部品種類１６０５がｆｏｃｕｓと設定されている２つの帳票部品要素１６０４を特定する。取得した帳票部品情報はページ管理部４０４で保持する。

Ｓ１７０６において、制御部４０２はＳ１７０５で特定した帳票部品要素１６０４の設定を反映する。Ｓ１７０５で取得した帳票の部品要素１６０４から帳票部品の種類１６０５を特定し、外接矩形情報１６０６で設定されたサイズで帳票部品情報を反映する。帳票部品に指定された領域でダブルタップが行われた場合はフォーカス状態に遷移し、帳票部品に指定された領域を拡大表示する。フォーカス状態でスワイプ操作が行われると次に設定されているフォーカス領域へ遷移する。フォーカス状態での左スワイプは、次のフォーカス領域への画面切替え操作となり、右スワイプは前のフォーカス領域への画面切り替え操作となる。フォーカス状態でダブルタップが行われた場合フォーカス領域を縮小し通常状態へ遷移する。

図１８は、ダブルタップ操作によってフォーカス状態への表示の切り替えを指示されたときのＷｅｂ帳票閲覧画面の処理の流れを示したフローチャートである。図１１と異なる部分のみ説明する。Ｓ１８０１において、表示状態が通常の状態であるかフォーカス状態であるか判断する。フォーカス状態である場合はＳ１８０２へ進み、通常状態である場合はＳ１１０４へ進む。

Ｓ１８０２において、制御部４０２はページ管理部４０４の帳票情報から、フォーカス状態において先読みする帳票が存在するか否かを判断する。先読みする帳票が存在する場合はＳ１１０５へ進む。先頭ページや最終ページなど、先読みするページがない場合はＳ１１０７へ進む。

Ｓ１８０３において、ユーザによるジェスチャ操作を受け、操作判断部４０１で判断された入力操作情報がフォーカス状態の切り替え操作であるか判断する。フォーカス状態切り替えのジェスチャ操作の場合はＳ１８０２へ進み、フォーカス状態切り替え以外の操作情報が来た場合はＳ１１０１へ戻る。Ｓ１８０４において、フォーカス状態の切り替え操作が通常状態からフォーカス状態への遷移かフォーカス状態から通常状態への遷移か判断する。通常状態からフォーカス状態への遷移である場合はＳ１８０２へ進み、フォーカス状態から通常状態への遷移である場合はＳ１１０４へ進む。

図１９を用いてＳ１８０２でＹｅｓと判断された際のＳ１１０５～Ｓ１１０７の具体的な処理について、帳票１、帳票２、帳票４にフォーカスの設定がされている４枚の帳票（図１９－（ａ））を例に補足する。帳票２を通常状態で表示（図１９－（ｂ））している際にフォーカス状態切り替えのジェスチャ操作を受け取るとＳ１８０２において、制御部４０２はページ管理部４０４が保持する帳票部品情報から表示中のページの前後でフォーカス設定がされた帳票のフェース情報を取得する。制御部４０２は、出力ページ情報８０１から表示中のページのフェース名８０５を取得し、帳票部品情報１６０１から表示中のフェースの部品情報を取得し前後のフォーカス設定があるか確認する。制御部４０２は、前後のフォーカス設定がない場合は出力ページ情報８０１から表示ページの前後のページのフェース名８０５を取得し、同様に帳票部品情報１６０１からフォーカス設定があるか確認し、前後のフォーカス設定が見つかるまでこれを繰り返す。図１９－（ａ）において、帳票２のフォーカス設定の前後では帳票１と帳票４にフォーカス設定が存在する。帳票４は先読みされていないため、先読みする帳票が存在すると判断される。

Ｓ１１０５において、制御部４０２はページ管理部４０４の帳票情報を参照して先読み対象の帳票を、取得部４０３を介してＷｅｂサーバ１０１から取得する。Ｓ１１０６において、制御部４０２はＳ１１０５で取得した帳票をＷｅｂ帳票閲覧画面のＨＴＭＬにＤＯＭ（Ｄｏｃｕｍｅｎｔ Ｏｂｊｅｃｔ Ｍｏｄｅｌ）追加する。図１９－（ｃ）のように帳票４が追加された状態となる。

Ｓ１１０７において、制御部４０２は先読み対象でなくなった帳票をＷｅｂ帳票画面のＨＴＭＬからＤＯＭ削除を行う。帳票をＤＯＭから削除することで先読みのためにロードされた帳票がメモリから解放される。図１９－（ｃ）において、フォーカス状態で表示中のページである帳票２の次の遷移先のページは帳票４となるため帳票３を削除すると判断される。図１９－（ｄ）のように帳票３が削除され、表示ページとフォーカス設定がされた表示ページの前後１ページ分の帳票が読み込まれた状態となる。

実施例２により、フォーカス状態におけるウェブブラウザの帳票表示で、ユーザの操作性を損なくことなく帳票を閲覧することが可能になる。

〔その他の実施例〕
本発明は、以下の処理を実行することによっても実現される。即ち、上述した実施例の機能を実現するソフトウェア（プログラム）を、ネットワーク又は各種記憶媒体を介してシステム或いは装置に供給し、そのシステム或いは装置のコンピュータ（またはＣＰＵやＭＰＵ等）がプログラムを読み出して実行する処理である。

１０１ Ｗｅｂサーバ
１０２ クライアント装置
４００ ウェブブラウザ

Claims (11)

1. ページ単位でデータを生成するサーバと通信可能なクライアント装置であって、
   前記データをウェブブラウザ上に表示するため、画面のリクエストを送信する送信手段と、
   前記リクエストの応答としてＨＴＭＬと前記ウェブブラウザ上で動作するプログラムを受信する受信手段と、
   前記プログラムを動作させることにより、前記ウェブブラウザで表示しているページを基準に規定のページ数分の前記データをダウンロードし保存し、ダウンロードした前記データを参照するＵＲＬを前記ＨＴＭＬに追加する追加手段と、を有し、
   前記ウェブブラウザは、前記ＵＲＬが追加された前記ＨＴＭＬを読み込み前記画面の表示を制御することを特徴とするクライアント装置。
2. 前記プログラムを動作させることにより、前記ＨＴＭＬ及び前記プログラムとは異なる出力ページ情報を受信する第２の受信手段と、を更に有し、
   前記追加手段は、前記第２の受信手段によって受信した前記出力ページ情報に記載されたページに対応する前記データの情報を参照し、前記規定のページ数分の前記データをダウンロードすることを特徴とする請求項１に記載のクライアント装置。
3. 前記出力ページ情報は、前記サーバによりページ単位に前記データが生成される毎に前記第２の受信手段によって更新され、前記第２の受信手段は、前記出力ページ情報にすべてのページに対応する前記データが記載されるまで前記出力ページ情報の受信を行うことを特徴とする請求項２に記載のクライアント装置。
4. ユーザから次のページへとページを切り替える操作を受け付けたことに応じて、前記ウェブブラウザで表示しているページの後ろのページであってダウンロード済みのページのデータを前記ウェブブラウザが表示する際、前記追加手段は新たなページの前記データをダウンロードし保存し、ダウンロードした前記データを参照するＵＲＬを前記ＨＴＭＬに追加することを特徴とする請求項１乃至３の何れか１項に記載のクライアント装置。
5. フォーカス状態においてユーザから次のページへとページを切り替える操作を受け付けたことに応じて、前記ウェブブラウザで表示しているページの後ろのページであってダウンロード済みのページのデータを前記ウェブブラウザが表示する際、フォーカスの指定がなされているページの前記データをダウンロードし保存し、ダウンロードした前記データを参照するＵＲＬを前記ＨＴＭＬに追加することを特徴とする請求項１乃至４の何れか１項に記載のクライアント装置。
6. 前記追加手段により新たなページの前記データを参照するＵＲＬが前記ＨＴＭＬに追加される際に、ユーザから受け付けたページの切り替え操作により遷移する方向とは逆の方向のページの前記データを参照するＵＲＬを前記ＨＴＭＬから削除する削除手段を有する請求項４または５に記載のクライアント装置。
7. 前記データは帳票であり、前記サーバはフォームとフィールドデータをオーバレイすることにより帳票を生成し、前記ウェブブラウザは前記画面にて帳票を表示することを特徴とする請求項１乃至６の何れか１項に記載のクライアント装置。
8. 前記プログラムとはＪａｖａＳｃｒｉｐｔ（登録商標）であることを特徴とする請求項１乃至７の何れか１項に記載のクライアント装置。
9. ページ単位でデータを生成するサーバと通信可能なクライアント装置で実行される方法あって、
   送信手段は、前記データをウェブブラウザ上に表示するため、画面のリクエストを送信し、
   受信手段は、前記リクエストの応答としてＨＴＭＬと前記ウェブブラウザ上で動作するプログラムを受信し、
   追加手段は、前記プログラムを動作させることにより、前記ウェブブラウザで表示しているページを基準に規定のページ数分の前記データをダウンロードし保存し、ダウンロードした前記データを参照するＵＲＬを前記ＨＴＭＬに追加し、
   前記ウェブブラウザは、前記ＵＲＬが追加された前記ＨＴＭＬを読み込み前記画面の表示を制御することを特徴とする方法。
10. 請求項９に記載の方法をクライアント装置に実行させるためのプログラム。
11. ウェブブラウザを有するクライアント装置によって実行されるプログラム及び所定の記憶領域に記憶されるデータの表示に用いるＨＴＭＬを、前記クライアント装置に供給するサーバであって、
    前記クライアント装置の前記ウェブブラウザからの要求に従って、前記ＨＴＭＬと前記プログラムを前記クライアント装置に供給する供給手段を有し、
    前記ＨＴＭＬと前記プログラムが前記クライアント装置に供給された後、前記プログラムは、
    前記ＨＴＭＬに基づき前記ウェブブラウザで表示しているページを基準に規定のページ数分の前記データをダウンロードし保存し、ダウンロードした前記データを参照するＵＲＬを前記ＨＴＭＬに追加する追加処理を前記ウェブブラウザに引き起こさせ、
    前記ＵＲＬが追加された前記ＨＴＭＬが前記ウェブブラウザに読み込まれることで前記ダウンロードした前記データを含む画面の表示が引き起こることを特徴とするサーバ。

Images