JP4977096B2 - 強調表示追加方法、表示制御プログラム、及びサーバ - Google Patents

Description

本発明は、クライアントのウェブブラウザ上にウェブページを表示する際に、ウェブページの特定箇所に強調表示を追加する方法、表示制御プログラム、及びサーバに関する。

近年、様々な情報がインターネット上で公開されており、パーソナルコンピュータ等のクライアントによりこれらの情報を容易に閲覧できるようになっている。
具体的には、クライアントでウェブブラウザを起動して所望のＵＲＬを要求すると、該当する表示用ファイル（ＨＴＭＬ（Hyper Text Markup Language）と呼ばれるマークアップ言語で記述されたファイル、以下ＨＴＭＬファイルと称する）がサーバから提供される。そして、ＨＴＭＬファイルがウェブブラウザによって解析され、所定のレイアウトで文字列や画像等を配置したウェブページが表示される。
ＨＴＭＬでは、ウェブブラウザで解析可能なタグと呼ばれる命令（「＜」＋「要素名（半角英数字）」＋「＞」で表される）が使用され、このタグにより文字列やウェブページの基本的な構造、レイアウトなどの情報が記述されている。なお、開始タグ（＜“要素名”＞）と終了タグ（＜／“要素名”＞）を用いて構成される全体は要素と呼ばれ、開始タグと終了タグで挟まれた部分は要素内容と呼ばれる。

ところで、インターネットは広告媒体として非常に有効であるため、多数のウェブページにおいてバナー等による広告表示がなされている。例えば、特許文献１には、ウェブページの広告表示を目立たせる目的で、ウェブページ内におけるユーザの注目を得やすい位置（例えば、クリック用のボタンアイコンやユーザが文字列を入力するためのテキストボックスの外周上等）に、広告を表示させる方法が開示されている。
この場合、ＨＴＭＬファイル内において、広告が挿入される箇所を予めレイアウト情報として設定してウェブページのデザインが行われる。例えば、ＨＴＭＬファイルにおいてｉｍｇタグを利用して画像ファイルや表示位置等の表示属性（レイアウト情報）を指定することで、広告画像をウェブページに配置することができる。ただし、ウェブページの主デザインに影響を与えないようにするため、広告を表示できる箇所は限られている。

また、ウェブページ作成用のアプリケーションソフトを利用することにより、Ｆｌａｓｈムービー等のコンテンツを埋め込んだ動的なウェブページも比較的簡単に作成できるようになっている。
例えば、ＨＴＭＬファイルにおいてｏｂｊｅｃｔタグやｅｍｂｅｄタグを利用して、再生する外部ファイル（Ｆｌａｓｈファイル等）や表示属性を指定することで、Ｆｌａｓｈファイル等をウェブページに埋め込むことができる。ウェブブラウザでは、追加インストールされたプラグインソフト（例えば、Ｆｌａｓｈ Ｐｌａｙｅｒ）によって、Ｆｌａｓｈムービーの再生が行われることとなる。

上述したように、ＨＴＭＬファイルに所要のタグを記述することにより、バナー広告やＦｌａｓｈムービー等のコンテンツをウェブページ上の所望の箇所に配置することができる。このようなコンテンツは、ウェブページ上の特定箇所にユーザの注目を向けるための強調表示として利用される。
特開２００２−７８５４号公報

しかしながら、既に運用されているウェブページ上の一部にキャラクターアイコンを挿入するなどして強調表示を行いたい場合、ＨＴＭＬファイルの記述を変更しなければならないので、編集が容易ではない。特に、ウェブページ上の複数箇所を強調表示する場合や、強調表示する箇所を頻繁に変更したい場合には、煩雑な作業が必要となる。
また、ウェブページのベースとなるＨＴＭＬファイルを書き換えることは、変更に伴いウェブページ全体のレイアウトが崩れてしまう等、正常に表示されなくなる虞があるため、運用上望ましくない。

本発明は、ウェブページのベースとなるＨＴＭＬファイルの記述を大幅に変更することなく、ウェブページの特定箇所に容易に強調表示を追加することができる強調表示追加方法、表示制御プログラム、及びサーバを提供することを目的とする。

上記目的を達成するため、請求項１に記載の発明は、ネットワークを介してサーバに接続されたクライアントのウェブブラウザ上にＨＴＭＬファイルに基づくウェブページを表示する際に、前記ウェブページに強調表示を追加する方法であって、
前記ＨＴＭＬファイルに記述された呼び出しコードが前記クライアントに読み込まれることにより第１プログラムの実行を開始するステップと、
前記ウェブページ上の特定箇所に強調表示を配置するための第２プログラムと強調表示のトリガとなる親アイコンを表示するための第３プログラムの呼び出しコードを、前記読み込んだＨＴＭＬファイルに追記するステップと、
前記ＨＴＭＬファイルから前記ウェブページ上に強調表示を配置するための配置情報を取得するステップと、
前記取得した配置情報を第２プログラムに引き渡すステップと、
前記第２プログラムを実行することにより、強調表示情報が記述されたＸＭＬファイルを取得し、前記強調表示としての子アイコンを前記ウェブページ上の前記配置情報に基づく複数の特定箇所に配置するステップと、を有し、
前記配置情報は、前記ウェブページ上において、前記特定箇所とは別の場所に強調表示のための子アイコンを表示させた後、当該別の箇所から前記特定箇所に到達するまで子アイコンを移動させる表示を行うための情報を含み、
前記強調表示としての子アイコンを前記ウェブページ上の前記配置情報に基づく複数の特定箇所に配置するステップは、前記第３プログラムを実行することにより前記親アイコンを前記ウェブページ上の予め定められた箇所に表示し、前記親アイコンへの操作を受けると前記第３プログラムを終了して当該親アイコンを非表示にすると共に前記第２プログラムを実行して前記複数の特定箇所に配置される子アイコンを全て表示し、当該子アイコンが表示されている箇所以外の領域が操作されると、前記第２プログラムを終了して当該子アイコンを全て非表示にすると共に前記第３プログラムを実行して前記親アイコンを表示するステップであることを特徴とする。

請求項２に記載の発明は、請求項１に記載の強調表示追加方法において、前記配置情報は、ＨＴＭＬファイル内の要素の位置情報と、前記ウェブページが表示されるウィンドウの高さ及び横幅、不可視領域を含む前記ウェブページ全体の高さ及び横幅に基づいて前記アイコンの表示位置を設定するための情報を含むことを特徴とする。
請求項３に記載の発明は、請求項２に記載の強調表示追加方法において、前記特定箇所は、ＸＭＬファイルにより記述されたｉｄ要素の内容を識別情報として有する前記ＨＴＭＬファイル内の要素の位置情報に基づいて設定されることを特徴とする。

請求項４に記載の発明は、ネットワークを介してサーバに接続されたクライアントのウェブブラウザ上にＨＴＭＬファイルに基づくウェブページを表示する際に、前記ウェブページに強調表示を追加する方法であって、
前記ＨＴＭＬファイルに記述されたスクリプトが実行されることにより、強調表示のトリガとなる親アイコンをウェブページ上の予め定められた箇所に表示し、当該親アイコンに対する操作を受けると、前記ＨＴＭＬファイル内の要素に付与された識別情報を内容として有する複数のｉｄ要素が記述されたＸＭＬファイルを取得する第１ステップと、
前記ＸＭＬファイルを解析して前記ｉｄ要素の内容を抽出する第２ステップと、
抽出された前記ｉｄ要素の内容を識別情報として有する前記ＨＴＭＬファイル内の要素の位置情報を取得し、これに基づいて強調表示を行うための複数の配置情報を設定する第３ステップと、
前記複数の配置情報に基づく前記ウェブページ上の複数の特定箇所に、第１表示態様による強調表示を行う第４ステップと、を有し、
前記配置情報は、前記ウェブページ上において、前記特定箇所とは別の場所に強調表示のための子アイコンを表示させた後、当該別の箇所から前記特定箇所に到達するまで子アイコンを移動させる表示を行うための情報を含み、
前記第４ステップは、前記第１表示態様による強調表示としての子アイコンを複数表示し、子アイコンが表示されている箇所以外の領域がユーザにより操作されると全ての子アイコンを非表示にすると共に前記親アイコンを表示するステップであることを特徴とする。

請求項５に記載の発明は、請求項４に記載の強調表示追加方法において、前記配置情報は、ＨＴＭＬファイル内の要素の位置情報と、前記ウェブページが表示されるウィンドウの高さ及び横幅、不可視領域を含む前記ウェブページ全体の高さ及び横幅に基づいて前記アイコンの表示位置を設定するための情報を含むことを特徴とする。

請求項６に記載の発明は、請求項４または５のいずれか一項に記載の強調表示追加方法において、前記特定箇所は、前記ＸＭＬファイルにより記述された前記ｉｄ要素の内容を識別情報として有する前記ＨＴＭＬファイル内の要素の位置情報に基づいて設定されることを特徴とする。

請求項７に記載の発明は、ネットワークを介してサーバに接続されたクライアントのウェブブラウザ上にＨＴＭＬファイルに基づくウェブページを表示する際に、前記ウェブページに強調表示を追加するための表示制御プログラムであって、
前記ＨＴＭＬファイルに記述されたスクリプトが実行されることにより、強調表示のトリガとなる親アイコンをウェブページ上の予め定められた箇所に表示し、当該親アイコンに対する操作を受けると、前記ＨＴＭＬファイル内の要素に付与された識別情報を内容として有する複数のｉｄ要素が記述されたＸＭＬファイルを取得する第１ステップと、
前記ＸＭＬファイルを解析して前記ｉｄ要素の内容を抽出する第２ステップと、
抽出された前記ｉｄ要素の内容を識別情報として有する前記ＨＴＭＬファイル内の要素の位置情報を取得し、これに基づいて強調表示を行うための複数の配置情報を設定する第３ステップと、
前記複数の配置情報に基づく前記ウェブページ上の複数の特定箇所に、第１表示態様による強調表示を行う第４ステップと、を前記クライアントのコンピュータに実行させ、
前記配置情報は、前記ウェブページ上において、前記特定箇所とは別の場所に強調表示のための子アイコンを表示させた後、当該別の箇所から前記特定箇所に到達するまで子アイコンを移動させる表示を行うための情報を含み、
前記第４ステップは、前記第１表示態様による強調表示としての子アイコンを複数表示し、子アイコンが表示されている箇所以外の領域がユーザにより操作されると全ての子アイコンを非表示にすると共に前記親アイコンを表示するステップであることを特徴とする。
請求項８に記載の発明は、請求項７に記載の表示制御プログラムにおいて、前記配置情報は、ＨＴＭＬファイル内の要素の位置情報と、前記ウェブページが表示されるウィンドウの高さ及び横幅、不可視領域を含む前記ウェブページ全体の高さ及び横幅に基づいて前記アイコンの表示位置を設定するための情報を含むことを特徴とする。
請求項９に記載の発明は、請求項７または８に記載の表示制御プログラムにおいて、前記特定箇所は、前記ＸＭＬファイルにより記述されたｉｄ要素の内容を識別情報として有する前記ＨＴＭＬファイル内の要素の位置情報に基づいて設定されることを特徴とする。

請求項１０に記載の発明は、請求項７から９のいずれか一項に記載の表示制御プログラムが記述された制御ファイル、前記ＨＴＭＬファイル、及び前記ＸＭＬファイルを保有し、
前記クライアントからの要求に伴い前記各ファイルを提供することを特徴とするサーバである。

本発明によれば、ウェブページのベースとなるＨＴＭＬファイルの記述を大幅に変更することなく、ウェブページの特定箇所に容易に強調表示を追加することができる。

以下、本発明の実施の形態を図面に基づいて説明する。
図１は、本実施形態に係るネットワーク構成について示す概略図である。
本実施形態では、サーバ１からクライアント２に、ネットワークＮを介してコンテンツ（例えば、ウェブページ等）を提供し、クライアント２においてコンテンツを利用する場合について示している。

図１に示すように、サーバ１には、通信ネットワークＮを介してクライアント２（例えば、パーソナルコンピュータ２ａ、携帯電話２ｂ等）が接続されている。
通信ネットワークＮは、インターネットや電気通信事業者等の電話回線網、携帯電話通信網等であり、当該通信ネットワークＮに接続するサーバ１とクライアント２の間を、データ通信可能に接続する。

図２は、サーバ１のハードウェア構成の概略を示すブロック図である。本実施形態におけるサーバ１は、例えば、検索サービスやリンク集、ニュース配信などを提供するポータルサイトのウェブサーバである。
図２に示すように、サーバ１は、制御部１１、記憶部（補助記憶）１２、入出力部１３、通信部１４、データベース１５等を備えた一般的なコンピュータである。各ブロックはバスライン１６により電気的に接続されている。

制御部１１は、演算／制御装置としてのＣＰＵ（Central Processing Unit）１１１、主記憶装置としてのＲＡＭ（Random Access Memory）１１２及びＲＯＭ（Read Only Memory）１１３で構成される。
ＲＯＭ１１３には、ＢＩＯＳ（Basic Input Output System）と呼ばれるプログラムや基本的な設定データが記憶されている。ＲＡＭ１１２には、記憶部１２から読み出されたＯＳや各種アプリケーションなどのプログラムが展開される。
ＣＰＵ１１１は、ＲＡＭ１１２に展開されたプログラムに従って各種処理を実行し、各ブロックを制御する。

記憶部１２は、例えばハードディスク等で構成され、ＯＳ、各種アプリケーションプログラム（例えば、サーバ用プログラムやウェブアプリケーション）、及び各種データ等が記憶されている。また、クライアント２のウェブブラウザ上にウェブページを表示するためのファイル（ＨＴＭＬファイル、画像ファイル、プログラムファイル等）も、この記憶部１２に記憶されている。
本実施形態では、ポータルサイトのトップページ用のファイルとして、ＨＴＭＬファイル１２ａ、ＸＭＬファイル１２ｂ、ＪａｖａＳｃｒｉｐｔファイル（ＪａｖａＳｃｒｉｐｔは登録商標、以下ＪＳファイルと称する）１２ｃ、Ｆｌａｓｈ１ファイル１２ｄ、Ｆｌａｓｈ２ファイル１２ｅが、記憶部１２内の同じフォルダに格納されている。

ＨＴＭＬファイル１２ａは、提供するウェブページのベースとなるファイルであり、ウェブページを表示するためのＨＴＭＬが記述されている。
ＸＭＬファイル１２ｂには、ＨＴＭＬファイル１２ａをベースとするウェブページにおいて強調表示を行うためのデータ（強調表示情報）が記述されている。ここで、強調表示とは、ウェブページ内の特定箇所にユーザの注目を向けさせ得る表示であり、本実施形態ではキャラクターアイコンをウェブページ内の特定箇所に配置することにより強調表示を行う。

ＪＳファイル１２ｃは、ＨＴＭＬファイル１２ａに記述されたスクリプトが実行されることにより参照される外部ファイルであり、Ｆｌａｓｈファイル１２ｄ、１２ｅと協働してキャラクターアイコンによる強調表示を行うためのスクリプトが記述されている。ＪＳファイル１２ｃに記述されたスクリプトが実行されると、例えば、Ｆｌａｓｈファイル１２ｄ、１２ｅをＨＴＭＬファイル１２ａに埋め込んだり、ウェブページを構成する要素に関する各種情報（例えば、後述する位置情報等）を取得し、Ｆｌａｓｈファイル１２ｄ、１２ｅに引き渡したりする制御が行われる。

Ｆｌａｓｈ１ファイル１２ｄには、強調表示のトリガとなるキャラクターアイコン（以下、親アイコンと称する）の表示制御を行うためのスクリプトが記述されている。
Ｆｌａｓｈ２ファイル１２ｅには、強調表示としてのキャラクターアイコン（以下、子アイコン）の表示制御を行うためのスクリプトが記述されている。
また、Ｆｌａｓｈ１ファイル１２ｄ及びＦｌａｓｈ２ファイル１２ｅには、アニメーション表示されるキャラクターアイコンのシンボル（例えば、キャラクターアイコンの手足が動くムービークリップ）のデータが含まれている。
Ｆｌａｓｈ１ファイル１２ｄ又はＦｌａｓｈ２ファイル１２ｅに記述されたスクリプトが実行されると、例えば、ＪＳファイル１２ｃから引き渡された情報に基づいてウェブページ上の特定箇所にキャラクターアイコンを表示する制御が行われる。

このように、本実施形態では、ＪＳファイル１２ｃ、Ｆｌａｓｈ１ファイル１２ｄ、及びＦｌａｓｈ２ファイル１２ｅにより、ウェブページ上でキャラクターアイコンによる強調表示を制御する表示制御プログラムを構成している。

入出力部１３は、サーバ１の管理者が利用するためのユーザインターフェースを構成する。
通信部１４は、ＴＣＰ／ＩＰ等の通信プロトコルに従って処理を行い、ネットワークＮを介してクライアント２とデータの送受信を行う。
データベース１５には、様々なデータが整理されて格納されている。例えば、検索データベースには、検索対象となるキーワードと、このキーワードで抽出されるコンテンツが関連付けて登録されている。

サーバ１のＣＰＵ１１１は、サーバ用ソフトウェア及びウェブアプリケーションを実行することにより、クライアント２のウェブブラウザ上におけるユーザ操作に応じた処理を行う。例えば、クライアント２のウェブブラウザ上においてユーザが検索操作を行うと、サーバ１は検索条件を満たすコンテンツを検索し、検索結果を含む新たなＨＴＭＬファイルを生成し、これをクライアント２に送信する。
また、サーバ１は、強調表示を追加するための表示制御プログラムが記述された制御ファイル１２ｃ〜１２ｅ、ＨＴＭＬファイル１２ａ、及びＸＭＬファイル１２ｂを保有し、クライアント２からの要求に伴い各ファイルを送信する。

図３は、クライアント２のハードウェア構成の概略を示すブロック図である。
図３に示すように、クライアント２は、制御部２１、記憶部２２、入力部２３、表示部２４、通信部２５等を備えた一般的なパーソナルコンピュータである。各部はバスライン２６により電気的に接続されている。

制御部２１の構成はサーバ１の制御部１１の構成と同様である。
記憶部２２は、例えばハードディスクで構成され、ＯＳ、各種アプリケーションプログラム（例えば、ウェブブラウザ、Ｆｌａｓｈ Ｐｌａｙｅｒ等）、及び各種データが記憶されている。また、サーバ１からダウンロードしたコンテンツ（例えば、ウェブページで公開されている画像）のデータ等が記憶される。
ここで、クライアント２で起動されるウェブブラウザはＪａｖａＳｃｒｉｐｔを実行可能とされている。また、ＨＴＭＬファイル内にＦｌａｓｈコンテンツ（Ｆｌａｓｈファイル）が埋め込まれている場合には、Ｆｌａｓｈ Ｐｌａｙｅｒがプラグインとして起動され、Ｆｌａｓｈコンテンツが再生される。

入力部２３は、例えば、キーボード及びマウスで構成され、ユーザが情報を入力する際に使用される。
表示部２４は、例えば、液晶ディスプレイ等で構成され、制御部２１からの表示制御指令に基づいて所定の画面を表示する。表示部２４には、例えば、ウェブブラウザのＧＵＩが表示される。
通信部２５は、ＴＣＰ／ＩＰ等の通信プロトコルに従って処理を行い、ネットワークＮを介してサーバ１とデータの送受信を行う。

クライアント２のＣＰＵ２１１は、例えば、起動したウェブブラウザ上において、ユーザが入力部２３によりＵＲＬを入力すると、このＵＲＬで指定されるウェブページをサーバ１に要求する。そして、サーバ１から送信されたＨＴＭＬファイル１２ａを解析して、ウェブブラウザ上にウェブページを表示する。
このとき、ＨＴＭＬファイル１２ａに記述されているスクリプトが実行されることによりＪＳファイル１２ｃが読み込まれる。また、ＪＳファイル１２ｃに記述されているスクリプトが実行されることによりＸＭＬファイル１２ｂ、Ｆｌａｓｈ１ファイル１２ｄ、Ｆｌａｓｈ２ファイル１２ｅが参照され、キャラクターアイコンによる強調表示が行われる。

図４は、サーバ１の記憶部１２に格納されているＨＴＭＬファイル１２ａのソースコードの一部を抜粋して示す説明図である。
図４に示すように、ＨＴＭＬファイル１２ａは、ｈｔｍｌタグ（＜ｈｔｍｌ＞）で囲まれたｈｔｍｌ要素ＥＬＭ１、ｈｅａｄタグ（＜ｈｅａｄ＞）で囲まれたｈｅａｄ要素ＥＬＭ２、ｂｏｄｙタグ（＜ｂｏｄｙ＞）で囲まれたｂｏｄｙ要素ＥＬＭ３、とで構成されている。
ｈｔｍｌ要素ＥＬＭ１は、当該ファイルがＨＴＭＬファイルであることを宣言する。ｈｅａｄ要素ＥＬＭ２には、タイトルやウェブページのさまざまな情報（例えば、スタイル情報（レイアウト情報を含む））が記述されている。ｂｏｄｙ要素ＥＬＭ３には、実際にウェブブラウザに表示されるウェブページの本体が記述されている。

図４に示すように、ｈｅａｄ要素ＥＬＭ２には、指定したＪａｖａＳｃｒｉｐｔを実行するためのｓｃｒｉｐｔ要素ＥＬＭ４が記述されている。ＨＴＭＬファイル１２ａにおいては、本実施形態に係る強調表示を実現するために、このｓｃｒｉｐｔ要素ＥＬＭ４を追加するだけでよい。
図４に示すＨＴＭＬファイル１２ａがクライアント２のウェブブラウザに読み込まれると、ｓｃｒｉｐｔ要素ＥＬＭ４により、“ｙｊＣｈｏｒｉｏＺｏｎｅ”という変数に“ｍａｓｔｈｅａｄ”という文字列が代入されるとともに、サーバ１の記憶部１２に格納されているＪＳファイル（ｃｈｏｒｉｏ．ｊｓ）１２ｃが読み込まれる。
そして、ＪＳファイル１２ｃに記述されているスクリプトが実行され、キャラクターアイコン（親アイコン、子アイコン）による強調表示が行われる。本実施形態では、サーバ１の記憶部１２に格納されているＪＳファイル１２ｃ、Ｆｌａｓｈ１ファイル１２ｄ、及びＦｌａｓｈ２ファイル１２ｅに記述されたスクリプトが協働して実行されることにより、キャラクターアイコンの表示制御を実現している。

ここで、“ｙｊＣｈｏｒｉｏＺｏｎｅ”という変数は、Ｆｌａｓｈ１ファイル１２ｄの実行による親アイコンの表示に関する情報であり、親アイコンを表示する際の表示位置（要素）を、タグに含まれるｉｄ属性（識別情報）で指定するための変数である。図４では、ｉｄ属性が“ｍａｓｔｈｅａｄ”であるｄｉｖ要素ＥＬＭ５を親アイコンの表示位置として指定するため、ｙｊＣｈｏｒｉｏＺｏｎｅ＝“ｍａｓｔｈｅａｄ”と定義している。
サーバ１において、ｓｃｒｉｐｔ要素ＥＬＭ４の変数“ｙｊＣｈｏｒｉＺｏｎｅ”に代入する文字列を変更することで、子アイコンによる強調表示を行うトリガとなる親アイコンの表示位置は容易に変更される。

図４において、ｂｏｄｙ要素ＥＬＭ３には、ｄｉｖ要素ＥＬＭ５〜ＥＬＭ９やｉｎｐｕｔ要素ＥＬＭ１０が記述されている。ｄｉｖ要素ＥＬＭ５〜ＥＬＭ９はｄｉｖタグ（＜ｄｉｖ＞）で囲まれた範囲を一つのブロックとして扱うための要素である。また、ｉｎｐｕｔ要素ＥＬＭ１０は、ｉｎｐｕｔタグ（＜ｉｎｐｕｔ＞）の記述に従い、フォームの構成部品（入力欄・ボタン等）を作成するための要素である。これらの要素ＥＬＭ５〜ＥＬＭ１０に記述された内容が、ｈｅａｄ要素ＥＬＭ２に記述されているレイアウト情報に従ってウェブページ上に配置される。

図４において、ｄｉｖ要素ＥＬＭ８には指定されたファイルに基づくＪＰＥＧ画像を所定の大きさで表示する内容が記述されており、ｉｎｐｕｔ要素ＥＬＭ１０には送信ボタン（検索ボタン）を表示する内容が記述されている。また、図４では省略しているが、ｄｉｖ要素ＥＬＭ５にはウェブページのタイトルを表示するための内容、ｄｉｖ要素ＥＬＭ６にはポータルサイトが提供するサービスを表示するための内容、ｄｉｖ要素ＥＬＭ７にはポータルサイトが配信するニュース等の内容、ｄｉｖ要素ＥＬＭ９にはカレンダーを表示するための内容が記述されている。

ｄｉｖ要素ＥＬＭ５〜ＥＬＭ９及びｉｎｐｕｔ要素ＥＬＭ１０には、ｉｄ（属性名）＝“文字列”（属性値）という記述によりｉｄ属性が与えられている。つまり、このｉｄ属性が指定された要素にはｉｄ＝“文字列”で表される識別情報（名前）が付与され、ウェブページの構成要素がそれぞれ識別可能となる。例えば、ｄｉｖ要素ＥＬＭ５には“ｍａｓｔｈｅａｄ”という識別情報が付与され、ｄｉｖ要素ＥＬＭ６には“ｃｏｎｔｅｎｔｂｏｘ”という識別情報が付与されている。また、ｉｎｐｕｔ要素ＥＬＭ１０には“ｓｒｃｂｔｎ”という識別情報が付与されている。これらの識別情報は、ＪＳファイル１２ｃが実行された際に、ウェブページを構成する要素のうち、特定要素のウェブブラウザ上の表示位置等を取得する際に参照される。

図５は、図４に示すＨＴＭＬファイル１２ａに基づくウェブページの表示例を示す説明図である。なお、図５は、図４における要素ＥＬＭ５〜ＥＬＭ１０とウェブページ上の配置の対応関係を示すものであり、ｓｃｒｉｐｔ要素ＥＬＭ４の実行（ＪＳファイル１２ｃの実行を含む）に伴う強調表示は省略している。
すなわち、図４におけるｄｉｖ要素ＥＬＭ５（ｉｄ＝“ｍａｓｔｈｅａｄ”）は図５に示すウェブページ上の領域ＡＲ６を構成し、ｄｉｖ要素ＥＬＭ６（ｉｄ＝“ｃｏｎｔｅｎｔｂｏｘ”）は領域ＡＲ５を構成し、ｄｉｖ要素ＥＬＭ７（ｉｄ＝“ｍａｉｎ”）は領域ＡＲ１を構成している。また、ｄｉｖ要素ＥＬＭ８（ｉｄ＝“ｓｐｌｉｍｇ”）は領域ＡＲ４を構成し、ｄｉｖ要素ＥＬＭ９（ｉｄ＝“ｐｂｃａｌｅｎｄｅｒ”）は領域ＡＲ２を構成し、ｉｎｐｕｔ要素ＥＬＭ１０（ｉｄ＝“ｓｒｃｈｂｔｎ”）は領域ＡＲ３を構成している。
このように、ＨＴＭＬファイル１２ａにおける各要素ＥＬＭ５〜ＥＬＭ１０は、ウェブページ上において固有の領域を構成している。

図６は、ＨＴＭＬファイル１２ａをベースとするウェブページ上において強調表示を行うためのＸＭＬファイル１２ｂのソースコードの一例を示す説明図である。ここで、ＸＭＬ（eXtensible Markup Language）とは、ＨＴＭＬと同様、マークアップ言語の一つであり、ユーザが独自のタグを指定できるという利点がある。

図６に示すように、ＸＭＬファイル１２ｂでは、ｃｈｏｒｉｏタグ（＜ｃｈｏｒｉｏ＞）で囲まれたルート要素ＥＬＭＲ内に、ｎｅｗｓタグ（＜ｎｅｗｓ＞）で囲まれた５つのｎｅｗｓ要素ＥＬＭ２１〜ＥＬＭ２５が記述されている。また、ｉｄタグ（＜ｉｄ＞）で囲まれたｉｄ要素ＥＬＭ２１１〜ＥＬＭ２５１、ｓｍｒタグ（＜ｓｍｒ＞）で囲まれたｓｍｒ要素ＥＬＭ２１２〜ＥＬＭ２５２、ｖａｌタグ（＜ｖａｌ＞）で囲まれたｖａｌ要素ＥＬＭ２１３〜ＥＬＭ２５３が、ｎｅｗｓ要素ＥＬＭ２１〜ＥＬＭ２５を親要素とする子要素として記述されている。

ｉｄ要素ＥＬＭ２１１〜ＥＬＭ２５１の内容は、ウェブページ上に子アイコンを表示させるときの表示位置を取得するためのデータである。具体的には、ＨＴＭＬファイル１２ａにおいて、タグ内に要素のｉｄ属性として定義された文字列が記述されている。
ｓｍｒ要素ＥＬＭ２１２〜ＥＬＭ２５２の内容は、ウェブページ上に表示された子アイコンの近傍にアピール情報を吹き出し表示するためのテキストデータである。ｖａｌ要素ＥＬＭ２１３〜ＥＬＭ２５３の内容は、子アイコンを拡大表示するときにアピール情報を表示するためのテキストデータである。このように、ＸＭＬファイル１２ｂには、ｉｄ要素に対応して、テキストデータを内容として有するアピール要素（ｓｍｒ要素、ｖａｌ要素）が記述されている。

本実施形態では、このＸＭＬファイル１２ｂにおいて、ウェブページ上で強調表示させたい箇所をｉｄ要素ＥＬＭ２１１〜ＥＬＭ２５１で定義するとともに、強調表示により提供するテキスト情報をｓｍｒ要素ＥＬＭ２１２〜ＥＬＭ２５２及びｖａｌ要素ＥＬＭ２１３〜ＥＬＭ２５３で定義している。
そして、ＪＳファイル１２ｃ、Ｆｌａｓｈ１ファイル１２ｄ、及びＦｌａｓｈ２ファイル１２ｅに記述されているスクリプトが実行される際に、ＸＭＬファイル１２ｂ内の記述を参照することにより、ＨＴＭＬファイル１２ａをベースとするウェブページ上に、強調表示（子アイコン及びアピール情報の表示）を行うようにしている。
したがって、ウェブページを提供するサーバ１の管理者は、ＸＭＬファイル１２ｂのｉｄ要素の内容を適宜変更することで子アイコンによる強調表示を行う箇所を自由かつ容易に変更することができる上、子アイコンとともに表示するアピール情報についてもｓｍｒ要素又はｖａｌ要素を変更するだけで容易に変更することができる。

図７、８は、クライアント２において、ＪＳファイル１２ｃ、Ｆｌａｓｈ１ファイル１２ｄ、Ｆｌａｓｈ２ファイル１２ｅに記述されているスクリプトが実行されたときの処理手順について示したラダーチャートである。すなわち、ＪＳファイル１２ｃ、Ｆｌａｓｈ１ファイル１２ｄ、Ｆｌａｓｈ２ファイル１２ｅには、クライアント２のコンピュータに図７、８に示す手順を実行させるためのプログラムが記述されている。ここで、図７、８において参照されるＨＴＭＬファイル１２ａは図４に示す構成を有するものとし、ＸＭＬファイル１２ｂは図６に示す構成を有するものとする。
また、図９〜１２は、クライアント２のウェブブラウザ上に表示される画面例について示す説明図である。

図７、８に示す処理は、サーバ１からクライアント２に送信されたＨＴＭＬファイル１２ａがウェブブラウザにより解析され、ｓｃｒｉｐｔ要素ＥＬＭ４（図４参照）の内容が実行されることにより開始される。
つまり、クライアント２のウェブブラウザによりＨＴＭＬファイル１２ａが解析されると、ＨＴＭＬファイル１２ａに記述されている要素内容に従い、図５に示すウェブページが表示される。また、ｓｃｒｉｐｔ要素ＥＬＭ４により、変数“ｙｊＣｈｏｒｉｏＺｏｎｅ”に“ｍａｓｔｈｅａｄ”という文字列が代入されるとともに、ＪＳファイル１２ｃが読み込まれる。そして、ＪＳファイル１２ｃが実行されると、Ｆｌａｓｈ１ファイル１２ｄ、Ｆｌａｓｈ２ファイル１２ｅと協働することにより、図５に示すウェブページに強調表示としてのキャラクターアイコンが重畳表示される（図９〜１２参照）。

図７において、ステップＳ１０１では、Ｆｌａｓｈファイル１２ｄ、１２ｅがＨＴＭＬファイル１２ａに埋め込まれ、親アイコン及び子アイコンの表示制御が行われる。このとき、Ｆｌａｓｈ１ファイル１２ｄの実行による親アイコンについては表示させるように指示され、Ｆｌａｓｈ２ファイル１２ｅの実行による子アイコンについては表示させないように指示される。なお、Ｆｌａｓｈ１ファイル１２ｄによる親アイコンの表示は、後述するステップＳ１０２の配置情報の取得後に行われることとなる。

ステップＳ１０２では、ＨＴＭＬファイル１２ａのｓｃｒｉｐｔ要素ＥＬＭ４において指定された親アイコンの表示に関する情報に基づいて、Ｆｌａｓｈ１ファイル１２ｄの実行により親アイコンを表示するための配置情報が取得される。
具体的には、ｓｃｒｉｐｔ要素ＥＬＭ４に記述された変数“ｙｊＣｈｏｒｉｏＺｏｎｅ（＝ＨＴＭＬファイル１２ａ内の何れかの要素が有しているｉｄ属性）”を引数として、例えば、当該ｉｄ属性を有する要素の高さ、横幅、ウェブブラウザ可視部分左上からのｘ座標、ｙ座標（以下、要素の位置情報と称する）が取得される。図４では、変数“ｙｊＣｈｏｒｉｏＺｏｎｅ”に“ｍａｓｔｈｅａｄ”が代入されているので、“ｍａｓｔｈｅａｄ”をｉｄ属性として有するｄｉｖ要素ＥＬＭ５の位置情報、すなわち、図５における領域ＡＲ６に対応する高さ、横幅、ウェブブラウザのウィンドウ左上からのｘｙ座標が取得されることとなる。
そして、当該要素の位置情報を元に親アイコンを配置するための配置情報（変数）が設定され、Ｆｌａｓｈ１ファイル１２ｄに引き渡される。例えば、要素の位置情報に基づいて、当該要素の表示領域の中央付近のｘｙ座標が配置情報として設定される。

ステップＳ１０３では、親アイコンのシンボルデータを元に親アイコンのインスタンスが生成され、ステップＳ１０２で取得された配置情報に基づく指定位置に親アイコンのインスタンスを表示させる制御が行われる。例えば、ｄｉｖ要素ＥＬＭ５の中央付近が配置情報として設定された場合は、図９に示すように領域ＡＲ６の中央付近に親アイコンＩｐが表示される。

ステップＳ１０４において、親アイコンＩｐがユーザによりクリック操作されると、親アイコンＩｐのインスタンスに対応付けて設定されているイベントハンドラによりＪＳファイル１２ｃの所定のスクリプトが実行される。つまり、Ｆｌａｓｈ１ファイル１２ｄには、ユーザによる親アイコンＩｐのクリック操作を監視し、このクリック操作に基づいて子アイコンを表示するスクリプトを実行するためのイベントハンドラ（ｏｎＭｏｕｓｅＣｌｉｃｋ）が設定されている。

ステップＳ１０５では、Ｆｌａｓｈ１ファイル１２ｄの実行による親アイコンについては表示させないように指示され、Ｆｌａｓｈ２ファイル１２ｅの実行による子アイコンについては表示させるように指示される。つまり、ユーザにより親アイコンＩｐのクリック操作が行われたときには、強調表示のトリガとなる親アイコンＩｐは非表示とされ、強調表示として子アイコンだけが表示されるようになる。

ステップＳ１０６では、ＸＭＬファイル１２ｂが取得され、ＸＭＬファイル１２ｂに記述されているデータの内容（ｎｅｗｓ要素ＥＬＭ２１〜ＥＬＭ２５、ｉｄ要素ＥＬＭ２１１〜ＥＬＭ２５１、ｓｍｒ要素ＥＬＭ２２２〜ＥＬＭ２５２、ｖａｌ要素ＥＬＭ２１３〜ＥＬＭ２５３）が解析される。

ステップＳ１０７では、子アイコンのシンボルデータを元に、ＸＭＬファイル１２ｂに記述されているｎｅｗｓ要素数分（ＸＭＬファイル１２ｂの場合は５個）のインスタンスが生成され、各インスタンスにはｉｄ要素の内容、及びアピール要素（ｓｍｒ要素、ｖａｌ要素）の内容が変数として設定される。
例えば、図６におけるｎｅｗｓ要素ＥＬＭ２４について生成された子アイコンのインスタンスには、ｉｄ要素ＥＬＭ２４１の内容である“ｓｐｌｉｍｇ”という文字列、ｓｍｒ要素の内容である“今日の特集はこれ！・・・”という文字列、ｖａｌ要素の内容である“○○特集だよ！・・・”という文字列が変数として設定される。

ステップＳ１０８では、ＪＳファイル１２ｃに対して子アイコンを表示するための配置情報が要求される。このとき、それぞれの子アイコンのインスタンスに設定されたｉｄ要素の内容を示す変数がＪＳファイル１２ｃに引き渡される。

ステップＳ１０９では、それぞれの子アイコンのインスタンスに設定されたｉｄ要素の内容を示す変数に基づいて、子アイコンを表示するための配置情報が取得される。具体的には、引き渡された変数を引数として、これをｉｄ属性として有している要素の位置情報が取得される。

例えば、図６におけるｎｅｗｓ要素ＥＬＭ２１について生成された子アイコンの場合、ｉｄ要素ＥＬＭ２１１の内容である“ｍａｉｎ”という文字列が位置情報を取得する際の引数とされるので、この“ｍａｉｎ”をｉｄ属性として有しているｄｉｖ要素ＥＬＭ７の位置情報が取得される。つまり、図５における領域ＡＲ１に対応する高さ、横幅、ウェブブラウザのウィンドウ左上からのｘｙ座標が、当該要素の位置情報として取得されることとなる。

同様に、ｎｅｗｓ要素ＥＬＭ２２について生成された子アイコンの場合、ｉｄ要素ＥＬＭ２２１の内容である“ｐｂｃａｌｅｎｄｅｒ”という文字列をｉｄ属性として有しているｄｉｖ要素ＥＬＭ９の位置情報が取得される（領域ＡＲ２）。ｎｅｗｓ要素ＥＬＭ２３について生成された子アイコンの場合、ｉｄ要素ＥＬＭ２３１の内容である“ｓｒｃｈｂｔｎ”という文字列をｉｄ属性として有しているｉｎｐｕｔ要素ＥＬＭ１０の位置情報が取得される（領域ＡＲ３）。
ｎｅｗｓ要素ＥＬＭ２４について生成された子アイコンの場合、ｉｄ要素ＥＬＭ２４１の内容である“ｓｐｌｉｍｇ”という文字列をｉｄ属性として有しているｄｉｖ要素ＥＬＭ８の位置情報が取得される（領域ＡＲ４）。ｎｅｗｓ要素ＥＬＭ２５について生成された子アイコンの場合、ｉｄ要素ＥＬＭ２５１の内容である“ｃｏｎｔｅｎｔｂｏｘ”という文字列をｉｄ属性として有しているｄｉｖ要素ＥＬＭ６の位置情報が取得される（領域ＡＲ５）。

そして、それぞれの要素の位置情報を元に子アイコンを配置するための配置情報（変数）が設定され、Ｆｌａｓｈ２ファイル１２ｅに引き渡される。例えば、それぞれの要素の位置情報に基づいて、要素の左上隅や右上隅のｘｙ座標が配置情報として設定される。

図８のステップＳ１１０では、ステップＳ１０９で取得された配置情報に基づく指定位置にそれぞれの子アイコンのインスタンスを表示させる制御が行われ、ウェブページに強調表示が重畳される。
例えば、図１０に示すように、ｄｉｖ要素ＥＬＭ７に対応する領域ＡＲ１には、この領域ＡＲ１を注目させるための子アイコンＩｃ１が表示される。また、ｄｉｖ要素ＥＬＭ９に対応する領域ＡＲ２には子アイコンＩｃ２、ｉｎｐｕｔ要素ＥＬＭ１０に対応する領域ＡＲ３には子アイコンＩｃ３、ｄｉｖ要素ＥＬＭ８に対応する領域ＡＲ４には子アイコンＩｃ４、ｄｉｖ要素ＥＬＭ６に対応する領域ＡＲ５には子アイコンＩｃ５が表示される。

ステップＳ１１１において、子アイコンＩｃ１〜Ｉｃ５の何れかがユーザによりマウスオーバー操作（マウスカーソルを子アイコン上に乗せる操作）されると、当該子アイコンＩｃ１〜Ｉｃ５のインスタンスに対応付けて設定されているイベントハンドラにより所定のスクリプトが実行される。つまり、Ｆｌａｓｈ２ファイル１２ｅには、ユーザによる子アイコンＩｃ１〜Ｉｃ５のマウスオーバー操作を監視し、このマウスオーバー操作に基づいて子アイコンの近傍に詳細情報を吹き出し表示するスクリプトを実行するためのイベントハンドラ（ｏｎＭｏｕｓｅＯｖｅｒ）が設定されている。

ステップＳ１１２では、マウスオーバー操作された子アイコンの近傍にアピール情報が吹き出し表示される。具体的には、子アイコンＩｃ１〜Ｉｃ５のインスタンスには、それぞれｓｍｒ要素ＥＬＭ２１２〜ＥＬＭ２５２の内容が変数として設定されているので（ステップＳ１０７）、この変数を吹き出し枠の中に表示させる制御が行われる。
例えば、図１０に示す子アイコンＩｃ１〜Ｉｃ５のうち、子アイコンＩｃ４がユーザによりマウスオーバー操作されると、図１１に示すアピール情報の吹き出し表示が行われる。すなわち、図１１に示すように、子アイコンＩｃ４の近傍に吹き出し枠ＢＬが現れ、その中にアピール情報ＴＸＴ１が表示される。図６に示すｓｍｒ要素ＥＬＭ２４２の内容は、“今日の特集はこれ！○○ちゃん可愛いね！”というテキストデータなので、これが吹き出し枠ＢＬの中に表示されている。

ステップＳ１１３において、子アイコンＩｃ１〜Ｉｃ５の何れか（マウスオーバー操作された子アイコン）がユーザによりクリック操作されると、当該子アイコンＩｃ１〜Ｉｃ５のインスタンスに対応付けて設定されているイベントハンドラにより所定のスクリプトが実行される。つまり、Ｆｌａｓｈ２ファイル１２ｅには、ユーザによる子アイコンＩｃ１〜Ｉｃ５のクリック操作を監視し、このクリック操作に基づいて子アイコンを拡大表示するスクリプトを実行するためのイベントハンドラ（ｏｎＭｏｕｓｅＣｌｉｃｋ）が設定されている。

ステップＳ１１４では、クリック操作された子アイコンが拡大表示されるとともに、アピール情報が表示される。具体的には、子アイコンのシンボルを元に生成される拡大表示用のインスタンス（拡大アイコン）が、ウェブページ上にオーバーレイ表示される。また、子アイコンＩｃ１〜Ｉｃ５のインスタンスには、それぞれｖａｌ要素ＥＬＭ２１３〜ＥＬＭ２５３の内容が変数として設定されているので（ステップＳ１０７）、クリック操作された子アイコンＩｃ１〜Ｉｃ５に対応付けて設定されている変数が拡大アイコンの近傍にアピール情報として表示される。

例えば、図１１に示す子アイコンＩｃ４がユーザによりクリック操作されると、図１２に示すように拡大アイコンＩｃ４１がウェブブラウザのウィンドウ全体に表示されるとともに、この拡大アイコンＩｃ４１の近傍にアピール情報ＴＸＴ２が表示される。図６に示すｖａｌ要素ＥＬＭ２４３の内容は、“○○特集だよ！・・・”というテキストデータなので、これが拡大アイコンＩｃ４１の右側に表示されている。なお、拡大アイコンＩｃ４１の背景領域（図１２の網掛け領域）ＢＧは透過表示とされ、下層のウェブページを視認可能になっている。

ステップＳ１１５において、拡大アイコンＩｃ４１の背景領域ＢＧがユーザによりクリック操作されると、背景領域ＢＧに対応付けて設定されているイベントハンドラにより所定のスクリプトが実行される。つまり、Ｆｌａｓｈ２ファイル１２ｅには、ユーザによる背景領域ＢＧのクリック操作を監視し、このクリック操作に基づいて拡大表示を解除するスクリプトを実行するためのイベントハンドラ（ｏｎＭｏｕｓｅＣｌｉｃｋ）が設定されている。

ステップＳ１１６では、拡大アイコンＩｃ４１によるオーバーレイ表示が解除される。すなわち、図１２において、背景領域ＢＧがクリック操作されると、図１０に示す画面に移行される。

なお、ユーザにより子アイコンＩｃ１〜Ｉｃ５の何れかのマウスオーバー操作が行われた後（ステップＳ１１１、Ｓ１１２）、クリック操作が行われずに子アイコンＩｃ１〜Ｉｃ５の上からマウスカーソルが離れたとき（マウスアウト操作）にも、図１０に示す画面に移行される。つまり、Ｆｌａｓｈ２ファイル１２ｅには、ユーザによる子アイコンからのマウスアウト操作を監視し、このマウスアウト操作に基づいて吹き出し表示を解除するスクリプトを実行するためのイベントハンドラ（ｏｎＭｏｕｓｅＯｕｔ）が設定されている。

ステップＳ１１７において、子アイコンＩｃ１〜Ｉｃ５以外の領域がユーザによりクリック操作されると、イベントハンドラにより所定のスクリプトが実行される。つまり、Ｆｌａｓｈ２ファイル１２ｅには、ユーザによる子アイコン以外の領域のクリック操作を監視し、このクリック操作に基づいて子アイコンを非表示、親アイコンを表示とする（つまり、初期状態に戻す）スクリプトを実行するためのイベントハンドラ（ｏｎＭｏｕｓｅＣｌｉｃｋ）が設定されている。

ステップＳ１１８では、Ｆｌａｓｈ１ファイル１２ｄの実行による親アイコンについては表示させるように指示され、Ｆｌａｓｈ２ファイル１２ｅの実行による子アイコンについては表示させないように指示される。すなわち、図１０において子アイコンＩｃ１〜Ｉｃ５以外の領域がユーザによりクリック操作されると、図９に示す画面に移行される。

上述したように、ＪＳファイル１２ｃ、Ｆｌａｓｈ１ファイル１２ｄ、及びＦｌａｓｈ２ファイル１２ｅに記述された表示制御プログラム（スクリプト）は、ＨＴＭＬファイル１２ａに記述されたスクリプト（ｓｃｒｉｐｔ要素ＥＬＭ４、外部ＪＳファイル１２ｃを参照する場合を含む）が実行されることにより、ＨＴＭＬファイル１２ａに記述されている識別情報（ｉｄ属性）を内容として有するｉｄ要素が記述されたＸＭＬファイル１２ｂを取得するステップ（図７のステップＳ１０６）と、ＸＭＬファイル１２ｂを解析してｉｄ要素の内容（＝ＨＴＭＬファイル内のｉｄ属性）を抽出するステップ（図７のステップＳ１０６）と、抽出されたｉｄ要素の内容を識別情報として有するＨＴＭＬファイル内の要素の位置情報を取得し、これに基づいて強調表示を行うための配置情報を設定するステップ（ステップＳ１０９）と、配置情報に基づくウェブページ上の特定箇所に、第１表示態様による強調表示（図１０に示す子アイコンＩｃ１〜Ｉｃ５の表示）を行うステップ（図８のステップＳ１１０）とを、クライアント２のコンピュータ（制御部２１）に実行させる。

すなわち、本実施形態では、ウェブページ内の内容をカテゴライズするためにＨＴＭＬファイル１２ａ内の要所に予め埋め込まれているタグ情報（ｉｄ属性）を、ＸＭＬファイル１２ｂにｉｄ要素として記述し、これを表示制御プログラム側で解析することにより強調表示の挿入位置を指定している。
これにより、ウェブページのベースとなるＨＴＭＬファイル１２ａの記述を大幅に変更することなく、ＪＳファイル１２ｃを実行するための数行のｓｃｒｉｐｔ要素を記述するだけで、ウェブページの特定箇所に容易に強調表示を追加することができる。
また、強調表示の挿入は、ウェブページのベースとなるＨＴＭＬファイル１２ａ本体を修正することなく、ＸＭＬファイル１２ｂで挿入箇所を示すｉｄ要素とアピール要素（ｓｍｒ要素、ｖａｌ要素）を修正すればよいので、編集が容易となる。さらに、ＨＴＭＬベースのウェブページに容易に対応でき、また、挿入するアピール要素（テキスト情報）の更新も容易である。
したがって、既に運用されているウェブページであっても、容易に強調表示を付加することができるうえ、ウェブページの基本的なレイアウトが崩れてしまう虞もない。

また、ステップＳ１０６以降の処理は、ＨＴＭＬファイル１２ａに基づくウェブページが表示された状態（図９参照）におけるユーザの任意操作（トリガとなる親アイコンＩｐのクリック操作）に基づいて実行されるので、通常状態でのウェブページのデザインは損なわれない。
ステップＳ１０９ではステップＳ１０６で抽出された複数のｉｄ要素のそれぞれの内容に基づいて複数の配置情報が設定され、ステップＳ１１０では複数の配置情報に基づくウェブページ上の複数箇所に強調表示が行われるので、ユーザに注目させたい箇所が複数ある場合にも容易に対応できる。
ステップＳ１１０では、強調表示としてキャラクターアイコン（子アイコンＩｃ１〜Ｉｃ５）をアニメーション表示するので、注目させたい箇所を視覚的に訴えることができる。

さらに、ステップＳ１１２、Ｓ１１４では、ウェブページ上において第１表示態様による強調表示（子アイコンＩｃ１〜Ｉｃ５）がユーザ操作（マウスオーバー、クリック）されることに基づいて、第１表示態様とは異なる第２表示態様による強調表示（吹き出し表示、拡大オーバーレイ表示）を行う。これにより、ユーザが所望する箇所だけがクローズアップされるので、ウェブページ内の要所をユーザに効果的に意識させることができる。
また、ステップＳ１１２、Ｓ１１４では、第２表示態様による強調表示として（子アイコン又は拡大アイコンの近傍に）テキスト情報からなるアピール情報を表示する。これにより、キャラクターアイコンにより特定箇所を注目させる上、テキストによるアピール情報を提供できるので、強調表示による利便性が向上し、ユーザの興味を引くことができる。

以上、本発明者によってなされた発明を実施形態に基づいて具体的に説明したが、本発明は上記実施形態に限定されるものではなく、その要旨を逸脱しない範囲で変更可能である。
上記実施形態では、キャラクターアイコン（親アイコンＩｐ、子アイコンＩｃ１〜Ｉｃ５）は、ウェブブラウザのウィンドウにおけるｘｙ座標を配置情報として与えられ、当該箇所に出現するようにしているが、ウェブページ上において、最終的に配置される箇所とは別の箇所（例えば、ウィンドウの外縁）に出現し、そこから移動して特定箇所に到達するようにしてもよい。この場合、キャラクターアイコンの表示位置を設定する際、要素の位置情報と、ウィンドウの高さ及び横幅、不可視領域を含むウェブページ全体の高さ及び横幅に基づいて、キャラクターアイコンの配置情報が設定される。
このように、通常状態のウェブページの表示（図９参照）から強調表示（図１０参照）に遷移させる際、キャラクターアイコンを注目させたい要所まで動的にアニメーション表示することにより、アピールしたい情報を効果的にユーザに視認させることができる。

また、キャラクターアイコンがウェブページ上の対応要素の全体又は一部を歩き回るように表示制御を行うようにしてもよいし、テキストからなるアピール情報だけで強調表示を行うようにしてもよい。

上記実施形態では、キャラクターアイコンの表示に係る制御プログラムを、ＪＳファイル１２ｃに記述されたスクリプトとＦｌａｓｈファイル１２ｄ、１２ｅに記述されたスクリプトの組合せで構成しているが、ＪＳファイル又はＦｌａｓｈファイルが単独で制御プログラムを構成することもできる。また、クライアントのコンピュータに図７、８に示す手順を実行させるものであれば、その他のプログラム言語を利用してもよい。

今回開示された実施の形態はすべての点で例示であって制限的なものではないと考えられるべきである。本発明の範囲は上記した説明ではなくて特許請求の範囲によって示され、特許請求の範囲と均等の意味および範囲内でのすべての変更が含まれることが意図される。

第１実施形態に係るネットワーク構成について示す概略図である。 サーバ１のハードウェア構成の概略を示すブロック図である。 クライアント２のハードウェア構成の概略を示すブロック図である。 サーバ１の記憶部１２に格納されているＨＴＭＬファイル１２ａのソースコードの一部を抜粋して示す説明図である。 図４に示すＨＴＭＬファイル１２ａに基づくウェブページの表示例を示す説明図である。 強調表示を行うためのＸＭＬファイル１２ｂのソースコードの一例を示す説明図である。 クライアント２において表示制御プログラムが実行されたときの処理手順について示したラダーチャートである。 クライアント２において表示制御プログラムが実行されたときの処理手順について示したラダーチャートである。 強調表示のトリガとなる親アイコンの表示例について示す説明図である。 第１表示態様による強調表示としての子アイコンの表示例について示す説明図である。 第２表示態様による強調表示の一例としての吹き出し表示について示す説明図である。 第２表示態様による強調表示の一例としての拡大オーバーレイ表示について示す説明図である。

符号の説明

１ サーバ
１１ 制御部
１２ 記憶部
１２ａ ＨＴＭＬファイル
１２ｂ ＸＭＬファイル
１２ｃ ＪａｖａＳｃｒｉｐｔファイル
１２ｄ Ｆｌａｓｈ１ファイル
１２ｅ Ｆｌａｓｈ２ファイル
１３ 入出力部
１４ 通信部
１５ データベース

Claims (10)

1. ネットワークを介してサーバに接続されたクライアントのウェブブラウザ上にＨＴＭＬファイルに基づくウェブページを表示する際に、前記ウェブページに強調表示を追加する方法であって、
   前記ＨＴＭＬファイルに記述された呼び出しコードが前記クライアントに読み込まれることにより第１プログラムの実行を開始するステップと、
   前記ウェブページ上の特定箇所に強調表示を配置するための第２プログラムと強調表示のトリガとなる親アイコンを表示するための第３プログラムの呼び出しコードを、前記読み込んだＨＴＭＬファイルに追記するステップと、
   前記ＨＴＭＬファイルから前記ウェブページ上に強調表示を配置するための配置情報を取得するステップと、
   前記取得した配置情報を第２プログラムに引き渡すステップと、
   前記第２プログラムを実行することにより、強調表示情報が記述されたＸＭＬファイルを取得し、前記強調表示としての子アイコンを前記ウェブページ上の前記配置情報に基づく複数の特定箇所に配置するステップと、を有し、
   前記配置情報は、前記ウェブページ上において、前記特定箇所とは別の場所に強調表示のための子アイコンを表示させた後、当該別の箇所から前記特定箇所に到達するまで子アイコンを移動させる表示を行うための情報を含み、
   前記強調表示としての子アイコンを前記ウェブページ上の前記配置情報に基づく複数の特定箇所に配置するステップは、前記第３プログラムを実行することにより前記親アイコンを前記ウェブページ上の予め定められた箇所に表示し、前記親アイコンへの操作を受けると前記第３プログラムを終了して当該親アイコンを非表示にすると共に前記第２プログラムを実行して前記複数の特定箇所に配置される子アイコンを全て表示し、当該子アイコンが表示されている箇所以外の領域が操作されると、前記第２プログラムを終了して当該子アイコンを全て非表示にすると共に前記第３プログラムを実行して前記親アイコンを表示するステップであることを特徴とする強調表示追加方法。
2. 前記配置情報は、ＨＴＭＬファイル内の要素の位置情報と、前記ウェブページが表示されるウィンドウの高さ及び横幅、不可視領域を含む前記ウェブページ全体の高さ及び横幅に基づいて前記アイコンの表示位置を設定するための情報を含むことを特徴とする請求項１に記載の強調表示追加方法。
3. 前記特定箇所は、ＸＭＬファイルにより記述されたｉｄ要素の内容を識別情報として有する前記ＨＴＭＬファイル内の要素の位置情報に基づいて設定されることを特徴とする請求項２に記載の強調表示追加方法。
4. ネットワークを介してサーバに接続されたクライアントのウェブブラウザ上にＨＴＭＬファイルに基づくウェブページを表示する際に、前記ウェブページに強調表示を追加する方法であって、
   前記ＨＴＭＬファイルに記述されたスクリプトが実行されることにより、強調表示のトリガとなる親アイコンをウェブページ上の予め定められた箇所に表示し、当該親アイコンに対する操作を受けると、前記ＨＴＭＬファイル内の要素に付与された識別情報を内容として有する複数のｉｄ要素が記述されたＸＭＬファイルを取得する第１ステップと、
   前記ＸＭＬファイルを解析して前記ｉｄ要素の内容を抽出する第２ステップと、
   抽出された前記ｉｄ要素の内容を識別情報として有する前記ＨＴＭＬファイル内の要素の位置情報を取得し、これに基づいて強調表示を行うための複数の配置情報を設定する第３ステップと、
   前記複数の配置情報に基づく前記ウェブページ上の複数の特定箇所に、第１表示態様による強調表示を行う第４ステップと、を有し、
   前記配置情報は、前記ウェブページ上において、前記特定箇所とは別の場所に強調表示のための子アイコンを表示させた後、当該別の箇所から前記特定箇所に到達するまで子アイコンを移動させる表示を行うための情報を含み、
   前記第４ステップは、前記第１表示態様による強調表示としての子アイコンを複数表示し、子アイコンが表示されている箇所以外の領域がユーザにより操作されると全ての子アイコンを非表示にすると共に前記親アイコンを表示するステップであることを特徴とする強調表示追加方法。
5. 前記配置情報は、ＨＴＭＬファイル内の要素の位置情報と、前記ウェブページが表示されるウィンドウの高さ及び横幅、不可視領域を含む前記ウェブページ全体の高さ及び横幅に基づいて前記アイコンの表示位置を設定するための情報を含むことを特徴とする請求項４に記載の強調表示追加方法。
6. 前記特定箇所は、前記ＸＭＬファイルにより記述された前記ｉｄ要素の内容を識別情報として有する前記ＨＴＭＬファイル内の要素の位置情報に基づいて設定されることを特徴とする請求項４または５のいずれか一項に記載の強調表示追加方法。
7. ネットワークを介してサーバに接続されたクライアントのウェブブラウザ上にＨＴＭＬファイルに基づくウェブページを表示する際に、前記ウェブページに強調表示を追加するための表示制御プログラムであって、
   前記ＨＴＭＬファイルに記述されたスクリプトが実行されることにより、強調表示のトリガとなる親アイコンをウェブページ上の予め定められた箇所に表示し、当該親アイコンに対する操作を受けると、前記ＨＴＭＬファイル内の要素に付与された識別情報を内容として有する複数のｉｄ要素が記述されたＸＭＬファイルを取得する第１ステップと、
   前記ＸＭＬファイルを解析して前記ｉｄ要素の内容を抽出する第２ステップと、
   抽出された前記ｉｄ要素の内容を識別情報として有する前記ＨＴＭＬファイル内の要素の位置情報を取得し、これに基づいて強調表示を行うための複数の配置情報を設定する第３ステップと、
   前記複数の配置情報に基づく前記ウェブページ上の複数の特定箇所に、第１表示態様による強調表示を行う第４ステップと、を前記クライアントのコンピュータに実行させ、
   前記配置情報は、前記ウェブページ上において、前記特定箇所とは別の場所に強調表示のための子アイコンを表示させた後、当該別の箇所から前記特定箇所に到達するまで子アイコンを移動させる表示を行うための情報を含み、
   前記第４ステップは、前記第１表示態様による強調表示としての子アイコンを複数表示し、子アイコンが表示されている箇所以外の領域がユーザにより操作されると全ての子アイコンを非表示にすると共に前記親アイコンを表示するステップであることを特徴とする表示制御プログラム。
8. 前記配置情報は、ＨＴＭＬファイル内の要素の位置情報と、前記ウェブページが表示されるウィンドウの高さ及び横幅、不可視領域を含む前記ウェブページ全体の高さ及び横幅に基づいて前記アイコンの表示位置を設定するための情報を含むことを特徴とする請求項７に記載の表示制御プログラム。
9. 前記特定箇所は、前記ＸＭＬファイルにより記述されたｉｄ要素の内容を識別情報として有する前記ＨＴＭＬファイル内の要素の位置情報に基づいて設定されることを特徴とする請求項７または８に記載の表示制御プログラム。
10. 請求項７から９のいずれか一項に記載の表示制御プログラムが記述された制御ファイル、前記ＨＴＭＬファイル、及び前記ＸＭＬファイルを保有し、
    前記クライアントからの要求に伴い前記各ファイルを提供することを特徴とするサーバ。

Images