情報表示システム、サーバ装置、クライアント装置及びプログラム
【課題】コンポーネントの選択表現に要する時間を短縮化することのできる技術を提供する。
【解決手段】サーバ装置２において、蓄積部２１は、複数のコンポーネントの情報を記述する第１のファイルと、クライアント装置３において、複数のコンポーネントの中から所定のコンポーネントを選択した場合には、第１のファイルに記述されている複数のコンポーネントの表示色とは異なる表示色で選択された第１のコンポーネントの内容を含む第２のコンポーネントを生成する処理、及び第２のコンポーネントを第１のコンポーネントと重ねて表示させる処理を実行するプログラムとを互いに関連付けて蓄積する。提供部２２は、クライアント装置３から第１のファイルに記述された複数のコンポーネントをクライアント装置３に表示させる旨の要求を受け付けた場合には、蓄積部２１から第１のファイル及びプログラムを読み出して、クライアント装置３に提供する。
【解決手段】サーバ装置２において、蓄積部２１は、複数のコンポーネントの情報を記述する第１のファイルと、クライアント装置３において、複数のコンポーネントの中から所定のコンポーネントを選択した場合には、第１のファイルに記述されている複数のコンポーネントの表示色とは異なる表示色で選択された第１のコンポーネントの内容を含む第２のコンポーネントを生成する処理、及び第２のコンポーネントを第１のコンポーネントと重ねて表示させる処理を実行するプログラムとを互いに関連付けて蓄積する。提供部２２は、クライアント装置３から第１のファイルに記述された複数のコンポーネントをクライアント装置３に表示させる旨の要求を受け付けた場合には、蓄積部２１から第１のファイル及びプログラムを読み出して、クライアント装置３に提供する。
【発明の詳細な説明】
【技術分野】
【０００１】
本発明は、サーバ装置上のソースに記述されているコンポーネントを、サーバ装置とネットワークを介して接続されたクライアント装置において表示する技術に関する。
【背景技術】
【０００２】
クライアント装置が、ネットワークを介してサーバ装置にアクセスしてサーバ装置上に置かれたウェブコンポーネントをディスプレイ等の表示装置に表示するときに、クライアント装置において、表示されている複数のウェブコンポーネントの中から所定のウェブコンポーネントを選択すると、選択したウェブコンポーネントについては表示色を変更させる表現方法が従来から一般的に用いられてきている。
【０００３】
例えばＨＴＭＬ（Hyper Text Markup Language）形式で記述されたウェブページにテーブルが設けられている場合に、テーブルの中から所定の行をポインティングデバイス等の入力手段により選択すると、クリックした行を選択したことをディスプレイ上に表現するために、該当行の背景色を変更する等の処理を実行する。従来技術においては、該当行のプロパティを変更することにより、選択行の表示色を変更させる手法が一般的である。
【０００４】
ディスプレイ等に表示しているデータの視認性を向上させるための公知の技術としては、例えば、選択されたオブジェクトを強調してビジュアル表示する技術が提供されている（例えば、特許文献１）。あるいは、ウェブブラウザ上の文書の一部または全部が選択されたときに、選択部分の文書中における位置情報等の注目情報を文書に付加しておき、ウェブブラウザに文書を表示させるときには、サーバから得られた注目情報等にしたがって強調表示し、重畳表示する技術が提供されている（例えば、特許文献２）。
【先行技術文献】
【特許文献】
【０００５】
【特許文献１】特開平９−２４４８４８号公報
【特許文献２】特開２００８−３９７３号公報
【発明の概要】
【発明が解決しようとする課題】
【０００６】
従来技術による表示方法によれば、ユーザの選択した行のプロパティを書き換えると、テーブル全体を再描画する必要がある。これを例えば数千行を超える大規模なテーブルに適用すると、テーブル全体の再描画には非常に時間がかかってしまうため、実用的ではなくなってしまっていた。
【０００７】
このような問題を回避するための方策の一つとして、チェックボックスを用いてテーブルの選択状態を表現する案が考えられる。しかし、チェックボックスを設置するためには、画面レイアウトの変更が必要となるため、ウェブページの製作者にとっては、余分な作業が発生することとなる。
【０００８】
あるいは、他の方策として、１つのテーブルを分割し、次ページ、前ページ等のリンクを設置する案も考えられる。しかし、この場合も上記案と同様に、リンク設置に伴う画面レイアウトの変更が必要となる。更に、テーブルを分割することにより、ウェブページの閲覧者にとっては、テーブル全体を俯瞰して操作することができなくなる上に、表示するページを切り替えるために余分な操作が必要となり、操作性が低下してしまう。
【０００９】
製作者や閲覧者にとっては煩雑な作業や操作を要することなく、テーブル等のコンポーネントのうち、選択されたコンポーネントを表現するための処理時間を短縮化できることが望ましい。
【００１０】
本発明は、コンポーネントの選択表現に要する時間を短縮化することのできる技術を提供することを目的とする。
【課題を解決するための手段】
【００１１】
上記課題を解決するために、本発明は、ネットワークを介して相互に接続されたサーバ装置とクライアント装置とを有する情報表示システムであって、前記サーバ装置は、複数のコンポーネントの情報を記述する第１のファイルと、前記クライアント装置において、該複数のコンポーネントの中から所定のコンポーネントを選択した場合には、該第１のファイルに記述されている前記複数のコンポーネントの表示色とは異なる表示色で該選択された第１のコンポーネントの内容を含む第２のコンポーネントを生成する処理、及び該第２のコンポーネントを該第１のコンポーネントと重ねて表示させる処理を実行するプログラムとを互いに関連付けて蓄積する蓄積部と、前記クライアント装置から前記第１のファイルに記述された前記複数のコンポーネントを該クライアント装置に表示させる旨の要求を受け付けた場合には、前記蓄積部から前記第１のファイル及び前記プログラムを読み出して、該クライアント装置に提供する提供部とを備え、前記クライアント装置は、前記第１のファイルを指定して前記サーバ装置に提供を要求する指定部と、前記提供部より提供される前記第１のファイルを表示する第１の出力部と、前記第１の出力部により表示された前記複数のコンポーネントの中から前記第１のコンポーネントを選択する選択部と、前記複数のコンポーネントの表示色とは異なる表示色で前記第１のコンポーネントの内容を含む第２のコンポーネントを生成する生成部と、前記第２のコンポーネントを前記第１のコンポーネントと重ねて表示する第２の出力部とを備える構成とする。
【発明の効果】
【００１２】
本発明によれば、コンポーネントの選択表現に要する時間を短縮化することができる。
【図面の簡単な説明】
【００１３】
【図１】実施形態に係る情報表示システムの構成図である。
【図２】実施形態に係る情報表示システムの機能ブロック図である。
【図３】テーブルの状態を説明する図である。
【図４】ファイルの構造を示す図である。
【図５】テーブルを表示する全体処理を示したフローチャートである。
【図６】テーブル選択処理の詳細を示したフローチャートである。
【図７】テーブル選択解除処理の詳細を示したフローチャートである。
【発明を実施するための形態】
【００１４】
以下、本発明の実施の形態について、図面を参照して詳細に説明する。
図１は、本実施形態に係る情報表示システムの構成図である。本実施形態に係る情報表示システム１は、サーバ装置２とクライアント装置３とがネットワークを介して相互に接続されている。以下の説明においては、図１に示すとおり、サーバ装置２とクライアント装置３とがインターネット１０を介して接続され、ＨＴＴＰ（Hypertext Transfer Protocol）通信を行う場合を例に説明する。
【００１５】
サーバ装置２は、ウェブサーバより構成され、ＨＴＭＬ形式で記述されたソースコードや、Ｊａｖａ（登録商標）Ｓｃｒｉｐｔにより記述されたソースコード等を保有する。クライアント装置３は、サーバ装置２との間でＨＴＴＰ通信を行って、ウェブブラウザを介してＨＴＭＬやＪａｖａＳｃｒｉｐｔを利用して記述されたウェブページを閲覧またはダウンロードする。
【００１６】
ＨＴＭＬ形式で記述されたソースコードには、ＨＴＭＬコンポーネントが記述されているものとする。本実施形態に係る情報表示システム１によれば、クライアント装置３において、ディスプレイに表示されている複数のＨＴＭＬコンポーネントの中から１つをポインティングデバイス等の入力手段を用いて選択した場合には、選択されたＨＴＭＬコンポーネントの表示色を変更することにより、そのＨＴＭＬコンポーネントが選択されたことを、ディスプレイ上で表現する。このとき、表示されているＨＴＭＬコンポーネントのうち、選択されたＨＴＭＬコンポーネントと同内容で異なる表示色のコンポーネントを生成して、選択されたコンポーネントの位置に重ねて出力表示させる。
【００１７】
以下においては、ＨＴＭＬコンポーネントの１つとして、テーブルを例に挙げ、テーブルの所定の行を選択した場合に選択行をディスプレイ上に表現する方法について説明する。
【００１８】
図２は、本実施形態に係る情報表示システム１の機能ブロック図である。図２に示すとおり、サーバ装置２は、蓄積部２１及び提供部２２を有し、クライアント装置３は、指定部３１、第１の出力部３２、選択部３３、カーソルテーブル生成部３４及び第２の出力部３５を有する。
【００１９】
クライアント装置３は、表示装置としてディスプレイ４を備える。クライアント装置３のディスプレイ４に表示されるテーブルのうち、所定の行をユーザがディスプレイを通じて選択した場合における動作を説明するため、図２においては、ディスプレイ４を別個の構成として示し、情報の入出力を示している。
【００２０】
サーバ装置２の蓄積部２１は、ＨＴＭＬソースコードやＪａｖａＳｃｒｉｐｔソースコードの記述されたファイルを蓄積する。ファイルには、ディスプレイ４に表示するテーブルについての記述に加えて、カーソルテーブルについての記述がなされているが、ファイルの内容の詳細については、後述する。提供部２２は、クライアント装置３からの要求に応じて、インターネット１０を介して蓄積部２１に蓄積されているファイルをクライアント装置３のウェブブラウザを通じて閲覧やダウンロードさせる。
【００２１】
クライアント装置３の指定部３１は、閲覧やダウンロードしようとするファイルを指定して、サーバ装置２に閲覧やダウンロードを要求する。第１の出力部３２は、サーバ装置２の提供部２２が提供するファイルをディスプレイ４に表示する。
【００２２】
選択部３３は、ユーザがポインティングデバイス等を用いてディスプレイ４を介して行った操作を認識し、例えば、ディスプレイ４に表示されるテーブルの中からある行を指定した場合には、指定した行を選択する。カーソルテーブル生成部３４は、第１の出力部３２により出力しているテーブルの表示色とは異なる表示色で、選択された行（選択行）を記述するカーソルテーブルの生成に係わる処理を実行する。なお、実施例では、ディスプレイ４に表示しているテーブルの中から「行」を選択する場合について説明している。これに応じて、カーソル生成部３４において生成するカーソルテーブルについても、１行からなるテーブルとして説明をしている。
【００２３】
第２の出力部３５は、カーソルテーブル生成部３４において生成したカーソルテーブルを、第１の出力部３２が表示しているテーブルの選択行に重ねて表示する。
このように、本実施形態に係る情報表示システム１によれば、サーバ装置２に蓄積されているＨＴＭＬファイルには、テーブルについての記述に加えてカーソルテーブルについて記述されている。テーブルの所定の行が選択された場合には、カーソルテーブルについての記述により、その行と同じ内容で異なる表示色からなるカーソルテーブルを生成し、生成したカーソルテーブルをクライアント装置２のディスプレイ４に表示させる。選択行をディスプレイ４上で表現するためには、選択行の表示色を変更し、テーブル全体を再描画させる処理を実行させる必要がなく、カーソルテーブルの生成処理のみで足りる。
【００２４】
図３は、テーブルの状態を説明する図である。このうち、図３（ａ）は、選択がされていない状態のテーブルを示し、図３（ｂ）は、生成されるカーソルテーブルを示し、図３（ｃ）は、行が選択された状態のテーブルを示す。
【００２５】
まず、初期状態においては、ディスプレイ４には、図３（ａ）に示すテーブルＴ１が表示される。テーブルＴ１は、ＨＴＭＬ形式で記述され、ファイル中には、ＪａｖａＳｃｒｉｐｔにより、カーソルテーブルについて記述されている。初期状態においてはテーブルＴ１のうちいずれの行も選択されておらず、したがって、カーソルテーブルＴ２については、内容の記述は「なし」の状態である。ファイルの詳細については図４を参照して説明する。
【００２６】
テーブルＴ１のうち、上から５行目（コード：０２００５）が選択されたとする。この場合、カーソルテーブルＴ２には、コード・０２００５の行の内容がコピーされる。カーソルテーブルＴ２にテーブルＴ１の選択行の内容がコピーされた状態を図３（ｂ）に示す。
【００２７】
生成したカーソルテーブルＴ２は、テーブルＴ１のうち、選択行である５行目の位置に重ねて表示する。カーソルテーブルＴ２をテーブルＴ１上に重ねて表示した状態を図３（ｃ）に示す。
【００２８】
図３（ｃ）に示すとおり、テーブルＴ１に重ねて表示するカーソルテーブルＴ２は、内容は選択行と同内容であり、背景色はテーブルＴ１の背景色と異なる色が設定されている。これにより、クライアント装置３のユーザがポインティングデバイス等によりテーブルＴ１上の行を選択したことを、ディスプレイ４上に表現している。
【００２９】
なお、図３（ａ）のテーブルＴ１中のＬ、Ｈ、Ｗ及びｉｎｄｅｘは、カーソルテーブルＴ２の表示位置を特定するために使用する。詳しくは後述する。
上記のテーブルＴ１及びカーソルテーブルＴ２の表示方法は、サーバ装置２において保有するファイルにＨＴＭＬソースコードやＪａｖａＳｃｒｉｐｔソースコードにより記述されている。次に、ファイルの構造について説明する。
【００３０】
図４は、ファイルの構造を示す図である。ここでは、ＨＴＭＬで記述されたソースコードのうち、テーブルに係わる箇所のデータ構造のみを示す。
図４に示すとおり、ＨＴＭＬタグ中にＤＩＶタグ等が記述され、ＤＩＶタグ内にテーブルＴ１及びカーソルテーブルＴ２について記述される。テーブルＴ１の行のうち、クライアント装置３において選択された行を示す選択位置やその行数を示す値には、初期設定では「ＮＵＬＬ」を設定する（図４の※１）。
【００３１】
ＤＩＶタグ内には、まず、テーブルＴ１を記述するＴＡＢＬＥタグを記述し、続けて、カーソルテーブルＴ２を記述するＴＡＢＬＥタグを記述する。
テーブルＴ１を記述するＴＡＢＬＥタグ内には、テーブルＴ１の文字色・背景色の定義「ｃｏｌｏｒ」及び「ｂｇｃｏｌｏｒ」や、テーブルＴ１の行ごとのＴＲタグが記述される（図４の※２）。ＴＲタグ内には、行の上から数えた行数「ｉｎｄｅｘ」や、高さや幅の描画サイズ「ｏｆｆｓｅｔＨｅｉｇｈｔ」「ｏｆｆｓｅｔＷｉｄｔｈ」、テーブル外枠左端からのオフセット位置を示す「ｏｆｆｓｅｔＬｅｆｔ」、行の中身である「ｉｎｎｅｒＨＴＭＬ」が記述されている。ＴＲタグにより記述される行にセルを含む場合は、セルごとにＴＤタグが記述されている（図４の※３）が、ＴＤタグ内に記述される内容については、公知の技術であるので、詳細な説明は省略する。
【００３２】
カーソルテーブルＴ２を記述するＴＡＢＬＥタグ内には、カーソルテーブルＴ２の文字色・背景色の定義「ｃｏｌｏｒ」「ｂｇｃｏｌｏｒ」や、行の中身である「ｉｎｎｅｒＨＴＭＬ」（ａ）のほか、スタイルシート「ｓｔｙｌｅ」に、カーソルテーブルＴ２の表示／非表示を表す「ｄｉｓｐｌａｙ」（ｂ）や、表示位置を指定する「ｔｏｐ」「ｌｅｆｔ」「ｈｅｉｇｈｔ」「ｗｉｄｔｈ」「ｐｏｓｉｔｉｏｎ」（ｃ）が記述される（図４のＤ２）。
【００３３】
カーソルテーブルＴ２の文字色及び背景色については、テーブルＴ１の文字色及び背景色と異なる色が設定される。図４においては、テーブルＴ１の文字色及び背景色はそれぞれｃｏｌｏｒ１及びｂｇｃｏｌｏｒ１とし、カーソルテーブルＴ２については、それぞれｃｏｌｏｒ２（≠ｃｏｌｏｒ１）及びｂｇｃｏｌｏｒ２（≠ｂｇｃｏｌｏｒ１）と定義する。
【００３４】
なお、初期状態においては、すなわち、テーブルＴ１のいずれの行も選択されていない状態においては、表示状態（ｂ）は「非表示」を表す「ｎｏｎｅ」が設定されている（図４の※４）。このため、初期状態においては、カーソルテーブルＴ２を記述するＴＡＢＬＥタグの内容Ｄ２はディスプレイ４には表示されない。
【００３５】
図４に示す構造のＨＴＭＬファイルに記述されたテーブルＴ１について、選択行の内容を含み、テーブルＴ１とは異なる文字色・背景色のカーソルテーブルＴ２を生成し、ディスプレイ４に表示する方法、及び選択が解除された場合にカーソルテーブルＴ２を非表示とする方法について、フローチャートを参照して以下に説明する。
【００３６】
図５は、本実施形態に係る情報表示システム１によるテーブルＴ１を表示する全体処理を示したフローチャートである。情報表示システム１のクライアント装置３は、サーバ装置２の提供部２２がクライアント装置３の指定部３１が要求するファイルをクライアント３装置に提供すると、図５に示す処理を開始する。
【００３７】
まず、ステップＳ１で、第１の出力部３２が、ウェブページをディスプレイ４に表示する。ウェブページの表示処理は、ウェブブラウザによる。
次に、ステップＳ２で、カーソルテーブル生成部３４は、ファイルの選択位置を初期化し、ステップＳ３で、カーソルテーブル生成部３４は、カーソルテーブルＴ２の表示状態「ｄｉｓｐｌａｙ」を初期化し、非表示とする。そして、ステップＳ４で、カーソルテーブル３４は、ＪａｖａＳｃｒｉｐｔ関数を設定する。具体的には、テーブルを選択した場合には、そのテーブル（の行）をクリックした場合のイベントについて記述したＪａｖａＳｃｒｉｐｔ命令を実行し、テーブルの選択を解除した場合には、カーソルテーブルＴ２をクリックした場合のイベントについて記述したＪａｖａＳｃｒｉｐｔ命令を実行するよう、ＪａｖａＳｃｒｉｐｔ関数の設定を行う。
【００３８】
ステップＳ５で、選択部３３は、クライアント装置３のユーザによる操作が、ウェブページを閉じる操作であるか否か、あるいはウェブページを更新する操作であるか否かを判定する。ウェブページを閉じる操作やウェブページを更新する操作を認識した場合には、処理を終了する。認識した操作が他の操作である場合（Ｎｏ）には、ステップＳ６に進む。
【００３９】
ステップＳ６で、選択部３３は、クライアント装置３のユーザによる操作が、テーブルＴ１（の行）をクリックする操作であるか否かを判定する。テーブルＴ１（の行）をクリックする操作を認識した場合（Ｙｅｓ）には、ステップＳ７に進み、カーソルテーブル生成部３４がテーブル選択処理を実行し、ステップＳ５に戻る。テーブル選択処理の詳細については、図６を参照して説明する。ステップＳ６において認識したユーザの操作が、テーブルＴ１（の行）をクリックする操作でない場合には、ステップＳ８に進む。
【００４０】
ステップＳ８で、選択部３３は、クライアント装置３のユーザによる操作が、カーソルテーブルＴ２をクリックする操作であるか否かを判定する。カーソルテーブルＴ２をクリックする操作を認識した場合（Ｙｅｓ）には、ステップＳ９に進み、カーソルテーブル生成部３４がテーブル選択解除処理を実行し、ステップＳ５に戻る。テーブル選択解除処理の詳細については、図７を参照して説明する。ステップＳ８において認識したユーザの操作が、カーソルテーブルＴ２をクリックする操作でない場合（Ｎｏ）には、特に処理を行わず、ステップＳ５に戻る。
【００４１】
図６は、図５のステップＳ７のテーブル選択処理の詳細を示したフローチャートである。図５のステップＳ７の説明において述べたとおり、選択部３３が、ユーザがテーブルＴ１（の行）をクリックする操作を認識すると、カーソルテーブル生成部３４が、図６に示す処理を開始する。
【００４２】
ステップＳ１１で、選択位置を設定する。具体的には、クリックされた行について記述するＴＲタグ内の、行番号を示す「ｉｎｄｅｘ」を、選択位置（図４の（＊））に設定する。
【００４３】
ステップＳ１２で、クリックされた行の内部要素をカーソルテーブルにコピーする。具体的には、クリックされた行について記述するＴＲタグ内の「ｉｎｎｅｒＨＴＭＬ」をカーソルテーブルについて記述するＴＡＢＬＥタグ内の「ｉｎｎｅｒＨＴＭＬ」（図４の（ａ））に代入する。
【００４４】
ステップＳ１３で、カーソルテーブルＴ２の表示位置を調整する。カーソルテーブルＴ２の表示位置は、テーブルＴ１のクリックされた行の位置に基づきカーソルテーブルＴ２の位置を算出することにより求める。実施例では、テーブルＴ１の外枠を基準とした場合のカーソルテーブルＴ２の上端の座標、テーブルＴ１の外枠を基準とした場合のカーソルテーブルＴ２の左端の座標、カーソルテーブルＴ２の幅及びカーソルテーブルＴ２の高さを算出する。具体的には、カーソルテーブルＴ２の上端の座標は、ステップＳ１で設定した「選択位置」にクリックされた行の高さ「ｏｆｆｓｅｔＨｅｉｇｈｔ」を掛けることにより求める。実施例においては、テーブルＴ１の行の高さｏｆｆｓｅｔＨｅｉｇｈｔは一律であり、図３（ａ）の「Ｈ」がこれに相当する。テーブルＴ１の１行目の行数「ｉｎｄｅｘ」は「０」としているため、この式によりカーソルテーブルＴ２の上端座標を算出することができる。カーソルテーブルＴ２の左端の座標は、クリックされた行のテーブルＴ１の左端からの位置「ｏｆｆｓｅｔＬｅｆｔ」を設定する。ｏｆｆｓｅｔＬｅｆｔは、図３（ａ）の「Ｌ」がこれに相当する。カーソルテーブルＴ２の幅は、クリックされた行の幅「ｏｆｆｓｅｔＷｉｄｔｈ」を設定する。ｏｆｆｓｅｔＷｉｄｔｈは、図３（ａ）の「Ｗ」がこれに相当する。カーソルテーブルＴ２の高さは、クリックされた行の高さ「ｏｆｆｓｅｔＨｅｉｇｈｔ」を設定する。ｏｆｆｓｅｔＨｅｉｇｈｔは、図３（ａ）の「Ｈ」がこれに相当する。
【００４５】
ステップＳ１４で、カーソルテーブルＴ２の表示状態を「表示」に切り替える。具体的には、カーソルテーブルＴ２について記述するＴＡＢＬＥタグ内の「ｄｉｓｐｌａｙ」に表示状態を表す「ｂｌｏｃｋ」を設定する。ステップＳ１４の処理により、ステップＳ１２でコピーした内容のカーソルテーブルＴ２が、ステップＳ１３で設定した位置に表示される。図３の「コード・０２００５」の行を例に挙げると、図３（ａ）の状態のテーブルＴ１に図３（ｂ）のカーソルテーブルＴ２が重ねて表示され、ディスプレイ４上では、図３（ｃ）の状態に表示が切り替わる。
【００４６】
ここで、図４の説明においても述べたとおり、カーソルテーブルＴ２の背景色及び文字色には、テーブルＴ１の背景色及び文字色とはそれぞれ異なる色が設定されている。また、カーソルテーブルＴ２の内容には、クリックにより選択した行の内容がコピーされている。このため、ディスプレイ４上には、カーソルテーブルＴ２の表示された位置が選択されたことが表現される。このような選択行の表現方法によれば、テーブルＴ１の所定の行の背景色や文字色を変更してテーブルＴ１全体を再描画する処理が不要となり、図６に示すカーソルテーブルＴ２の表示処理のみで足りる。したがって、選択行を表現するために要する時間を短縮化させることができる。
【００４７】
図７は、図５のステップＳ９のテーブル選択解除処理の詳細を示したフローチャートである。図５のステップＳ９の説明において述べたとおり、選択部３３が、ユーザがカーソルテーブルＴ２をクリックする操作を認識すると、すなわち、選択行を再度クリックする操作を認識すると、カーソルテーブル生成部３４が、図７に示す処理を開始する。
【００４８】
ステップＳ２１で、選択位置を初期化する。具体的には、選択位置（図４の（＊））に「ＮＵＬＬ」を設定する。
ステップＳ２２で、カーソルテーブルＴ２の表示状態を「非表示」に切り替える。具体的には、カーソルテーブルＴ２について記述するＴＡＢＬＥタグ内の「ｄｉｓｐｌａｙ」に、非表示状態を表す「ｎｏｎｅ」を設定する。ステップＳ２２の処理により、ディスプレイ４上に表示されていたカーソルテーブルＴ２が非表示となり、カーソルテーブルＴ２の表示されていた行の選択が解除されたことが表現される。図３の「コード・０２００５」の行を例に挙げると、図３（ｃ）の状態から図３（ｂ）のカーソルテーブルＴ２が非表示となることにより、ディスプレイ４上では、図３（ａ）の状態に表示が切り替わる。
【００４９】
以上説明したように、本実施形態に係る情報表示システム１によれば、クライアント装置３からの要求に応じてサーバ装置２がクライアント装置３に提供するファイルには、カーソルテーブルＴ２が用意されている。クライアント装置３において、ポインティングデバイス等によりテーブルＴ１の所定の行を選択した場合には、カーソルテーブルＴ２が、テーブルＴ１の文字色や背景色等の表示色とは異なる色で選択行の位置に選択行と同内容で表示される。予め用意されているカーソルテーブルＴ２に選択行の内容をコピーして、選択行の位置に基づきカーソルテーブルＴ２の表示位置を設定して表示させることで、テーブルＴ１の選択行の表示色を変更してテーブルＴ１全体を再描画させることが不要となり、表示時間を短縮化させることができる。
【００５０】
また、カーソルテーブルＴ２を用意する構成とすることで、ウェブページの製作者にとっては、ウェブページの画面レイアウトを変更する場合と比べて、より簡素な作業で済むこととなる。
【００５１】
更には、ウェブページを閲覧するクライアント装置３のユーザにとっては、従来と同様の方法でより早く選択行の表現がなされるウェブページの閲覧等が可能となり、操作性を低下させることがない。
【００５２】
なお、上記においては、テーブルの所定の行を選択する場合の表示方法を例に説明しているが、これに限るものではない。例えば、セルごとに選択セルを異なる表示色でディスプレイ４上に表示させるためのカーソルセルを用意しておき、セル単位で上記の方法を実施する構成とすることもできる。また、上記の表示方法は、テーブルの表示方法に限定されるものではなく、選択されたＨＴＭＬコンポーネントを他のＨＴＭＬコンポーネントを表示する方法にも適用が可能である。
【００５３】
更には、上記の方法は、ウェブに限定されるものではなく、ネットワークを介してサーバ装置とクライアント装置とが接続され、サーバ装置がクライアント装置からの要求に応じてファイルを提供し、クライアント装置のディスプレイにファイルに記述されているテーブル等のコンポーネントを表示させる場合の選択されたコンポーネントの表現方法にも適用が可能である。
【符号の説明】
【００５４】
１ 情報表示システム
２ サーバ装置
３ クライアント装置
４ ディスプレイ
１０ インターネット
２１ 蓄積部
２２ 提供部
３１ 指定部
３２ 第１の出力部
３３ 選択部
３４ カーソルテーブル生成部
３５ 第２の出力部
【技術分野】
【０００１】
本発明は、サーバ装置上のソースに記述されているコンポーネントを、サーバ装置とネットワークを介して接続されたクライアント装置において表示する技術に関する。
【背景技術】
【０００２】
クライアント装置が、ネットワークを介してサーバ装置にアクセスしてサーバ装置上に置かれたウェブコンポーネントをディスプレイ等の表示装置に表示するときに、クライアント装置において、表示されている複数のウェブコンポーネントの中から所定のウェブコンポーネントを選択すると、選択したウェブコンポーネントについては表示色を変更させる表現方法が従来から一般的に用いられてきている。
【０００３】
例えばＨＴＭＬ（Hyper Text Markup Language）形式で記述されたウェブページにテーブルが設けられている場合に、テーブルの中から所定の行をポインティングデバイス等の入力手段により選択すると、クリックした行を選択したことをディスプレイ上に表現するために、該当行の背景色を変更する等の処理を実行する。従来技術においては、該当行のプロパティを変更することにより、選択行の表示色を変更させる手法が一般的である。
【０００４】
ディスプレイ等に表示しているデータの視認性を向上させるための公知の技術としては、例えば、選択されたオブジェクトを強調してビジュアル表示する技術が提供されている（例えば、特許文献１）。あるいは、ウェブブラウザ上の文書の一部または全部が選択されたときに、選択部分の文書中における位置情報等の注目情報を文書に付加しておき、ウェブブラウザに文書を表示させるときには、サーバから得られた注目情報等にしたがって強調表示し、重畳表示する技術が提供されている（例えば、特許文献２）。
【先行技術文献】
【特許文献】
【０００５】
【特許文献１】特開平９−２４４８４８号公報
【特許文献２】特開２００８−３９７３号公報
【発明の概要】
【発明が解決しようとする課題】
【０００６】
従来技術による表示方法によれば、ユーザの選択した行のプロパティを書き換えると、テーブル全体を再描画する必要がある。これを例えば数千行を超える大規模なテーブルに適用すると、テーブル全体の再描画には非常に時間がかかってしまうため、実用的ではなくなってしまっていた。
【０００７】
このような問題を回避するための方策の一つとして、チェックボックスを用いてテーブルの選択状態を表現する案が考えられる。しかし、チェックボックスを設置するためには、画面レイアウトの変更が必要となるため、ウェブページの製作者にとっては、余分な作業が発生することとなる。
【０００８】
あるいは、他の方策として、１つのテーブルを分割し、次ページ、前ページ等のリンクを設置する案も考えられる。しかし、この場合も上記案と同様に、リンク設置に伴う画面レイアウトの変更が必要となる。更に、テーブルを分割することにより、ウェブページの閲覧者にとっては、テーブル全体を俯瞰して操作することができなくなる上に、表示するページを切り替えるために余分な操作が必要となり、操作性が低下してしまう。
【０００９】
製作者や閲覧者にとっては煩雑な作業や操作を要することなく、テーブル等のコンポーネントのうち、選択されたコンポーネントを表現するための処理時間を短縮化できることが望ましい。
【００１０】
本発明は、コンポーネントの選択表現に要する時間を短縮化することのできる技術を提供することを目的とする。
【課題を解決するための手段】
【００１１】
上記課題を解決するために、本発明は、ネットワークを介して相互に接続されたサーバ装置とクライアント装置とを有する情報表示システムであって、前記サーバ装置は、複数のコンポーネントの情報を記述する第１のファイルと、前記クライアント装置において、該複数のコンポーネントの中から所定のコンポーネントを選択した場合には、該第１のファイルに記述されている前記複数のコンポーネントの表示色とは異なる表示色で該選択された第１のコンポーネントの内容を含む第２のコンポーネントを生成する処理、及び該第２のコンポーネントを該第１のコンポーネントと重ねて表示させる処理を実行するプログラムとを互いに関連付けて蓄積する蓄積部と、前記クライアント装置から前記第１のファイルに記述された前記複数のコンポーネントを該クライアント装置に表示させる旨の要求を受け付けた場合には、前記蓄積部から前記第１のファイル及び前記プログラムを読み出して、該クライアント装置に提供する提供部とを備え、前記クライアント装置は、前記第１のファイルを指定して前記サーバ装置に提供を要求する指定部と、前記提供部より提供される前記第１のファイルを表示する第１の出力部と、前記第１の出力部により表示された前記複数のコンポーネントの中から前記第１のコンポーネントを選択する選択部と、前記複数のコンポーネントの表示色とは異なる表示色で前記第１のコンポーネントの内容を含む第２のコンポーネントを生成する生成部と、前記第２のコンポーネントを前記第１のコンポーネントと重ねて表示する第２の出力部とを備える構成とする。
【発明の効果】
【００１２】
本発明によれば、コンポーネントの選択表現に要する時間を短縮化することができる。
【図面の簡単な説明】
【００１３】
【図１】実施形態に係る情報表示システムの構成図である。
【図２】実施形態に係る情報表示システムの機能ブロック図である。
【図３】テーブルの状態を説明する図である。
【図４】ファイルの構造を示す図である。
【図５】テーブルを表示する全体処理を示したフローチャートである。
【図６】テーブル選択処理の詳細を示したフローチャートである。
【図７】テーブル選択解除処理の詳細を示したフローチャートである。
【発明を実施するための形態】
【００１４】
以下、本発明の実施の形態について、図面を参照して詳細に説明する。
図１は、本実施形態に係る情報表示システムの構成図である。本実施形態に係る情報表示システム１は、サーバ装置２とクライアント装置３とがネットワークを介して相互に接続されている。以下の説明においては、図１に示すとおり、サーバ装置２とクライアント装置３とがインターネット１０を介して接続され、ＨＴＴＰ（Hypertext Transfer Protocol）通信を行う場合を例に説明する。
【００１５】
サーバ装置２は、ウェブサーバより構成され、ＨＴＭＬ形式で記述されたソースコードや、Ｊａｖａ（登録商標）Ｓｃｒｉｐｔにより記述されたソースコード等を保有する。クライアント装置３は、サーバ装置２との間でＨＴＴＰ通信を行って、ウェブブラウザを介してＨＴＭＬやＪａｖａＳｃｒｉｐｔを利用して記述されたウェブページを閲覧またはダウンロードする。
【００１６】
ＨＴＭＬ形式で記述されたソースコードには、ＨＴＭＬコンポーネントが記述されているものとする。本実施形態に係る情報表示システム１によれば、クライアント装置３において、ディスプレイに表示されている複数のＨＴＭＬコンポーネントの中から１つをポインティングデバイス等の入力手段を用いて選択した場合には、選択されたＨＴＭＬコンポーネントの表示色を変更することにより、そのＨＴＭＬコンポーネントが選択されたことを、ディスプレイ上で表現する。このとき、表示されているＨＴＭＬコンポーネントのうち、選択されたＨＴＭＬコンポーネントと同内容で異なる表示色のコンポーネントを生成して、選択されたコンポーネントの位置に重ねて出力表示させる。
【００１７】
以下においては、ＨＴＭＬコンポーネントの１つとして、テーブルを例に挙げ、テーブルの所定の行を選択した場合に選択行をディスプレイ上に表現する方法について説明する。
【００１８】
図２は、本実施形態に係る情報表示システム１の機能ブロック図である。図２に示すとおり、サーバ装置２は、蓄積部２１及び提供部２２を有し、クライアント装置３は、指定部３１、第１の出力部３２、選択部３３、カーソルテーブル生成部３４及び第２の出力部３５を有する。
【００１９】
クライアント装置３は、表示装置としてディスプレイ４を備える。クライアント装置３のディスプレイ４に表示されるテーブルのうち、所定の行をユーザがディスプレイを通じて選択した場合における動作を説明するため、図２においては、ディスプレイ４を別個の構成として示し、情報の入出力を示している。
【００２０】
サーバ装置２の蓄積部２１は、ＨＴＭＬソースコードやＪａｖａＳｃｒｉｐｔソースコードの記述されたファイルを蓄積する。ファイルには、ディスプレイ４に表示するテーブルについての記述に加えて、カーソルテーブルについての記述がなされているが、ファイルの内容の詳細については、後述する。提供部２２は、クライアント装置３からの要求に応じて、インターネット１０を介して蓄積部２１に蓄積されているファイルをクライアント装置３のウェブブラウザを通じて閲覧やダウンロードさせる。
【００２１】
クライアント装置３の指定部３１は、閲覧やダウンロードしようとするファイルを指定して、サーバ装置２に閲覧やダウンロードを要求する。第１の出力部３２は、サーバ装置２の提供部２２が提供するファイルをディスプレイ４に表示する。
【００２２】
選択部３３は、ユーザがポインティングデバイス等を用いてディスプレイ４を介して行った操作を認識し、例えば、ディスプレイ４に表示されるテーブルの中からある行を指定した場合には、指定した行を選択する。カーソルテーブル生成部３４は、第１の出力部３２により出力しているテーブルの表示色とは異なる表示色で、選択された行（選択行）を記述するカーソルテーブルの生成に係わる処理を実行する。なお、実施例では、ディスプレイ４に表示しているテーブルの中から「行」を選択する場合について説明している。これに応じて、カーソル生成部３４において生成するカーソルテーブルについても、１行からなるテーブルとして説明をしている。
【００２３】
第２の出力部３５は、カーソルテーブル生成部３４において生成したカーソルテーブルを、第１の出力部３２が表示しているテーブルの選択行に重ねて表示する。
このように、本実施形態に係る情報表示システム１によれば、サーバ装置２に蓄積されているＨＴＭＬファイルには、テーブルについての記述に加えてカーソルテーブルについて記述されている。テーブルの所定の行が選択された場合には、カーソルテーブルについての記述により、その行と同じ内容で異なる表示色からなるカーソルテーブルを生成し、生成したカーソルテーブルをクライアント装置２のディスプレイ４に表示させる。選択行をディスプレイ４上で表現するためには、選択行の表示色を変更し、テーブル全体を再描画させる処理を実行させる必要がなく、カーソルテーブルの生成処理のみで足りる。
【００２４】
図３は、テーブルの状態を説明する図である。このうち、図３（ａ）は、選択がされていない状態のテーブルを示し、図３（ｂ）は、生成されるカーソルテーブルを示し、図３（ｃ）は、行が選択された状態のテーブルを示す。
【００２５】
まず、初期状態においては、ディスプレイ４には、図３（ａ）に示すテーブルＴ１が表示される。テーブルＴ１は、ＨＴＭＬ形式で記述され、ファイル中には、ＪａｖａＳｃｒｉｐｔにより、カーソルテーブルについて記述されている。初期状態においてはテーブルＴ１のうちいずれの行も選択されておらず、したがって、カーソルテーブルＴ２については、内容の記述は「なし」の状態である。ファイルの詳細については図４を参照して説明する。
【００２６】
テーブルＴ１のうち、上から５行目（コード：０２００５）が選択されたとする。この場合、カーソルテーブルＴ２には、コード・０２００５の行の内容がコピーされる。カーソルテーブルＴ２にテーブルＴ１の選択行の内容がコピーされた状態を図３（ｂ）に示す。
【００２７】
生成したカーソルテーブルＴ２は、テーブルＴ１のうち、選択行である５行目の位置に重ねて表示する。カーソルテーブルＴ２をテーブルＴ１上に重ねて表示した状態を図３（ｃ）に示す。
【００２８】
図３（ｃ）に示すとおり、テーブルＴ１に重ねて表示するカーソルテーブルＴ２は、内容は選択行と同内容であり、背景色はテーブルＴ１の背景色と異なる色が設定されている。これにより、クライアント装置３のユーザがポインティングデバイス等によりテーブルＴ１上の行を選択したことを、ディスプレイ４上に表現している。
【００２９】
なお、図３（ａ）のテーブルＴ１中のＬ、Ｈ、Ｗ及びｉｎｄｅｘは、カーソルテーブルＴ２の表示位置を特定するために使用する。詳しくは後述する。
上記のテーブルＴ１及びカーソルテーブルＴ２の表示方法は、サーバ装置２において保有するファイルにＨＴＭＬソースコードやＪａｖａＳｃｒｉｐｔソースコードにより記述されている。次に、ファイルの構造について説明する。
【００３０】
図４は、ファイルの構造を示す図である。ここでは、ＨＴＭＬで記述されたソースコードのうち、テーブルに係わる箇所のデータ構造のみを示す。
図４に示すとおり、ＨＴＭＬタグ中にＤＩＶタグ等が記述され、ＤＩＶタグ内にテーブルＴ１及びカーソルテーブルＴ２について記述される。テーブルＴ１の行のうち、クライアント装置３において選択された行を示す選択位置やその行数を示す値には、初期設定では「ＮＵＬＬ」を設定する（図４の※１）。
【００３１】
ＤＩＶタグ内には、まず、テーブルＴ１を記述するＴＡＢＬＥタグを記述し、続けて、カーソルテーブルＴ２を記述するＴＡＢＬＥタグを記述する。
テーブルＴ１を記述するＴＡＢＬＥタグ内には、テーブルＴ１の文字色・背景色の定義「ｃｏｌｏｒ」及び「ｂｇｃｏｌｏｒ」や、テーブルＴ１の行ごとのＴＲタグが記述される（図４の※２）。ＴＲタグ内には、行の上から数えた行数「ｉｎｄｅｘ」や、高さや幅の描画サイズ「ｏｆｆｓｅｔＨｅｉｇｈｔ」「ｏｆｆｓｅｔＷｉｄｔｈ」、テーブル外枠左端からのオフセット位置を示す「ｏｆｆｓｅｔＬｅｆｔ」、行の中身である「ｉｎｎｅｒＨＴＭＬ」が記述されている。ＴＲタグにより記述される行にセルを含む場合は、セルごとにＴＤタグが記述されている（図４の※３）が、ＴＤタグ内に記述される内容については、公知の技術であるので、詳細な説明は省略する。
【００３２】
カーソルテーブルＴ２を記述するＴＡＢＬＥタグ内には、カーソルテーブルＴ２の文字色・背景色の定義「ｃｏｌｏｒ」「ｂｇｃｏｌｏｒ」や、行の中身である「ｉｎｎｅｒＨＴＭＬ」（ａ）のほか、スタイルシート「ｓｔｙｌｅ」に、カーソルテーブルＴ２の表示／非表示を表す「ｄｉｓｐｌａｙ」（ｂ）や、表示位置を指定する「ｔｏｐ」「ｌｅｆｔ」「ｈｅｉｇｈｔ」「ｗｉｄｔｈ」「ｐｏｓｉｔｉｏｎ」（ｃ）が記述される（図４のＤ２）。
【００３３】
カーソルテーブルＴ２の文字色及び背景色については、テーブルＴ１の文字色及び背景色と異なる色が設定される。図４においては、テーブルＴ１の文字色及び背景色はそれぞれｃｏｌｏｒ１及びｂｇｃｏｌｏｒ１とし、カーソルテーブルＴ２については、それぞれｃｏｌｏｒ２（≠ｃｏｌｏｒ１）及びｂｇｃｏｌｏｒ２（≠ｂｇｃｏｌｏｒ１）と定義する。
【００３４】
なお、初期状態においては、すなわち、テーブルＴ１のいずれの行も選択されていない状態においては、表示状態（ｂ）は「非表示」を表す「ｎｏｎｅ」が設定されている（図４の※４）。このため、初期状態においては、カーソルテーブルＴ２を記述するＴＡＢＬＥタグの内容Ｄ２はディスプレイ４には表示されない。
【００３５】
図４に示す構造のＨＴＭＬファイルに記述されたテーブルＴ１について、選択行の内容を含み、テーブルＴ１とは異なる文字色・背景色のカーソルテーブルＴ２を生成し、ディスプレイ４に表示する方法、及び選択が解除された場合にカーソルテーブルＴ２を非表示とする方法について、フローチャートを参照して以下に説明する。
【００３６】
図５は、本実施形態に係る情報表示システム１によるテーブルＴ１を表示する全体処理を示したフローチャートである。情報表示システム１のクライアント装置３は、サーバ装置２の提供部２２がクライアント装置３の指定部３１が要求するファイルをクライアント３装置に提供すると、図５に示す処理を開始する。
【００３７】
まず、ステップＳ１で、第１の出力部３２が、ウェブページをディスプレイ４に表示する。ウェブページの表示処理は、ウェブブラウザによる。
次に、ステップＳ２で、カーソルテーブル生成部３４は、ファイルの選択位置を初期化し、ステップＳ３で、カーソルテーブル生成部３４は、カーソルテーブルＴ２の表示状態「ｄｉｓｐｌａｙ」を初期化し、非表示とする。そして、ステップＳ４で、カーソルテーブル３４は、ＪａｖａＳｃｒｉｐｔ関数を設定する。具体的には、テーブルを選択した場合には、そのテーブル（の行）をクリックした場合のイベントについて記述したＪａｖａＳｃｒｉｐｔ命令を実行し、テーブルの選択を解除した場合には、カーソルテーブルＴ２をクリックした場合のイベントについて記述したＪａｖａＳｃｒｉｐｔ命令を実行するよう、ＪａｖａＳｃｒｉｐｔ関数の設定を行う。
【００３８】
ステップＳ５で、選択部３３は、クライアント装置３のユーザによる操作が、ウェブページを閉じる操作であるか否か、あるいはウェブページを更新する操作であるか否かを判定する。ウェブページを閉じる操作やウェブページを更新する操作を認識した場合には、処理を終了する。認識した操作が他の操作である場合（Ｎｏ）には、ステップＳ６に進む。
【００３９】
ステップＳ６で、選択部３３は、クライアント装置３のユーザによる操作が、テーブルＴ１（の行）をクリックする操作であるか否かを判定する。テーブルＴ１（の行）をクリックする操作を認識した場合（Ｙｅｓ）には、ステップＳ７に進み、カーソルテーブル生成部３４がテーブル選択処理を実行し、ステップＳ５に戻る。テーブル選択処理の詳細については、図６を参照して説明する。ステップＳ６において認識したユーザの操作が、テーブルＴ１（の行）をクリックする操作でない場合には、ステップＳ８に進む。
【００４０】
ステップＳ８で、選択部３３は、クライアント装置３のユーザによる操作が、カーソルテーブルＴ２をクリックする操作であるか否かを判定する。カーソルテーブルＴ２をクリックする操作を認識した場合（Ｙｅｓ）には、ステップＳ９に進み、カーソルテーブル生成部３４がテーブル選択解除処理を実行し、ステップＳ５に戻る。テーブル選択解除処理の詳細については、図７を参照して説明する。ステップＳ８において認識したユーザの操作が、カーソルテーブルＴ２をクリックする操作でない場合（Ｎｏ）には、特に処理を行わず、ステップＳ５に戻る。
【００４１】
図６は、図５のステップＳ７のテーブル選択処理の詳細を示したフローチャートである。図５のステップＳ７の説明において述べたとおり、選択部３３が、ユーザがテーブルＴ１（の行）をクリックする操作を認識すると、カーソルテーブル生成部３４が、図６に示す処理を開始する。
【００４２】
ステップＳ１１で、選択位置を設定する。具体的には、クリックされた行について記述するＴＲタグ内の、行番号を示す「ｉｎｄｅｘ」を、選択位置（図４の（＊））に設定する。
【００４３】
ステップＳ１２で、クリックされた行の内部要素をカーソルテーブルにコピーする。具体的には、クリックされた行について記述するＴＲタグ内の「ｉｎｎｅｒＨＴＭＬ」をカーソルテーブルについて記述するＴＡＢＬＥタグ内の「ｉｎｎｅｒＨＴＭＬ」（図４の（ａ））に代入する。
【００４４】
ステップＳ１３で、カーソルテーブルＴ２の表示位置を調整する。カーソルテーブルＴ２の表示位置は、テーブルＴ１のクリックされた行の位置に基づきカーソルテーブルＴ２の位置を算出することにより求める。実施例では、テーブルＴ１の外枠を基準とした場合のカーソルテーブルＴ２の上端の座標、テーブルＴ１の外枠を基準とした場合のカーソルテーブルＴ２の左端の座標、カーソルテーブルＴ２の幅及びカーソルテーブルＴ２の高さを算出する。具体的には、カーソルテーブルＴ２の上端の座標は、ステップＳ１で設定した「選択位置」にクリックされた行の高さ「ｏｆｆｓｅｔＨｅｉｇｈｔ」を掛けることにより求める。実施例においては、テーブルＴ１の行の高さｏｆｆｓｅｔＨｅｉｇｈｔは一律であり、図３（ａ）の「Ｈ」がこれに相当する。テーブルＴ１の１行目の行数「ｉｎｄｅｘ」は「０」としているため、この式によりカーソルテーブルＴ２の上端座標を算出することができる。カーソルテーブルＴ２の左端の座標は、クリックされた行のテーブルＴ１の左端からの位置「ｏｆｆｓｅｔＬｅｆｔ」を設定する。ｏｆｆｓｅｔＬｅｆｔは、図３（ａ）の「Ｌ」がこれに相当する。カーソルテーブルＴ２の幅は、クリックされた行の幅「ｏｆｆｓｅｔＷｉｄｔｈ」を設定する。ｏｆｆｓｅｔＷｉｄｔｈは、図３（ａ）の「Ｗ」がこれに相当する。カーソルテーブルＴ２の高さは、クリックされた行の高さ「ｏｆｆｓｅｔＨｅｉｇｈｔ」を設定する。ｏｆｆｓｅｔＨｅｉｇｈｔは、図３（ａ）の「Ｈ」がこれに相当する。
【００４５】
ステップＳ１４で、カーソルテーブルＴ２の表示状態を「表示」に切り替える。具体的には、カーソルテーブルＴ２について記述するＴＡＢＬＥタグ内の「ｄｉｓｐｌａｙ」に表示状態を表す「ｂｌｏｃｋ」を設定する。ステップＳ１４の処理により、ステップＳ１２でコピーした内容のカーソルテーブルＴ２が、ステップＳ１３で設定した位置に表示される。図３の「コード・０２００５」の行を例に挙げると、図３（ａ）の状態のテーブルＴ１に図３（ｂ）のカーソルテーブルＴ２が重ねて表示され、ディスプレイ４上では、図３（ｃ）の状態に表示が切り替わる。
【００４６】
ここで、図４の説明においても述べたとおり、カーソルテーブルＴ２の背景色及び文字色には、テーブルＴ１の背景色及び文字色とはそれぞれ異なる色が設定されている。また、カーソルテーブルＴ２の内容には、クリックにより選択した行の内容がコピーされている。このため、ディスプレイ４上には、カーソルテーブルＴ２の表示された位置が選択されたことが表現される。このような選択行の表現方法によれば、テーブルＴ１の所定の行の背景色や文字色を変更してテーブルＴ１全体を再描画する処理が不要となり、図６に示すカーソルテーブルＴ２の表示処理のみで足りる。したがって、選択行を表現するために要する時間を短縮化させることができる。
【００４７】
図７は、図５のステップＳ９のテーブル選択解除処理の詳細を示したフローチャートである。図５のステップＳ９の説明において述べたとおり、選択部３３が、ユーザがカーソルテーブルＴ２をクリックする操作を認識すると、すなわち、選択行を再度クリックする操作を認識すると、カーソルテーブル生成部３４が、図７に示す処理を開始する。
【００４８】
ステップＳ２１で、選択位置を初期化する。具体的には、選択位置（図４の（＊））に「ＮＵＬＬ」を設定する。
ステップＳ２２で、カーソルテーブルＴ２の表示状態を「非表示」に切り替える。具体的には、カーソルテーブルＴ２について記述するＴＡＢＬＥタグ内の「ｄｉｓｐｌａｙ」に、非表示状態を表す「ｎｏｎｅ」を設定する。ステップＳ２２の処理により、ディスプレイ４上に表示されていたカーソルテーブルＴ２が非表示となり、カーソルテーブルＴ２の表示されていた行の選択が解除されたことが表現される。図３の「コード・０２００５」の行を例に挙げると、図３（ｃ）の状態から図３（ｂ）のカーソルテーブルＴ２が非表示となることにより、ディスプレイ４上では、図３（ａ）の状態に表示が切り替わる。
【００４９】
以上説明したように、本実施形態に係る情報表示システム１によれば、クライアント装置３からの要求に応じてサーバ装置２がクライアント装置３に提供するファイルには、カーソルテーブルＴ２が用意されている。クライアント装置３において、ポインティングデバイス等によりテーブルＴ１の所定の行を選択した場合には、カーソルテーブルＴ２が、テーブルＴ１の文字色や背景色等の表示色とは異なる色で選択行の位置に選択行と同内容で表示される。予め用意されているカーソルテーブルＴ２に選択行の内容をコピーして、選択行の位置に基づきカーソルテーブルＴ２の表示位置を設定して表示させることで、テーブルＴ１の選択行の表示色を変更してテーブルＴ１全体を再描画させることが不要となり、表示時間を短縮化させることができる。
【００５０】
また、カーソルテーブルＴ２を用意する構成とすることで、ウェブページの製作者にとっては、ウェブページの画面レイアウトを変更する場合と比べて、より簡素な作業で済むこととなる。
【００５１】
更には、ウェブページを閲覧するクライアント装置３のユーザにとっては、従来と同様の方法でより早く選択行の表現がなされるウェブページの閲覧等が可能となり、操作性を低下させることがない。
【００５２】
なお、上記においては、テーブルの所定の行を選択する場合の表示方法を例に説明しているが、これに限るものではない。例えば、セルごとに選択セルを異なる表示色でディスプレイ４上に表示させるためのカーソルセルを用意しておき、セル単位で上記の方法を実施する構成とすることもできる。また、上記の表示方法は、テーブルの表示方法に限定されるものではなく、選択されたＨＴＭＬコンポーネントを他のＨＴＭＬコンポーネントを表示する方法にも適用が可能である。
【００５３】
更には、上記の方法は、ウェブに限定されるものではなく、ネットワークを介してサーバ装置とクライアント装置とが接続され、サーバ装置がクライアント装置からの要求に応じてファイルを提供し、クライアント装置のディスプレイにファイルに記述されているテーブル等のコンポーネントを表示させる場合の選択されたコンポーネントの表現方法にも適用が可能である。
【符号の説明】
【００５４】
１ 情報表示システム
２ サーバ装置
３ クライアント装置
４ ディスプレイ
１０ インターネット
２１ 蓄積部
２２ 提供部
３１ 指定部
３２ 第１の出力部
３３ 選択部
３４ カーソルテーブル生成部
３５ 第２の出力部
【特許請求の範囲】
【請求項１】
ネットワークを介して相互に接続されたサーバ装置とクライアント装置とを有する情報表示システムであって、
前記サーバ装置は、
複数のコンポーネントの情報を記述する第１のファイルと、前記クライアント装置において、該複数のコンポーネントの中から所定のコンポーネントを選択した場合には、該第１のファイルに記述されている前記複数のコンポーネントの表示色とは異なる表示色で該選択された第１のコンポーネントの内容を含む第２のコンポーネントを生成する処理、及び該第２のコンポーネントを該第１のコンポーネントと重ねて表示させる処理を実行するプログラムとを互いに関連付けて蓄積する蓄積部と、
前記クライアント装置から前記第１のファイルに記述された前記複数のコンポーネントを該クライアント装置に表示させる旨の要求を受け付けた場合には、前記蓄積部から前記第１のファイル及び前記プログラムを読み出して、該クライアント装置に提供する提供部と
を備え、
前記クライアント装置は、
前記第１のファイルを指定して前記サーバ装置に提供を要求する指定部と、
前記提供部より提供される前記第１のファイルを表示する第１の出力部と、
前記第１の出力部により表示された前記複数のコンポーネントの中から前記第１のコンポーネントを選択する選択部と、
前記複数のコンポーネントの表示色とは異なる表示色で前記第１のコンポーネントの内容を含む第２のコンポーネントを生成する生成部と、
前記第２のコンポーネントを前記第１のコンポーネントと重ねて表示する第２の出力部と
を備えることを特徴とする情報表示システム。
【請求項２】
ネットワークを介して接続されているクライアント装置からの要求に応じて、保有するファイルを該クライアント装置に提供するサーバ装置であって、
複数のコンポーネントの情報を記述する第１のファイルと、前記クライアント装置において、該複数のコンポーネントの中から所定のコンポーネントを選択した場合には、該第１のファイルに記述されている前記複数のコンポーネントの表示色とは異なる表示色で該選択された第１のコンポーネントの内容を含む第２のコンポーネントを生成する処理、及び該第２のコンポーネントを該第１のコンポーネントと重ねて表示させる処理を実行するプログラムとを互いに関連付けて蓄積する蓄積部と、
前記クライアント装置から前記第１のファイルに記述された前記複数のコンポーネントを該クライアント装置に表示させる旨の要求を受け付けた場合には、前記蓄積部から前記第１のファイル及び前記プログラムを読み出して、該クライアント装置に提供する提供部と
を備えることを特徴とするサーバ装置。
【請求項３】
前記プログラムは、
前記第２のコンポーネントの内容に、前記第１のコンポーネントの内容をコピーし、
前記第１のファイルに記述されている前記第１のコンポーネントの表示位置を用いて、前記第２のコンポーネントの表示位置を算出し、
前記第２のコンポーネントのコピーした内容を、前記算出した表示位置に表示させる
処理を前記クライアント装置において実行させる
ことを特徴とする請求項２記載のサーバ装置。
【請求項４】
前記プログラムは、
前記クライアント装置が前記第１のコンポーネントの選択を解除した場合には、前記第２のコンポーネントを非表示とする
処理を更に前記クライアント装置に実行させる
ことを特徴とする請求項３記載のサーバ装置。
【請求項５】
ネットワークを介して接続されているサーバ装置が提供するファイルを表示させるクライアント装置であって、
前記第１のファイルを指定して前記サーバ装置に提供を要求する指定部と、
前記提供部より提供される前記第１のファイルを表示する第１の出力部と、
前記第１の出力部により表示された前記複数のコンポーネントの中から前記第１のコンポーネントを選択する選択部と、
前記複数のコンポーネントの表示色とは異なる表示色で前記第１のコンポーネントの内容を含む第２のコンポーネントを生成する生成部と、
前記第２のコンポーネントを前記第１のコンポーネントと重ねて表示する第２の出力部と
を備えることを特徴とするクライアント装置。
【請求項６】
コンピュータを、ネットワークを介して接続されているサーバ装置が提供するファイルを表示させるクライアント装置として動作させるためのプログラムであって、
複数のコンポーネントの情報を記述する第１のファイルを指定して前記サーバ装置に提供を要求し、
前記提供される前記第１のファイルを表示し、
前記表示された前記複数のコンポーネントの中から前記第１のコンポーネントを選択し、
前記複数のコンポーネントの表示色とは異なる表示色で前記第１のコンポーネントの内容を含む第２のコンポーネントを生成し、
前記第２のコンポーネントを前記第１のコンポーネントと重ねて表示する
処理をコンピュータに実行させることを特徴とするプログラム。
【請求項１】
ネットワークを介して相互に接続されたサーバ装置とクライアント装置とを有する情報表示システムであって、
前記サーバ装置は、
複数のコンポーネントの情報を記述する第１のファイルと、前記クライアント装置において、該複数のコンポーネントの中から所定のコンポーネントを選択した場合には、該第１のファイルに記述されている前記複数のコンポーネントの表示色とは異なる表示色で該選択された第１のコンポーネントの内容を含む第２のコンポーネントを生成する処理、及び該第２のコンポーネントを該第１のコンポーネントと重ねて表示させる処理を実行するプログラムとを互いに関連付けて蓄積する蓄積部と、
前記クライアント装置から前記第１のファイルに記述された前記複数のコンポーネントを該クライアント装置に表示させる旨の要求を受け付けた場合には、前記蓄積部から前記第１のファイル及び前記プログラムを読み出して、該クライアント装置に提供する提供部と
を備え、
前記クライアント装置は、
前記第１のファイルを指定して前記サーバ装置に提供を要求する指定部と、
前記提供部より提供される前記第１のファイルを表示する第１の出力部と、
前記第１の出力部により表示された前記複数のコンポーネントの中から前記第１のコンポーネントを選択する選択部と、
前記複数のコンポーネントの表示色とは異なる表示色で前記第１のコンポーネントの内容を含む第２のコンポーネントを生成する生成部と、
前記第２のコンポーネントを前記第１のコンポーネントと重ねて表示する第２の出力部と
を備えることを特徴とする情報表示システム。
【請求項２】
ネットワークを介して接続されているクライアント装置からの要求に応じて、保有するファイルを該クライアント装置に提供するサーバ装置であって、
複数のコンポーネントの情報を記述する第１のファイルと、前記クライアント装置において、該複数のコンポーネントの中から所定のコンポーネントを選択した場合には、該第１のファイルに記述されている前記複数のコンポーネントの表示色とは異なる表示色で該選択された第１のコンポーネントの内容を含む第２のコンポーネントを生成する処理、及び該第２のコンポーネントを該第１のコンポーネントと重ねて表示させる処理を実行するプログラムとを互いに関連付けて蓄積する蓄積部と、
前記クライアント装置から前記第１のファイルに記述された前記複数のコンポーネントを該クライアント装置に表示させる旨の要求を受け付けた場合には、前記蓄積部から前記第１のファイル及び前記プログラムを読み出して、該クライアント装置に提供する提供部と
を備えることを特徴とするサーバ装置。
【請求項３】
前記プログラムは、
前記第２のコンポーネントの内容に、前記第１のコンポーネントの内容をコピーし、
前記第１のファイルに記述されている前記第１のコンポーネントの表示位置を用いて、前記第２のコンポーネントの表示位置を算出し、
前記第２のコンポーネントのコピーした内容を、前記算出した表示位置に表示させる
処理を前記クライアント装置において実行させる
ことを特徴とする請求項２記載のサーバ装置。
【請求項４】
前記プログラムは、
前記クライアント装置が前記第１のコンポーネントの選択を解除した場合には、前記第２のコンポーネントを非表示とする
処理を更に前記クライアント装置に実行させる
ことを特徴とする請求項３記載のサーバ装置。
【請求項５】
ネットワークを介して接続されているサーバ装置が提供するファイルを表示させるクライアント装置であって、
前記第１のファイルを指定して前記サーバ装置に提供を要求する指定部と、
前記提供部より提供される前記第１のファイルを表示する第１の出力部と、
前記第１の出力部により表示された前記複数のコンポーネントの中から前記第１のコンポーネントを選択する選択部と、
前記複数のコンポーネントの表示色とは異なる表示色で前記第１のコンポーネントの内容を含む第２のコンポーネントを生成する生成部と、
前記第２のコンポーネントを前記第１のコンポーネントと重ねて表示する第２の出力部と
を備えることを特徴とするクライアント装置。
【請求項６】
コンピュータを、ネットワークを介して接続されているサーバ装置が提供するファイルを表示させるクライアント装置として動作させるためのプログラムであって、
複数のコンポーネントの情報を記述する第１のファイルを指定して前記サーバ装置に提供を要求し、
前記提供される前記第１のファイルを表示し、
前記表示された前記複数のコンポーネントの中から前記第１のコンポーネントを選択し、
前記複数のコンポーネントの表示色とは異なる表示色で前記第１のコンポーネントの内容を含む第２のコンポーネントを生成し、
前記第２のコンポーネントを前記第１のコンポーネントと重ねて表示する
処理をコンピュータに実行させることを特徴とするプログラム。
【図１】
【図２】
【図４】
【図５】
【図６】
【図７】
【図３】
【図２】
【図４】
【図５】
【図６】
【図７】
【図３】
【公開番号】特開２０１１−２３２９９８（Ｐ２０１１−２３２９９８Ａ）
【公開日】平成２３年１１月１７日（２０１１．１１．１７）
【国際特許分類】
【出願番号】特願２０１０−１０３７４０（Ｐ２０１０−１０３７４０）
【出願日】平成２２年４月２８日（２０１０．４．２８）
【出願人】（０００２３７６３９）富士通フロンテック株式会社 (667)
【Ｆターム（参考）】
【公開日】平成２３年１１月１７日（２０１１．１１．１７）
【国際特許分類】
【出願日】平成２２年４月２８日（２０１０．４．２８）
【出願人】（０００２３７６３９）富士通フロンテック株式会社 (667)
【Ｆターム（参考）】
[ Back to top ]