説明

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

【課題】ウェブページのベースとなるHTMLファイルの記述を大幅に変更することなく、ウェブページの特定箇所に容易に強調表示を追加することができる技術を提供する。
【解決手段】クライアントにおいて、HTMLファイルに記述されたスクリプトが実行されると、HTMLファイル内の要素に付与された識別情報を内容として有するid要素が記述されたXMLファイルを取得し、XMLファイルを解析してid要素の内容を抽出する。そして、抽出されたid要素の内容を識別情報として有するHTMLファイル内の要素の位置情報を取得し、これに基づいて強調表示を行うための配置情報を設定し、配置情報に基づくウェブページ上の特定箇所に第1表示態様による強調表示を行う。

【発明の詳細な説明】
【技術分野】
【0001】
本発明は、クライアントのウェブブラウザ上にウェブページを表示する際に、ウェブページの特定箇所に強調表示を追加する方法、表示制御プログラム、及びサーバに関する。
【背景技術】
【0002】
近年、様々な情報がインターネット上で公開されており、パーソナルコンピュータ等のクライアントによりこれらの情報を容易に閲覧できるようになっている。
具体的には、クライアントでウェブブラウザを起動して所望のURLを要求すると、該当する表示用ファイル(HTML(Hyper Text Markup Language)と呼ばれるマークアップ言語で記述されたファイル、以下HTMLファイルと称する)がサーバから提供される。そして、HTMLファイルがウェブブラウザによって解析され、所定のレイアウトで文字列や画像等を配置したウェブページが表示される。
HTMLでは、ウェブブラウザで解析可能なタグと呼ばれる命令(「<」+「要素名(半角英数字)」+「>」で表される)が使用され、このタグにより文字列やウェブページの基本的な構造、レイアウトなどの情報が記述されている。なお、開始タグ(<“要素名”>)と終了タグ(</“要素名”>)を用いて構成される全体は要素と呼ばれ、開始タグと終了タグで挟まれた部分は要素内容と呼ばれる。
【0003】
ところで、インターネットは広告媒体として非常に有効であるため、多数のウェブページにおいてバナー等による広告表示がなされている。例えば、特許文献1には、ウェブページの広告表示を目立たせる目的で、ウェブページ内におけるユーザの注目を得やすい位置(例えば、クリック用のボタンアイコンやユーザが文字列を入力するためのテキストボックスの外周上等)に、広告を表示させる方法が開示されている。
この場合、HTMLファイル内において、広告が挿入される箇所を予めレイアウト情報として設定してウェブページのデザインが行われる。例えば、HTMLファイルにおいてimgタグを利用して画像ファイルや表示位置等の表示属性(レイアウト情報)を指定することで、広告画像をウェブページに配置することができる。ただし、ウェブページの主デザインに影響を与えないようにするため、広告を表示できる箇所は限られている。
【0004】
また、ウェブページ作成用のアプリケーションソフトを利用することにより、Flashムービー等のコンテンツを埋め込んだ動的なウェブページも比較的簡単に作成できるようになっている。
例えば、HTMLファイルにおいてobjectタグやembedタグを利用して、再生する外部ファイル(Flashファイル等)や表示属性を指定することで、Flashファイル等をウェブページに埋め込むことができる。ウェブブラウザでは、追加インストールされたプラグインソフト(例えば、Flash Player)によって、Flashムービーの再生が行われることとなる。
【0005】
上述したように、HTMLファイルに所要のタグを記述することにより、バナー広告やFlashムービー等のコンテンツをウェブページ上の所望の箇所に配置することができる。このようなコンテンツは、ウェブページ上の特定箇所にユーザの注目を向けるための強調表示として利用される。
【特許文献1】特開2002−7854号公報
【発明の開示】
【発明が解決しようとする課題】
【0006】
しかしながら、既に運用されているウェブページ上の一部にキャラクターアイコンを挿入するなどして強調表示を行いたい場合、HTMLファイルの記述を変更しなければならないので、編集が容易ではない。特に、ウェブページ上の複数箇所を強調表示する場合や、強調表示する箇所を頻繁に変更したい場合には、煩雑な作業が必要となる。
また、ウェブページのベースとなるHTMLファイルを書き換えることは、変更に伴いウェブページ全体のレイアウトが崩れてしまう等、正常に表示されなくなる虞があるため、運用上望ましくない。
【0007】
本発明は、ウェブページのベースとなるHTMLファイルの記述を大幅に変更することなく、ウェブページの特定箇所に容易に強調表示を追加することができる強調表示追加方法、表示制御プログラム、及びサーバを提供することを目的とする。
【課題を解決するための手段】
【0008】
上記目的を達成するため、請求項1に記載の発明は、ネットワークを介してサーバに接続されたクライアントのウェブブラウザ上にHTMLファイルに基づくウェブページを表示する際に、前記ウェブページに強調表示を追加する方法であって、
前記HTMLファイルに記述された呼び出しコードが前記クライアントに読み込まれることにより第1プログラムの実行を開始するステップと、
前記ウェブページ上に強調表示を配置するプログラムの呼び出しコードを、前記読み込んだHTMLファイルに追記するステップと、
前記HTMLファイルから前記ウェブページ上に強調表示を配置するための配置情報を取得するステップと、
前記取得した配置情報を前記第2プログラムに引き渡すステップと、を有することを特徴とする。
【0009】
請求項2に記載の発明は、請求項1に記載の強調表示追加方法において、前記第2プログラムを実行することにより、強調表示情報が記述されたXMLファイルを取得するステップと、
前記XMLファイルから前記強調表示情報を取得するステップと、
前記引き渡された配置情報に基づいて、前記強調表示情報を前記ウェブページ上に配置するステップと、を有することを特徴とする。
【0010】
請求項3に記載の発明は、ネットワークを介してサーバに接続されたクライアントのウェブブラウザ上にHTMLファイルに基づくウェブページを表示する際に、前記ウェブページに強調表示を追加する方法であって、
前記HTMLファイルに記述されたスクリプトが実行されることにより、前記HTMLファイル内の要素に付与された識別情報を内容として有するid要素が記述されたXMLファイルを取得する第1ステップと、
前記XMLファイルを解析して前記id要素の内容を抽出する第2ステップと、
抽出された前記id要素の内容を識別情報として有する前記HTMLファイル内の要素の位置情報を取得し、これに基づいて強調表示を行うための配置情報を設定する第3ステップと、
前記配置情報に基づく前記ウェブページ上の特定箇所に、第1表示態様による強調表示を行う第4ステップと、を有することを特徴とする。
【0011】
請求項4に記載の発明は、請求項3に記載の強調表示追加方法において、前記HTMLファイルに基づくウェブページが表示された状態におけるユーザ操作に基づいて開始されることを特徴とする。
【0012】
請求項5に記載の発明は、請求項3又は4に記載の強調表示追加方法において、前記XMLファイルには前記id要素が複数記述されており、
前記第3ステップでは、前記第2ステップで抽出された前記複数のid要素のそれぞれの内容に基づいて複数の配置情報を設定し、
前記第4ステップでは、前記複数の配置情報に基づく前記ウェブページ上の複数の箇所に、前記第1表示態様による強調表示を行うことを特徴とする。
【0013】
請求項6に記載の発明は、請求項3から5のいずれか一項に記載の強調表示追加方法において、前記ウェブページ上において前記第1表示態様による強調表示がユーザ操作されることに基づいて、前記第1表示態様とは異なる第2表示態様による強調表示を行う第5ステップを有することを特徴とする。
【0014】
請求項7に記載の発明は、請求項3から6のいずれか一項に記載の強調表示追加方法において、前記強調表示は、キャラクターアイコンを含む表示であることを特徴とする。
【0015】
請求項8に記載の発明は、請求項7に記載の強調表示追加方法において、前記キャラクターアイコンはアニメーション表示されることを特徴とする。
【0016】
請求項9に記載の発明は、請求項3から8のいずれか一項に記載の強調表示追加方法において、前記XMLファイルには、前記id要素に対応して、テキスト情報を内容として有するアピール要素が記述されており、
前記強調表示は、前記アピール要素に基づくアピール情報を含む表示であることを特徴とする。
【0017】
請求項10に記載の発明は、請求項3から9のいずれか一項に記載の強調表示追加方法において、前記スクリプトは、前記HTMLファイルに記述された呼び出しコードが前記クライアントに読み込まれることにより実行されるFlashファイルに記述されたスクリプト、JavaScriptファイルに記述されたスクリプト、又はFlashファイルに記述されたスクリプトとJavaScriptファイルに記述されたスクリプトの組み合わせのうちの何れかであることを特徴とする。
【0018】
請求項11に記載の発明は、ネットワークを介してサーバに接続されたクライアントのウェブブラウザ上にHTMLファイルに基づくウェブページを表示する際に、前記ウェブページに強調表示を追加するための表示制御プログラムであって、
前記HTMLファイルに記述されたスクリプトが実行されることにより、前記HTMLファイル内の要素に付与された識別情報を内容として有するid要素が記述されたXMLファイルを取得する第1ステップと、
前記XMLファイルを解析して前記id要素の内容を抽出する第2ステップと、
抽出された前記id要素の内容を識別情報として有する前記HTMLファイル内の要素の位置情報を取得し、これに基づいて強調表示を行うための配置情報を設定する第3ステップと、
前記配置情報に基づく前記ウェブページ上の特定箇所に、第1表示態様による強調表示を行う第4ステップと、を前記クライアントのコンピュータに実行させることを特徴とする。
【0019】
請求項12に記載の発明は、請求項11に記載の表示制御プログラムが記述された制御ファイル、前記HTMLファイル、及び前記XMLファイルを保有し、
前記クライアントからの要求に伴い前記各ファイルを提供することを特徴とするサーバである。
【発明の効果】
【0020】
本発明によれば、ウェブページのベースとなるHTMLファイルの記述を大幅に変更することなく、ウェブページの特定箇所に容易に強調表示を追加することができる。
【発明を実施するための最良の形態】
【0021】
以下、本発明の実施の形態を図面に基づいて説明する。
図1は、本実施形態に係るネットワーク構成について示す概略図である。
本実施形態では、サーバ1からクライアント2に、ネットワークNを介してコンテンツ(例えば、ウェブページ等)を提供し、クライアント2においてコンテンツを利用する場合について示している。
【0022】
図1に示すように、サーバ1には、通信ネットワークNを介してクライアント2(例えば、パーソナルコンピュータ2a、携帯電話2b等)が接続されている。
通信ネットワークNは、インターネットや電気通信事業者等の電話回線網、携帯電話通信網等であり、当該通信ネットワークNに接続するサーバ1とクライアント2の間を、データ通信可能に接続する。
【0023】
図2は、サーバ1のハードウェア構成の概略を示すブロック図である。本実施形態におけるサーバ1は、例えば、検索サービスやリンク集、ニュース配信などを提供するポータルサイトのウェブサーバである。
図2に示すように、サーバ1は、制御部11、記憶部(補助記憶)12、入出力部13、通信部14、データベース15等を備えた一般的なコンピュータである。各ブロックはバスライン16により電気的に接続されている。
【0024】
制御部11は、演算/制御装置としてのCPU(Central Processing Unit)111、主記憶装置としてのRAM(Random Access Memory)112及びROM(Read Only Memory)113で構成される。
ROM113には、BIOS(Basic Input Output System)と呼ばれるプログラムや基本的な設定データが記憶されている。RAM112には、記憶部12から読み出されたOSや各種アプリケーションなどのプログラムが展開される。
CPU111は、RAM112に展開されたプログラムに従って各種処理を実行し、各ブロックを制御する。
【0025】
記憶部12は、例えばハードディスク等で構成され、OS、各種アプリケーションプログラム(例えば、サーバ用プログラムやウェブアプリケーション)、及び各種データ等が記憶されている。また、クライアント2のウェブブラウザ上にウェブページを表示するためのファイル(HTMLファイル、画像ファイル、プログラムファイル等)も、この記憶部12に記憶されている。
本実施形態では、ポータルサイトのトップページ用のファイルとして、HTMLファイル12a、XMLファイル12b、JavaScriptファイル(JavaScriptは登録商標、以下JSファイルと称する)12c、Flash1ファイル12d、Flash2ファイル12eが、記憶部12内の同じフォルダに格納されている。
【0026】
HTMLファイル12aは、提供するウェブページのベースとなるファイルであり、ウェブページを表示するためのHTMLが記述されている。
XMLファイル12bには、HTMLファイル12aをベースとするウェブページにおいて強調表示を行うためのデータ(強調表示情報)が記述されている。ここで、強調表示とは、ウェブページ内の特定箇所にユーザの注目を向けさせ得る表示であり、本実施形態ではキャラクターアイコンをウェブページ内の特定箇所に配置することにより強調表示を行う。
【0027】
JSファイル12cは、HTMLファイル12aに記述されたスクリプトが実行されることにより参照される外部ファイルであり、Flashファイル12d、12eと協働してキャラクターアイコンによる強調表示を行うためのスクリプトが記述されている。JSファイル12cに記述されたスクリプトが実行されると、例えば、Flashファイル12d、12eをHTMLファイル12aに埋め込んだり、ウェブページを構成する要素に関する各種情報(例えば、後述する位置情報等)を取得し、Flashファイル12d、12eに引き渡したりする制御が行われる。
【0028】
Flash1ファイル12dには、強調表示のトリガとなるキャラクターアイコン(以下、親アイコンと称する)の表示制御を行うためのスクリプトが記述されている。
Flash2ファイル12eには、強調表示としてのキャラクターアイコン(以下、子アイコン)の表示制御を行うためのスクリプトが記述されている。
また、Flash1ファイル12d及びFlash2ファイル12eには、アニメーション表示されるキャラクターアイコンのシンボル(例えば、キャラクターアイコンの手足が動くムービークリップ)のデータが含まれている。
Flash1ファイル12d又はFlash2ファイル12eに記述されたスクリプトが実行されると、例えば、JSファイル12cから引き渡された情報に基づいてウェブページ上の特定箇所にキャラクターアイコンを表示する制御が行われる。
【0029】
このように、本実施形態では、JSファイル12c、Flash1ファイル12d、及びFlash2ファイル12eにより、ウェブページ上でキャラクターアイコンによる強調表示を制御する表示制御プログラムを構成している。
【0030】
入出力部13は、サーバ1の管理者が利用するためのユーザインターフェースを構成する。
通信部14は、TCP/IP等の通信プロトコルに従って処理を行い、ネットワークNを介してクライアント2とデータの送受信を行う。
データベース15には、様々なデータが整理されて格納されている。例えば、検索データベースには、検索対象となるキーワードと、このキーワードで抽出されるコンテンツが関連付けて登録されている。
【0031】
サーバ1のCPU111は、サーバ用ソフトウェア及びウェブアプリケーションを実行することにより、クライアント2のウェブブラウザ上におけるユーザ操作に応じた処理を行う。例えば、クライアント2のウェブブラウザ上においてユーザが検索操作を行うと、サーバ1は検索条件を満たすコンテンツを検索し、検索結果を含む新たなHTMLファイルを生成し、これをクライアント2に送信する。
また、サーバ1は、強調表示を追加するための表示制御プログラムが記述された制御ファイル12c〜12e、HTMLファイル12a、及びXMLファイル12bを保有し、クライアント2からの要求に伴い各ファイルを送信する。
【0032】
図3は、クライアント2のハードウェア構成の概略を示すブロック図である。
図3に示すように、クライアント2は、制御部21、記憶部22、入力部23、表示部24、通信部25等を備えた一般的なパーソナルコンピュータである。各部はバスライン26により電気的に接続されている。
【0033】
制御部21の構成はサーバ1の制御部11の構成と同様である。
記憶部22は、例えばハードディスクで構成され、OS、各種アプリケーションプログラム(例えば、ウェブブラウザ、Flash Player等)、及び各種データが記憶されている。また、サーバ1からダウンロードしたコンテンツ(例えば、ウェブページで公開されている画像)のデータ等が記憶される。
ここで、クライアント2で起動されるウェブブラウザはJavaScriptを実行可能とされている。また、HTMLファイル内にFlashコンテンツ(Flashファイル)が埋め込まれている場合には、Flash Playerがプラグインとして起動され、Flashコンテンツが再生される。
【0034】
入力部23は、例えば、キーボード及びマウスで構成され、ユーザが情報を入力する際に使用される。
表示部24は、例えば、液晶ディスプレイ等で構成され、制御部21からの表示制御指令に基づいて所定の画面を表示する。表示部25には、例えば、ウェブブラウザのGUIが表示される。
通信部25は、TCP/IP等の通信プロトコルに従って処理を行い、ネットワークNを介してサーバ1とデータの送受信を行う。
【0035】
クライアント2のCPU211は、例えば、起動したウェブブラウザ上において、ユーザが操作部24によりURLを入力すると、このURLで指定されるウェブページをサーバ1に要求する。そして、サーバ1から送信されたHTMLファイル12aを解析して、ウェブブラウザ上にウェブページを表示する。
このとき、HTMLファイル12aに記述されているスクリプトが実行されることによりJSファイル12cが読み込まれる。また、JSファイル12cに記述されているスクリプトが実行されることによりXMLファイル12b、Flash1ファイル12d、Flash2ファイル12eが参照され、キャラクターアイコンによる強調表示が行われる。
【0036】
図4は、サーバ1の記憶部12に格納されているHTMLファイル12aのソースコードの一部を抜粋して示す説明図である。
図4に示すように、HTMLファイル12aは、htmlタグ(<html>)で囲まれたhtml要素ELM1、headタグ(<head>)で囲まれたhead要素ELM2、bodyタグ(<body>)で囲まれたbody要素ELM3、とで構成されている。
html要素ELM1は、当該ファイルがHTMLファイルであることを宣言する。head要素ELM2には、タイトルやウェブページのさまざまな情報(例えば、スタイル情報(レイアウト情報を含む))が記述されている。body要素ELM3には、実際にウェブブラウザに表示されるウェブページの本体が記述されている。
【0037】
図4に示すように、head要素ELM2には、指定したJavaScriptを実行するためのscript要素ELM4が記述されている。HTMLファイル12aにおいては、本実施形態に係る強調表示を実現するために、このscript要素ELM4を追加するだけでよい。
図4に示すHTMLファイル12aがクライアント2のウェブブラウザに読み込まれると、script要素ELM4により、“yjChorioZone”という変数に“masthead”という文字列が代入されるとともに、サーバ1の記憶部12に格納されているJSファイル(chorio.js)12cが読み込まれる。
そして、JSファイル12cに記述されているスクリプトが実行され、キャラクターアイコン(親アイコン、子アイコン)による強調表示が行われる。本実施形態では、サーバ1の記憶部12に格納されているJSファイル12c、Flash1ファイル12d、及びFlash2ファイル12eに記述されたスクリプトが協働して実行されることにより、キャラクターアイコンの表示制御を実現している。
【0038】
ここで、“yjChorioZone”という変数は、Flash1ファイル12dの実行による親アイコンの表示に関する情報であり、親アイコンを表示する際の表示位置(要素)を、タグに含まれるid属性(識別情報)で指定するための変数である。図4では、id属性が“masthead”であるdiv要素ELM5を親アイコンの表示位置として指定するため、yjChorioZone=“masthead”と定義している。
サーバ1において、script要素ELM4の変数“yjChoriZone”に代入する文字列を変更することで、子アイコンによる強調表示を行うトリガとなる親アイコンの表示位置は容易に変更される。
【0039】
図4において、body要素ELM3には、div要素ELM5〜ELM9やinput要素ELM10が記述されている。div要素ELM5〜ELM9はdivタグ(<div>)で囲まれた範囲を一つのブロックとして扱うための要素である。また、input要素ELM10は、inputタグ(<input>)の記述に従い、フォームの構成部品(入力欄・ボタン等)を作成するための要素である。これらの要素ELM5〜ELM10に記述された内容が、head要素ELM2に記述されているレイアウト情報に従ってウェブページ上に配置される。
【0040】
図4において、div要素ELM8には指定されたファイルに基づくJPEG画像を所定の大きさで表示する内容が記述されており、input要素ELM10には送信ボタン(検索ボタン)を表示する内容が記述されている。また、図4では省略しているが、div要素ELM5にはウェブページのタイトルを表示するための内容、div要素ELM6にはポータルサイトが提供するサービスを表示するための内容、div要素ELM7にはポータルサイトが配信するニュース等の内容、div要素ELM9にはカレンダーを表示するための内容が記述されている。
【0041】
div要素ELM5〜ELM9及びinput要素ELM10には、id(属性名)=“文字列”(属性値)という記述によりid属性が与えられている。つまり、このid属性が指定された要素にはid=“文字列”で表される識別情報(名前)が付与され、ウェブページの構成要素がそれぞれ識別可能となる。例えば、div要素ELM5には“masthead”という識別情報が付与され、div要素ELM6には“contentbox”という識別情報が付与されている。また、input要素ELM10には“srcbtn”という識別情報が付与されている。これらの識別情報は、JSファイル12cが実行された際に、ウェブページを構成する要素のうち、特定要素のウェブブラウザ上の表示位置等を取得する際に参照される。
【0042】
図5は、図4に示すHTMLファイル12aに基づくウェブページの表示例を示す説明図である。なお、図5は、図4における要素ELM5〜ELM10とウェブページ上の配置の対応関係を示すものであり、script要素ELM4の実行(JSファイル12cの実行を含む)に伴う強調表示は省略している。
すなわち、図4におけるdiv要素ELM5(id=“masthead”)は図5に示すウェブページ上の領域AR6を構成し、div要素ELM6(id=“contentbox”)は領域AR5を構成し、div要素ELM7(id=“main”)は領域AR1を構成している。また、div要素ELM8(id=“splimg”)は領域AR4を構成し、div要素ELM9(id=“pbcalender”)は領域AR2を構成し、input要素ELM10(id=“srchbtn”)は領域AR3を構成している。
このように、HTMLファイル12aにおける各要素ELM5〜ELM10は、ウェブページ上において固有の領域を構成している。
【0043】
図6は、HTMLファイル12aをベースとするウェブページ上において強調表示を行うためのXMLファイル12bのソースコードの一例を示す説明図である。ここで、XML(eXtensible Markup Language)とは、HTMLと同様、マークアップ言語の一つであり、ユーザが独自のタグを指定できるという利点がある。
【0044】
図6に示すように、XMLファイル12bでは、chorioタグ(<chorio>)で囲まれたルート要素ELMR内に、newsタグ(<news>)で囲まれた5つのnews要素ELM21〜ELM25が記述されている。また、idタグ(<id>)で囲まれたid要素ELM211〜ELM251、smrタグ(<smr>)で囲まれたsmr要素ELM212〜ELM252、valタグ(<val>)で囲まれたval要素ELM213〜ELM253が、news要素ELM21〜ELM25を親要素とする子要素として記述されている。
【0045】
id要素ELM211〜ELM251の内容は、ウェブページ上に子アイコンを表示させるときの表示位置を取得するためのデータである。具体的には、HTMLファイル12aにおいて、タグ内に要素のid属性として定義された文字列が記述されている。
smr要素ELM212〜ELM252の内容は、ウェブページ上に表示された子アイコンの近傍にアピール情報を吹き出し表示するためのテキストデータである。val要素ELM213〜ELM253の内容は、子アイコンを拡大表示するときにアピール情報を表示するためのテキストデータである。このように、XMLファイル12bには、id要素に対応して、テキストデータを内容として有するアピール要素(smr要素、val要素)が記述されている。
【0046】
本実施形態では、このXMLファイル12bにおいて、ウェブページ上で強調表示させたい箇所をid要素ELM211〜ELM251で定義するとともに、強調表示により提供するテキスト情報をsmr要素ELM212〜ELM252及びval要素ELM213〜ELM253で定義している。
そして、JSファイル12c、Flash1ファイル12d、及びFlash2ファイル12eに記述されているスクリプトが実行される際に、XMLファイル12b内の記述を参照することにより、HTMLファイル12aをベースとするウェブページ上に、強調表示(子アイコン及びアピール情報の表示)を行うようにしている。
したがって、ウェブページを提供するサーバ1の管理者は、XMLファイル12bのid要素の内容を適宜変更することで子アイコンによる強調表示を行う箇所を自由かつ容易に変更することができる上、子アイコンとともに表示するアピール情報についてもsmr要素又はval要素を変更するだけで容易に変更することができる。
【0047】
図7、8は、クライアント2において、JSファイル12c、Flash1ファイル12d、Flash2ファイル12eに記述されているスクリプトが実行されたときの処理手順について示したラダーチャートである。すなわち、JSファイル12c、Flash1ファイル12d、Flash2ファイル12eには、クライアント2のコンピュータに図7、8に示す手順を実行させるためのプログラムが記述されている。ここで、図7、8において参照されるHTMLファイル12aは図4に示す構成を有するものとし、XMLファイル12bは図6に示す構成を有するものとする。
また、図9〜12は、クライアント2のウェブブラウザ上に表示される画面例について示す説明図である。
【0048】
図7、8に示す処理は、サーバ1からクライアント2に送信されたHTMLファイル12aがウェブブラウザにより解析され、script要素ELM4(図4参照)の内容が実行されることにより開始される。
つまり、クライアント2のウェブブラウザによりHTMLファイル12aが解析されると、HTMLファイル12aに記述されている要素内容に従い、図5に示すウェブページが表示される。また、script要素ELM4により、変数“yjChorioZone”に“masthead”という文字列が代入されるとともに、JSファイル12cが読み込まれる。そして、JSファイル12cが実行されると、Flash1ファイル12d、Flash2ファイル12eと協働することにより、図5に示すウェブページに強調表示としてのキャラクターアイコンが重畳表示される(図9〜12参照)。
【0049】
図7において、ステップS101では、Flashファイル12d、12eがHTMLファイル12aに埋め込まれ、親アイコン及び子アイコンの表示制御が行われる。このとき、Flash1ファイル12dの実行による親アイコンについては表示させるように指示され、Flash2ファイル12eの実行による子アイコンについては表示させないように指示される。なお、Flash1ファイル12dによる親アイコンの表示は、後述するステップS102の配置情報の取得後に行われることとなる。
【0050】
ステップS102では、HTMLファイル12aのscript要素ELM4において指定された親アイコンの表示に関する情報に基づいて、Flash1ファイル12dの実行により親アイコンを表示するための配置情報が取得される。
具体的には、script要素ELM4に記述された変数“yjChorioZone(=HTMLファイル12a内の何れかの要素が有しているid属性)”を引数として、例えば、当該id属性を有する要素の高さ、横幅、ウェブブラウザ可視部分左上からのx座標、y座標(以下、要素の位置情報と称する)が取得される。図4では、変数“yjChorioZone”に“masthead”が代入されているので、“masthead”をid属性として有するdiv要素ELM5の位置情報、すなわち、図5における領域AR6に対応する高さ、横幅、ウェブブラウザのウィンドウ左上からのxy座標が取得されることとなる。
そして、当該要素の位置情報を元に親アイコンを配置するための配置情報(変数)が設定され、Flash1ファイル12dに引き渡される。例えば、要素の位置情報に基づいて、当該要素の表示領域の中央付近のxy座標が配置情報として設定される。
【0051】
ステップS103では、親アイコンのシンボルデータを元に親アイコンのインスタンスが生成され、ステップS102で取得された配置情報に基づく指定位置に親アイコンのインスタンスを表示させる制御が行われる。例えば、div要素ELM5の中央付近が配置情報として設定された場合は、図9に示すように領域AR6の中央付近に親アイコンIpが表示される。
【0052】
ステップS104において、親アイコンIpがユーザによりクリック操作されると、親アイコンIpのインスタンスに対応付けて設定されているイベントハンドラによりJSファイル12cの所定のスクリプトが実行される。つまり、Flash1ファイル12dには、ユーザによる親アイコンIpのクリック操作を監視し、このクリック操作に基づいて子アイコンを表示するスクリプトを実行するためのイベントハンドラ(onMouseClick)が設定されている。
【0053】
ステップS105では、Flash1ファイル12dの実行による親アイコンについては表示させないように指示され、Flash2ファイル12eの実行による子アイコンについては表示させるように指示される。つまり、ユーザにより親アイコンIpのクリック操作が行われたときには、強調表示のトリガとなる親アイコンIpは非表示とされ、強調表示として子アイコンだけが表示されるようになる。
【0054】
ステップS106では、XMLファイル12bが取得され、XMLファイル12bに記述されているデータの内容(news要素ELM21〜ELM25、id要素ELM211〜ELM251、smr要素ELM222〜ELM252、val要素ELM213〜ELM253)が解析される。
【0055】
ステップS107では、子アイコンのシンボルデータを元に、XMLファイル12bに記述されているnews要素数分(XMLファイル12bの場合は5個)のインスタンスが生成され、各インスタンスにはid要素の内容、及びアピール要素(smr要素、val要素)の内容が変数として設定される。
例えば、図6におけるnews要素ELM24について生成された子アイコンのインスタンスには、id要素ELM241の内容である“splimg”という文字列、smr要素の内容である“今日の特集はこれ!・・・”という文字列、val要素の内容である“○○特集だよ!・・・”という文字列が変数として設定される。
【0056】
ステップS108では、JSファイル12cに対して子アイコンを表示するための配置情報が要求される。このとき、それぞれの子アイコンのインスタンスに設定されたid要素の内容を示す変数がJSファイル12cに引き渡される。
【0057】
ステップS109では、それぞれの子アイコンのインスタンスに設定されたid要素の内容を示す変数に基づいて、子アイコンを表示するための配置情報が取得される。具体的には、引き渡された変数を引数として、これをid属性として有している要素の位置情報が取得される。
【0058】
例えば、図6におけるnews要素ELM21について生成された子アイコンの場合、id要素ELM211の内容である“main”という文字列が位置情報を取得する際の引数とされるので、この“main”をid属性として有しているdiv要素ELM7の位置情報が取得される。つまり、図5における領域AR1に対応する高さ、横幅、ウェブブラウザのウィンドウ左上からのxy座標が、当該要素の位置情報として取得されることとなる。
【0059】
同様に、news要素ELM22について生成された子アイコンの場合、id要素ELM221の内容である“pbcalender”という文字列をid属性として有しているdiv要素ELM9の位置情報が取得される(領域AR2)。news要素ELM23について生成された子アイコンの場合、id要素ELM231の内容である“srchbtn”という文字列をid属性として有しているinput要素ELM10の位置情報が取得される(領域AR3)。
news要素ELM24について生成された子アイコンの場合、id要素ELM241の内容である“splimg”という文字列をid属性として有しているdiv要素ELM8の位置情報が取得される(領域AR4)。news要素ELM25について生成された子アイコンの場合、id要素ELM251の内容である“contentbox”という文字列をid属性として有しているdiv要素ELM6の位置情報が取得される(領域AR5)。
【0060】
そして、それぞれの要素の位置情報を元に子アイコンを配置するための配置情報(変数)が設定され、Flash2ファイル12eに引き渡される。例えば、それぞれの要素の位置情報に基づいて、要素の左上隅や右上隅のxy座標が配置情報として設定される。
【0061】
図8のステップS110では、ステップS109で取得された配置情報に基づく指定位置にそれぞれの子アイコンのインスタンスを表示させる制御が行われ、ウェブページに強調表示が重畳される。
例えば、図10に示すように、div要素ELM7に対応する領域AR1には、この領域AR1を注目させるための子アイコンIc1が表示される。また、div要素ELM9に対応する領域AR2には子アイコンIc2、input要素ELM10に対応する領域AR3には子アイコンIc3、div要素ELM8に対応する領域AR4には子アイコンIc4、div要素ELM6に対応する領域AR5には子アイコンIc5が表示される。
【0062】
ステップS111において、子アイコンIc1〜Ic5の何れかがユーザによりマウスオーバー操作(マウスカーソルを子アイコン上に乗せる操作)されると、当該子アイコンIc1〜Ic5のインスタンスに対応付けて設定されているイベントハンドラにより所定のスクリプトが実行される。つまり、Flash2ファイル12eには、ユーザによる子アイコンIc1〜Ic5のマウスオーバー操作を監視し、このマウスオーバー操作に基づいて子アイコンの近傍に詳細情報を吹き出し表示するスクリプトを実行するためのイベントハンドラ(onMouseOver)が設定されている。
【0063】
ステップS112では、マウスオーバー操作された子アイコンの近傍にアピール情報が吹き出し表示される。具体的には、子アイコンIc1〜Ic5のインスタンスには、それぞれsmr要素ELM212〜ELM252の内容が変数として設定されているので(ステップS107)、この変数を吹き出し枠の中に表示させる制御が行われる。
例えば、図10に示す子アイコンIc1〜Ic5のうち、子アイコンIc4がユーザによりマウスオーバー操作されると、図11に示すアピール情報の吹き出し表示が行われる。すなわち、図11に示すように、子アイコンIc4の近傍に吹き出し枠BLが現れ、その中にアピール情報TXT1が表示される。図6に示すsmr要素ELM242の内容は、“今日の特集はこれ!○○ちゃん可愛いね!”というテキストデータなので、これが吹き出し枠BLの中に表示されている。
【0064】
ステップS113において、子アイコンIc1〜Ic5の何れか(マウスオーバー操作された子アイコン)がユーザによりクリック操作されると、当該子アイコンIc1〜Ic5のインスタンスに対応付けて設定されているイベントハンドラにより所定のスクリプトが実行される。つまり、Flash2ファイル12eには、ユーザによる子アイコンIc1〜Ic5のクリック操作を監視し、このクリック操作に基づいて子アイコンを拡大表示するスクリプトを実行するためのイベントハンドラ(onMouseClick)が設定されている。
【0065】
ステップS114では、クリック操作された子アイコンが拡大表示されるとともに、アピール情報が表示される。具体的には、子アイコンのシンボルを元に生成される拡大表示用のインスタンス(拡大アイコン)が、ウェブページ上にオーバーレイ表示される。また、子アイコンIc1〜Ic5のインスタンスには、それぞれval要素ELM213〜ELM253の内容が変数として設定されているので(ステップS107)、クリック操作された子アイコンIc1〜Ic5に対応付けて設定されている変数が拡大アイコンの近傍にアピール情報として表示される。
【0066】
例えば、図11に示す子アイコンIc4がユーザによりクリック操作されると、図12に示すように拡大アイコンIc41がウェブブラウザのウィンドウ全体に表示されるとともに、この拡大アイコンIc4の近傍にアピール情報TXT2が表示される。図6に示すval要素ELM243の内容は、“○○特集だよ!・・・”というテキストデータなので、これが拡大アイコンIc41の右側に表示されている。なお、拡大アイコンIc41の背景領域(図12の網掛け領域)BGは透過表示とされ、下層のウェブページを視認可能になっている。
【0067】
ステップS115において、拡大アイコンIc41の背景領域BGがユーザによりクリック操作されると、背景領域BGに対応付けて設定されているイベントハンドラにより所定のスクリプトが実行される。つまり、Flash2ファイル12eには、ユーザによる背景領域BGのクリック操作を監視し、このクリック操作に基づいて拡大表示を解除するスクリプトを実行するためのイベントハンドラ(onMouseClick)が設定されている。
【0068】
ステップS116では、拡大アイコンI41によるオーバーレイ表示が解除される。すなわち、図12において、背景領域BGがクリック操作されると、図10に示す画面に移行される。
【0069】
なお、ユーザにより子アイコンIc1〜Ic5の何れかのマウスオーバー操作が行われた後(ステップS111、S112)、クリック操作が行われずに子アイコンIc1〜Ic5の上からマウスカーソルが離れたとき(マウスアウト操作)にも、図10に示す画面に移行される。つまり、Flash2ファイル12eには、ユーザによる子アイコンからのマウスアウト操作を監視し、このマウスアウト操作に基づいて吹き出し表示を解除するスクリプトを実行するためのイベントハンドラ(onMouseOut)が設定されている。
【0070】
ステップS117において、子アイコンIc1〜Ic5以外の領域がユーザによりクリック操作されると、イベントハンドラにより所定のスクリプトが実行される。つまり、Flash2ファイル12eには、ユーザによる子アイコン以外の領域のクリック操作を監視し、このクリック操作に基づいて子アイコンを非表示、親アイコンを表示とする(つまり、初期状態に戻す)スクリプトを実行するためのイベントハンドラ(onMouseClick)が設定されている。
【0071】
ステップS118では、Flash1ファイル12dの実行による親アイコンについては表示させるように指示され、Flash2ファイル12eの実行による子アイコンについては表示させないように指示される。すなわち、図10において子アイコンIc1〜Ic5以外の領域がユーザによりクリック操作されると、図9に示す画面に移行される。
【0072】
上述したように、JSファイル12c、Flash1ファイル12d、及びFlash2ファイル12eに記述された表示制御プログラム(スクリプト)は、HTMLファイル12aに記述されたスクリプト(script要素ELM4、外部JSファイル12cを参照する場合を含む)が実行されることにより、HTMLファイル12aに記述されている識別情報(id属性)を内容として有するid要素が記述されたXMLファイルを取得するステップ(図7のステップS106)と、XMLファイル12bを解析してid要素の内容(=HTMLファイル内のid属性)を抽出するステップ(図7のステップS106)と、抽出されたid要素の内容を識別情報として有するHTMLファイル内の要素の位置情報を取得し、これに基づいて強調表示を行うための配置情報を設定するステップ(ステップS109)と、配置情報に基づくウェブページ上の特定箇所に、第1表示態様による強調表示(図10に示す子アイコンIc1〜Ic5の表示)を行うステップ(図8のステップS110)とを、クライアント2のコンピュータ(制御部21)に実行させる。
【0073】
すなわち、本実施形態では、ウェブページ内の内容をカテゴライズするためにHTMLファイル12a内の要所に予め埋め込まれているタグ情報(id属性)を、XMLファイル12bにid要素として記述し、これを表示制御プログラム側で解析することにより強調表示の挿入位置を指定している。
これにより、ウェブページのベースとなるHTMLファイル12aの記述を大幅に変更することなく、JSファイル12cを実行するための数行のscript要素を記述するだけで、ウェブページの特定箇所に容易に強調表示を追加することができる。
また、強調表示の挿入は、ウェブページのベースとなるHTMLファイル12a本体を修正することなく、XMLファイル12bで挿入箇所を示すid要素とアピール要素(smr要素、val要素)を修正すればよいので、編集が容易となる。さらに、HTMLベースのウェブページに容易に対応でき、また、挿入するアピール要素(テキスト情報)の更新も容易である。
したがって、既に運用されているウェブページであっても、容易に強調表示を付加することができるうえ、ウェブページの基本的なレイアウトが崩れてしまう虞もない。
【0074】
また、ステップS106以降の処理は、HTMLファイル12aに基づくウェブページが表示された状態(図9参照)におけるユーザの任意操作(トリガとなる親アイコンIpのクリック操作)に基づいて実行されるので、通常状態でのウェブページのデザインは損なわれない。
ステップS109ではステップS106で抽出された複数のid要素のそれぞれの内容に基づいて複数の配置情報が設定され、ステップS110では複数の配置情報に基づくウェブページ上の複数箇所に強調表示が行われるので、ユーザに注目させたい箇所が複数ある場合にも容易に対応できる。
ステップS110では、強調表示としてキャラクターアイコン(子アイコンIc1〜Ic5)をアニメーション表示するので、注目させたい箇所を視覚的に訴えることができる。
【0075】
さらに、ステップS112、S114では、ウェブページ上において第1表示態様による強調表示(子アイコンIc1〜Ic5)がユーザ操作(マウスオーバー、クリック)されることに基づいて、第1表示態様とは異なる第2表示態様による強調表示(吹き出し表示、拡大オーバーレイ表示)を行う。これにより、ユーザが所望する箇所だけがクローズアップされるので、ウェブページ内の要所をユーザに効果的に意識させることができる。
また、ステップS112、S114では、第2表示態様による強調表示として(子アイコン又は拡大アイコンの近傍に)テキスト情報からなるアピール情報を表示する。これにより、キャラクターアイコンにより特定箇所を注目させる上、テキストによるアピール情報を提供できるので、強調表示による利便性が向上し、ユーザの興味を引くことができる。
【0076】
以上、本発明者によってなされた発明を実施形態に基づいて具体的に説明したが、本発明は上記実施形態に限定されるものではなく、その要旨を逸脱しない範囲で変更可能である。
上記実施形態では、キャラクターアイコン(親アイコンIp、子アイコンIc1〜Ic5)は、ウェブブラウザのウィンドウにおけるxy座標を配置情報として与えられ、当該箇所に出現するようにしているが、ウェブページ上において、最終的に配置される箇所とは別の箇所(例えば、ウィンドウの外縁)に出現し、そこから移動して特定箇所に到達するようにしてもよい。この場合、キャラクターアイコンの表示位置を設定する際、要素の位置情報と、ウィンドウの高さ及び横幅、不可視領域を含むウェブページ全体の高さ及び横幅に基づいて、キャラクターアイコンの配置情報が設定される。
このように、通常状態のウェブページの表示(図9参照)から強調表示(図10参照)に遷移させる際、キャラクターアイコンを注目させたい要所まで動的にアニメーション表示することにより、アピールしたい情報を効果的にユーザに視認させることができる。
【0077】
また、キャラクターアイコンがウェブページ上の対応要素の全体又は一部を歩き回るように表示制御を行うようにしてもよいし、テキストからなるアピール情報だけで強調表示を行うようにしてもよい。
【0078】
上記実施形態では、キャラクターアイコンの表示に係る制御プログラムを、JSファイル12cに記述されたスクリプトとFlashファイル12d、12eに記述されたスクリプトの組合せで構成しているが、JSファイル又はFlashファイルが単独で制御プログラムを構成することもできる。また、クライアントのコンピュータに図7、8に示す手順を実行させるものであれば、その他のプログラム言語を利用してもよい。
【0079】
今回開示された実施の形態はすべての点で例示であって制限的なものではないと考えられるべきである。本発明の範囲は上記した説明ではなくて特許請求の範囲によって示され、特許請求の範囲と均等の意味および範囲内でのすべての変更が含まれることが意図される。
【図面の簡単な説明】
【0080】
【図1】第1実施形態に係るネットワーク構成について示す概略図である。
【図2】サーバ1のハードウェア構成の概略を示すブロック図である。
【図3】クライアント2のハードウェア構成の概略を示すブロック図である。
【図4】サーバ1の記憶部12に格納されているHTMLファイル12aのソースコードの一部を抜粋して示す説明図である。
【図5】図4に示すHTMLファイル12aに基づくウェブページの表示例を示す説明図である。
【図6】強調表示を行うためのXMLファイル12bのソースコードの一例を示す説明図である。
【図7】クライアント2において表示制御プログラムが実行されたときの処理手順について示したラダーチャートである。
【図8】クライアント2において表示制御プログラムが実行されたときの処理手順について示したラダーチャートである。
【図9】強調表示のトリガとなる親アイコンの表示例について示す説明図である。
【図10】第1表示態様による強調表示としての子アイコンの表示例について示す説明図である。
【図11】第2表示態様による強調表示の一例としての吹き出し表示について示す説明図である。
【図12】第2表示態様による強調表示の一例としての拡大オーバーレイ表示について示す説明図である。
【符号の説明】
【0081】
1 サーバ
11 制御部
12 記憶部
12a HTMLファイル
12b XMLファイル
12c JavaScriptファイル
12d Flash1ファイル
12e Flash2ファイル
13 入出力部
14 通信部
15 データベース

【特許請求の範囲】
【請求項1】
ネットワークを介してサーバに接続されたクライアントのウェブブラウザ上にHTMLファイルに基づくウェブページを表示する際に、前記ウェブページに強調表示を追加する方法であって、
前記HTMLファイルに記述された呼び出しコードが前記クライアントに読み込まれることにより第1プログラムの実行を開始するステップと、
前記ウェブページ上に強調表示を配置するプログラムの呼び出しコードを、前記読み込んだHTMLファイルに追記するステップと、
前記HTMLファイルから前記ウェブページ上に強調表示を配置するための配置情報を取得するステップと、
前記取得した配置情報を前記第2プログラムに引き渡すステップと、を有することを特徴とする強調表示追加方法。
【請求項2】
前記第2プログラムを実行することにより、強調表示情報が記述されたXMLファイルを取得するステップと、
前記XMLファイルから前記強調表示情報を取得するステップと、
前記引き渡された配置情報に基づいて、前記強調表示情報を前記ウェブページ上に配置するステップと、を有することを特徴とする請求項1に記載の強調表示追加方法。
【請求項3】
ネットワークを介してサーバに接続されたクライアントのウェブブラウザ上にHTMLファイルに基づくウェブページを表示する際に、前記ウェブページに強調表示を追加する方法であって、
前記HTMLファイルに記述されたスクリプトが実行されることにより、前記HTMLファイル内の要素に付与された識別情報を内容として有するid要素が記述されたXMLファイルを取得する第1ステップと、
前記XMLファイルを解析して前記id要素の内容を抽出する第2ステップと、
抽出された前記id要素の内容を識別情報として有する前記HTMLファイル内の要素の位置情報を取得し、これに基づいて強調表示を行うための配置情報を設定する第3ステップと、
前記配置情報に基づく前記ウェブページ上の特定箇所に、第1表示態様による強調表示を行う第4ステップと、を有することを特徴とする強調表示追加方法。
【請求項4】
前記HTMLファイルに基づくウェブページが表示された状態におけるユーザ操作に基づいて開始されることを特徴とする請求項3に記載の強調表示追加方法。
【請求項5】
前記XMLファイルには前記id要素が複数記述されており、
前記第3ステップでは、前記第2ステップで抽出された前記複数のid要素のそれぞれの内容に基づいて複数の配置情報を設定し、
前記第4ステップでは、前記複数の配置情報に基づく前記ウェブページ上の複数の箇所に、前記第1表示態様による強調表示を行うことを特徴とする請求項3又は4に記載の強調表示追加方法。
【請求項6】
前記ウェブページ上において前記第1表示態様による強調表示がユーザ操作されることに基づいて、前記第1表示態様とは異なる第2表示態様による強調表示を行う第5ステップを有することを特徴とする請求項3から5のいずれか一項に記載の強調表示追加方法。
【請求項7】
前記強調表示は、キャラクターアイコンを含む表示であることを特徴とする請求項3から6のいずれか一項に記載の強調表示追加方法。
【請求項8】
前記キャラクターアイコンはアニメーション表示されることを特徴とする請求項7に記載の強調表示追加方法。
【請求項9】
前記XMLファイルには、前記id要素に対応して、テキスト情報を内容として有するアピール要素が記述されており、
前記強調表示は、前記アピール要素に基づくアピール情報を含む表示であることを特徴とする請求項3から8のいずれか一項に記載の強調表示追加方法。
【請求項10】
前記スクリプトは、前記HTMLファイルに記述された呼び出しコードが前記クライアントに読み込まれることにより実行されるFlashファイルに記述されたスクリプト、JavaScriptファイルに記述されたスクリプト、又はFlashファイルに記述されたスクリプトとJavaScriptファイルに記述されたスクリプトの組み合わせのうちの何れかであることを特徴とする請求項3から9のいずれか一項に記載の強調表示追加方法。
【請求項11】
ネットワークを介してサーバに接続されたクライアントのウェブブラウザ上にHTMLファイルに基づくウェブページを表示する際に、前記ウェブページに強調表示を追加するための表示制御プログラムであって、
前記HTMLファイルに記述されたスクリプトが実行されることにより、前記HTMLファイル内の要素に付与された識別情報を内容として有するid要素が記述されたXMLファイルを取得する第1ステップと、
前記XMLファイルを解析して前記id要素の内容を抽出する第2ステップと、
抽出された前記id要素の内容を識別情報として有する前記HTMLファイル内の要素の位置情報を取得し、これに基づいて強調表示を行うための配置情報を設定する第3ステップと、
前記配置情報に基づく前記ウェブページ上の特定箇所に、第1表示態様による強調表示を行う第4ステップと、を前記クライアントのコンピュータに実行させることを特徴とする表示制御プログラム。
【請求項12】
請求項11に記載の表示制御プログラムが記述された制御ファイル、前記HTMLファイル、及び前記XMLファイルを保有し、
前記クライアントからの要求に伴い前記各ファイルを提供することを特徴とするサーバ。

【図1】
image rotate

【図2】
image rotate

【図3】
image rotate

【図4】
image rotate

【図5】
image rotate

【図6】
image rotate

【図7】
image rotate

【図8】
image rotate

【図9】
image rotate

【図10】
image rotate

【図11】
image rotate

【図12】
image rotate


【公開番号】特開2010−15292(P2010−15292A)
【公開日】平成22年1月21日(2010.1.21)
【国際特許分類】
【出願番号】特願2008−173336(P2008−173336)
【出願日】平成20年7月2日(2008.7.2)
【出願人】(500257300)ヤフー株式会社 (1,128)
【Fターム(参考)】