情報処理装置、情報処理方法およびプログラム
【課題】 HTMLなどの構造化文書の体裁を定義するCSSなどのスタイルシートを効率的に編集可能とする情報処理装置、情報処理方法およびプログラムを提供すること。
【解決手段】 本発明の情報処理装置10は、それぞれスタイルを定義付ける複数のクラスを登録する登録部64と、与えられた1以上のスタイル特性を指定するプロパティ値を含むデータ・セットに類似する候補クラスを登録済みのクラスの中から検索する検索部52と、検索された候補クラスを選択可能に提示する提示部58と、入力された1以上のプロパティ値をデータ・セットとして与えて、選択可能な候補クラスの中から確定されたクラスを用いて構造化文書に対しスタイル定義を適用する適用部50とを含み、構造化文書のスタイル定義を支援する。
【解決手段】 本発明の情報処理装置10は、それぞれスタイルを定義付ける複数のクラスを登録する登録部64と、与えられた1以上のスタイル特性を指定するプロパティ値を含むデータ・セットに類似する候補クラスを登録済みのクラスの中から検索する検索部52と、検索された候補クラスを選択可能に提示する提示部58と、入力された1以上のプロパティ値をデータ・セットとして与えて、選択可能な候補クラスの中から確定されたクラスを用いて構造化文書に対しスタイル定義を適用する適用部50とを含み、構造化文書のスタイル定義を支援する。
【発明の詳細な説明】
【技術分野】
【0001】
本発明は、構造化文書の作成アプリケーションに関し、より詳細には、HTMLなどの構造化文書の体裁を定義するCSSなどのスタイルシートを効率的に編集可能とする情報処理装置、情報処理方法およびプログラムに関する。
【背景技術】
【0002】
ポータルサイト、ウェブアプリケーション、ホームページのデザインにおいて、ページの詳細なレイアウトを定義付けるカスケード・スタイルシート(Cascading Style Sheet;以下、CSSとして参照する。)は、重要な役割を果たしている。CSSは、W3C(World Wide Web Consortium)の勧告により仕様が定められ、1998年にLevel 2(CSS2)が勧告されている。さらに現在では、Level 2 revision 1(CSS2.1)の勧告候補、Level 3(CSS3)のドラフトが公開されており、さらなる拡張が続いている。
【0003】
CSSは、HTML、XML、XHTML、その他のマークアップ言語で記述された構造化文書において、文書中の要素に対する修飾を指定するスタイルの定義を含んで構成され、文字のフォントや大きさ、文字飾り、行間などのレイアウトに関する情報を文書本体から切り離して定義付けることを可能としている。CSSにより、パーソナル・コンピュータか携帯端末かといったページを表示する媒体の別に適合させたスタイルシートの切り替えや、ユーザ・エージェント、サイト制作者、閲覧ユーザそれぞれが定義したスタイル定義の効果を重ね合わせが可能とされる。
【0004】
一方、近年、ホームページ・ビルダー(登録商標)、WebSphere(登録商標)Studio Application Developer、Rational(登録商標) Application Developer for WebSphere(登録商標) Software、Microsoft(登録商標)FrontPage(登録商標)、Adobe(登録商標)Dreamweaver(登録商標)など、種々の洗練されたウェブ・オーサリング・ツールが提供されている。上述のようなウェブ・オーサリング・ツールには、メニュー選択方式またはコード直接記述方式にて上記CSSを編集する機能が備えられており、ポータルサイト、ウェブアプリケーション、ホームページに対して統一的なスタイルの定義を実施できるよう構成されている(非特許文献1,非特許文献2)。
【0005】
図13は、従来のウェブ・オーサリング・ツールにおけるCSSの編集機能を示す図である。従来のウェブ・オーサリング・ツールでは、非特許文献2にも示されているように、図13(A)に示す新規にCSSのクラスを追加するためのグラフィカル・ユーザ・インタフェース(以下、GUIとして参照する。)、図13(B)に示すCSSのクラスのプロパティを編集するGUI、図13(C)に示すCSSのクラスを一覧表示するGUIなどが提供されている。その他、各CSSプロパティの値を入力する際に、値の候補を提示する補完機能を備え、CSSのコーディングを簡略化するためのGUIも提供されている。
【非特許文献1】”Webパースペクティブ−後編−”、[online]、2003年1月10日、IBM、製品、ソフトウェア、WebSphere、WebSphere DeveloperDomain、テクニカル情報、WSADによるアプリケーション開発ワークショップ資料[2008年7月30日検索]、インターネット<URL;http://www-06.ibm.com/jp/software/websphere/developer/wsad/workshop/pdf/8.pdf>
【非特許文献2】”プレビュー機能付きCSSエディタ”、[online]、IBM、製品、ソフトウェア、ホーム・ソフトウェア、ホームページ・ビルダー、製品、3つの進化、進化2[2008年7月30日検索]、インターネット<URL;http://www-06.ibm.com/jp/software/internet/hpb/products/contents.html>
【発明の開示】
【発明が解決しようとする課題】
【0006】
しかしながら、従来のCSS編集機能では、制作者は、ページをデザインする際に、どのようなCSSのクラスが既に定義されているかを充分に把握していなければ、同等の修飾を指定するCSSのクラスの重複定義が頻発してしまい、不用意に定義を追加することでクラスの定義数が増大してしまう可能性があった。
【0007】
また、既定義のクラスの中から所望の修飾を指定するスタイルが定義されたクラスを探し出そうとしても、従来では、全体または所定のタグに関連するクラスの一覧といったGUIしか提供されていなかったため、制作者は、一覧表示の中から所望のクラスを逐一確認しつつ探し出さなければならず、ユーザ利便性の観点から充分なものではなかった。つまり、従来のウェブ・オーサリング・ツールでは、CSSのクラス指定の優れた特徴である再利用性を充分に活用することができなかった。
【0008】
本発明は、上記問題点に鑑みてなされたものであり、HTML、XML、XHTML、その他のマークアップ言語で記述された構造化文書の体裁を定義するスタイルシートの編集において、既定義の設定を容易に再利用可能とし、重複定義の蓋然性を低減し、もって、効率的にポータルサイト、ウェブアプリケーション、ホームページなどのウェブ・コンテンツを構築することを可能とする、情報処理装置、情報処理方法およびプログラムを提供することを目的とする。
【課題を解決するための手段】
【0009】
本発明では、上記課題を解決するために、情報処理装置は、それぞれスタイルを定義付ける複数の既定義のクラスを登録しておき、入力された1以上のスタイル特性を指定するプロパティ値を含む所望のデータ・セットを基準として、それに類似する候補クラスを登録済みのクラスの中から検索して選択可能に提示する。そして、例えば、提示されたいずれかの候補クラスが選択され、適用の確定の指示を受けると、情報処理装置は、選択可能な候補クラスの中から確定されたクラスを用いて構造化文書に対しスタイル定義を適用する。
【0010】
上記構成により、入力された所望のプロパティ値を含むデータ・セットに似たスタイルを定義付けるクラスが、登録済みのクラスの中から検索されて提示されるため、情報処理装置を用いてウェブ・コンテンツを製作しているユーザは、既定義のクラスの中から所望の修飾を指定するスタイルが定義されたクラスを容易に探し出すことができるようになり、また既に定義済みのクラスを効率的に再利用できるようになり、もって、ユーザ利便性に優れ、効率的かつ効果的な構造化文書のスタイル定義の編集支援が実現される。類似のクラスが既に定義済みであれば、そのクラスが提示されるため、ユーザが同等の修飾を指定するクラスを重複定義してしまう蓋然性も低減され、スタイル定義のデータ・サイズの増大、およびコードの複雑化が防止される。
【0011】
本発明では、さらに、与えられたデータ・セットと候補クラスとにそれぞれ含まれるプロパティ値(プロパティおよび値のセット)を比較し、その差分から候補クラスに対する補完定義データを作成することができる。上記構成により、たとえ候補クラスにユーザの許容限度を超える過不足のプロパティ値が存在したとしても、データ・セットと候補クラスとの相違点に対応する最小限のスタイル定義によってユーザが望むスタイルが実現されるため、より効率的に既定義のクラスを活用することが可能となる。
【0012】
本発明では、さらに、選択された候補クラスおよび対応する補完定義データを適用した場合のプレビューを描画することができる。上記構成により、ユーザは、構造化文書に対してスタイル定義を実際に適用する前に、スタイル定義が適用された場合に発現するスタイルの効果を確認することができ、ウェブ・コンテンツの製作作業の効率性を向上させることが可能となる。
【0013】
さらに、本発明では、上記補完定義データは、上記データ・セットとして再帰的に与えられ、該補完定義データと再帰的に検索された候補クラスとの差分から、次の補完定義データを作成することができる。上記構成により、作成された補完定義データに類似するクラスが登録済みのクラスの中からさらに検索されるため、補完のための新たなスタイル定義をよりコンパクトにすることができる。また、この場合には、構造化文書に対しスタイル定義を適用する際に、再帰的に検索された候補クラスを用いることができる。
【0014】
本発明では、さらに、検索された上記候補クラスとともに、該候補クラスの定義内容、および該候補クラスが定義されているファイルのパスの少なくとも一方を提示することができる。また本発明では、類似する候補クラスは、例えば、それぞれが包含するプロパティ値の一致度を評価する評価関数の値が、所定の閾値以上であることをもって判定することができる。
【0015】
さらに本発明では、例えば、情報処理装置の出力装置を介してユーザが認識可能なように候補クラスの項目を出力し、入力装置を介したユーザからの項目の選択指示を待ち受けることで、上記選択的な提示を実施することができる。また、本発明では、確定されたクラスの指定を上記構造化文書中の対象要素の属性に加え、かつ上記補完定義データの各プロパティ値を対象要素に対しインラインで定義するか、または、確定されたクラスの指定および補完定義データに対応する新たに定義されるクラスの指定を、上記構造化文書の対象要素の属性に加えることで上記スタイル定義の適用を実施することができる。
【発明を実施するための最良の形態】
【0016】
以下、本発明について実施形態をもって説明するが、本発明は、後述する実施形態に限定されるものではない。なお、以下の本発明の実施形態では、構造化文書としてHTML文書、スタイル定義としてカスケード・スタイルシート(CSS)を編集対象としたウェブ・オーサリング・ツールを実現するコンピュータ装置を例として説明する。
【0017】
図1は、本実施形態のコンピュータ装置10の機能ブロックを示す。コンピュータ装置10は、概ねパーソナル・コンピュータとして構成されている。図1に示すコンピュータ装置10に含まれる各機能部(詳細は後述する。)およびウェブ・コンテンツを編集するためのウェブ・オーサリング・ツールとしての機能は、メモリ上にプログラムを展開し、プログラムの実行により各ハードウェア資源を動作制御することによって、コンピュータ装置10上に実現される。コンピュータ装置10は、ディスプレイ、マウスやキーボードなどの入力装置を含むユーザ・インタフェース部を備え、入力装置への入力に対応する操作イベントが、適切なオペレーティング・システム(OS)の制御の下、各機能部へと渡されて、操作イベントに応答した処理結果がディスプレイなどの出力装置に出力される。入力装置およびディスプレイによりグラフィカル・ユーザ・インタフェース(GUI)が提供される。
【0018】
本実施形態のコンピュータ装置10は、HTML文書のスタイルを編集する機能を提供するスタイル編集部50を含んで構成される。本実施形態のスタイル編集部50は、適用部として機能する。スタイル編集部50は、HTML文書中の所定の要素に対するスタイルを定義するためのGUIを提供する。上記スタイルの適用対象となる要素は、特に限定されるものではないが、例えば、P要素、H1要素、H2要素、H3要素、DIV要素およびTABLE要素などを含むブロック要素、SPAN要素、IMG要素、EM要素およびSTRONG要素などを含むインライン要素、およびインラインまたはブロック要素として働くINS要素およびDEL要素などを挙げることができる。
【0019】
上記要素に対して指定されるスタイルとしては、対象要素のタイプにも依るが、例えば、前景および背景に関する指定(color,background-attachment,background-color,background-image,background-positionなど)、フォントに関する指定(font,font-style,font-variant,font-weight,font-size,font-familyなど)、テキストの体裁に関する指定(line-height,text-align,vertical-align,text-decoration,text-indent,text-transform,white-space,letter-spacing,word-spacingなど)、サイズに関する指定(width,max-width,min-width,height,max-height,min-heightなど)、領域に関する指定(margin-top,margin-bottom,margin-left,margin-right,padding-topなど)、ボーダに関する指定(border-color,border-style,border-width,border-top,border-top-color,border-top-style,border-top-widthなど)、その他、テーブル(table-layout,caption-side,border-collapseなど)、リスト(list-style,list-style-image,list-style-type,list-style-position)、アウトライン(outline,outline-color,outline-style,outline-widthなど)に関する指定など、種々の修飾を指定するスタイルを挙げることができる。
【0020】
本実施形態のコンピュータ装置10は、さらに、CSS編集操作を支援する機能を提供する編集支援部60と、HTML文書のページ・ファイル68やスタイルシート・ファイル70を格納する格納部66と、ページ・ファイルおよびスタイルシート・ファイルから定義済みのCSSのクラス(以下、用語「クラス」は、特に断らない限り、CSSのクラスを参照する。)を読み出して、クラス登録部64に登録するクラス入出力部62とを含んで構成される。クラス登録部64は、コンピュータ装置10のメモリ、ハードディスクなどにより提供され、編集を支援するために、検索可能なデータ構造にて定義済みのクラスを登録している。
【0021】
なお、検索可能に登録されるクラスは、例えば、ウェブ・オーサリング・ツールが管理する編集対象のプロジェクト内のページ・ファイルおよびスタイルシート・ファイルに記述されたものとすることができるが、特に限定されるものではない。他の実施形態では、現在の編集対象のページ・ファイル68および該ページ内で読み込むよう宣言された他の外部ファイルに記述されたクラスのみを登録することもできる。さらに他の実施形態では、ウェブ・オーサリング・ツールが管理する複数のプロジェクトに渡って、検索の範囲に取り込むこともできる。
【0022】
上記編集支援部60についてより具体的に説明すると、編集支援部60は、類似定義検索部52と、リスト提示部58とを含んで構成される。ユーザにより、所定の要素に対する所望のCSSプロパティ値(以下、用語「プロパティ値」は、特に断らない限り、CSSのプロパティ値を参照する。)のセット(以下、基準プロパティとして参照する。)100が入力されると、上記スタイル編集部50は、編集支援部60に該基準プロパティ100を渡し、編集支援処理の実行を依頼する。渡された基準プロパティ100は、類似定義検索部52に与えられ、類似定義検索部52は、クラス登録部64に登録された定義済みのクラスの中から、対象要素のタイプに適合しかつ基準プロパティ100に類似するクラスを検索する。
【0023】
なお、要素のタイプに適合するクラスは、対象要素のタイプに一致するタイプのクラス、および要素のタイプが指定されていないクラスを含むことができる。また、類似定義検索部52は、基準プロパティ100と既定義のクラスとの間の類似性を反映するスコアを、基準プロパティ100および既定義のクラスそれぞれに含まれるプロパティ値の一致度を評価する所与の評価関数を用いて算出することができる。
【0024】
類似のクラスが見つかると、リスト提示部58は、類似のクラスを選択候補のクラスとして、それらの名称を、スコア順、アルファベット順などでソートして選択可能に一覧表示して、ユーザからの選択入力を待ち受ける。この際には、リスト提示部58は、検索された候補のクラスを、例えば、所定の順位またはスコアまでで打ち切って提示することができる。また、リスト提示部58は、クラスの名称に加え、該クラスの定義内容、該クラスに与えられた説明内容などを、例えばポップアップGUI上に提示することができる。
【0025】
さらに、本実施形態の編集支援部60は、補完定義作成部54と、プレビュー描画部56とを含むことができる。補完定義作成部54は、基準プロパティ100と候補クラスとの間で各プロパティ値を比較し、これらの差異を補完する補完定義データを適宜作成する。補完定義データが作成された場合、上記リスト提示部58は、補完定義データの定義内容などをさらにポップアップGUI上に表示させることができる。
【0026】
プレビュー描画部56は、リスト提示部58で選択された候補クラスを仮に適用した場合のプレビューを、例えばポップアップGUI上に描画する。また、補完定義が指定される場合には、選択された候補クラスを補完定義データにて補正して仮に適用した場合のプレビューを描画する。なお、プレビューの描画範囲は、特に限定されるものではないが、編集中のページ全体や、例えば編集対象要素の親要素、該対象要素、および該対象要素の下位の要素からなるページの一部、編集対象要素および該対象要素の下位の要素からなるページの一部といった、編集対象の要素を内包する特定の要素下位の要素からなるページの一部分を描画範囲とすることができる。
【0027】
ユーザの操作により候補クラスの中から適用するクラスが確定された場合には、編集支援部60は、確定されたクラス(以下確定クラスとして参照する。)を識別するクラス名、該クラスが定義されているファイルのパス、および適宜補完定義データをスタイル編集部50へ通知する。スタイル編集部50は、ページ・ファイル中の対象要素に対し、通知されたクラスを指定するクラス属性を加えて、確定クラスを用いたスタイル定義の適用を実施する。スタイル編集部50は、補完定義が指定される場合には、ページ・ファイル中の対象要素に対し、通知された補完定義データに含まれる各プロパティ値を、クラス指定に優先する様式にて追加的に定義付ける。
【0028】
なお、定義の具体的な追加方法は、勧告されたカスケーディングの優先順位に従う限り、特に限定されるものではないが、例えば、対象要素に対しインラインでスタイル属性を定義したり、対象要素のIDをセレクタとして規則集合を定義したりすることによって実施することができる。この際、確定クラスが編集中のページに関連付けられていなかった場合には、該クラスを定義するファイルを外部読み込みする宣言をHTML文書中に書き込む。また、上記追加的な定義方法としては、その他、補完定義データを新たなクラスとして定義し、複数のクラスを指定するクラス属性を対象要素に追加するなどにより実施することもできる。クラスの同時指定による場合には、補完定義データがクラス入出力部62に与えられて、クラス入出力部62は、例えばページ・ファイルのスタイル定義部分中にクラスとして定義することができる。クラス入出力部62は、好適には、確定クラスの読み込み位置よりも後方に、補完定義データに対応するクラスを定義することができる。
【0029】
なお、図1は、CSS編集機能に関連した機能ブロックを説明のために示したものであり、本実施形態のコンピュータ装置10が、HTML文書自体の編集機能、JSP(Java(登録商標) Server Pages)ファイルの編集機能などウェブ・オーサリング・ツールとして利用可能な種々の機能部を備えることができることは言うまでもない。
【0030】
以下、本実施形態のCSSの編集支援機能について、より具体的な例を参照して説明する。図2は、本実施形態のコンピュータ装置10のディスプレイ画面上に表示されるページ編集GUI画面を例示する。図2には、現在編集対象であるログインパネル200が示されている。ユーザ操作により、例えば、テキスト202の要素を対象として選択されて、CSSのプロパティの編集機能が呼び出されると、該要素に対する所望のプロパティ値を入力するためのGUIが表示される。このGUI上において1以上のプロパティ値が入力され、編集支援を呼び出す操作イベントが発生すると、入力されたプロパティ値のデータ・セットが基準プロパティ100として編集支援部60に渡され、本実施形態の編集支援機能が呼び出される。
【0031】
図3は、本実施形態の編集支援機能を、各処理段階で用いるデータ構造とともに模式的に示す図である。図3には、与えられた基準プロパティ100と、ページ・ファイル68と、スタイルシート・ファイル70a,bとが示されている。スタイルシート・ファイル70a,bは、それぞれ、クラス120a,bの定義を含んで構成され、ページ・ファイル68も同様に、クラス120cの定義を含んで構成されている。
【0032】
図4は、本実施形態のクラス登録部64が保持するクラス登録テーブルのデータ構造を示す図である。クラス入出力部62は、上記スタイルシート・ファイル70a,bおよびページ・ファイル68を読み込んで、図4に示すようなクラス登録テーブル140を作成し、既に定義済みのクラスを登録する。図4に示すクラス登録テーブル140は、クラス名が入力されるフィールド140aと、該クラス名に対応する定義内容が入力されるフィールド140bと、該クラスが定義されているファイルのパスが入力されるフィールド140cとを含んで構成される。
【0033】
図1に示したクラス入出力部62は、CSSの慣例に従って、スタイル定義情報の読み込み順にクラスのエントリを追加してゆき、重複があった場合には、優先度の低い方のエントリ、つまりCSS2では前方で定義されたクラスに対応するエントリを削除して、後方定義されたクラス定義を優先させる。なお、クラス登録テーブル140の具体的な実装については、検索可能に構成される限り特に限定されるものではないが、例えば、フィールド140bを、その内容中に記述される各プロパティ値でさらに細分化して管理し、リレーショナル・データベース、オブジェクト・データベース、オブジェクト・リレーショナル・データベース、XMLデータベース上に格納する実装とすることができる。その際には、類似定義検索部52は、与えられた基準プロパティ100を、対応する問い合わせ言語にて検索クエリを展開して、データベースに対し、基準プロパティ100に類似するクラスの照会を実施する。
【0034】
再び、図3を参照すると、基準プロパティ100が類似定義検索部52に与えられると、類似定義検索部52は、基準プロパティ100に類似するクラスを抽出するよう検索クエリを展開して、クラス登録テーブル140内の登録から類似のクラスを検索し、図3に示す検索結果110を取得する。検索結果110は、候補クラスの名称が入力されるフィールド110aと、該候補クラスが定義されるファイルのパスが入力されるフィールド110bと、評価関数に従って求められたスコアが入力されるフィールド110cとを含んで構成される。そして、検索結果110のエントリは、スコアの値に従ってソーティングされる。検索結果110には、所定数以上(例えば1以上)のプロパティ値が一致しているクラスが候補クラスとしてエントリされることとなる。
【0035】
基準プロパティ100と既定義のクラスとの間の類似性を反映するスコアは、それぞれに含まれるプロパティ値の一致の程度を反映し、一致するプロパティ値の数などに依存した値となる。本実施形態では、プロパティ値が厳密一致する場合、プロパティ値が等価である場合、またはプロパティ値の差が所定の許容範囲内にある場合に、プロパティ値が一致したものと判定される。フォントサイズに関して例示すれば、プロパティ値「font-size : 12pt」に対しては、厳密一致するプロパティ値「font-size : 12pt」、等価なプロパティ値「font-size : 1pc」、許容範囲が±1ptであれば11〜13ptの範囲内のプロパティ値が、一致するものとして判定されるものとしてよい。
【0036】
同様に色の値に関して例示すれば、プロパティ値「color : skyblue」に対しては、厳密一致するプロパティ値「color : skyblue」、等価なプロパティ値「color : #87CEEB」やプロパティ値「color : rgb(135, 206, 235)」、許容範囲がRGBの値±5であれば、RGB表現では、R値が130〜140かつG値が201〜211かつB値が230〜240の値の範囲のプロパティ値、16進数カラーコード表現では、最上位2桁が82〜8C、かつ次の2桁がC9〜D3、かつ最後の2桁がE6〜f0の範囲内のプロパティ値が、一致するものとして判定されるものとしてよい。本実施形態の類似定義検索部52は、基準プロパティ100から、各プロパティ値につき、その等価範囲および許容範囲に含まれるプロパティ値を一致したものとして検索するよう検索クエリを展開して、類似のクラスの検索を実施する。なお、上記の許容範囲の値は、例えば、ウェブ・オーサリング・ツールの設定画面等により、予め設定されたものとすることができるが、特に限定されるものではない。
【0037】
また上記スコアは、例えば、基準プロパティ100と比較して、一致するプロパティ値の数に応じて(例えば1点づつ)加点し、余分なプロパティ値および不足するプロパティに数に応じて(例えば1点づつ)減点する評価関数を用いて算出することができる。さらに好適には、評価関数により求めた値を、候補クラスが定義されているファイルの種類の別に応じて補正することもできる。例えば、好適には、現在編集対象のファイル中で宣言されている候補クラスに対して高いスコアを与えるよう構成することができる。なお、本実施形態で用いる評価関数自体は、特に限定されるものではなく、他の実施形態では、例えば、厳密一致または等価であるプロパティ値に対する加点の重み付けを増やしたり、読み込み順位に応じて補正を加えたりすることもできる。
【0038】
図3に示す検索結果110ではプロパティ値「background-color : red」および「border-style : dotted」の両方が一致する「important」クラス120aが最も高いスコアの候補クラスとして算出されている。また、図3に示す検索結果110では、プロパティ値「background-color : red」が一致し、編集中のページ・ファイル68内で定義されている「error」クラス120cが次の順位の候補クラスとして、プロパティ値「background-color : red」が一致し、プロジェクト内の他のスタイルシート・ファイル70b中で宣言されている「eyecatch」クラス120bが第3位となるように並び替えられている。
【0039】
以下、補完定義作成部54による処理について、より具体的に説明する。図5は、本実施形態の補完定義作成部54による処理を、用いるデータ構造とともに模式的に示す図である。図5には、与えられた基準プロパティ100の定義内容と、候補クラス120の定義内容と、作成される補完定義データ130の定義内容とが示されている。基準プロパティ100および候補クラス120は、それぞれ、複数のプロパティ値102a〜c、およびプロパティ値122a〜cを含んで構成されている。
【0040】
図5に示す例では、候補クラス120のプロパティ値122a,122bは、基準プロパティ100のプロパティ値102a,bにそれぞれ一致している。一方、基準プロパティ100に含まれるプロパティ値102cは、候補クラス120側に対応するプロパティ値が存在せず、つまり候補クラス120は、プロパティ値が不足している。また候補クラス120に含まれるプロパティ値122cは、対応するプロパティ値が基準プロパティ100側に存在せず、つまり候補クラス120は、余剰なプロパティ値を含んでいる。
【0041】
本実施形態の補完定義作成部54は、基準プロパティ100と候補クラス120とがそれぞれ含むプロパティ値を比較して、上記不足するプロパティ値102c、および余剰のプロパティ値122cを特定する。補完定義作成部54は、これらの相違点を補完するために、特定された不足のプロパティ値102cに対応する補足プロパティ値132aを補完定義データ130に追加し、また、特定された余剰のプロパティ値122cをキャンセルする打ち消しプロパティ値132bを追加する。なお、補足プロパティ値は、基準プロパティ100に入力された不足のプロパティ値そのものとすることができる。打ち消しプロパティ値は、同一プロパティのデフォルト値、または対象要素が継承している値とすることができる。
【0042】
以下、本実施形態のCSSの編集支援機能により提供されるGUIについて説明する。図6は、本実施形態のコンピュータ装置10のディスプレイ画面上に表示される編集支援GUI画面を例示する。図6(A)には、所定の基準プロパティ100が入力されたウィンドウ300が示されている。ウィンドウ300は、基準プロパティ100をコード直接記述方式にて入力するためのテキスト入力ボックスを備え、図6(A)に示すウィンドウ300には、テキスト300aで示される基準プロパティが入力されている。基準プロパティが入力された後、さらに、編集支援を呼び出す操作イベントが発生すると、リスト302がポップアップ表示される。リスト302では、検索された候補クラスが、その名称およびパスとともに、スコア順に選択可能に一覧表示されている。図6(A)に示す例では、「important」クラスの項目302aが選択されている様子が示されている。候補クラスの選択は、例えばマウスのポインタ302bのオーバラップやクリックにより行うことができる。
【0043】
また、図6(A)に示すウィンドウ300では、いずれかの候補クラスが選択されると、該候補クラスの定義内容を表示する表示ボックス304、該候補クラスを仮に適用した場合を示すプレビュー表示306がポップアップ表示されるよう構成されている。選択の候補クラスが変更されると、それに応答して、新たに選択された候補クラスの定義内容に従い表示ボックス304およびプレビュー表示306の表示内容が更新される。リスト302において、選択の確定を指示する操作イベントが発生すると、選択中の候補クラスが確定クラスとしてスタイル編集部50に渡されて適用されることとなる。なお、図6(A)に示すウィンドウ300では、編集対象の要素を含む部分のプレビューが表示されている。
【0044】
図6(B)には、他の基準プロパティ100が入力されたウィンドウ310が示されている。図6(B)に示すウィンドウ310には、図6(A)と同様に、コード直接記述方式にて入力されたテキスト310aで示される基準プロパティが入力され、リスト312、表示ボックス314およびプレビュー表示316がポップアップ表示されている。リスト312では、検索された候補クラスが、その名称およびパスとともに、スコア順に選択可能に一覧表示され、図6(B)に示す例では、「eyecatch」クラスの補完定義を指定する項目312aがポインタ312bのオーバラップにより選択されている様子が示されている。
【0045】
図6(B)では、補完定義の指定が選択されており、さらに、選択中の候補クラスに対する補完定義の内容を表示する表示ボックス318がポップアップ表示されている。リスト312において、補完定義を指定する選択肢の確定を指示する操作イベントが発生すると、確定クラスおよび補完定義データがスタイル編集部50に渡されて、適用されることとなる。図6(B)に示すウィンドウ310にも、編集対象の要素を含む部分のプレビューが表示されている。
【0046】
図7は、コンピュータ装置10のディスプレイ画面上に表示される編集支援GUI画面の他の実施形態を例示する。図7に示すウィンドウ320は、基準プロパティが入力された後、さらに、編集支援を呼び出す操作イベントが発生した場合にポップアップ表示されるよう構成されている。ウィンドウ320は、検索された候補クラスが、その名称およびパスとともに、スコア順に選択可能に一覧表示されるリストボックス322を含み、図7に示す例では、「eyecatch」クラスの項目322aがマウスにより選択されている様子が示されている。ウィンドウ320は、さらに、選択中の候補クラスの定義内容を表示する表示ボックス324、該候補クラスを仮に適用した場合を描画するプレビュー表示328、および確定ボタン330を含んで構成されている。
【0047】
またウィンドウ320は、補完定義の要否を指示するためのチェック・ボックス332と、チェック・ボックス332がチェックされた場合に、作成された補完定義データの定義内容を表示する表示ボックス326とを含んで構成されている。図7に示す例では、チェック・ボックス332がチェックされている。補完定義が要とされる場合、プレビュー表示328は、該候補クラスを補完定義データにて補正した定義内容により適用した場合を描画するプレビューが描画される。選択の候補クラスが変更されると、その変更に応答して表示ボックス324およびプレビュー表示328の表示内容が新たに選択された候補クラスの内容に従って更新される。確定ボタン330がクリックされると、チェック・ボックス332がチェックされていない場合には、リストボックス322中で選択中の候補クラスがスタイル編集部50に渡されて適用されることとなる。一方、チェック・ボックス332がチェックされている場合には、リストボックス322中で選択中の候補クラスおよび補完定義データがスタイル編集部50に渡されて、適用されることとなる。
【0048】
上述したように、本実施形態の編集支援GUI画面では、途中まで入力された基準プロパティ100に類似する候補クラスをユーザに提案して、プロパティ値の入力を簡略化する編集支援機能を実現し、また、所望の基準プロパティに類似する候補クラスをユーザに提案して、所望の基準プロパティと等価な効果を発現する補完定義を提案する編集支援機能を実現する。
【0049】
なお、上記編集支援を呼び出す操作イベント、および選択を確定する操作イベントは、特に限定されるものでなく、マウスによるGUI部品に対するクリック、オーバラップなどの動作、キーボードによるショートカットキー入力などの動作、その他のユーザによる如何なる入力動作に応答する操作イベントとすることができる。また、選択動作についても、特に限定されるものでなく、マウスまたはキーボードなどによる如何なる入力操作と連動して機能するよう構成することができる。
【0050】
以下、本実施形態のCSSの編集支援機能を実現する処理について、より詳細に説明する。図8は、本実施形態のコンピュータ装置10が実行するCSSの編集支援処理を示すフローチャートである。図8に示す処理は、編集支援機能を呼び出す操作イベントに応答して、ステップS100から開始される。ステップS101では、編集支援部60は、図6に示したテキスト入力ボックスを介して入力された基準プロパティSを用いて、類似定義検索部52による検索フローを呼び出す。なお、検索フローの詳細については後述する。ステップS102では、編集支援部60は、類似定義検索部52からの検索結果を取得して、リスト提示部58を呼び出して、スコア付けされた候補クラスの集合Cのリストをポップアップ表示させ、ステップS103で、デフォルトとして、最上位のスコアの候補クラスC1を選択対象に設定する。
【0051】
ステップS104では、編集支援部60は、選択対象の候補クラスCi(デフォルトではi=1)の定義内容を取得し、図6(A)に示すテキスト表示ボックス304のように、選択中の候補クラスの定義内容を表示させる。ステップS105では、編集支援部60は、プロパティ値に過不足が無いか否かを判定する。ステップS105で、過不足が無いと判定された場合(YES)には、ステップS109へ処理を渡す。ステップS109では、編集支援部60は、プレビュー描画部56を呼び出して、選択されている候補クラスの定義内容に従ったプレビューを表示させる。一方、ステップS105で、過不足が有ると判定された場合(NO)には、ステップS106へ処理を渡す。
【0052】
ステップS106では、補完定義が必要であるか否かを判定する。ステップS106の判定では、例えば、図6(B)に示すウィンドウ310で、補完定義が指定されている項目が選択されている場合、または図7に示すウィンドウ320で、補完定義を指定するチェック・ボックス332にチェックが入っている場合に、補完定義が必要であると判定される。ステップS106で、補完定義が不要と判断された場合(NO)には、ステップS109へ処理を渡す。ステップS109では、編集支援部60は、プレビュー描画部56を呼び出して、例えば図6(A)に示したプレビュー表示306のように、選択されている候補クラスの定義内容に従ったプレビューを表示させる。一方、ステップS106で、補完定義が必要であると判定された場合(YES)には、ステップS107へ処理を渡す。
【0053】
ステップS107では、編集支援部60は、補完定義作成部54を呼び出して、基準プロパティSと選択中の候補クラスCiとから、その差異を補完する補完定義データを作成させ、例えば図6(B)に示したテキスト表示ボックス318や図7に示した表示ボックス326に作成された補完定義データの定義内容を表示させる。ステップS108では、作成された補完定義データにて補正して候補クラスの定義内容を更新する。ステップS109では、編集支援部60は、プレビュー描画部56を呼び出して、例えば図6(B)や図7に示したプレビュー表示316,328のように、選択中の候補クラスの補正された定義内容に従ったプレビューを表示させる。
【0054】
編集支援部60は、編集支援機能が提供するGUI画面に対する操作イベントを監視し、ステップS110では、ユーザからの操作イベントが、「選択変更」、「確定」または「キャンセル」の何れを指示しているのかを判定する。ステップS110で、キャンセルに対応する操作イベントが発生したと判定された場合(キャンセル)には、ステップS112へ処理を渡し、ステップS112で編集支援処理を終了させる。
【0055】
一方、ステップS110で、選択の確定に対応する操作イベントが発生したと判定された場合(確定)には、ステップS111へ処理を渡す。ステップS111では、確定された定義内容、つまり補完定義が不要であれば確定クラス、補完定義が指定されている場合には、確定クラスおよび対応する補完定義データを用いて、HTML文書に対し定義内容を適用し、ステップS112で処理を終了させる。一方、ステップS110で、選択変更に対応する操作イベントが発生したと判定された場合(選択変更)には、ステップS113へ処理を分岐させる。ステップS113では、新たに選択された候補クラスを対象に設定して、ステップS104へ処理を分岐させる。
【0056】
以下、図8に示したステップS101の処理ステップで呼び出される検索フローについて説明する。図9は、本実施形態のコンピュータ装置10が実行する類似するクラスの検索フローを示すフローチャートである。図9に示す処理は、図8に示したステップS101の処理ステップで呼び出されて、ステップS200から開始される。ステップS201では、類似定義検索部52は、基準プロパティSを取得し、ステップS202では、検索クエリを展開して、基準プロパティSに類似する候補クラスCiを検索して、その集合Cを取得する。
【0057】
ステップS203〜ステップS205までのループでは、検索された各候補クラスCiにつき、ループ内のステップS204の処理を繰り返す。ステップS204では、候補クラスCiに対し評価関数を用いてスコアを算出する。すべての候補クラスCiに対するスコアが算出されると、処理は、ステップS203〜ステップS205までのループから抜けだし、ステップS206へ進められる。ステップS206では、類似定義検索部52は、集合Cの候補クラスをスコアに従って降順にソーティングして検索結果を作成し、ステップS207で処理を終了させる。
【0058】
図8および図9に示した処理フローにより、入力された所望のプロパティ値を含むデータ・セットに似たクラスが、定義済みのクラスの中から検索されて提示される。そして、ウェブ・コンテンツを製作するユーザは、既定義のクラスの中から所望の修飾を指定するスタイルが定義されたクラスを容易に探し出すことが可能となる。また既に定義済みのクラスを効率的に再利用できるようになり、もって、ユーザ利便性に優れ、効率的かつ効果的なHTML文書のCSSの編集支援機能が実現される。さらに、類似のクラスが既に定義済みであれば、そのクラスが提示されるため、同一、等価または許容範囲内の差異を有する修飾を指定するクラスを重複定義してしまう蓋然性が好適に低減され、CSSのデータ・サイズの増大、および複雑化が防止される。
【0059】
また、補完定義作成部54の処理により、たとえ候補クラスにユーザの許容限度を超える過不足のプロパティ値が存在したとしても、データ・セットと候補クラスとの差異に対応する最小限の定義データによりユーザが望むスタイルが実現されるため、より効率的に既定義のクラスを活用することが可能となる。また、プレビュー描画部56により、ユーザは、HTML文書に対してCSS定義を実際に適用する前に、CSS定義が適用された場合に発現するスタイルの効果を確認することができ、ウェブ・コンテンツの製作作業の効率性を向上させることが可能となる。
【0060】
なお、上述までの実施形態では、補完定義が指定される場合、補完定義データの適用は、例えば、インラインでスタイル属性を定義したり、対象要素のIDをセレクタとして規則集合を定義したり、補完定義データを新たなクラスとして定義し、複数のクラスを指定するクラス属性を対象要素に追加したりすることによって実施されるものとして説明してきた。以下に説明する他の実施形態は、作成された補完定義データをさらに類似定義検索部52に与えて、補完定義データに類似するクラスを検索し、クラスの再利用により初期の基準プロパティと候補クラスとの差異の解消を試みることによって、より効果的に定義済みのクラスを再利用しようとするものである。なお、以下に示す他の実施形態は、編集支援機能が提供するGUIおよび編集支援処理のフロー以外の構成については、図1〜図9を参照して説明した実施形態と同様であるため、以下の他の実施形態の説明では、相違する部分を中心に説明する。
【0061】
以下、他の実施形態のCSSの編集支援機能を実現する処理について説明する。図10は、他の実施形態のCSSの編集支援処理を示すフローチャートである。図11は、他の実施形態においてディスプレイ画面上に表示される編集支援GUI画面を例示する。図11には、所定の基準プロパティ100が入力されたウィンドウ340が示され、ウィンドウ340には、テキスト340aで示されるユーザから入力された基準プロパティが入力されている。
【0062】
再び図10を参照すると、図10に示す処理は、編集支援機能を呼び出す操作イベントに応答して、ステップS300から開始される。ステップS301では、編集支援部60は、入力された基準プロパティSを用いて、類似定義検索部52による検索フローを呼び出す。なお、検索フローは、図9に示した処理フローと同一である。ステップS302では、編集支援部60は、類似定義検索部52からの検索結果を取得して、リスト提示部58を呼び出して、図11に示すリスト342のように、スコア付けされた候補クラスの集合Cのリストをポップアップ表示させ、ステップS303で、デフォルトとして、最上位のスコアの候補クラスC1を選択対象に設定する。
【0063】
ステップS304では、編集支援部60は、選択対象の候補クラスCi(デフォルトではi=1)の定義内容を取得し、図11に示すテキスト表示ボックス344のように、選択中の候補クラスの定義内容を表示させる。ステップS305では、編集支援部60は、プロパティ値に過不足が無いか否かを判定する。ステップS305で、過不足が無いと判定された場合(YES)には、ステップS311へ処理を渡す。ステップS311では、編集支援部60は、プレビュー描画部56を呼び出して、図11に示すプレビュー表示348のように、選択の候補クラスの定義内容に従ったプレビューを表示させる。一方、ステップS305で、過不足が有ると判定された場合(NO)には、ステップS306へ処理を渡す。
【0064】
ステップS306では、補完定義が必要であるか否かを判定する。ステップS306で、補完定義が不要であると判断された場合(NO)には、ステップS311へ処理を渡す。ステップS311では、編集支援部60は、プレビュー描画部56を呼び出して、選択の候補クラスの定義内容に従ったプレビューを表示させる。一方、ステップS306で、補完定義が必要であると判定された場合(YES)には、ステップS307へ処理を渡す。
【0065】
ステップS307では、編集支援部60は、補完定義作成部54を呼び出して、基準プロパティSと選択中の候補クラスCiとから、その差異を補完する補完定義データを作成させ、例えば図11に示したテキスト表示ボックス346に作成された補完定義データの定義内容を表示させる。図11に示す例では、テキスト346aで示す補完定義データが表示されている。ステップS308では、編集支援部60は、再利用による差異の解消が選択されているか否かを判定する。この再利用による差異の解消は、再利用フローの初回では選択されておらず、後述するステップS312において、再利用による解消を指示する操作イベントが発生した段階で、選択されることとなる。
【0066】
ステップS308で、再利用による解消が選択されていない場合(NO)には、ステップS310へ処理が直接進められる。ステップS310では、ステップS307で作成された補完定義データを用いて候補クラスCiの定義内容を更新し、ステップS311では、編集支援部60は、プレビュー描画部56を呼び出して、選択中の候補クラスの補正された定義内容に従ったプレビューを表示させる。
【0067】
編集支援部60は、編集支援機能が提供するGUI画面に対する操作イベントを監視し、ステップS312では、ユーザからの操作イベントが、「選択変更」、「確定」、「再利用による解消」または「キャンセル」の何れを指示しているのかを判定する。ステップS312で、キャンセルに対応する操作イベントが発生したと判定された場合(キャンセル)には、ステップS314へ処理を渡し、ステップS314で本再利用フローを終了させ、呼び出し元に処理を戻す。
【0068】
一方、ステップS312で、選択の確定に対応する操作イベントが発生したと判定された場合(確定)には、ステップS313へ処理を渡す。ステップS313では、確定された定義内容を呼び出し元に戻し、ステップS314で本再利用フローを終了させ、呼び出し元に処理を戻す。なお、ステップS313で戻される定義内容は、再利用による解消が確定されていない場合には、本フローでの確定クラスおよび対応する補完定義データが戻されることとなる。
【0069】
一方、ステップS312で、選択変更に対応する操作イベントが発生したと判定された場合(選択変更)には、ステップS315へ処理を分岐させる。ステップS315では、新たに選択された候補クラスを対象に設定して、ステップS304へ処理を分岐させる。
【0070】
一方、ステップS312で、再利用による解消の選択に対応する操作イベントが発生したと判定された場合(再利用による解消)には、ステップS304へ処理を分岐させる。なお、この再利用による解消の選択に対応する操作イベントについても、他の指示と識別できる限り、特に限定されるものではなく、マウスによるGUI部品に対するクリック、オーバラップなどの動作、キーボードによるショートカットキー入力などの動作、その他のユーザによる如何なる入力動作に応答する操作イベントとすることができる。
【0071】
ステップS312で、再利用による解消の選択に対応する操作イベントが発生したと判定された場合、次のループにおいてステップS308へ到達した際には、ステップS309へ処理が渡される。ステップS309では、編集支援部60は、本フローのステップS307で作成された選択中の候補クラスに対応する補完定義データを基準プロパティSとして、図10に示す本再利用フローを再帰的に呼び出す。図11に示す例では、「eyecatch」クラスの補完定義を指定する項目342aが選択され、テキスト346aで示す対応する補完定義データが、基準プロパティSとして与えられることとなる。
【0072】
再び図10を参照すると、再呼び出し先の再利用フローのステップS301では、編集支援部60は、再呼び出し元で作成された補完定義データを基準プロパティSとして与えて、該補完定義データに類似するクラスが検索されることとなる。その際には、CSS2では、後方定義のクラスが優先されるため、その検索範囲は、呼び出し元で選択された候補クラス以降の読み出し位置のものに限定することが好ましい。
【0073】
再呼び出し先の再利用フローのステップS302では、編集支援部60は、再呼び出し元での補完定義データを用いて検索された検索結果を取得して、リスト提示部58を呼び出して、図11に示すリスト352のように、スコア付けされた候補クラスの集合Cのリストをポップアップ表示させる。再呼び出し先の再利用フローのステップS304では、編集支援部60は、選択対象の候補クラスCiの定義内容を取得し、図11に示すテキスト表示ボックス354のように、選択中の候補クラスの定義内容を表示させる。再呼び出し先の再利用フローのステップS307では、編集支援部60は、補完定義作成部54を呼び出して、再呼び出し元の補完定義データと本フロー中で選択されている候補クラスCiとから、その差異を補完する補完定義データを作成させ、例えば図11に示したテキスト表示ボックス356に補完定義データの定義内容を表示させる。
【0074】
再呼び出し先の再利用フローのステップS312において、選択の確定に対応する操作イベントが発生したと判定された場合(確定)には、ステップS313では、本フローでの確定クラスおよび対応する補完定義データを呼び出し元に戻し、ステップS314で本フローを終了させ、再呼び出し元に処理を戻す。
【0075】
再呼び出し元に処理が戻されると、そのステップS310において、戻されたクラスおよび対応する補完定義データを適宜用いて、候補クラスCiの定義内容を更新し、ステップS311では、編集支援部60は、プレビュー描画部56を呼び出して、選択中の候補クラスの補正された定義内容に従ったプレビューを表示させる。
【0076】
再呼び出し元のステップS312で、選択の確定に対応する操作イベントが発生したと判定された場合(確定)には、ステップS313では、当該フローの呼び出し元(例えば、スタイル編集部50)に確定された定義内容を戻し、ステップS314で本フローを終了させ、本フローの呼び出し元(この場合スタイル編集部50)に処理を戻す。この場合、ステップS313で戻される定義内容は、再呼び出し先のフローで再利用による解消が確定されているので、再呼び出し先から戻された確定クラスと、該クラスに対応する補完定義データと、本フローで選択中の候補クラスとが適宜戻されることとなる。スタイル編集部50は、複数のクラスが戻された場合には、複数のクラス名を連ねてクラス属性を加えて、クラスを同時指定することによりHTML文書に対しスタイル定義の適用を実施する。また、再帰呼び出し回数の限度は、特に限定されるものでないが、所与の限度を定めてもよい。
【0077】
図10および図11を参照して説明した処理フローにより、データ・セットと確定クラスとの差異に対応する補完定義データに類似するクラスがさらに検索されるため、より効率的に既定義のクラスを再利用することが可能となる。
【0078】
以下、ウェブ・オーサリング・ツールを実現するコンピュータ装置10のハードウェア構成について説明する。図12は、コンピュータ装置10の概略的なハードウェア構成を示す。図12に示すコンピュータ装置10は、中央処理装置(CPU)12と、CPU12が使用するデータの高速アクセスを可能とするL1およびL2などのレベルを有するキャッシュ・メモリ14と、CPU12の処理を可能とするRAM、DRAMなどの固体メモリ素子から形成されるシステム・メモリ16とを備えている。
【0079】
CPU12、キャッシュ・メモリ14、およびシステム・メモリ16は、システム・バス18を介して、他のデバイスまたはドライバ、例えば、グラフィックス・ドライバ20およびネットワーク・インタフェース・カード(NIC)22へと接続されている。グラフィックス・ドライバ20は、バスを介して外部のディスプレイ24などの出力装置に接続されて、CPU12による処理結果をディスプレイ画面上に表示させることができる。また、NIC22は、物理層レベルおよびデータリンク層レベルでコンピュータ装置10を、TCP/IPなどの適切な通信プロトコルを使用するネットワークへと接続している。
【0080】
システム・バス18には、さらにI/Oバス・ブリッジ26が接続されている。I/Oバス・ブリッジ26の下流側には、PCIなどのI/Oバス28を介して、IDE、ATA、ATAPI、シリアルATA、SCSI、USBなどにより、ハードディスク30が接続されている。また、I/Oバス28には、USBなどのバスを介して、キーボードおよびマウスなどのポインティング・デバイスなどの入力装置32が接続されていて、この入力装置32によりユーザ・インタフェースが提供される。
【0081】
コンピュータ装置10のCPU12としては、いかなるシングルコア・プロセッサまたはマルチコア・プロセッサを用いることができ、より具体的には、例えば、Xeon(登録商標)、Itanium(登録商標)、POWER PC(登録商標)などCISCまたはRISCチップなどを挙げることができる。コンピュータ装置10は、WINDOWS(登録商標)200X、UNIX(登録商標)、LINUX(登録商標)などのOSにより制御され、OSの管理の下、システム・メモリ16上などにプログラムを展開し、プログラムを実行することにより、各ハードウェア資源を動作制御することによって、上述した機能部の構成および処理をコンピュータ上に実現することができる。
【0082】
以上説明したように、本実施形態によれば、HTMLなどのマークアップ言語で記述された構造化文書の体裁を定義するスタイルシートの編集において、既定義のクラスを容易に再利用可能とし、重複定義の蓋然性を低減し、もって、効率的にポータルサイト、ウェブアプリケーション、ホームページなどのウェブ・コンテンツを構築することを可能とする、情報処理装置、情報処理方法およびプログラムを提供することが可能となる。
【0083】
なお、上述までは、HTML文書中のある特定の要素に対してプロパティ値を指定しようとする際に、所望の基準プロパティに類似する既定義のクラスを選択可能に提示する構成について説明した。しかしながら、他の実施形態では、JSPなどのサーバ・サイドアプリケーションにて動的にHTML文書を生成する場合に、生成するHTML文書中の要素に対して適用されるスタイルシートの定義のために用いることもできる。さらに他の実施形態では、新たなクラスを定義する際に、これから定義しようと考えているクラスに類似したクラスが定義されているかを確認するために用いることもできる。
【0084】
また、上述までの実施形態の説明では、構造化文書としてHTML文書、スタイル定義としてカスケード・スタイルシート(CSS)を編集対象とした場合を例に説明してきた。しかしながら、本発明の実施形態で利用することができる構造化文書は、上述したHTML文書に限られるものではなく、XML、XHTML、SVG、その他のマークアップ言語で書かれた文書とすることができる。また本発明の実施形態で利用することができるスタイルシートは、カスケード・スタイルシートに限られるものではなく、XSL(eXtensible Style Sheet)、DSSSL(Document Style Semantics and Specification Language)など、他のスタイルシート言語により作成されたものを採用することもできる。
【0085】
また、コンピュータ装置としては、上述までのパーソナル・コンピュータの他、ラップトップ・コンピュータ、マルチプロセッサ・システムなどを含む種々のコンピュータ・システム構成と共に実施することができる。
【0086】
本発明の上記機能は、C++、Java(登録商標)、Java(登録商標)Beans、Java(登録商標)Applet、Java(登録商標)Script、Perl、Rubyなどのオブジェクト指向プログラミング言語などで記述された装置実行可能なプログラムにより実現でき、装置可読な記録媒体に格納して頒布または伝送して頒布することができる。
【0087】
これまで本発明を、特定の実施形態をもって説明してきたが、本発明は、実施形態に限定されるものではなく、他の実施形態、追加、変更、削除など、当業者が想到することができる範囲内で変更することができ、いずれの態様においても本発明の作用・効果を奏する限り、本発明の範囲に含まれるものである。
【図面の簡単な説明】
【0088】
【図1】本実施形態のコンピュータ装置の機能ブロックを示す図。
【図2】本実施形態のコンピュータ装置のディスプレイ画面上に表示されるページ編集GUI画面を例示する図。
【図3】本実施形態の編集支援機能を、各処理段階で用いるデータ構造とともに模式的に示す図。
【図4】本実施形態のクラス登録部が保持するクラス登録テーブルのデータ構造を示す図。
【図5】本実施形態の補完定義作成部による処理を、用いるデータ構造とともに模式的に示す図。
【図6】本実施形態のコンピュータ装置のディスプレイ画面上に表示される編集支援GUI画面を例示する図。
【図7】コンピュータ装置のディスプレイ画面上に表示される編集支援GUI画面の他の実施形態を例示する図。
【図8】本実施形態のコンピュータ装置が実行するCSSの編集支援処理を示すフローチャート。
【図9】本実施形態のコンピュータ装置が実行する類似するクラスの検索フローを示すフローチャート。
【図10】他の実施形態のCSSの編集支援処理を示すフローチャート。
【図11】他の実施形態においてディスプレイ画面上に表示される編集支援GUI画面を例示する図。
【図12】コンピュータ装置の概略的なハードウェア構成を示す図。
【図13】従来のウェブ・オーサリング・ツールにおけるCSSの編集機能を示す図。
【符号の説明】
【0089】
10…コンピュータ装置、12…CPU、14…キャッシュ・メモリ、16…システム・メモリ、18…システム・バス、20…グラフィックス・ドライバ、22…NIC、24…ディスプレイ、26…I/Oバス・ブリッジ、28…I/Oバス、30…ハードディスク、32…入力装置、50…スタイル編集部、52…類似定義検索部、54…補完定義作成部、56…プレビュー描画部、58…リスト提示部、60…編集支援部、62…クラス入出力部、64…クラス登録部、66…格納部、68…ページ・ファイル、70…スタイルシート・ファイル、100…基準プロパティ、102…プロパティ値、110…検索結果、120…クラス、122…プロパティ値、130…補完定義データ、132…プロパティ値、140…クラス登録テーブル、200…ログインパネル、202…テキスト、300…ウィンドウ、300a…テキスト、302…リスト、302a…項目、302b…ポインタ、304…表示ボックス、306…プレビュー表示、310…ウィンドウ、310a…テキスト、312…リスト、312a…項目、312b…ポインタ、314…表示ボックス、316…プレビュー表示、318…表示ボックス、320…ウィンドウ、322…リストボックス、322a…項目、324…表示ボックス、326…表示ボックス、328…プレビュー表示、330…確定ボタン、332…チェック・ボックス、340…ウィンドウ、340a…テキスト、342…リスト、342a…項目、344…表示ボックス、346…表示ボックス、346a…テキスト、348…プレビュー表示、352…リスト、354…表示ボックス、356…表示ボックス
【技術分野】
【0001】
本発明は、構造化文書の作成アプリケーションに関し、より詳細には、HTMLなどの構造化文書の体裁を定義するCSSなどのスタイルシートを効率的に編集可能とする情報処理装置、情報処理方法およびプログラムに関する。
【背景技術】
【0002】
ポータルサイト、ウェブアプリケーション、ホームページのデザインにおいて、ページの詳細なレイアウトを定義付けるカスケード・スタイルシート(Cascading Style Sheet;以下、CSSとして参照する。)は、重要な役割を果たしている。CSSは、W3C(World Wide Web Consortium)の勧告により仕様が定められ、1998年にLevel 2(CSS2)が勧告されている。さらに現在では、Level 2 revision 1(CSS2.1)の勧告候補、Level 3(CSS3)のドラフトが公開されており、さらなる拡張が続いている。
【0003】
CSSは、HTML、XML、XHTML、その他のマークアップ言語で記述された構造化文書において、文書中の要素に対する修飾を指定するスタイルの定義を含んで構成され、文字のフォントや大きさ、文字飾り、行間などのレイアウトに関する情報を文書本体から切り離して定義付けることを可能としている。CSSにより、パーソナル・コンピュータか携帯端末かといったページを表示する媒体の別に適合させたスタイルシートの切り替えや、ユーザ・エージェント、サイト制作者、閲覧ユーザそれぞれが定義したスタイル定義の効果を重ね合わせが可能とされる。
【0004】
一方、近年、ホームページ・ビルダー(登録商標)、WebSphere(登録商標)Studio Application Developer、Rational(登録商標) Application Developer for WebSphere(登録商標) Software、Microsoft(登録商標)FrontPage(登録商標)、Adobe(登録商標)Dreamweaver(登録商標)など、種々の洗練されたウェブ・オーサリング・ツールが提供されている。上述のようなウェブ・オーサリング・ツールには、メニュー選択方式またはコード直接記述方式にて上記CSSを編集する機能が備えられており、ポータルサイト、ウェブアプリケーション、ホームページに対して統一的なスタイルの定義を実施できるよう構成されている(非特許文献1,非特許文献2)。
【0005】
図13は、従来のウェブ・オーサリング・ツールにおけるCSSの編集機能を示す図である。従来のウェブ・オーサリング・ツールでは、非特許文献2にも示されているように、図13(A)に示す新規にCSSのクラスを追加するためのグラフィカル・ユーザ・インタフェース(以下、GUIとして参照する。)、図13(B)に示すCSSのクラスのプロパティを編集するGUI、図13(C)に示すCSSのクラスを一覧表示するGUIなどが提供されている。その他、各CSSプロパティの値を入力する際に、値の候補を提示する補完機能を備え、CSSのコーディングを簡略化するためのGUIも提供されている。
【非特許文献1】”Webパースペクティブ−後編−”、[online]、2003年1月10日、IBM、製品、ソフトウェア、WebSphere、WebSphere DeveloperDomain、テクニカル情報、WSADによるアプリケーション開発ワークショップ資料[2008年7月30日検索]、インターネット<URL;http://www-06.ibm.com/jp/software/websphere/developer/wsad/workshop/pdf/8.pdf>
【非特許文献2】”プレビュー機能付きCSSエディタ”、[online]、IBM、製品、ソフトウェア、ホーム・ソフトウェア、ホームページ・ビルダー、製品、3つの進化、進化2[2008年7月30日検索]、インターネット<URL;http://www-06.ibm.com/jp/software/internet/hpb/products/contents.html>
【発明の開示】
【発明が解決しようとする課題】
【0006】
しかしながら、従来のCSS編集機能では、制作者は、ページをデザインする際に、どのようなCSSのクラスが既に定義されているかを充分に把握していなければ、同等の修飾を指定するCSSのクラスの重複定義が頻発してしまい、不用意に定義を追加することでクラスの定義数が増大してしまう可能性があった。
【0007】
また、既定義のクラスの中から所望の修飾を指定するスタイルが定義されたクラスを探し出そうとしても、従来では、全体または所定のタグに関連するクラスの一覧といったGUIしか提供されていなかったため、制作者は、一覧表示の中から所望のクラスを逐一確認しつつ探し出さなければならず、ユーザ利便性の観点から充分なものではなかった。つまり、従来のウェブ・オーサリング・ツールでは、CSSのクラス指定の優れた特徴である再利用性を充分に活用することができなかった。
【0008】
本発明は、上記問題点に鑑みてなされたものであり、HTML、XML、XHTML、その他のマークアップ言語で記述された構造化文書の体裁を定義するスタイルシートの編集において、既定義の設定を容易に再利用可能とし、重複定義の蓋然性を低減し、もって、効率的にポータルサイト、ウェブアプリケーション、ホームページなどのウェブ・コンテンツを構築することを可能とする、情報処理装置、情報処理方法およびプログラムを提供することを目的とする。
【課題を解決するための手段】
【0009】
本発明では、上記課題を解決するために、情報処理装置は、それぞれスタイルを定義付ける複数の既定義のクラスを登録しておき、入力された1以上のスタイル特性を指定するプロパティ値を含む所望のデータ・セットを基準として、それに類似する候補クラスを登録済みのクラスの中から検索して選択可能に提示する。そして、例えば、提示されたいずれかの候補クラスが選択され、適用の確定の指示を受けると、情報処理装置は、選択可能な候補クラスの中から確定されたクラスを用いて構造化文書に対しスタイル定義を適用する。
【0010】
上記構成により、入力された所望のプロパティ値を含むデータ・セットに似たスタイルを定義付けるクラスが、登録済みのクラスの中から検索されて提示されるため、情報処理装置を用いてウェブ・コンテンツを製作しているユーザは、既定義のクラスの中から所望の修飾を指定するスタイルが定義されたクラスを容易に探し出すことができるようになり、また既に定義済みのクラスを効率的に再利用できるようになり、もって、ユーザ利便性に優れ、効率的かつ効果的な構造化文書のスタイル定義の編集支援が実現される。類似のクラスが既に定義済みであれば、そのクラスが提示されるため、ユーザが同等の修飾を指定するクラスを重複定義してしまう蓋然性も低減され、スタイル定義のデータ・サイズの増大、およびコードの複雑化が防止される。
【0011】
本発明では、さらに、与えられたデータ・セットと候補クラスとにそれぞれ含まれるプロパティ値(プロパティおよび値のセット)を比較し、その差分から候補クラスに対する補完定義データを作成することができる。上記構成により、たとえ候補クラスにユーザの許容限度を超える過不足のプロパティ値が存在したとしても、データ・セットと候補クラスとの相違点に対応する最小限のスタイル定義によってユーザが望むスタイルが実現されるため、より効率的に既定義のクラスを活用することが可能となる。
【0012】
本発明では、さらに、選択された候補クラスおよび対応する補完定義データを適用した場合のプレビューを描画することができる。上記構成により、ユーザは、構造化文書に対してスタイル定義を実際に適用する前に、スタイル定義が適用された場合に発現するスタイルの効果を確認することができ、ウェブ・コンテンツの製作作業の効率性を向上させることが可能となる。
【0013】
さらに、本発明では、上記補完定義データは、上記データ・セットとして再帰的に与えられ、該補完定義データと再帰的に検索された候補クラスとの差分から、次の補完定義データを作成することができる。上記構成により、作成された補完定義データに類似するクラスが登録済みのクラスの中からさらに検索されるため、補完のための新たなスタイル定義をよりコンパクトにすることができる。また、この場合には、構造化文書に対しスタイル定義を適用する際に、再帰的に検索された候補クラスを用いることができる。
【0014】
本発明では、さらに、検索された上記候補クラスとともに、該候補クラスの定義内容、および該候補クラスが定義されているファイルのパスの少なくとも一方を提示することができる。また本発明では、類似する候補クラスは、例えば、それぞれが包含するプロパティ値の一致度を評価する評価関数の値が、所定の閾値以上であることをもって判定することができる。
【0015】
さらに本発明では、例えば、情報処理装置の出力装置を介してユーザが認識可能なように候補クラスの項目を出力し、入力装置を介したユーザからの項目の選択指示を待ち受けることで、上記選択的な提示を実施することができる。また、本発明では、確定されたクラスの指定を上記構造化文書中の対象要素の属性に加え、かつ上記補完定義データの各プロパティ値を対象要素に対しインラインで定義するか、または、確定されたクラスの指定および補完定義データに対応する新たに定義されるクラスの指定を、上記構造化文書の対象要素の属性に加えることで上記スタイル定義の適用を実施することができる。
【発明を実施するための最良の形態】
【0016】
以下、本発明について実施形態をもって説明するが、本発明は、後述する実施形態に限定されるものではない。なお、以下の本発明の実施形態では、構造化文書としてHTML文書、スタイル定義としてカスケード・スタイルシート(CSS)を編集対象としたウェブ・オーサリング・ツールを実現するコンピュータ装置を例として説明する。
【0017】
図1は、本実施形態のコンピュータ装置10の機能ブロックを示す。コンピュータ装置10は、概ねパーソナル・コンピュータとして構成されている。図1に示すコンピュータ装置10に含まれる各機能部(詳細は後述する。)およびウェブ・コンテンツを編集するためのウェブ・オーサリング・ツールとしての機能は、メモリ上にプログラムを展開し、プログラムの実行により各ハードウェア資源を動作制御することによって、コンピュータ装置10上に実現される。コンピュータ装置10は、ディスプレイ、マウスやキーボードなどの入力装置を含むユーザ・インタフェース部を備え、入力装置への入力に対応する操作イベントが、適切なオペレーティング・システム(OS)の制御の下、各機能部へと渡されて、操作イベントに応答した処理結果がディスプレイなどの出力装置に出力される。入力装置およびディスプレイによりグラフィカル・ユーザ・インタフェース(GUI)が提供される。
【0018】
本実施形態のコンピュータ装置10は、HTML文書のスタイルを編集する機能を提供するスタイル編集部50を含んで構成される。本実施形態のスタイル編集部50は、適用部として機能する。スタイル編集部50は、HTML文書中の所定の要素に対するスタイルを定義するためのGUIを提供する。上記スタイルの適用対象となる要素は、特に限定されるものではないが、例えば、P要素、H1要素、H2要素、H3要素、DIV要素およびTABLE要素などを含むブロック要素、SPAN要素、IMG要素、EM要素およびSTRONG要素などを含むインライン要素、およびインラインまたはブロック要素として働くINS要素およびDEL要素などを挙げることができる。
【0019】
上記要素に対して指定されるスタイルとしては、対象要素のタイプにも依るが、例えば、前景および背景に関する指定(color,background-attachment,background-color,background-image,background-positionなど)、フォントに関する指定(font,font-style,font-variant,font-weight,font-size,font-familyなど)、テキストの体裁に関する指定(line-height,text-align,vertical-align,text-decoration,text-indent,text-transform,white-space,letter-spacing,word-spacingなど)、サイズに関する指定(width,max-width,min-width,height,max-height,min-heightなど)、領域に関する指定(margin-top,margin-bottom,margin-left,margin-right,padding-topなど)、ボーダに関する指定(border-color,border-style,border-width,border-top,border-top-color,border-top-style,border-top-widthなど)、その他、テーブル(table-layout,caption-side,border-collapseなど)、リスト(list-style,list-style-image,list-style-type,list-style-position)、アウトライン(outline,outline-color,outline-style,outline-widthなど)に関する指定など、種々の修飾を指定するスタイルを挙げることができる。
【0020】
本実施形態のコンピュータ装置10は、さらに、CSS編集操作を支援する機能を提供する編集支援部60と、HTML文書のページ・ファイル68やスタイルシート・ファイル70を格納する格納部66と、ページ・ファイルおよびスタイルシート・ファイルから定義済みのCSSのクラス(以下、用語「クラス」は、特に断らない限り、CSSのクラスを参照する。)を読み出して、クラス登録部64に登録するクラス入出力部62とを含んで構成される。クラス登録部64は、コンピュータ装置10のメモリ、ハードディスクなどにより提供され、編集を支援するために、検索可能なデータ構造にて定義済みのクラスを登録している。
【0021】
なお、検索可能に登録されるクラスは、例えば、ウェブ・オーサリング・ツールが管理する編集対象のプロジェクト内のページ・ファイルおよびスタイルシート・ファイルに記述されたものとすることができるが、特に限定されるものではない。他の実施形態では、現在の編集対象のページ・ファイル68および該ページ内で読み込むよう宣言された他の外部ファイルに記述されたクラスのみを登録することもできる。さらに他の実施形態では、ウェブ・オーサリング・ツールが管理する複数のプロジェクトに渡って、検索の範囲に取り込むこともできる。
【0022】
上記編集支援部60についてより具体的に説明すると、編集支援部60は、類似定義検索部52と、リスト提示部58とを含んで構成される。ユーザにより、所定の要素に対する所望のCSSプロパティ値(以下、用語「プロパティ値」は、特に断らない限り、CSSのプロパティ値を参照する。)のセット(以下、基準プロパティとして参照する。)100が入力されると、上記スタイル編集部50は、編集支援部60に該基準プロパティ100を渡し、編集支援処理の実行を依頼する。渡された基準プロパティ100は、類似定義検索部52に与えられ、類似定義検索部52は、クラス登録部64に登録された定義済みのクラスの中から、対象要素のタイプに適合しかつ基準プロパティ100に類似するクラスを検索する。
【0023】
なお、要素のタイプに適合するクラスは、対象要素のタイプに一致するタイプのクラス、および要素のタイプが指定されていないクラスを含むことができる。また、類似定義検索部52は、基準プロパティ100と既定義のクラスとの間の類似性を反映するスコアを、基準プロパティ100および既定義のクラスそれぞれに含まれるプロパティ値の一致度を評価する所与の評価関数を用いて算出することができる。
【0024】
類似のクラスが見つかると、リスト提示部58は、類似のクラスを選択候補のクラスとして、それらの名称を、スコア順、アルファベット順などでソートして選択可能に一覧表示して、ユーザからの選択入力を待ち受ける。この際には、リスト提示部58は、検索された候補のクラスを、例えば、所定の順位またはスコアまでで打ち切って提示することができる。また、リスト提示部58は、クラスの名称に加え、該クラスの定義内容、該クラスに与えられた説明内容などを、例えばポップアップGUI上に提示することができる。
【0025】
さらに、本実施形態の編集支援部60は、補完定義作成部54と、プレビュー描画部56とを含むことができる。補完定義作成部54は、基準プロパティ100と候補クラスとの間で各プロパティ値を比較し、これらの差異を補完する補完定義データを適宜作成する。補完定義データが作成された場合、上記リスト提示部58は、補完定義データの定義内容などをさらにポップアップGUI上に表示させることができる。
【0026】
プレビュー描画部56は、リスト提示部58で選択された候補クラスを仮に適用した場合のプレビューを、例えばポップアップGUI上に描画する。また、補完定義が指定される場合には、選択された候補クラスを補完定義データにて補正して仮に適用した場合のプレビューを描画する。なお、プレビューの描画範囲は、特に限定されるものではないが、編集中のページ全体や、例えば編集対象要素の親要素、該対象要素、および該対象要素の下位の要素からなるページの一部、編集対象要素および該対象要素の下位の要素からなるページの一部といった、編集対象の要素を内包する特定の要素下位の要素からなるページの一部分を描画範囲とすることができる。
【0027】
ユーザの操作により候補クラスの中から適用するクラスが確定された場合には、編集支援部60は、確定されたクラス(以下確定クラスとして参照する。)を識別するクラス名、該クラスが定義されているファイルのパス、および適宜補完定義データをスタイル編集部50へ通知する。スタイル編集部50は、ページ・ファイル中の対象要素に対し、通知されたクラスを指定するクラス属性を加えて、確定クラスを用いたスタイル定義の適用を実施する。スタイル編集部50は、補完定義が指定される場合には、ページ・ファイル中の対象要素に対し、通知された補完定義データに含まれる各プロパティ値を、クラス指定に優先する様式にて追加的に定義付ける。
【0028】
なお、定義の具体的な追加方法は、勧告されたカスケーディングの優先順位に従う限り、特に限定されるものではないが、例えば、対象要素に対しインラインでスタイル属性を定義したり、対象要素のIDをセレクタとして規則集合を定義したりすることによって実施することができる。この際、確定クラスが編集中のページに関連付けられていなかった場合には、該クラスを定義するファイルを外部読み込みする宣言をHTML文書中に書き込む。また、上記追加的な定義方法としては、その他、補完定義データを新たなクラスとして定義し、複数のクラスを指定するクラス属性を対象要素に追加するなどにより実施することもできる。クラスの同時指定による場合には、補完定義データがクラス入出力部62に与えられて、クラス入出力部62は、例えばページ・ファイルのスタイル定義部分中にクラスとして定義することができる。クラス入出力部62は、好適には、確定クラスの読み込み位置よりも後方に、補完定義データに対応するクラスを定義することができる。
【0029】
なお、図1は、CSS編集機能に関連した機能ブロックを説明のために示したものであり、本実施形態のコンピュータ装置10が、HTML文書自体の編集機能、JSP(Java(登録商標) Server Pages)ファイルの編集機能などウェブ・オーサリング・ツールとして利用可能な種々の機能部を備えることができることは言うまでもない。
【0030】
以下、本実施形態のCSSの編集支援機能について、より具体的な例を参照して説明する。図2は、本実施形態のコンピュータ装置10のディスプレイ画面上に表示されるページ編集GUI画面を例示する。図2には、現在編集対象であるログインパネル200が示されている。ユーザ操作により、例えば、テキスト202の要素を対象として選択されて、CSSのプロパティの編集機能が呼び出されると、該要素に対する所望のプロパティ値を入力するためのGUIが表示される。このGUI上において1以上のプロパティ値が入力され、編集支援を呼び出す操作イベントが発生すると、入力されたプロパティ値のデータ・セットが基準プロパティ100として編集支援部60に渡され、本実施形態の編集支援機能が呼び出される。
【0031】
図3は、本実施形態の編集支援機能を、各処理段階で用いるデータ構造とともに模式的に示す図である。図3には、与えられた基準プロパティ100と、ページ・ファイル68と、スタイルシート・ファイル70a,bとが示されている。スタイルシート・ファイル70a,bは、それぞれ、クラス120a,bの定義を含んで構成され、ページ・ファイル68も同様に、クラス120cの定義を含んで構成されている。
【0032】
図4は、本実施形態のクラス登録部64が保持するクラス登録テーブルのデータ構造を示す図である。クラス入出力部62は、上記スタイルシート・ファイル70a,bおよびページ・ファイル68を読み込んで、図4に示すようなクラス登録テーブル140を作成し、既に定義済みのクラスを登録する。図4に示すクラス登録テーブル140は、クラス名が入力されるフィールド140aと、該クラス名に対応する定義内容が入力されるフィールド140bと、該クラスが定義されているファイルのパスが入力されるフィールド140cとを含んで構成される。
【0033】
図1に示したクラス入出力部62は、CSSの慣例に従って、スタイル定義情報の読み込み順にクラスのエントリを追加してゆき、重複があった場合には、優先度の低い方のエントリ、つまりCSS2では前方で定義されたクラスに対応するエントリを削除して、後方定義されたクラス定義を優先させる。なお、クラス登録テーブル140の具体的な実装については、検索可能に構成される限り特に限定されるものではないが、例えば、フィールド140bを、その内容中に記述される各プロパティ値でさらに細分化して管理し、リレーショナル・データベース、オブジェクト・データベース、オブジェクト・リレーショナル・データベース、XMLデータベース上に格納する実装とすることができる。その際には、類似定義検索部52は、与えられた基準プロパティ100を、対応する問い合わせ言語にて検索クエリを展開して、データベースに対し、基準プロパティ100に類似するクラスの照会を実施する。
【0034】
再び、図3を参照すると、基準プロパティ100が類似定義検索部52に与えられると、類似定義検索部52は、基準プロパティ100に類似するクラスを抽出するよう検索クエリを展開して、クラス登録テーブル140内の登録から類似のクラスを検索し、図3に示す検索結果110を取得する。検索結果110は、候補クラスの名称が入力されるフィールド110aと、該候補クラスが定義されるファイルのパスが入力されるフィールド110bと、評価関数に従って求められたスコアが入力されるフィールド110cとを含んで構成される。そして、検索結果110のエントリは、スコアの値に従ってソーティングされる。検索結果110には、所定数以上(例えば1以上)のプロパティ値が一致しているクラスが候補クラスとしてエントリされることとなる。
【0035】
基準プロパティ100と既定義のクラスとの間の類似性を反映するスコアは、それぞれに含まれるプロパティ値の一致の程度を反映し、一致するプロパティ値の数などに依存した値となる。本実施形態では、プロパティ値が厳密一致する場合、プロパティ値が等価である場合、またはプロパティ値の差が所定の許容範囲内にある場合に、プロパティ値が一致したものと判定される。フォントサイズに関して例示すれば、プロパティ値「font-size : 12pt」に対しては、厳密一致するプロパティ値「font-size : 12pt」、等価なプロパティ値「font-size : 1pc」、許容範囲が±1ptであれば11〜13ptの範囲内のプロパティ値が、一致するものとして判定されるものとしてよい。
【0036】
同様に色の値に関して例示すれば、プロパティ値「color : skyblue」に対しては、厳密一致するプロパティ値「color : skyblue」、等価なプロパティ値「color : #87CEEB」やプロパティ値「color : rgb(135, 206, 235)」、許容範囲がRGBの値±5であれば、RGB表現では、R値が130〜140かつG値が201〜211かつB値が230〜240の値の範囲のプロパティ値、16進数カラーコード表現では、最上位2桁が82〜8C、かつ次の2桁がC9〜D3、かつ最後の2桁がE6〜f0の範囲内のプロパティ値が、一致するものとして判定されるものとしてよい。本実施形態の類似定義検索部52は、基準プロパティ100から、各プロパティ値につき、その等価範囲および許容範囲に含まれるプロパティ値を一致したものとして検索するよう検索クエリを展開して、類似のクラスの検索を実施する。なお、上記の許容範囲の値は、例えば、ウェブ・オーサリング・ツールの設定画面等により、予め設定されたものとすることができるが、特に限定されるものではない。
【0037】
また上記スコアは、例えば、基準プロパティ100と比較して、一致するプロパティ値の数に応じて(例えば1点づつ)加点し、余分なプロパティ値および不足するプロパティに数に応じて(例えば1点づつ)減点する評価関数を用いて算出することができる。さらに好適には、評価関数により求めた値を、候補クラスが定義されているファイルの種類の別に応じて補正することもできる。例えば、好適には、現在編集対象のファイル中で宣言されている候補クラスに対して高いスコアを与えるよう構成することができる。なお、本実施形態で用いる評価関数自体は、特に限定されるものではなく、他の実施形態では、例えば、厳密一致または等価であるプロパティ値に対する加点の重み付けを増やしたり、読み込み順位に応じて補正を加えたりすることもできる。
【0038】
図3に示す検索結果110ではプロパティ値「background-color : red」および「border-style : dotted」の両方が一致する「important」クラス120aが最も高いスコアの候補クラスとして算出されている。また、図3に示す検索結果110では、プロパティ値「background-color : red」が一致し、編集中のページ・ファイル68内で定義されている「error」クラス120cが次の順位の候補クラスとして、プロパティ値「background-color : red」が一致し、プロジェクト内の他のスタイルシート・ファイル70b中で宣言されている「eyecatch」クラス120bが第3位となるように並び替えられている。
【0039】
以下、補完定義作成部54による処理について、より具体的に説明する。図5は、本実施形態の補完定義作成部54による処理を、用いるデータ構造とともに模式的に示す図である。図5には、与えられた基準プロパティ100の定義内容と、候補クラス120の定義内容と、作成される補完定義データ130の定義内容とが示されている。基準プロパティ100および候補クラス120は、それぞれ、複数のプロパティ値102a〜c、およびプロパティ値122a〜cを含んで構成されている。
【0040】
図5に示す例では、候補クラス120のプロパティ値122a,122bは、基準プロパティ100のプロパティ値102a,bにそれぞれ一致している。一方、基準プロパティ100に含まれるプロパティ値102cは、候補クラス120側に対応するプロパティ値が存在せず、つまり候補クラス120は、プロパティ値が不足している。また候補クラス120に含まれるプロパティ値122cは、対応するプロパティ値が基準プロパティ100側に存在せず、つまり候補クラス120は、余剰なプロパティ値を含んでいる。
【0041】
本実施形態の補完定義作成部54は、基準プロパティ100と候補クラス120とがそれぞれ含むプロパティ値を比較して、上記不足するプロパティ値102c、および余剰のプロパティ値122cを特定する。補完定義作成部54は、これらの相違点を補完するために、特定された不足のプロパティ値102cに対応する補足プロパティ値132aを補完定義データ130に追加し、また、特定された余剰のプロパティ値122cをキャンセルする打ち消しプロパティ値132bを追加する。なお、補足プロパティ値は、基準プロパティ100に入力された不足のプロパティ値そのものとすることができる。打ち消しプロパティ値は、同一プロパティのデフォルト値、または対象要素が継承している値とすることができる。
【0042】
以下、本実施形態のCSSの編集支援機能により提供されるGUIについて説明する。図6は、本実施形態のコンピュータ装置10のディスプレイ画面上に表示される編集支援GUI画面を例示する。図6(A)には、所定の基準プロパティ100が入力されたウィンドウ300が示されている。ウィンドウ300は、基準プロパティ100をコード直接記述方式にて入力するためのテキスト入力ボックスを備え、図6(A)に示すウィンドウ300には、テキスト300aで示される基準プロパティが入力されている。基準プロパティが入力された後、さらに、編集支援を呼び出す操作イベントが発生すると、リスト302がポップアップ表示される。リスト302では、検索された候補クラスが、その名称およびパスとともに、スコア順に選択可能に一覧表示されている。図6(A)に示す例では、「important」クラスの項目302aが選択されている様子が示されている。候補クラスの選択は、例えばマウスのポインタ302bのオーバラップやクリックにより行うことができる。
【0043】
また、図6(A)に示すウィンドウ300では、いずれかの候補クラスが選択されると、該候補クラスの定義内容を表示する表示ボックス304、該候補クラスを仮に適用した場合を示すプレビュー表示306がポップアップ表示されるよう構成されている。選択の候補クラスが変更されると、それに応答して、新たに選択された候補クラスの定義内容に従い表示ボックス304およびプレビュー表示306の表示内容が更新される。リスト302において、選択の確定を指示する操作イベントが発生すると、選択中の候補クラスが確定クラスとしてスタイル編集部50に渡されて適用されることとなる。なお、図6(A)に示すウィンドウ300では、編集対象の要素を含む部分のプレビューが表示されている。
【0044】
図6(B)には、他の基準プロパティ100が入力されたウィンドウ310が示されている。図6(B)に示すウィンドウ310には、図6(A)と同様に、コード直接記述方式にて入力されたテキスト310aで示される基準プロパティが入力され、リスト312、表示ボックス314およびプレビュー表示316がポップアップ表示されている。リスト312では、検索された候補クラスが、その名称およびパスとともに、スコア順に選択可能に一覧表示され、図6(B)に示す例では、「eyecatch」クラスの補完定義を指定する項目312aがポインタ312bのオーバラップにより選択されている様子が示されている。
【0045】
図6(B)では、補完定義の指定が選択されており、さらに、選択中の候補クラスに対する補完定義の内容を表示する表示ボックス318がポップアップ表示されている。リスト312において、補完定義を指定する選択肢の確定を指示する操作イベントが発生すると、確定クラスおよび補完定義データがスタイル編集部50に渡されて、適用されることとなる。図6(B)に示すウィンドウ310にも、編集対象の要素を含む部分のプレビューが表示されている。
【0046】
図7は、コンピュータ装置10のディスプレイ画面上に表示される編集支援GUI画面の他の実施形態を例示する。図7に示すウィンドウ320は、基準プロパティが入力された後、さらに、編集支援を呼び出す操作イベントが発生した場合にポップアップ表示されるよう構成されている。ウィンドウ320は、検索された候補クラスが、その名称およびパスとともに、スコア順に選択可能に一覧表示されるリストボックス322を含み、図7に示す例では、「eyecatch」クラスの項目322aがマウスにより選択されている様子が示されている。ウィンドウ320は、さらに、選択中の候補クラスの定義内容を表示する表示ボックス324、該候補クラスを仮に適用した場合を描画するプレビュー表示328、および確定ボタン330を含んで構成されている。
【0047】
またウィンドウ320は、補完定義の要否を指示するためのチェック・ボックス332と、チェック・ボックス332がチェックされた場合に、作成された補完定義データの定義内容を表示する表示ボックス326とを含んで構成されている。図7に示す例では、チェック・ボックス332がチェックされている。補完定義が要とされる場合、プレビュー表示328は、該候補クラスを補完定義データにて補正した定義内容により適用した場合を描画するプレビューが描画される。選択の候補クラスが変更されると、その変更に応答して表示ボックス324およびプレビュー表示328の表示内容が新たに選択された候補クラスの内容に従って更新される。確定ボタン330がクリックされると、チェック・ボックス332がチェックされていない場合には、リストボックス322中で選択中の候補クラスがスタイル編集部50に渡されて適用されることとなる。一方、チェック・ボックス332がチェックされている場合には、リストボックス322中で選択中の候補クラスおよび補完定義データがスタイル編集部50に渡されて、適用されることとなる。
【0048】
上述したように、本実施形態の編集支援GUI画面では、途中まで入力された基準プロパティ100に類似する候補クラスをユーザに提案して、プロパティ値の入力を簡略化する編集支援機能を実現し、また、所望の基準プロパティに類似する候補クラスをユーザに提案して、所望の基準プロパティと等価な効果を発現する補完定義を提案する編集支援機能を実現する。
【0049】
なお、上記編集支援を呼び出す操作イベント、および選択を確定する操作イベントは、特に限定されるものでなく、マウスによるGUI部品に対するクリック、オーバラップなどの動作、キーボードによるショートカットキー入力などの動作、その他のユーザによる如何なる入力動作に応答する操作イベントとすることができる。また、選択動作についても、特に限定されるものでなく、マウスまたはキーボードなどによる如何なる入力操作と連動して機能するよう構成することができる。
【0050】
以下、本実施形態のCSSの編集支援機能を実現する処理について、より詳細に説明する。図8は、本実施形態のコンピュータ装置10が実行するCSSの編集支援処理を示すフローチャートである。図8に示す処理は、編集支援機能を呼び出す操作イベントに応答して、ステップS100から開始される。ステップS101では、編集支援部60は、図6に示したテキスト入力ボックスを介して入力された基準プロパティSを用いて、類似定義検索部52による検索フローを呼び出す。なお、検索フローの詳細については後述する。ステップS102では、編集支援部60は、類似定義検索部52からの検索結果を取得して、リスト提示部58を呼び出して、スコア付けされた候補クラスの集合Cのリストをポップアップ表示させ、ステップS103で、デフォルトとして、最上位のスコアの候補クラスC1を選択対象に設定する。
【0051】
ステップS104では、編集支援部60は、選択対象の候補クラスCi(デフォルトではi=1)の定義内容を取得し、図6(A)に示すテキスト表示ボックス304のように、選択中の候補クラスの定義内容を表示させる。ステップS105では、編集支援部60は、プロパティ値に過不足が無いか否かを判定する。ステップS105で、過不足が無いと判定された場合(YES)には、ステップS109へ処理を渡す。ステップS109では、編集支援部60は、プレビュー描画部56を呼び出して、選択されている候補クラスの定義内容に従ったプレビューを表示させる。一方、ステップS105で、過不足が有ると判定された場合(NO)には、ステップS106へ処理を渡す。
【0052】
ステップS106では、補完定義が必要であるか否かを判定する。ステップS106の判定では、例えば、図6(B)に示すウィンドウ310で、補完定義が指定されている項目が選択されている場合、または図7に示すウィンドウ320で、補完定義を指定するチェック・ボックス332にチェックが入っている場合に、補完定義が必要であると判定される。ステップS106で、補完定義が不要と判断された場合(NO)には、ステップS109へ処理を渡す。ステップS109では、編集支援部60は、プレビュー描画部56を呼び出して、例えば図6(A)に示したプレビュー表示306のように、選択されている候補クラスの定義内容に従ったプレビューを表示させる。一方、ステップS106で、補完定義が必要であると判定された場合(YES)には、ステップS107へ処理を渡す。
【0053】
ステップS107では、編集支援部60は、補完定義作成部54を呼び出して、基準プロパティSと選択中の候補クラスCiとから、その差異を補完する補完定義データを作成させ、例えば図6(B)に示したテキスト表示ボックス318や図7に示した表示ボックス326に作成された補完定義データの定義内容を表示させる。ステップS108では、作成された補完定義データにて補正して候補クラスの定義内容を更新する。ステップS109では、編集支援部60は、プレビュー描画部56を呼び出して、例えば図6(B)や図7に示したプレビュー表示316,328のように、選択中の候補クラスの補正された定義内容に従ったプレビューを表示させる。
【0054】
編集支援部60は、編集支援機能が提供するGUI画面に対する操作イベントを監視し、ステップS110では、ユーザからの操作イベントが、「選択変更」、「確定」または「キャンセル」の何れを指示しているのかを判定する。ステップS110で、キャンセルに対応する操作イベントが発生したと判定された場合(キャンセル)には、ステップS112へ処理を渡し、ステップS112で編集支援処理を終了させる。
【0055】
一方、ステップS110で、選択の確定に対応する操作イベントが発生したと判定された場合(確定)には、ステップS111へ処理を渡す。ステップS111では、確定された定義内容、つまり補完定義が不要であれば確定クラス、補完定義が指定されている場合には、確定クラスおよび対応する補完定義データを用いて、HTML文書に対し定義内容を適用し、ステップS112で処理を終了させる。一方、ステップS110で、選択変更に対応する操作イベントが発生したと判定された場合(選択変更)には、ステップS113へ処理を分岐させる。ステップS113では、新たに選択された候補クラスを対象に設定して、ステップS104へ処理を分岐させる。
【0056】
以下、図8に示したステップS101の処理ステップで呼び出される検索フローについて説明する。図9は、本実施形態のコンピュータ装置10が実行する類似するクラスの検索フローを示すフローチャートである。図9に示す処理は、図8に示したステップS101の処理ステップで呼び出されて、ステップS200から開始される。ステップS201では、類似定義検索部52は、基準プロパティSを取得し、ステップS202では、検索クエリを展開して、基準プロパティSに類似する候補クラスCiを検索して、その集合Cを取得する。
【0057】
ステップS203〜ステップS205までのループでは、検索された各候補クラスCiにつき、ループ内のステップS204の処理を繰り返す。ステップS204では、候補クラスCiに対し評価関数を用いてスコアを算出する。すべての候補クラスCiに対するスコアが算出されると、処理は、ステップS203〜ステップS205までのループから抜けだし、ステップS206へ進められる。ステップS206では、類似定義検索部52は、集合Cの候補クラスをスコアに従って降順にソーティングして検索結果を作成し、ステップS207で処理を終了させる。
【0058】
図8および図9に示した処理フローにより、入力された所望のプロパティ値を含むデータ・セットに似たクラスが、定義済みのクラスの中から検索されて提示される。そして、ウェブ・コンテンツを製作するユーザは、既定義のクラスの中から所望の修飾を指定するスタイルが定義されたクラスを容易に探し出すことが可能となる。また既に定義済みのクラスを効率的に再利用できるようになり、もって、ユーザ利便性に優れ、効率的かつ効果的なHTML文書のCSSの編集支援機能が実現される。さらに、類似のクラスが既に定義済みであれば、そのクラスが提示されるため、同一、等価または許容範囲内の差異を有する修飾を指定するクラスを重複定義してしまう蓋然性が好適に低減され、CSSのデータ・サイズの増大、および複雑化が防止される。
【0059】
また、補完定義作成部54の処理により、たとえ候補クラスにユーザの許容限度を超える過不足のプロパティ値が存在したとしても、データ・セットと候補クラスとの差異に対応する最小限の定義データによりユーザが望むスタイルが実現されるため、より効率的に既定義のクラスを活用することが可能となる。また、プレビュー描画部56により、ユーザは、HTML文書に対してCSS定義を実際に適用する前に、CSS定義が適用された場合に発現するスタイルの効果を確認することができ、ウェブ・コンテンツの製作作業の効率性を向上させることが可能となる。
【0060】
なお、上述までの実施形態では、補完定義が指定される場合、補完定義データの適用は、例えば、インラインでスタイル属性を定義したり、対象要素のIDをセレクタとして規則集合を定義したり、補完定義データを新たなクラスとして定義し、複数のクラスを指定するクラス属性を対象要素に追加したりすることによって実施されるものとして説明してきた。以下に説明する他の実施形態は、作成された補完定義データをさらに類似定義検索部52に与えて、補完定義データに類似するクラスを検索し、クラスの再利用により初期の基準プロパティと候補クラスとの差異の解消を試みることによって、より効果的に定義済みのクラスを再利用しようとするものである。なお、以下に示す他の実施形態は、編集支援機能が提供するGUIおよび編集支援処理のフロー以外の構成については、図1〜図9を参照して説明した実施形態と同様であるため、以下の他の実施形態の説明では、相違する部分を中心に説明する。
【0061】
以下、他の実施形態のCSSの編集支援機能を実現する処理について説明する。図10は、他の実施形態のCSSの編集支援処理を示すフローチャートである。図11は、他の実施形態においてディスプレイ画面上に表示される編集支援GUI画面を例示する。図11には、所定の基準プロパティ100が入力されたウィンドウ340が示され、ウィンドウ340には、テキスト340aで示されるユーザから入力された基準プロパティが入力されている。
【0062】
再び図10を参照すると、図10に示す処理は、編集支援機能を呼び出す操作イベントに応答して、ステップS300から開始される。ステップS301では、編集支援部60は、入力された基準プロパティSを用いて、類似定義検索部52による検索フローを呼び出す。なお、検索フローは、図9に示した処理フローと同一である。ステップS302では、編集支援部60は、類似定義検索部52からの検索結果を取得して、リスト提示部58を呼び出して、図11に示すリスト342のように、スコア付けされた候補クラスの集合Cのリストをポップアップ表示させ、ステップS303で、デフォルトとして、最上位のスコアの候補クラスC1を選択対象に設定する。
【0063】
ステップS304では、編集支援部60は、選択対象の候補クラスCi(デフォルトではi=1)の定義内容を取得し、図11に示すテキスト表示ボックス344のように、選択中の候補クラスの定義内容を表示させる。ステップS305では、編集支援部60は、プロパティ値に過不足が無いか否かを判定する。ステップS305で、過不足が無いと判定された場合(YES)には、ステップS311へ処理を渡す。ステップS311では、編集支援部60は、プレビュー描画部56を呼び出して、図11に示すプレビュー表示348のように、選択の候補クラスの定義内容に従ったプレビューを表示させる。一方、ステップS305で、過不足が有ると判定された場合(NO)には、ステップS306へ処理を渡す。
【0064】
ステップS306では、補完定義が必要であるか否かを判定する。ステップS306で、補完定義が不要であると判断された場合(NO)には、ステップS311へ処理を渡す。ステップS311では、編集支援部60は、プレビュー描画部56を呼び出して、選択の候補クラスの定義内容に従ったプレビューを表示させる。一方、ステップS306で、補完定義が必要であると判定された場合(YES)には、ステップS307へ処理を渡す。
【0065】
ステップS307では、編集支援部60は、補完定義作成部54を呼び出して、基準プロパティSと選択中の候補クラスCiとから、その差異を補完する補完定義データを作成させ、例えば図11に示したテキスト表示ボックス346に作成された補完定義データの定義内容を表示させる。図11に示す例では、テキスト346aで示す補完定義データが表示されている。ステップS308では、編集支援部60は、再利用による差異の解消が選択されているか否かを判定する。この再利用による差異の解消は、再利用フローの初回では選択されておらず、後述するステップS312において、再利用による解消を指示する操作イベントが発生した段階で、選択されることとなる。
【0066】
ステップS308で、再利用による解消が選択されていない場合(NO)には、ステップS310へ処理が直接進められる。ステップS310では、ステップS307で作成された補完定義データを用いて候補クラスCiの定義内容を更新し、ステップS311では、編集支援部60は、プレビュー描画部56を呼び出して、選択中の候補クラスの補正された定義内容に従ったプレビューを表示させる。
【0067】
編集支援部60は、編集支援機能が提供するGUI画面に対する操作イベントを監視し、ステップS312では、ユーザからの操作イベントが、「選択変更」、「確定」、「再利用による解消」または「キャンセル」の何れを指示しているのかを判定する。ステップS312で、キャンセルに対応する操作イベントが発生したと判定された場合(キャンセル)には、ステップS314へ処理を渡し、ステップS314で本再利用フローを終了させ、呼び出し元に処理を戻す。
【0068】
一方、ステップS312で、選択の確定に対応する操作イベントが発生したと判定された場合(確定)には、ステップS313へ処理を渡す。ステップS313では、確定された定義内容を呼び出し元に戻し、ステップS314で本再利用フローを終了させ、呼び出し元に処理を戻す。なお、ステップS313で戻される定義内容は、再利用による解消が確定されていない場合には、本フローでの確定クラスおよび対応する補完定義データが戻されることとなる。
【0069】
一方、ステップS312で、選択変更に対応する操作イベントが発生したと判定された場合(選択変更)には、ステップS315へ処理を分岐させる。ステップS315では、新たに選択された候補クラスを対象に設定して、ステップS304へ処理を分岐させる。
【0070】
一方、ステップS312で、再利用による解消の選択に対応する操作イベントが発生したと判定された場合(再利用による解消)には、ステップS304へ処理を分岐させる。なお、この再利用による解消の選択に対応する操作イベントについても、他の指示と識別できる限り、特に限定されるものではなく、マウスによるGUI部品に対するクリック、オーバラップなどの動作、キーボードによるショートカットキー入力などの動作、その他のユーザによる如何なる入力動作に応答する操作イベントとすることができる。
【0071】
ステップS312で、再利用による解消の選択に対応する操作イベントが発生したと判定された場合、次のループにおいてステップS308へ到達した際には、ステップS309へ処理が渡される。ステップS309では、編集支援部60は、本フローのステップS307で作成された選択中の候補クラスに対応する補完定義データを基準プロパティSとして、図10に示す本再利用フローを再帰的に呼び出す。図11に示す例では、「eyecatch」クラスの補完定義を指定する項目342aが選択され、テキスト346aで示す対応する補完定義データが、基準プロパティSとして与えられることとなる。
【0072】
再び図10を参照すると、再呼び出し先の再利用フローのステップS301では、編集支援部60は、再呼び出し元で作成された補完定義データを基準プロパティSとして与えて、該補完定義データに類似するクラスが検索されることとなる。その際には、CSS2では、後方定義のクラスが優先されるため、その検索範囲は、呼び出し元で選択された候補クラス以降の読み出し位置のものに限定することが好ましい。
【0073】
再呼び出し先の再利用フローのステップS302では、編集支援部60は、再呼び出し元での補完定義データを用いて検索された検索結果を取得して、リスト提示部58を呼び出して、図11に示すリスト352のように、スコア付けされた候補クラスの集合Cのリストをポップアップ表示させる。再呼び出し先の再利用フローのステップS304では、編集支援部60は、選択対象の候補クラスCiの定義内容を取得し、図11に示すテキスト表示ボックス354のように、選択中の候補クラスの定義内容を表示させる。再呼び出し先の再利用フローのステップS307では、編集支援部60は、補完定義作成部54を呼び出して、再呼び出し元の補完定義データと本フロー中で選択されている候補クラスCiとから、その差異を補完する補完定義データを作成させ、例えば図11に示したテキスト表示ボックス356に補完定義データの定義内容を表示させる。
【0074】
再呼び出し先の再利用フローのステップS312において、選択の確定に対応する操作イベントが発生したと判定された場合(確定)には、ステップS313では、本フローでの確定クラスおよび対応する補完定義データを呼び出し元に戻し、ステップS314で本フローを終了させ、再呼び出し元に処理を戻す。
【0075】
再呼び出し元に処理が戻されると、そのステップS310において、戻されたクラスおよび対応する補完定義データを適宜用いて、候補クラスCiの定義内容を更新し、ステップS311では、編集支援部60は、プレビュー描画部56を呼び出して、選択中の候補クラスの補正された定義内容に従ったプレビューを表示させる。
【0076】
再呼び出し元のステップS312で、選択の確定に対応する操作イベントが発生したと判定された場合(確定)には、ステップS313では、当該フローの呼び出し元(例えば、スタイル編集部50)に確定された定義内容を戻し、ステップS314で本フローを終了させ、本フローの呼び出し元(この場合スタイル編集部50)に処理を戻す。この場合、ステップS313で戻される定義内容は、再呼び出し先のフローで再利用による解消が確定されているので、再呼び出し先から戻された確定クラスと、該クラスに対応する補完定義データと、本フローで選択中の候補クラスとが適宜戻されることとなる。スタイル編集部50は、複数のクラスが戻された場合には、複数のクラス名を連ねてクラス属性を加えて、クラスを同時指定することによりHTML文書に対しスタイル定義の適用を実施する。また、再帰呼び出し回数の限度は、特に限定されるものでないが、所与の限度を定めてもよい。
【0077】
図10および図11を参照して説明した処理フローにより、データ・セットと確定クラスとの差異に対応する補完定義データに類似するクラスがさらに検索されるため、より効率的に既定義のクラスを再利用することが可能となる。
【0078】
以下、ウェブ・オーサリング・ツールを実現するコンピュータ装置10のハードウェア構成について説明する。図12は、コンピュータ装置10の概略的なハードウェア構成を示す。図12に示すコンピュータ装置10は、中央処理装置(CPU)12と、CPU12が使用するデータの高速アクセスを可能とするL1およびL2などのレベルを有するキャッシュ・メモリ14と、CPU12の処理を可能とするRAM、DRAMなどの固体メモリ素子から形成されるシステム・メモリ16とを備えている。
【0079】
CPU12、キャッシュ・メモリ14、およびシステム・メモリ16は、システム・バス18を介して、他のデバイスまたはドライバ、例えば、グラフィックス・ドライバ20およびネットワーク・インタフェース・カード(NIC)22へと接続されている。グラフィックス・ドライバ20は、バスを介して外部のディスプレイ24などの出力装置に接続されて、CPU12による処理結果をディスプレイ画面上に表示させることができる。また、NIC22は、物理層レベルおよびデータリンク層レベルでコンピュータ装置10を、TCP/IPなどの適切な通信プロトコルを使用するネットワークへと接続している。
【0080】
システム・バス18には、さらにI/Oバス・ブリッジ26が接続されている。I/Oバス・ブリッジ26の下流側には、PCIなどのI/Oバス28を介して、IDE、ATA、ATAPI、シリアルATA、SCSI、USBなどにより、ハードディスク30が接続されている。また、I/Oバス28には、USBなどのバスを介して、キーボードおよびマウスなどのポインティング・デバイスなどの入力装置32が接続されていて、この入力装置32によりユーザ・インタフェースが提供される。
【0081】
コンピュータ装置10のCPU12としては、いかなるシングルコア・プロセッサまたはマルチコア・プロセッサを用いることができ、より具体的には、例えば、Xeon(登録商標)、Itanium(登録商標)、POWER PC(登録商標)などCISCまたはRISCチップなどを挙げることができる。コンピュータ装置10は、WINDOWS(登録商標)200X、UNIX(登録商標)、LINUX(登録商標)などのOSにより制御され、OSの管理の下、システム・メモリ16上などにプログラムを展開し、プログラムを実行することにより、各ハードウェア資源を動作制御することによって、上述した機能部の構成および処理をコンピュータ上に実現することができる。
【0082】
以上説明したように、本実施形態によれば、HTMLなどのマークアップ言語で記述された構造化文書の体裁を定義するスタイルシートの編集において、既定義のクラスを容易に再利用可能とし、重複定義の蓋然性を低減し、もって、効率的にポータルサイト、ウェブアプリケーション、ホームページなどのウェブ・コンテンツを構築することを可能とする、情報処理装置、情報処理方法およびプログラムを提供することが可能となる。
【0083】
なお、上述までは、HTML文書中のある特定の要素に対してプロパティ値を指定しようとする際に、所望の基準プロパティに類似する既定義のクラスを選択可能に提示する構成について説明した。しかしながら、他の実施形態では、JSPなどのサーバ・サイドアプリケーションにて動的にHTML文書を生成する場合に、生成するHTML文書中の要素に対して適用されるスタイルシートの定義のために用いることもできる。さらに他の実施形態では、新たなクラスを定義する際に、これから定義しようと考えているクラスに類似したクラスが定義されているかを確認するために用いることもできる。
【0084】
また、上述までの実施形態の説明では、構造化文書としてHTML文書、スタイル定義としてカスケード・スタイルシート(CSS)を編集対象とした場合を例に説明してきた。しかしながら、本発明の実施形態で利用することができる構造化文書は、上述したHTML文書に限られるものではなく、XML、XHTML、SVG、その他のマークアップ言語で書かれた文書とすることができる。また本発明の実施形態で利用することができるスタイルシートは、カスケード・スタイルシートに限られるものではなく、XSL(eXtensible Style Sheet)、DSSSL(Document Style Semantics and Specification Language)など、他のスタイルシート言語により作成されたものを採用することもできる。
【0085】
また、コンピュータ装置としては、上述までのパーソナル・コンピュータの他、ラップトップ・コンピュータ、マルチプロセッサ・システムなどを含む種々のコンピュータ・システム構成と共に実施することができる。
【0086】
本発明の上記機能は、C++、Java(登録商標)、Java(登録商標)Beans、Java(登録商標)Applet、Java(登録商標)Script、Perl、Rubyなどのオブジェクト指向プログラミング言語などで記述された装置実行可能なプログラムにより実現でき、装置可読な記録媒体に格納して頒布または伝送して頒布することができる。
【0087】
これまで本発明を、特定の実施形態をもって説明してきたが、本発明は、実施形態に限定されるものではなく、他の実施形態、追加、変更、削除など、当業者が想到することができる範囲内で変更することができ、いずれの態様においても本発明の作用・効果を奏する限り、本発明の範囲に含まれるものである。
【図面の簡単な説明】
【0088】
【図1】本実施形態のコンピュータ装置の機能ブロックを示す図。
【図2】本実施形態のコンピュータ装置のディスプレイ画面上に表示されるページ編集GUI画面を例示する図。
【図3】本実施形態の編集支援機能を、各処理段階で用いるデータ構造とともに模式的に示す図。
【図4】本実施形態のクラス登録部が保持するクラス登録テーブルのデータ構造を示す図。
【図5】本実施形態の補完定義作成部による処理を、用いるデータ構造とともに模式的に示す図。
【図6】本実施形態のコンピュータ装置のディスプレイ画面上に表示される編集支援GUI画面を例示する図。
【図7】コンピュータ装置のディスプレイ画面上に表示される編集支援GUI画面の他の実施形態を例示する図。
【図8】本実施形態のコンピュータ装置が実行するCSSの編集支援処理を示すフローチャート。
【図9】本実施形態のコンピュータ装置が実行する類似するクラスの検索フローを示すフローチャート。
【図10】他の実施形態のCSSの編集支援処理を示すフローチャート。
【図11】他の実施形態においてディスプレイ画面上に表示される編集支援GUI画面を例示する図。
【図12】コンピュータ装置の概略的なハードウェア構成を示す図。
【図13】従来のウェブ・オーサリング・ツールにおけるCSSの編集機能を示す図。
【符号の説明】
【0089】
10…コンピュータ装置、12…CPU、14…キャッシュ・メモリ、16…システム・メモリ、18…システム・バス、20…グラフィックス・ドライバ、22…NIC、24…ディスプレイ、26…I/Oバス・ブリッジ、28…I/Oバス、30…ハードディスク、32…入力装置、50…スタイル編集部、52…類似定義検索部、54…補完定義作成部、56…プレビュー描画部、58…リスト提示部、60…編集支援部、62…クラス入出力部、64…クラス登録部、66…格納部、68…ページ・ファイル、70…スタイルシート・ファイル、100…基準プロパティ、102…プロパティ値、110…検索結果、120…クラス、122…プロパティ値、130…補完定義データ、132…プロパティ値、140…クラス登録テーブル、200…ログインパネル、202…テキスト、300…ウィンドウ、300a…テキスト、302…リスト、302a…項目、302b…ポインタ、304…表示ボックス、306…プレビュー表示、310…ウィンドウ、310a…テキスト、312…リスト、312a…項目、312b…ポインタ、314…表示ボックス、316…プレビュー表示、318…表示ボックス、320…ウィンドウ、322…リストボックス、322a…項目、324…表示ボックス、326…表示ボックス、328…プレビュー表示、330…確定ボタン、332…チェック・ボックス、340…ウィンドウ、340a…テキスト、342…リスト、342a…項目、344…表示ボックス、346…表示ボックス、346a…テキスト、348…プレビュー表示、352…リスト、354…表示ボックス、356…表示ボックス
【特許請求の範囲】
【請求項1】
構造化文書のスタイル定義を支援する情報処理装置であって、
それぞれスタイルを定義付ける複数のクラスを登録する登録部と、
与えられた1以上のスタイル特性を指定するプロパティ値を含むデータ・セットに類似する候補クラスを登録済みの前記クラスの中から検索する検索部と、
検索された前記候補クラスを選択可能に提示する提示部と、
入力された1以上の前記プロパティ値を前記データ・セットとして与えて、選択可能な前記候補クラスの中から確定されたクラスを用いて構造化文書に対しスタイル定義を適用する適用部と
を含む、情報処理装置。
【請求項2】
前記データ・セットと前記候補クラスとにそれぞれ含まれる前記プロパティ値を比較し、その差分から前記候補クラスに対する補完定義データを作成する作成部をさらに含む、請求項1に記載の情報処理装置。
【請求項3】
選択された前記候補クラスおよび対応する前記補完定義データを適用した場合のプレビューを描画する描画部をさらに含む、請求項2に記載の情報処理装置。
【請求項4】
前記補完定義データは、前記データ・セットとして前記検索部に再帰的に与えられ、前記作成部は、前記補完定義データと再帰的に検索された候補クラスとの差分から、次の補完定義データを作成する、請求項2に記載の情報処理装置。
【請求項5】
前記提示部は、検索された前記候補クラスとともに、該候補クラスの定義内容、および該候補クラスが定義されているファイルのパスの少なくとも一方を提示する、請求項1に記載の情報処理装置。
【請求項6】
構造化文書のスタイル定義を支援する方法であって、情報処理装置が、
スタイル特性を指定する1以上のプロパティ値の入力を受けるステップと、
それぞれスタイルを定義付ける登録済みの複数のクラスの中から、入力された前記1以上のプロパティ値を含むデータ・セットを与えて、該データ・セットに類似する候補クラスを検索するステップと、
検索された前記候補クラスを選択可能に提示するステップと、
選択可能な前記候補クラスの中から確定されたクラスを用いて構造化文書に対しスタイル定義を適用するステップと
を実行する、情報処理方法。
【請求項7】
情報処理装置が、前記データ・セットと前記候補クラスとにそれぞれ含まれる前記プロパティ値を比較し、その差分から前記候補クラスに対する補完定義データを作成するステップをさらに実行する、請求項6に記載の情報処理方法。
【請求項8】
情報処理装置が、選択された前記候補クラスおよび対応する前記補完定義データを適用した場合のプレビューを描画するステップをさらに実行する、請求項6に記載の情報処理方法。
【請求項9】
情報処理装置が、前記補完定義データを前記データ・セットとして前記検索部に再帰的に与えるステップと、前記補完定義データと再帰的に検索された候補クラスとの差分から、次の補完定義データを作成するステップとをさらに実行する、請求項6に記載の情報処理方法。
【請求項10】
前記提示するステップでは、検索された前記候補クラスとともに、該候補クラスの定義内容、および該候補クラスが定義されているファイルのパスの少なくとも一方を提示する、請求項6に記載の情報処理方法。
【請求項11】
構造化文書のスタイル定義を支援するためのコンピュータ実行可能なプログラムであって、
それぞれスタイルを定義付ける複数のクラスを登録する登録部と、
与えられた1以上のスタイル特性を指定するプロパティ値を含むデータ・セットに類似する候補クラスを登録済みの前記クラスの中から検索する検索部と、
検索された前記候補クラスを選択可能に提示する提示部と、
入力された1以上の前記プロパティ値を前記データ・セットとして与えて、選択可能な前記候補クラスの中から確定されたクラスを用いて構造化文書に対しスタイル定義を適用する適用部と
をコンピュータに実現するためのコンピュータ実行可能なプログラム。
【請求項12】
前記データ・セットと前記候補クラスとにそれぞれ含まれる前記プロパティ値を比較し、その差分から前記候補クラスに対する補完定義データを作成する作成部をさらにコンピュータに実現するための請求項11に記載のコンピュータ実行可能なプログラム。
【請求項13】
選択された前記候補クラスおよび対応する前記補完定義データを適用した場合のプレビューを描画する描画部をさらにコンピュータに実現するための請求項12に記載のコンピュータ実行可能なプログラム。
【請求項14】
前記補完定義データは、前記データ・セットとして前記検索部に再帰的に与えられ、前記作成部は、前記補完定義データと再帰的に検索された候補クラスとの差分から、次の補完定義データを作成する、請求項12に記載のコンピュータ実行可能なプログラム。
【請求項15】
前記提示部は、検索された前記候補クラスとともに、該候補クラスの定義内容、および該候補クラスが定義されているファイルのパスの少なくとも一方を提示する、請求項11に記載のコンピュータ実行可能なプログラム。
【請求項16】
構造化文書のスタイル定義を支援する情報処理装置であって、
それぞれスタイルを定義付ける複数のクラスを登録する登録部と、
与えられた1以上のスタイル特性を指定するプロパティ値を含むデータ・セットに類似する候補クラスを登録済みの前記クラスの中から検索する検索部と、
検索された前記候補クラスを選択可能に提示する提示部と、
前記データ・セットと前記候補クラスとにそれぞれ含まれる前記プロパティ値を比較し、その差分から前記候補クラスに対する補完定義データを作成する作成部と、
選択された前記候補クラスおよび対応する前記補完定義データを適用した場合のプレビューを描画する描画部と、
入力された1以上の前記プロパティ値を前記データ・セットとして与えて、選択可能な前記候補クラスの中から確定されたクラスを用いて構造化文書に対しスタイル定義を適用する適用部と
を含み、
前記補完定義データは、前記データ・セットとして前記検索部に再帰的に与えられ、前記作成部は、前記補完定義データと再帰的に検索された候補クラスとの差分から、次の補完定義データを作成し、
前記提示部は、検索された前記候補クラスとともに、該候補クラスの定義内容、および該候補クラスが定義されているファイルのパスの少なくとも一方を提示する、
情報処理装置。
【請求項1】
構造化文書のスタイル定義を支援する情報処理装置であって、
それぞれスタイルを定義付ける複数のクラスを登録する登録部と、
与えられた1以上のスタイル特性を指定するプロパティ値を含むデータ・セットに類似する候補クラスを登録済みの前記クラスの中から検索する検索部と、
検索された前記候補クラスを選択可能に提示する提示部と、
入力された1以上の前記プロパティ値を前記データ・セットとして与えて、選択可能な前記候補クラスの中から確定されたクラスを用いて構造化文書に対しスタイル定義を適用する適用部と
を含む、情報処理装置。
【請求項2】
前記データ・セットと前記候補クラスとにそれぞれ含まれる前記プロパティ値を比較し、その差分から前記候補クラスに対する補完定義データを作成する作成部をさらに含む、請求項1に記載の情報処理装置。
【請求項3】
選択された前記候補クラスおよび対応する前記補完定義データを適用した場合のプレビューを描画する描画部をさらに含む、請求項2に記載の情報処理装置。
【請求項4】
前記補完定義データは、前記データ・セットとして前記検索部に再帰的に与えられ、前記作成部は、前記補完定義データと再帰的に検索された候補クラスとの差分から、次の補完定義データを作成する、請求項2に記載の情報処理装置。
【請求項5】
前記提示部は、検索された前記候補クラスとともに、該候補クラスの定義内容、および該候補クラスが定義されているファイルのパスの少なくとも一方を提示する、請求項1に記載の情報処理装置。
【請求項6】
構造化文書のスタイル定義を支援する方法であって、情報処理装置が、
スタイル特性を指定する1以上のプロパティ値の入力を受けるステップと、
それぞれスタイルを定義付ける登録済みの複数のクラスの中から、入力された前記1以上のプロパティ値を含むデータ・セットを与えて、該データ・セットに類似する候補クラスを検索するステップと、
検索された前記候補クラスを選択可能に提示するステップと、
選択可能な前記候補クラスの中から確定されたクラスを用いて構造化文書に対しスタイル定義を適用するステップと
を実行する、情報処理方法。
【請求項7】
情報処理装置が、前記データ・セットと前記候補クラスとにそれぞれ含まれる前記プロパティ値を比較し、その差分から前記候補クラスに対する補完定義データを作成するステップをさらに実行する、請求項6に記載の情報処理方法。
【請求項8】
情報処理装置が、選択された前記候補クラスおよび対応する前記補完定義データを適用した場合のプレビューを描画するステップをさらに実行する、請求項6に記載の情報処理方法。
【請求項9】
情報処理装置が、前記補完定義データを前記データ・セットとして前記検索部に再帰的に与えるステップと、前記補完定義データと再帰的に検索された候補クラスとの差分から、次の補完定義データを作成するステップとをさらに実行する、請求項6に記載の情報処理方法。
【請求項10】
前記提示するステップでは、検索された前記候補クラスとともに、該候補クラスの定義内容、および該候補クラスが定義されているファイルのパスの少なくとも一方を提示する、請求項6に記載の情報処理方法。
【請求項11】
構造化文書のスタイル定義を支援するためのコンピュータ実行可能なプログラムであって、
それぞれスタイルを定義付ける複数のクラスを登録する登録部と、
与えられた1以上のスタイル特性を指定するプロパティ値を含むデータ・セットに類似する候補クラスを登録済みの前記クラスの中から検索する検索部と、
検索された前記候補クラスを選択可能に提示する提示部と、
入力された1以上の前記プロパティ値を前記データ・セットとして与えて、選択可能な前記候補クラスの中から確定されたクラスを用いて構造化文書に対しスタイル定義を適用する適用部と
をコンピュータに実現するためのコンピュータ実行可能なプログラム。
【請求項12】
前記データ・セットと前記候補クラスとにそれぞれ含まれる前記プロパティ値を比較し、その差分から前記候補クラスに対する補完定義データを作成する作成部をさらにコンピュータに実現するための請求項11に記載のコンピュータ実行可能なプログラム。
【請求項13】
選択された前記候補クラスおよび対応する前記補完定義データを適用した場合のプレビューを描画する描画部をさらにコンピュータに実現するための請求項12に記載のコンピュータ実行可能なプログラム。
【請求項14】
前記補完定義データは、前記データ・セットとして前記検索部に再帰的に与えられ、前記作成部は、前記補完定義データと再帰的に検索された候補クラスとの差分から、次の補完定義データを作成する、請求項12に記載のコンピュータ実行可能なプログラム。
【請求項15】
前記提示部は、検索された前記候補クラスとともに、該候補クラスの定義内容、および該候補クラスが定義されているファイルのパスの少なくとも一方を提示する、請求項11に記載のコンピュータ実行可能なプログラム。
【請求項16】
構造化文書のスタイル定義を支援する情報処理装置であって、
それぞれスタイルを定義付ける複数のクラスを登録する登録部と、
与えられた1以上のスタイル特性を指定するプロパティ値を含むデータ・セットに類似する候補クラスを登録済みの前記クラスの中から検索する検索部と、
検索された前記候補クラスを選択可能に提示する提示部と、
前記データ・セットと前記候補クラスとにそれぞれ含まれる前記プロパティ値を比較し、その差分から前記候補クラスに対する補完定義データを作成する作成部と、
選択された前記候補クラスおよび対応する前記補完定義データを適用した場合のプレビューを描画する描画部と、
入力された1以上の前記プロパティ値を前記データ・セットとして与えて、選択可能な前記候補クラスの中から確定されたクラスを用いて構造化文書に対しスタイル定義を適用する適用部と
を含み、
前記補完定義データは、前記データ・セットとして前記検索部に再帰的に与えられ、前記作成部は、前記補完定義データと再帰的に検索された候補クラスとの差分から、次の補完定義データを作成し、
前記提示部は、検索された前記候補クラスとともに、該候補クラスの定義内容、および該候補クラスが定義されているファイルのパスの少なくとも一方を提示する、
情報処理装置。
【図1】
【図2】
【図3】
【図4】
【図5】
【図6】
【図7】
【図8】
【図9】
【図10】
【図11】
【図12】
【図13】
【図2】
【図3】
【図4】
【図5】
【図6】
【図7】
【図8】
【図9】
【図10】
【図11】
【図12】
【図13】
【公開番号】特開2010−44626(P2010−44626A)
【公開日】平成22年2月25日(2010.2.25)
【国際特許分類】
【出願番号】特願2008−208743(P2008−208743)
【出願日】平成20年8月13日(2008.8.13)
【出願人】(390009531)インターナショナル・ビジネス・マシーンズ・コーポレーション (4,084)
【氏名又は名称原語表記】INTERNATIONAL BUSINESS MASCHINES CORPORATION
【復代理人】
【識別番号】100110607
【弁理士】
【氏名又は名称】間山 進也
【Fターム(参考)】
【公開日】平成22年2月25日(2010.2.25)
【国際特許分類】
【出願日】平成20年8月13日(2008.8.13)
【出願人】(390009531)インターナショナル・ビジネス・マシーンズ・コーポレーション (4,084)
【氏名又は名称原語表記】INTERNATIONAL BUSINESS MASCHINES CORPORATION
【復代理人】
【識別番号】100110607
【弁理士】
【氏名又は名称】間山 進也
【Fターム(参考)】
[ Back to top ]