JPWO2008081733A1

JPWO2008081733A1 - ウェブページのオーサリングにおいてオブジェクト選択を支援するための方法、システムおよびプログラム

Info

Publication number: JPWO2008081733A1
Application number: JP2008552093A
Authority: JP
Inventors: 芳雄堀内
Original assignee: International Business Machines Corp
Current assignee: International Business Machines Corp
Priority date: 2006-12-28
Filing date: 2007-12-20
Publication date: 2010-04-30
Anticipated expiration: 2027-12-20
Also published as: US20150019977A1; CN101578576A; WO2008081733A1; EP2116925B1; KR101115497B1; JP4959722B2; EP2116925A4; US20080163102A1; US11288337B2; CA2666305C; CA2666305A1; KR20090087451A; CN101578576B; EP2116925A1; US8850332B2

Abstract

【課題】ウェブページのオーサリングにおいて、編集画面のＷＹＳＩＷＹＧ性を損なうことなく、タグ選択を容易に行えるようにすること。【解決手段】本発明は、ウェブページのオーサリングにおいてオブジェクト選択を支援するもので、ウェブページの編集画面におけるユーザ・アクションに応じて、オブジェクト選択のための基準点を決定し、基準点を囲む基準エリアを設定し、基準エリアに含まれるビュー・オブジェクトのうち、基準点に最も近いビュー・オブジェクトを基準ビュー・オブジェクトとして選択し、基準エリアに含まれるビュー・オブジェクトのうち、基準ビュー・オブジェクトに関連するビュー・オブジェクトを選択し、基準ビュー・オブジェクトを表す第１の矩形および関連するビュー・オブジェクトを表す第２の矩形を、オブジェクト選択のためのスペースを間に持たせて、基準ビュー・オブジェクトおよび関連するビュー・オブジェクトとは別に描画する。

Description

本発明は、ウェブページのオーサリングに関するものであり、特に、ウェブページのオーサリングにおいてオブジェクト選択を支援するための方法、システムおよびプログラムに関する。

ウェブページはタグベースのマークアップ言語（ＨＴＭＬ、ＸＭＬ、ＪＳＰ等）で記述される。ウェブページの編集においては、タグの挿入や削除、タグのプロパティ操作、などの編集作業は基本的にタグベース、つまり編集対象のタグを選択することによって行われる。多くのツールがタグをブラウザで見るのと同等に視覚化した編集画面（以下ＷＹＳＩＷＹＧ編集画面とよぶ）を提供し、利便性を向上させている。しかし、昨今のウェブページは、複雑で、かつ、タグが視覚的に隙間無く緻密に配置されて作成されているため、ＷＹＳＩＷＹＧ編集画面で、編集対象であるタグを選択することは困難である。タグの領域が完全に重なっていたりすると、ある地点をクリックした際にそのタグが選択されるかはユーザにはきわめてわかりにくい。

例えば、図１に示すような簡単な編集画面でも、そのＨＴＭＬソース・ファイルは、図２に示すように入れ子構造になっており、編集画面の一部をクリックしただけでは望みのタグを選択できないことがある。そのため、従来のウェブページ・オーサリング・ツール、例えば本出願人のＰａｇｅＤｅｓｉｇｎｅｒ（非特許文献１参照）は、ＨＴＭＬのタグを階層表示する、特別なユーザ・インターフェース（ＵＩ）を持っている。しかしながら、このＵＩは通常のツリーであり、ＷＹＳＩＷＹＧ編集画面のレイアウトが反映されたものではない。

図２のようなソースコードを直接表示すれば、タグの選択は簡単になるが、ソードコード表示はＷＹＳＩＷＹＧ編集画面とはかけ離れているため、選択したタグの領域が実際のウェブページのどこに位置しているかは、ちょっと見ただけではわからない。また、編集画面上に、タグのオープン／クローズ用のアイコンを表示するなどして、編集画面内でのタグ選択の利便性を向上させる手法も知られているが、これはページ全体のＷＹＳＩＷＹＧ性を度外視した手法である。
"ＰａｇｅＤｅｓｉｇｎｅｒ"、http://www-06.ibm.com/jp/software/websphere/developer/wsad/workshop/pdf/8.pdf

前述のように、従来のタグ選択は、ウェブページ編集画面のＷＹＳＩＷＹＧ性を損なうか、あるいはそれを無視して行われていた。

従って本発明の目的は、ウェブページのオーサリングにおいて、編集画面のＷＹＳＩＷＹＧ性を損なうことなく、タグ選択を容易に行えるようにすることにある。

本発明は、ＷＹＳＩＷＹＧ編集画面上で、ウェブページのタグをいかにして選択するかという課題を解決するものである。ウェブページのオーサリングにおいてタグを選択すると言うことは、実際には、そのタグによって指定されるビュー・オブジェクトを編集対象として選択するということであるから、本明細書では、タグの選択と、ビュー・オブジェクト（単にオブジェクトという場合もある）の選択は同義語であるものとする。

本発明の第１の態様によれば、ウェブページのオーサリングにおいてオブジェクト選択を支援するための方法であって、ウェブページの編集画面におけるユーザ・アクションに応じて、オブジェクト選択のための基準点を決定するステップと、前記基準点を囲む基準エリアを設定するステップと、前記基準エリアに含まれるビュー・オブジェクトのうち、前記基準点に最も近いビュー・オブジェクトを基準ビュー・オブジェクトとして選択するステップと、前記基準エリアに含まれるビュー・オブジェクトのうち、前記基準ビュー・オブジェクトに関連するビュー・オブジェクトを選択するステップと、前記基準ビュー・オブジェクトを表す第１の矩形および前記関連するビュー・オブジェクトを表す第２の矩形を、オブジェクト選択のためのスペースを間に持たせて、前記基準ビュー・オブジェクトおよび前記関連するビュー・オブジェクトとは別に描画するステップと、を含む方法が提供される。

本発明の第２の態様によれば、ウェブページのオーサリングにおいてオブジェクト選択を支援するための装置であって、ウェブページの編集画面におけるユーザ・アクションに応じて、オブジェクト選択のための基準点を決定する基準点決定部と、前記基準点を囲む基準エリアを設定する基準エリア設定部と、前記基準エリアに含まれるビュー・オブジェクトのうち、前記基準点に最も近いビュー・オブジェクトを基準ビュー・オブジェクトとして選択する基準ビュー・オブジェクト選択部と、前記基準エリアに含まれるビュー・オブジェクトのうち、前記基準ビュー・オブジェクトに関連するビュー・オブジェクトを選択する関連ビュー・オブジェクト選択部と、前記基準ビュー・オブジェクトを表す第１の矩形および前記関連するビュー・オブジェクトを表す第２の矩形を、オブジェクト選択のためのスペースを間に持たせて、前記基準ビュー・オブジェクトおよび前記関連するビュー・オブジェクトとは別に描画する描画部と、を含む装置が提供される。

本発明の第３の態様によれば、ウェブページのオーサリングにおいてオブジェクト選択を支援するためのプログラムであって、ウェブページの編集画面におけるユーザ・アクションに応じて、オブジェクト選択のための基準点を決定する手順と、前記基準点を囲む基準エリアを設定する手順と、前記基準エリアに含まれるビュー・オブジェクトのうち、前記基準点に最も近いビュー・オブジェクトを基準ビュー・オブジェクトとして選択する手順と、前記基準エリアに含まれるビュー・オブジェクトのうち、前記基準ビュー・オブジェクトに関連するビュー・オブジェクトを選択する手順と、前記基準ビュー・オブジェクトを表す第１の矩形および前記関連するビュー・オブジェクトを表す第２の矩形を、オブジェクト選択のためのスペースを間に持たせて、前記基準ビュー・オブジェクトおよび前記関連するビュー・オブジェクトとは別に描画する手順とをコンピュータに実行させるためのプログラムが提供される。

本発明は、ウェブページのオーサリングにおいて、そのＷＹＳＩＷＹＧ編集画面でのオブジェクト選択を支援するものであるが、ウェブページのオーサリングでは、あくまで編集対象はＷＹＳＩＷＹＧ編集画面であるということから、本発明は、編集作業中一貫して結果物と同等の画面を編集対象にできるようにしている。

本発明の実施環境の一例を図３に示す。図示のシステム１０は、ネットワーク１２に接続されたサーバー１４およびクライアント１６を含み、サーバー１４に格納されているウェブページをクライアント１６で編集するようになっている。ネットワーク１２は、インターネット、ローカル・エリア・ネットワーク（ＬＡＮ）、広域ネットワーク（ＷＡＮ）など任意のネットワークでよい。ネットワークに複数のクライアントを接続して、ウェブページを共同で編集することも可能である。このような編集形態は、ウェブ・コラボレーションあるいは単にコラボレーションと呼ばれており、ウェブページのオーサリングに限らず、様々な分野で活用されている。本発明の実施が、図３のようなネットワーク環境だけでなく、スタンドアローンのクライアントでも可能であることは言うまでもない。

本発明に従ってウェブページのオーサリングを行うクライアント１０６の機能構成例を図４に示す。クライアント１０６は、記憶部２０、基準点決定部２２、基準エリア設定部２４、基準ビュー・オブジェクト選択部２６、関連ビュー・オブジェクト選択部２８、および描画部２１を備えている。記憶部２０は、サーバー１４からネットワーク１２を介して受け取ったウェブページのデータ（例えばＨＴＭＬソース・ファイル）を記憶する。基準点決定部２２は、ウェブページの編集画面におけるユーザ・アクションに応じて、オブジェクト選択のための基準点を決定する。基準エリア設定部２４は、基準点決定部２２により決定された基準点を囲む基準エリアを設定する。基準ビュー・オブジェクト選択部２６は、基準エリア設定部により設定された基準エリアに含まれるビュー・オブジェクトのうち、基準点に最も近いビュー・オブジェクトを基準ビュー・オブジェクトとして選択する。関連ビュー・オブジェクト選択部２８は、基準エリア設定部により設定された基準エリアに含まれるビュー・オブジェクトのうち、基準ビュー・オブジェクトに関連するビュー・オブジェクトを選択する。描画部３０は、基準ビュー・オブジェクトを表す第１の矩形および関連するビュー・オブジェクトを表す第２の矩形を、オブジェクト選択のためのスペースを間に持たせて、基準ビュー・オブジェクトおよび関連するビュー・オブジェクトとは別に描画し、描画結果をクライアント１０６のディスプレイ（図示せず）に出力する。

次に、図５のフローチャートを参照して、クライアント１６で実行されるウェブページのオーサリングにおけるオブジェクト選択動作の詳細について説明する。前提として、クライアント１０６のディスプレイには、図１に示すウェブページがＷＹＳＩＷＹＧ編集画面として表示されており、図２のソースコードがクライアント１６の記憶部２０に記憶されているものとする。ただし、図のソースコードにおける１から６２までの行番号は説明のために便宜上付けたものであって、実際のソースコードには含まれていない。

動作の詳細に移る前に、図６を参照して、図１のウェブページのタグ構造について簡単に説明しておく。図６は、図２のソースコードにおけるオープンタグから対応するクローズタグまでの領域を矩形で示したものである。ウェブページを構成するテーブル５０は、「Ｍｅｎｕ」および「Ｃｏｎｔｅｎｔｓ」という２つの見出し５２Ａ、５２Ｂを含む第１の行５４Ａ（図２のソースコードの行８〜１１に対応）と、見出しを含まない第２の行５４Ｂ（図２のソースコードの行１２〜５８に対応）とを含む。行５４Ｂは、内部に６つの文字列を含む第１のデータ・セル５６Ａ（図２のソースコードの行１３〜４４に対応）と、内部に３つのイメージを含む第２のデータ・セル（テーブル）５６Ｂ（図２のソースコードの行４５〜５７に対応）とを含む。なお、テーブル５０は、実際にはその内部にｔｂｏｄｙの領域を含むが、ここでは省略している。他のテーブルも同様である。

第１のデータ・セル５６Ａはテーブル５８（図２のソースコードの行１４〜４３に対応）を含み、テーブル５８は、４つの行６０Ａ（図２のソースコードの行１６〜３２に対応）、６０Ｂ（図２のソースコードの行３３〜３５に対応）、６０Ｃ（図２のソースコードの行３６〜３８に対応）および６０Ｄ（図２のソースコードの行３９〜４１に対応）を含む。行６０Ａは、その内部にデータ・セル６１（図２のソースコードの行１７〜３１に対応）およびテーブル６３（図２のソースコードの行１８〜３０に対応）を含み、テーブル６３は、「Ｓｕｎ」、「Ｃｌｏｕｄ」および「Ｍｏｏｎ」というデータ・セルをそれぞれ含む３つの行を含む。行６０Ｂは、「Ｉｔｅｍ１」というデータ・セル（図２のソースコードの行３４）を含み、行６０Ｃは、「Ｉｔｅｍ２」というデータ・セル（図２のソースコードの行３７）を含み、行６０Ｄは、「Ｉｔｅｍ３」というデータ・セル（図２のソースコードの行４０）を含む。

第２のデータ・セル５６Ｂはテーブル６２（図２のソースコードの行４６〜５６に対応）を含み、テーブル６２は２つの行６４Ａ（図２のソースコードの行４８〜５１に対応）および６４Ｂ（図２のソースコードの行５２〜５４に対応）を含む。行６４Ａは、Ｓｕｎのイメージを含むデータ・セル６６Ａ（図２のソースコードの行４９に対応）およびＣｌｏｕｄのイメージを含むデータ・セル６６Ｂ（図２のソースコードの行５０に対応）を含み、行６４Ｂは、Ｍｏｏｎのイメージを含むデータ・セル６８（図２のソースコードの行５３に対応）を含む。

図５に戻って、最初のステップＳ１で、クライアント１６は、図１の編集画面上でオブジェクト（タグ）選択のためのユーザ・アクションがあったかどうかをチェックする。このユーザ・アクションは事前に定義されており、例えば、マウスの右ボタンをクリックした状態でＣｔｒｌキーを押すアクションをオブジェクト選択のトリガーとすることができる。勿論、他のマウス／キー操作をオブジェクト選択のトリガーとして定義しておいてもよい。

ユーザ・アクションがあると、ステップＳ２で、基準点決定部２２はオブジェクト選択のための基準点を決定する。基準点決定部２２は、例えば、キャレットまたはマウス・カーソルの位置を基準点として決定することができる。基準点が決定されると、次のステップＳ３で、基準エリア設定部２４が基準点を囲む基準エリアを設定する。この基準エリアは、基準点の近傍のいくつかのオブジェクトを選択できる所定の大きさに設定される。例えば、基準点を中心として、編集画面の縦横３分の１の大きさに設定することができる。その一例を図７に示す。図７において、編集画面７０上でカーソル７４が図示のところに位置していると、太線７６で示す基準エリアが設定される。図７の例では、基準エリア７６は矩形になっているが、必ずしも矩形でなくてもよい。

図５に戻って、基準エリアが設定されると、次のステップＳ４で、基準ビュー・オブジェクト選択部２６が、基準エリアに含まれるビュー・オブジェクトのうち、基準点に最も近いオブジェクトを基準ビュー・オブジェクトとして選択する。基準点に最も近いオブジェクトとは、基準点を含むオブジェクト、基準点のそばに境界線があるオブジェクトなどが該当し、図２のようなツリー構造を考慮することによって選択される。図６および図７の例で説明すると、カーソル７４の位置によって示される基準点が文字列「Ｓｕｎ」を含むデータ・セル５８Ａのところにあるから、基準ビュー・オブジェクト選択部２６は、データ・セル５８Ａを基準ビュー・オブジェクトとして選択してもよい。

基準ビュー・オブジェクトが選択されると、次のステップＳ５で、関連ビュー・オブジェクト選択部２８が、基準エリアに含まれるビュー・オブジェクトのうち、基準ビュー・オブジェクト選択部２６により選択された基準ビュー・オブジェクトに関連するビュー・オブジェクトを選択する。この間連ビュー・オブジェクトは、基準ビュー・オブジェクトの兄弟オブジェクト、親オブジェクトおよび子オブジェクトのうちの少なくとも１つである。次に、図８に示すツリー構造を参照しながら、関連ビュー・オブジェクトの選択について説明する。

図８は、図２のソースコードをツリー形式で示したもので、記憶部２０はこのツリー構造も記憶している。ツリーの各ノードとソースコードの行番号との関係は以下のようになっている。
ｂｏｄｙ８２（ルート・ノード）：行５〜６１
ｔａｂｌｅ８４：行６〜６０
ｔｒ８６Ａ：行８〜１１
ｔｒ８６Ｂ：行１２〜５８
ｔｈ８８Ａ：行９
ｔｈ８８Ｂ：行１０
ｔｄ９０Ａ：行１３〜４４
ｔｄ９０Ｂ：行４５〜５７
Ｍｅｎｕ９１：行９
Ｃｏｎｔｅｎｔｓ９２：行１０
ｔａｂｌｅ９３：行１４〜４３
ｔａｂｌｅ９４：行４６〜５６
ｔｒ９６Ａ：行１６〜３２
ｔｒ９６Ｂ：行３３〜３５
ｔｒ９６Ｃ：行３６〜３８
ｔｒ９６Ｄ：行３９〜４１
ｔｒ９８Ａ：行４８〜５１
ｔｒ９８Ｂ：行５２〜５４
ｔｄ９９：行１７〜３１
ｔｄ１０１：行３４
ｔｄ１０２：行３７
ｔｄ１０３：行４０
ｔｄ１０５Ａ：行４９
ｔｄ１０５Ｂ：行５０
ｔｄ１０４：行５３
ｔａｂｌｅ１００：行１８〜３０
Ｉｔｅｍ１１０８：行３４
Ｉｔｅｍ２１１０：行３７
Ｉｔｅｍ３１１２：行４０
Ｓｕｎのイメージ１１４：行４９
Ｃｌｏｕｄのイメージ１１６：行５０
Ｍｏｏｎのイメージ１１８：行５３
ｔｒ１０６Ａ：行２０〜２２
ｔｒ１０６Ｂ：行２３〜２５
ｔｒ１０６Ｃ：行２６〜２８
ｔｄ１２０：行２１
ｔｄ１２２：行２４
ｔｄ１２４：行２７
Ｓｕｎ１２６：行２１
Ｃｌｏｕｌｄ１２８：行２４
Ｍｏｏｎ１３０：行２７

関連ビュー・オブジェクト選択２８は、記憶部２０に記憶されているソースコードのツリー構造から、基準エリアに含まれる複数のビュー・オブジェクトのうち、基準ビュー・オブジェクトの兄弟オブジェクト、親オブジェクトおよび子オブジェクトを順に探索し、親オブジェクトまたは子オブジェクトが見つかると、その兄弟オブジェクト、親オブジェクトおよび子オブジェクトを順に探索し、以下同様の手順をオブジェクトが見つからなくなるまで繰り返す。

具体例で説明すると、図６および図７の例では、文字列「Ｓｕｎ」を含むデータ・セル５８Ａが基準ビュー・オブジェクトとして選択されているので、関連ビュー・オブジェクト選択部２８は、まず図７の基準エリア７６に含まれるオブジェクトの中から、データ・セル５８Ａの兄弟オブジェクトを探索する。データ・セル５８Ａは、図８ではノード１２０に対応しているが、ノード１２０は兄弟を持っていないので、関連ビュー・オブジェクト選択部２８は、次に、ノード１２０の親および子を探索する。ノード１２０はノード１０６Ａおよびノード１２６をそれぞれ親および子として持っており、いずれも基準エリア７６に含まれているので、関連ビュー・オブジェクト選択部２８はそれらを関連ビュー・オブジェクトとして選択する。

次に、関連ビュー・オブジェクト選択部２８は、親ノード１０６Ａの兄弟を探索する。図８の例では、ノード１０６Ａはノード１０６Ｂおよび１０６Ｃを兄弟として持っており、しかもそれらは基準エリア７６に含まれているので、関連ビュー・オブジェクト選択部２８はそれらを関連ビュー・オブジェクトとして選択する。更に、関連ビュー・オブジェクト選択部２８は、ノード１０６Ａ、１０６Ｂおよび１０６Ｃの親、ノード１０６Ｂおよび１０６Ｃの子を探索し、ノード１００、１２２、１２４、１２８および１３０を選択する。以下同様にして、関連ビュー・オブジェクト選択部２８は、基準エリアに含まれる関連ビュー・オブジェクトがなくなるまで、兄弟、親および子の探索を続ける。なお、本発明では、兄弟、親および子の探索は任意の順序で行ってよく、必ず兄弟を最初に探索しなければならないというものではない。

探索が終わると、関連ビュー・オブジェクト選択部２８は、選択したオブジェクトを図８に示すようなツリー構造の形で記憶部２０に記憶し、更にどれが基準ビュー・オブジェクトであるかを示すポインタを描画部３０に提供する。

関連ビュー・オブジェクトの選択が終わると、最後のステップＳ６で、描画部３０は、基準ビュー・オブジェクトを表す第１の矩形および関連ビュー・オブジェクトを表す第２の矩形を、オブジェクト選択のためのスペースを間に持たせて、基準ビュー・オブジェクトおよび関連するビュー・オブジェクトとは別に、例えばポップアップＵＩとして描画する。あるいは、ＷＹＳＩＷＹＧ編集画面の関連部分を一時的に書き換えるようにしてもよい。描画の一例を図９に示す。描画部３０は、まず最初に、ポインタにより指定された基準ビュー・オブジェクトを表す第１の矩形２００を、元の基準ビュー・オブジェクトのレイアウト結果を利用して描画する。矩形２００の大きさは、ウェブページ編集画面の大きさや、基準ビュー・オブジェクトおよび関連ビュー・オブジェクトの位置を考慮して適宜決めればよい。矩形２００は、例えば文字列「ＡＡＡＡＡＡＡＢＢＢＢＢＢＢＢＣＣＣＣ」が折り返しによって「ＡＡＡＡＡＡＡＢＢＢＢＢ」と「ＢＢＢＣＣＣＣ」に分かれていた場合は、２つの矩形になるが、本発明は、このような矩形の組み合わせも含むものとする。

次に、関連ビュー・オブジェクトが親オブジェクトの場合は、描画部３０は、当該関連ビュー・オブジェクトを表す第２の矩形２０２を、オブジェクト選択のためのスペース（図９に斜線で示す）を空けて描画する。ユーザは、例えば矩形２０２の境界線をクリックすることで、関連ビュー・オブジェクトを、従って所望のタグを仮選択することができる。そのため、境界線をある程度の太さで描画しておくのが好ましい。スペースの幅は、適宜決めればよい。例えばウェブページのデフォルト・フォントの高さを目安に決めることができる。関連ビュー・オブジェクト選択部２８が作成したツリー構造を上に辿ることによって得られる親の数が多いため、ポップアップＵＩが大きくなり過ぎる場合は、途中で親の描画をやめて、その代わりに、更に親があることを示すアイコン２０４を例えば左上に表示する。

子オブジェクトの場合は、基準ビュー・オブジェクトの矩形２００の内部に第２の矩形を描くことになるが、その場合も矩形２００との間に所定のスペースを空けて描画する。同様に、関連ビュー・オブジェクト選択部２８が作成したツリー構造を下に辿ることによって得られる子（子孫）の数が多いため、矩形２００の内部に描ききれなくなった場合は、更に子があることを示すアイコン２０６を例えば矩形２００の内部に表示する。ユーザがアイコン２０４または２０６をクリックすると、描画部３０は省略されていた親オブジェクトまたは子オブジェクトを新たな基準ビュー・オブジェクトとして、全体を再描画する。また、矩形２００の内部に余裕があれば、最終的な子オブジェクトの中に対応する文字またはイメージを描画してもよい。なお、基準ビュー・オブジェクトが、それぞれが兄弟である複数の子オブジェクトを持っていて、それらが多くの子孫を持っていたため、矩形２００の内部に描き切れなくなった場合は、それぞれの子の矩形の内部にアイコン２０６が表示されることになる。

兄弟オブジェクトの場合は、基準ビュー・オブジェクトとは重なり合っていないので、上述のような考慮は不要であるが、基準ビュー・オブジェクトの矩形と兄弟オブジェクトの矩形との間のスペースを上述のように決めてもよい。

描画部３０が描画した最終的なポップアップＵＩの例を図１０に示す。図示のポップアップＵＩ２５０は図１の編集画面を含むウィンドウとは別のところに表示してもよく、また基準エリアと重ならない範囲で一部重畳して表示してもよい。ポップアップＵＩ２５０は、基準ビュー・オブジェクトおよび関連ビュー・オブジェクトの矩形が描画されたタグ・ウィンドウと、選択されたタグの状況を示すフィールド２５４および２５６を含んでいる。フィールド２５４は、ユーザによって現在仮選択されているタグの名称を含み、フィールド２５６は仮選択されたタグを示すプレビュー領域である。図１０の例では、強調表示用の太線２５２で示されるタグが仮選択されている。ユーザは、タグ・ウィンドウに表示されている特定の矩形をクリックするか、またはフィールド２５４の右端に示されている上向きまたは下向きの三角で選択タグを上位方向または下位方向に辿ることにより、特定のタグを仮選択することができる。ユーザは、所望のタグに達したときに、例えばＥｎｔｅｒキーを押すことによって、選択を確定することができる。その場合、図１の編集画面において、選択が確定したタグに対応する領域を何らかの形で強調表示しておくと、ユーザは実際の画面のどの部分が選択されているかを容易に知ることができる。

クライアント１６として実装可能なデータ処理システムの構成例を図１１に示す。データ処理システム３００はＰＣＩローカル・バス・アーキテクチャを採用している。図示の例では、ＰＣＩバスを採用しているが、ＡＧＰやＩＳＡといった他のバス・アーキテクチャを採用してもよい。プロセッサ３０２およびメイン・メモリ３０４はＰＣＩブリッジ３０８を介してＰＣＩローカル・バス３０６に接続されている。ＰＣＩブリッジ３０８は、プロセッサ３０２用の統合メモリ・コントローラおよびキャッシュ・メモリをも含んでいてもよい。ＰＣＩローカル・バス３０６への追加の接続は、コンポーネントの直接接続により、または拡張ボードを通して行うことができる。図示の例では、ＬＡＮアダプタ３１０、ＳＣＳＩホスト・バス・アダプタ３１２、および拡張バス・インターフェース３１４が、コンポーネントの直接接続でＰＣＩローカル・バス３０６に接続されている。これに対して、オーディオ・アダプタ３１６、グラフィクス・アダプタ３１８、およびオーディオ／ビデオ・アダプタ３１９は、拡張用スロットに挿入された拡張ボードによってＰＣＩローカル・バス３０６に接続されている。拡張バス・インターフェース３１４はキーボード兼マウス・アダプタ３２０、モデム３２２、および追加のメモリ３２４のための接続を提供する。ＳＣＳＩホスト・バス・アダプタ３１２はハード・ディスク・ドライブ３２６、テープ・ドライブ３２８、およびＣＤ−ＲＯＭドライブ３３０のための接続を提供する。典型的なＰＣＩローカル・バスの実装では３つまたは４つのＰＣＩ拡張用スロットあるいは拡張用コネクタを備えている。

オペレーティング・システムがプロセッサ３０２で動作し、図３のデータ処理システム３００における各種コンポーネントを制御する。オペレーティング・システムは、マイクロソフト・コーポレーションから入手可能なＷｉｎｄｏｗｓ（Ｒ）ＸＰといった市販のオペレーティング・システムであってもよい。本発明に従うプログラムは、オペレーティング・システムのもとでランし、前述の各種機能を実現する。オペレーティング・システムおよび本発明のプログラムは、ハード・ディスク・ドライブ３２６などの記憶装置に格納され、プロセッサ３０２によって実行されるときにメイン・メモリ３０４にロードされる。

当業者であれば、図１１のハードウェアが実装次第で変わる可能性があることを十分理解できよう。フラッシュＲＯＭ（あるいは同等の不揮発性メモリ）や光ディスク・ドライブなどといった、その他の内部ハードウェアや周辺装置が、図１１に示したハードウェアに加えて、あるいはこれらに代えて、使用することができる。

以上、本発明の実施形態について図面を参照して詳細に説明してきたが、上で説明した実施形態は例示に過ぎず、特許請求の範囲に記載された本発明の範囲を限定するものではない。当業者であれば、本発明の精神を逸脱することなく、前述の実施形態に対して様々修正、変更をなし得ることは容易に理解されよう。

本発明の支援の対象となるウェブページの簡単な例を示す図。図１に示したウェブページのＨＴＭＬソース・ファイルを示す図。本発明の実施環境の一例を示す図。本発明に従うクライアントの機能構成例を示すブロック図。本発明に従うクライアントの動作を示すフローチャート。図１に示したウェブページをタグ構造と共に示す図。図１に示したウェブページにおいて基準エリアを設定するときの状況を示す図。図２に示したＨＴＭＬソース・ファイルをツリー形式で示す図。本発明に従うクライアントの描画部による選択オブジェクト及び関連アイコンの描画の基本概念を示す図。本発明に従うクライアントの描画部による実際の描画結果の一例を示す図。本発明に従うクライアントとして実装可能なデータ処理システムの一例を示すブロック図。

Claims

ウェブページのオーサリングにおいてオブジェクト選択を支援するための方法であって、
前記ウェブページの編集画面におけるユーザ・アクションに応じて、オブジェクト選択のための基準点を決定するステップと、
前記基準点を囲む基準エリアを設定するステップと、
前記基準エリアに含まれるビュー・オブジェクトのうち、前記基準点に最も近いビュー・オブジェクトを基準ビュー・オブジェクトとして選択するステップと、
前記基準エリアに含まれるビュー・オブジェクトのうち、前記基準ビュー・オブジェクトに関連するビュー・オブジェクトを選択するステップと、
前記基準ビュー・オブジェクトを表す第１の矩形および前記関連するビュー・オブジェクトを表す第２の矩形を、オブジェクト選択のためのスペースを間に持たせて、前記基準ビュー・オブジェクトおよび前記関連するビュー・オブジェクトとは別に描画するステップと、
を含む方法。
前記基準点を決定するステップは、キャレットまたはマウス・カーソルの位置を基準点として決定する、請求項１に記載の方法。
前記基準エリアを設定するステップは、前記基準点を中心とする所定の大きさのエリアを設定する、請求項１または２に記載の方法。
前記関連するビュー・オブジェクトを選択するステップは、前記基準ビュー・オブジェクトの兄弟オブジェクト、親オブジェクトおよび子オブジェクトのうちの少なくとも１つを選択する、請求項１乃至３のいずれかに記載の方法。
前記関連するビュー・オブジェクトを選択するステップは、選択した関連するビュー・オブジェクトに関連するビュー・オブジェクトが前記基準エリアに含まれていた場合は、当該関連するビュー・オブジェクトも選択する、請求項４に記載の方法。
前記ウェブページのデータをツリー形式で記憶するステップを更に含む、請求項１乃至５のいずれかに記載の方法。
前記関連するビュー・オブジェクトを選択するステップは、前記ツリー構造を探索することによって関連するビュー・オブジェクトを選択する、請求項６に記載の方法。
前記描画するステップは、前記関連するビュー・オブジェクトが前記基準ビュー・オブジェクトの親オブジェクトである場合は、前記第１の矩形の外側に前記第２の矩形を描画する、請求項１乃至７のいずれかに記載の方法。
前記描画するステップは、前記関連するビュー・オブジェクトが前記基準ビュー・オブジェクトの子オブジェクトである場合は、前記第１の矩形の内側に前記第２の矩形を描画する、請求項１乃至８のいずれかに記載の方法。
前記描画するステップは、前記第１の矩形および前記第２の矩形を含むポップアップＵＩを描画する、請求項１乃至９のいずれかに記載の方法。
前記ポップアップＵＩは、前記第１の矩形および前記第２の矩形の他に、選択されたビュー・オブジェクトを示すフィールドを有する、請求項１０に記載の方法。
ウェブページのオーサリングにおいてオブジェクト選択を支援するための装置であって、
ウェブページの編集画面におけるユーザ・アクションに応じて、オブジェクト選択のための基準点を決定する基準点決定部と、
前記基準点を囲む基準エリアを設定する基準エリア設定部と、
前記基準エリアに含まれるビュー・オブジェクトのうち、前記基準点に最も近いビュー・オブジェクトを基準ビュー・オブジェクトとして選択する基準ビュー・オブジェクト選択部と、
前記基準エリアに含まれるビュー・オブジェクトのうち、前記基準ビュー・オブジェクトに関連するビュー・オブジェクトを選択する関連ビュー・オブジェクト選択部と、
前記基準ビュー・オブジェクトを表す第１の矩形および前記関連するビュー・オブジェクトを表す第２の矩形を、オブジェクト選択のためのスペースを間に持たせて、前記基準ビュー・オブジェクトおよび前記関連するビュー・オブジェクトとは別に描画する描画部と、
を含む装置
ウェブページのオーサリングにおいてオブジェクト選択を支援するためのプログラムであって、
ウェブページの編集画面におけるユーザ・アクションに応じて、オブジェクト選択のための基準点を決定する手順と、
前記基準点を囲む基準エリアを設定する手順と、
前記基準エリアに含まれるビュー・オブジェクトのうち、前記基準点に最も近いビュー・オブジェクトを基準ビュー・オブジェクトとして選択する手順と、
前記基準エリアに含まれるビュー・オブジェクトのうち、前記基準ビュー・オブジェクトに関連するビュー・オブジェクトを選択する手順と、
前記基準ビュー・オブジェクトを表す第１の矩形および前記関連するビュー・オブジェクトを表す第２の矩形を、オブジェクト選択のためのスペースを間に持たせて、前記基準ビュー・オブジェクトおよび前記関連するビュー・オブジェクトとは別に描画する手順と、
をコンピュータに実行させるためのプログラム