JP6084527B2 - Ｗｅｂページ作成装置 - Google Patents

Description

本発明の実施形態は、Webページ作成装置に関する。

Web ページの中には、ユーザが入力するＩＤやＰＡＳＳ等の入力値を取得したり設定する機能を有する入力欄や、表示テキストを取得したり設定する機能を有するボタンが設けられているものがある。

一般的に、Web ページの作成においては、入力欄やボタンなどの部品の配置を決定した後、初期化命令をすると、Web ページ作成装置によって、部品内部の構造、外観、機能の作成が実行される。

部品は、要素の構造が予め固定されているので、部品の外観を変更する際は、要素の属性であるスタイル情報を変更する必要がある。

また、Web ページにおいて新しい装飾を追加する場合は、スタイル情報だけでは実現が困難で、装飾のための新しい要素を追加しなければならない。

ところが、部品の内部に要素を追加すると、要素（部品）の構造が変わることがあり、部品が正しく動作しなくなる可能性があるという問題がある。

特開２００５−４３９２号公報

jQuery UI http://jqueryui.com/ Introduction to Web Components http://www.w3.org/TR/components-intro/

本発明が解決しようとする課題は、部品の要素の構造を可変にして、要素の構造を変更しても部品を正しく動作させるWeb ページ作成装置を提供することである。

実施形態のWeb ページ作成装置は、文書を構成する部品について、部品の種類と、部品を構成する要素の位置を入力する指示受付部と、前記部品が必要とする全ての役割について各役割を担う前記要素を特定するものであって、各役割を持つ前記要素の位置を記した要素役割対応表を、部品毎に記憶しておく要素役割対応表記憶部と、前記要素役割対応表を参照して、前記部品を構成する前記要素を検索し、各要素に役割を対応付ける役割記録部と、前記部品を構成する前記要素のうち、前記所定の役割を対応付けられた前記要素に対して、属性や内容を変更し、あるいは子要素を追加または削除する処理を行う要素処理部とを、備える。

Web ページ上の部品の外観変更の一例を説明する図である。 本実施形態に係るWebページ作成装置の概略構成を示すブロック図である。 要素役割対応表の一例を示す図である。 役割に対応する要素への参照を役割別要素位置記憶部に格納する一例を示す図である。 役割記録部における役割を記録するときの処理の流れを示すフローチャートである。 要素処理部における処理の流れを示すフローチャートである。 部品の外観を変更する実施例を説明する図である。 ボタン部品のテキストを変更する実施例を説明する図である。 文書を変化させる実施形態を、従来手法と対比して説明する図である。

以下、本発明の一実施の形態について、図面を参照して説明する。

まず、本実施形態で用いる主要な用語について説明する。

「部品」とは、文書を構成するものをいう。1つ以上の要素が集合して「部品」の構造を形成し、そのうちいくつかの要素が協調して、ある機能を提供したり動作をするものである。

具体的にはボタン、メニュー、ダイアログなどである。

「要素」とは、マークアップ言語の開始タグと終了タグ（省略あり）で囲まれた範囲をいう。例えば、<span>文字列</span>、、<div><img><span>text</span></div>である。「要素」は、具体的には、文字列の範囲であって、文書を表示させるWebブラウザ等によって文書が表示されるときに、Webブラウザ等の機能によって画像や図形等がこの範囲内に重ねて表示される。「要素」の構造は、ひとつまたは複数の要素の集合である。

「要素の属性」とは、要素に対して付加される内容以外の追加情報をいう。具体的には、識別子、クラス名、スタイル情報などである。例えば、<span id=“panel1” class=“ts-panel”> の中の、id=“panel1”や class=“ts-panel”の部分が、「要素の属性」である。「要素の属性」は、開始タグ内にタグ名（例えば、span）に続けて記述する。

「スタイル情報」とは、要素に対して設定される属性のひとつで、外観を司る情報をいう。要素が配置される位置、要素に含まれる文字の種類、サイズ、色、枠線の種類、枠線の色、塗りの種類、塗りの色などが該当する。例えば、CSS （Cascading Style Sheets）やXSL（ Extensible Stylesheet Language）のプロパティ名と値の組み合わせで示される。

「文書」とは、部品と、部品を構成していない要素と、部品を操作するプログラムと、要素とスタイル情報の対応表、から成る。本実施形態におけるWebページも、「文書」である。

「役割」とは、部品を構成する要素が、部品の機能を果たすために部品から課される個別の仕事内容や性質をいう。例えば、ボタンの場合、クリックされる役割、テキストを表示する役割、などである。

「操作」とは、部品の機能を呼び出すことをいう。例えば、ボタンの場合、テキストを変更する、クリックできないようにする、などである。

まず、Webページ上に表示される部品に対してその外観を変更する場合を例にして説明する。図１は、Webページ上の部品の外観変更の一例を説明する図である。Webページ作成作業の初期化によって、部品内部の構造、外観、機能の作成が行われ、所定の構造をもつ要素が生成される。図１に示す例では、ボタン内に画像を追加するとともに、部品の表示テキストを“Log In”から“Log Out”に変更する。ボタン内に画像を追加するには、button要素内にimg要素を追加する。この処理によって、ボタン内に“Log In”の左側にフェースマーク状の画像が表示される。しかし、button要素の表示テキストの領域を“Log Out”に変更する処理によって、追加したimg要素まで削除されてしまう。初期化時に、要素が部品の内部で生成され、要素の構造が決定されていることから、そのままでは、部品の外観の変更が維持できなくなる。

本実施形態では、部品を構成する要素の構造を可変にして、要素の構造を変更しても部品を正しく動作可能としてWebページを作成する。

図２は、本実施形態に係るWebページ作成装置の概略構成を示すブロック図である。

図２に示すように、本実施形態に係るWebページ作成装置１は、大別すると、指示受付部１０、役割記録部２０、要素処理部３０、文書表示部４０、要素役割対応表記憶部５０、文書記憶部６０、部品位置記憶部７０、役割別要素位置記憶部８０から構成されている。

指示受付部１０は、部品の初期化の指示を受け付ける。指示を受け付けると、部品の初期化が開始される。初期化の指示内容としては、例えば、部品の種類と、部品を構成する要素の“要素の位置”が入力される。部品を構成する最も外側の“要素の位置”が、“部品の位置”である。

役割記録部２０は、後述する要素役割対応表記憶部５０に記憶された要素役割対応表を参照して、部品を構成する要素を検索し、各要素に役割を対応付ける。要素の検索開始位置として、“部品の位置”情報が使用される。部品を構成する要素は予め文書内に記述されているので、部品毎に決められた構造の要素を生成せず、役割を持つ“要素の位置”を役割別要素位置記憶部８０に記録する。

要素処理部３０は、部品を構成する要素のうち、所定の役割を対応付けられた要素に対して、属性や内容を変更したり、子要素を追加する処理を行う。例えば、部品である「ボタン」に対して「表示テキストを変更する」機能を「Log Out」という文字列と共に入力すると、要素処理部３０は、ボタン部品を構成する要素のうち、「テキストを格納する」役割の要素に対して、内容を「Log Out」に変更する処理を実行する。尚、「Log Out」は、機能で使用するデータである。係る処理では、所定の役割を持つ要素、上述の例で言えば「テキストを格納する」役割の要素を探し出すために、役割記録部２０によって、役割別要素位置記憶部８０に記憶された情報を参照して行われる。この情報は、ある役割が与えられている要素は、部品を構成する要素のうちどれであるかを対応付けたものである。例えば、「役割名」と「部品内での要素位置」のペアが格納されたテーブルである。

要素処理部３０において、属性や内容を変更する、あるいは子要素を追加または削除等の処理がなされた後の要素のデータは、文書記憶部６０に格納される。

文書表示部４０は、ユーザの操作指示を受け付け、文書記憶部６０に格納された文書に含まれる要素、スタイル情報などを解釈し、モニタ等の画面上に表示させるものである。要素処理部３０で実行された要素の内容や属性の変更あるいは子要素の追加または削除等の処理を反映した文書が表示されることになる。文書表示部４０としては、例えば、Internet Explorer（商標）やFirefox（商標）などのWebブラウザが該当する。

要素役割対応表記憶部５０は、部品毎の要素役割対応表を記憶しておくものである。要素役割対応表は、部品が必要とする全ての役割について、その役割を担う要素を特定するための情報を記したものである。要素を特定するための情報としては、以下のものがある。

（１）要素の要素名やクラス名など、要素を特定するための属性
（２）要素の包含関係や部品内での出現位置など、部品内での要素の位置を特定するための情報
（３）役割を担う上で、要素の存在が必須なのか任意なのか、いくつ存在できるのかなど、要素の存在数情報
要素役割対応表によれば、静的に記述した要素に、対応表に則って自動的に役割が割り当てられる。そのため、役割のない要素は部品の動作に影響しないため、部品内部に要素を追加して部品を装飾することができる。

図３は、要素役割対応表の一例を示す図である。図３では、ボタン部品を例にとって示している。図３に示す例では、“クリック受付”、“テキスト表示”の各役割に対して、各役割を担う要素を特定している。

文書記憶部６０には、文書とともに、文書を構成する部品、部品を構成する要素も記憶される。例えば、HTML（Hyper Text Markup Language）、CSS、JavaScript（登録商標）で記述されたWebページも文書の１つとして格納される。

部品位置記憶部７０は、指示受付部１０に入力された“要素の位置”情報に基づいた“部品の位置”を記憶しておく。ここで、「位置」は文書内の要素へのポインタであって、例えば画面上に表示される文書上でのXY座標を表すものではない。尚、部品位置記憶部７０は、初期化時に一時的に領域を確保する使われ方でもよい。

役割別要素位置記憶部８０は、各役割について、その役割をもつ要素の“要素の位置”を対応付けて記憶しておく。例えば、「役割名」と「部品内での要素位置」のペアが格納されたテーブルで記憶される。ここで、「位置」は文書内の要素へのポインタであって、例えば画面上に表示される文書上でのXY座標を表すものではない。役割別要素位置記憶部８０は、要素処理部３０で部品の操作毎に参照される。

図４は、役割に対応する要素への参照を役割別要素位置記憶部８０に格納する一例を示すものである。図４では、ボタン部品を例にとって示している。図４に示す例では、“クリック受付”、“テキスト表示”の各役割に対応する要素が格納されている。

＜役割の記録処理＞
図５は、役割記録部２０における役割を記録するときの処理の流れを示すフローチャートである。

まず、要素役割対応表から全ての役割を読み込んだか否かを判定する（ステップＳ５１）。

すべての役割を読み込んでなければ（ステップＳ５１でＮｏ）、次に、要素役割対応表からまだ読み込んでいない役割を1つ読み込む（ステップＳ５２）。

次いで、読み込んだ役割に示されている要素を文書記憶部６０に格納されている部品を構成するすべての要素の中から検索する（ステップＳ５３）。

次に、要素が見つかったか否かを判定する（ステップＳ５４）。

要素が見つかったならば（ステップＳ５４でＹｅｓ）、見つかった要素の役割と位置を役割別要素位置記憶部８０に記録する（ステップＳ５５）。その後、ステップＳ５１に移行する。

一方、要素が見つからなかったならば（ステップＳ５４でＮｏ）、次に、役割の要素は必須であるか否かを判定する（ステップＳ５６）。

役割の要素が必須でなければ（ステップＳ５６でＮｏ）、ステップＳ５１に移行する。役割の要素が必須であれば（ステップＳ５６でＹｅｓ）、異常終了する。

ステップＳ５１でＹｅｓ、すなわち全ての役割を読み込んでいれば、役割を記録する処理は終了する。

＜要素処理＞
図６は、要素処理部３０における要素処理の流れを示すフローチャートである。

まず、部品の種類、機能の種類、機能で使用するデータを受け取る（ステップＳ６１）。

次に、役割別要素位置記憶部８０から、機能で使用する要素を取得する（ステップＳ６２）。

次いで、要素が取得できたか否かを判定する（ステップＳ６３）。

要素が取得できたならば（ステップＳ６３でＹｅｓ）、取得した要素に対して、属性・内容の変更や子要素の追加などを行い（ステップＳ６４）、要素処理部３０における要素に対する処理を終了する。

一方、要素が取得できなければ（ステップＳ６３でＮｏ）、要素処理部３０における要素に対する処理を終了する。

[実施例１]
次に、本実施形態に係るWebページ作成装置１において、部品の外観を変更する例について説明する。実施例１では、ボタン上に表示させるimg要素としての画像を追加するとともに、表示テキストを変更する。図７は、部品の外観を変更する実施例を説明する図である。まず、図７（ａ）に示すように、ボタン部品の要素役割対応表を作成する。図７（ａ）の要素役割対応表に示すように、ここでの実施例では、img要素の追加に併せてspan要素を追加し、表示テキストをその中に移動させ、span要素にts-button-textクラスを指定する。

さらに、ボタン部品上の表示テキストの変更では、役割“テキスト表示”の要素を取得する（ts-button-textクラス）。その要素の内容を「Log Out」で置換する。実施例１では、img要素は“テキスト表示”要素の外なので、図７（ｂ）に示すように、消されずに残っている。

[実施例２]
次に、本実施形態に係るWebページ作成装置１において、ボタン部品のテキストを変更する例について説明する。図８は、ボタン部品のテキストを変更する実施例を説明する図である。実施例２では、単純なボタンの場合を実施例２−１とし、要素構造を変化させて外観を変更した内枠があるボタンの場合を実施例２−２として説明する。

(1) あらかじめボタン部品を構成するすべての要素を記述する（図８（ａ）参照）。
(2) 部品のルート要素の位置を入力する。例えば、下のように、jQuery（商標）などで、文書記憶部６０内の部品のルート要素を選択してから入力する。
$(‘.ts-button’).button()
指示受付部１０は、部品のルート要素の位置を受け取り、部品位置メモリに記憶する。
(3) 各役割に対応する要素を探し（図８（ｂ）参照）、その位置を役割別要素位置記憶部８０に記録する（図８（ｃ）参照）。
(4) テキスト変更指示を受けて、ボタンのテキストを変更する。例えば、jQuery（商標）で、$(‘.ts-button’).button(‘option’, ‘text’, ‘OK’);
“テキスト表示”要素の内容を書き換える（図８（ｄ）参照）。

[実施例３]
次に、本実施形態に係るWebページ作成装置１において、文書を変化させる例について説明する。図９は、文書を変化させる実施形態を、従来手法と対比して説明する図である。図９（ａ）は、文書に記述（入力）する例であり、図９（ｂ）は、文書を初期化する例であり、図９（ｃ）は、入力領域の３０％を示す例である。図９に示すように、従来手法に比べて、本実施形態では、入力と初期化後の文書に変化がない、すなわち入力した部品の要素構造を崩すことなく部品を動作させることができる。本実施形態によれば、ボタンに画像を追加する例と同様に、要素の中に装飾目的の要素を追加しても、プログレス部品の機能が正しく動作する。

以上説明したように、本実施形態によれば、Webページの作成において、部品の要素の構造を可変にして、要素の構造を変更しても部品を正しく動作させることができる。

本発明のいくつかの実施形態を説明したが、これらの実施形態は、例として提示したものであり、発明の範囲を限定することは意図していない。これら新規な実施形態は、その他の様々な形態で実施されることが可能であり、発明の要旨を逸脱しない範囲で、種々の省略、置き換え、変更を行うことができる。これら実施形態やその変形は、発明の範囲や要旨に含まれるとともに、特許請求の範囲に記載された発明とその均等の範囲に含まれる。

１・・・Web ページ作成装置
１０・・・指示受付部
２０・・・役割記録部
３０・・・要素処理部
４０・・・文書表示部
５０・・・要素役割対応表記憶部
６０・・・文書記憶部
７０・・・部品位置記憶部
８０・・・役割別要素位置記憶部

Claims (8)

1. 文書を構成する部品について、部品の種類と、部品を構成する要素の位置を入力する指示受付部と、
   前記部品が必要とする全ての役割について各役割を担う前記要素を特定するものであって、各役割を持つ前記要素の位置を記した要素役割対応表を、部品毎に記憶しておく要素役割対応表記憶部と、
   前記要素役割対応表を参照して、前記部品を構成する前記要素を検索し、各要素に役割を対応付ける役割記録部と、
   前記部品を構成する前記要素のうち、前記所定の役割を対応付けられた前記要素に対して、属性や内容を変更し、あるいは子要素を追加または削除する処理を行う要素処理部とを、
   備えるWebページ作成装置。
2. ユーザの操作指示を受け付け、前記文書に含まれる前記要素、スタイル情報を解釈し、前記要素処理部での処理を反映した前記文書を表示させる文書表示部を備える請求項１記載のWebページ作成装置。
3. 前記役割記録部において、前記要素の検索開始位置として、前記部品の位置の情報を使用する請求項１又は請求項２記載のWeb ページ作成装置。
4. 前記文書とともに、前記文書を構成する前記部品、前記部品を構成する前記要素も記憶する文書記憶部を備え、
   前記要素処理部において属性や内容を変更する、あるいは子要素を追加または削除の処理がなされた後の前記要素を文書記憶部に格納する請求項１乃至請求項３のいずれか１項に記載のWebページ作成装置。
5. 前記指示受付部に入力された前記要素の位置の情報に基づいた前記部品の位置の情報を記憶しておく部品位置記憶部と、
   前記役割について、各役割を担う前記要素の位置を対応付けて記憶しておく役割別要素位置記憶部を備える請求項１乃至請求項４のいずれか１項に記載のWebページ作成装置。
6. 前記要素を特定するための情報は、
   （１）前記要素の要素名やクラス名の前記要素を特定するための属性
   （２）前記要素の包含関係や前記部品内での出現位置であって、前記部品内での前記要素の位置を特定するための情報
   （３）前記役割を担う上で、前記要素の存在が必須なのか任意なのか、いくつ存在できるのかの前記要素の存在数の情報
   のいずれかである請求項１乃至請求項５のいずれか１項に記載のWebページ作成装置。
7. 前記要素の位置は、前記文書内の要素へのポインタである請求項１乃至請求項６のいずれか１項に記載のWebページ作成装置。
8. 前記役割別要素位置記憶部は、前記要素が担う役割名と、前記部品内での前記要素の位置のペアが格納された表形式で記憶する請求項１乃至請求項７のいずれか１項に記載のWebページ作成装置。

Images