この文書は、W3C 標準情報 (TR) の覚書 (NOTE)、"HTML Components" <http://www.w3.org/TR/1998/NOTE-HTMLComponents-19981023> を ToyFish.Net が独自に翻訳したものです。この仕様書の正式なものは W3C のサイトにある英語版であり、その著作権は W3C が保有しています。また、翻訳に誤りがある可能性に留意してください。
翻訳の最終更新日: 1999 年 10 月 20 日
この文書は World Wid Web Consortium (Submission Request、W3C Staff Comment を参照) への 提案です。W3C メンバーのレビューとコメント用としてのみ意図されています。
この文書は W3 Consortium で議論用のみに用意された NOTE です。 これは、文書の内容や、Consortium が過去、現在、未来において この NOTE にある問題にリソースを割り当てることを保証するものではありません。
アプリケーションのプラットフォームとしてのスクリティングつき HTML は、 近年急速に成長しています。この成長を妨げる要素の一つは、HTML アプリケーションが提供しうる サービスを形式として定め、別の HTML ページやアプリケーションでコンポーネントとして 再利用するための方法がないということです。HTML Components はこれを不足だと位置づけます。 HTML Component (HTC) は HTML、スタイルシート、スクリプトとして実装された コンポーネントを、再利用可能なカプセル化するための機構を提供します。
コンポーネント化は、コンポーネント利用者が「構築ブロック」を使ってアプリケーションを 構築できる強力なパラダイムです。構築ブロックは、構築ブロックそれ自体を実装する必要は なく、それがどのように働いているのかを非常に詳しく理解する必要もない機能です。 この方法では、より管理しやすい単位に分割することで複雑なアプリケーションの構築が 簡単になり、他のアプリケーションから利用することもできるようになります。 HTML Components は、この強力な開発手法をウェブアプリケーションにも持ち込むものです。
今日、ウェブアプリケーションを開発するには、望みのダイナミックな効果を実現するには サイト設計者が頻繁に膨大な量のスクリプトを書かなければなりません。 これらのスクリプトは典型的には特定のページに直接書き込まれています。 スクリプトを他のスクリプトから抽出する方法がないので、ページの内容を変更したら、 そのスクリプトは書き直さなければなりません。 HTML Components はこのための機能を提供します。
HTML Component は、基本的には、その Component が公開するプロパティとメソッドや その HTC に割り当てられ HTC により定義されたイベントを定義する特殊なデスクリプタで ラップされただけの、ただの HTML ページです。 コンポーネント開発に移行する HTML 開発者に簡単な方法を提供するために、 HTC は文書内に定義された XML 要素がいくつか挿入された本当に普通の HTML ファイルに なっています。これは既存の HTML アプリケーションに対して簡単で一貫性のある移行方法を 提供します。
HTML Components はいろいろな状況で有用です。 利用法のひとつは、ある HTML ページの特定の要素に HTML Component を 関連付けて、Component がイベントハンドリングやカスタムイベントの発動、 他のオブジェクトモデルのサービス (プロパティとメソッド) を その HTML ページに提供できるようにするというものです。 HTC のもう一つのありえる利用法は、クロスドメインなスクリンプティングアクセスを 提供するというものもあります。HTC はプロパティやメソッドやイベントを、 そのドメインの外からもアクセスできるように宣言することができます。
HTML Component は数多くの理由から HTML で構築されます --- HTML は 有力でよく知られた意味集合であり、スクリプティングやオブジェクトモデルの意味付けを すでに広い範囲でサポートしています。HTML Component は通常の HTML 要素を含むことが できます --- ただしデフォルトでは、可視的な要素やテキストの内容は Component を割り当てられる HTML 要素にのみ配置されます。
注意: この文書の記述では、名前空間を明記すべき HTC 要素でも、 HTML のタグでは適切な名前空間の定義を付して示しません (特定の名前空間を 選ぶ必要があるため)。このコンポーネント独自の要素のセットは、HTML に追加されるものでは ありません。文書にくわえることのできる新しい XML 要素のセットなのです。 例示もこの要求を反映しています。HTC 要素は HTML の HEAD に置くべきです。
<COMPONENT> 要素は HTML Component を示すコンテナを与えます。 必須ではありませんが、HTML Component の利用者がこの特定のコンポーネントによって 実際に発動されるイベントを確定するのを助けるために、 多くのインスタンスでは あった方が便利です。<COMPONENT> 要素は、この HTC の識別子の位置を提供するほか プロパティやメソッドやイベントをバインドするのに使います。
書式
<COMPONENT URN=文字列>
属性
- URN
- 必須。コンポーネントを他と識別する Uniform Resource Name (URN) 形式の文字列。 これによって、複数の動作が同じ名前のイベントを発動しうる場合に、 イベントオブジェクトの srcURN プロパティを、そのイベントを発動した動作の URN に 設定することで、イベントを他と区別することができる。
要素情報
出現回数 なし、あるいは Component の公開されるインタフェースごとに 1 回 親要素 なし 子要素 ATTACH、EVENT、 METHOD、PROPERTY
<PROPERTY> 要素は、HTC 利用者に対して公開される HTML Component のプロパティ を定義します。
書式
<PROPERTY
NAME = 文字列
ID = 文字列
GET = 文字列
PUT = 文字列
PERSIST = 文字列
>
属性
- NAME
- 必須。この文書にプロパティを定義する文字列。既定では、 指定した NAME が Component 内のプロパティを参照するのに使われる。
- ID
- 必須ではない。Component 内のこのプロパティ要素を識別するための 文字列 (HTML の ID 属性と同様)。
- GET
- 必須ではない。プロパティの値を取得する時に呼び出される関数を指定する文字列。
- PUT
- 必須ではない。プロパティの値を設定する時に呼び出される関数を指定する文字列。
- PERSIST
- 必須ではない。このプロパティが HTC 利用者 HTML 文書の永続化をサポートする場合に このプロパティがページの一部として永続化されるべきかを示す真理値。
オブジェクトモデルのメソッド
- propertyID.fireChange()
- HTML Component は、割り当てられた要素にonpropertychange イベントを起こす ことで、プロパティの値が変更されたことを、自身を含んでいる文書に知らせるために、 <PROPERTY> 要素にあるこのメソッドを呼ぶことができます。
要素情報
出現回数 何回でも 親要素 COMPONENT またはなし 子要素 なし
注釈
XML では、空要素は "/>" で終わる開始タグで示されます。 従って、<PROPERTY> 要素は次のように書くことができます。
<PROPERTY NAME="width" />それを呼び出す要素に対してすでに定義済みの標準のプロパティ同様に、NAME を 指定することで、Component はその要素の通常のプロパティを、名前を使ってオーバーライド できます。
例
次の例は、HTML Component を通じてマウスイベントから状態プロパティを提供する 例を実装したものです。HTC は、マウスカーソルが現在その要素の上にあるかどうかを 示すために、それを含む文書に対して 'hovering'プロパティを公開しています。
<HTML xmlns:PUBLIC="urn:HTMLComponent"> <PUBLIC:PROPERTY NAME="hovering" GET="get_hovering"/> <PUBLIC:ATTACH EVENT="onmouseover" HANDLER="event_onmouseover" /> <PUBLIC:ATTACH EVENT="onmouseout" HANDLER="event_onmouseout" /> <SCRIPT LANGUAGE="JScript"> var mouseover = false; function event_onmouseover() { mouseover = true; } function event_onmouseout() { mouseover = false; } function get_hovering() { return mouseover; }
<METHOD> 要素は、HTML Component (HTC) 利用者に公開される、HTC の プロパティを定義します。
書式
<METHOD
NAME = 文字列
/>
属性
- NAME
- 必須。この文書に公開するメソッドの名前を指定する文字列。既定では、 INTERNALNAME 属性が指定されない限り、 コンポーネント内でメソッドを参照するのにも NAME 属性が使われる。
要素情報
出現回数 何回でも 親要素 COMPONENT またはなし 子要素 なし
注釈
この要素にすでに定義されている標準のメソッド名同様に、NAME 属性を 指定することで、Component はそのメソッドに対するこの要素での実装を オーバーライドすることができます。
例
次のコードは、startFlying() メソッドを HTC からそれを含む文書に公開するための METHOD タグの書き方を例示したものです。
<HTML xmlns:PUBLIC="urn:HTMLComponent"> <PUBLIC:METHOD NAME="startFlying" /> <SCRIPT LANGUAGE="JScript" > function startFlying() { // 移動のコードを挿入する } </SCRIPT>この例については、詳しくは例 の節を 参照してください。
HTML Component が HTC 利用者と通信するために使うイベントを定義します。 このイベントは、すでに定義されている HTML のイベント (例えば onmouseover イベント) でも、 Component がこの場で定義する "カスタムイベント" でもかまいません。 どちらの場合も、Component が利用者に対してこのイベントを発動したり受け取ったり したいということを <EVENT> 要素が定義します。
書式
<EVENT
NAME = 文字列
ID = 文字列
/>
属性
- NAME
- 必須。HTC 利用者に公開されるイベントの名前を指定する文字列。
- ID
- 必須ではない。コンポーネント内でイベントタグを識別するための文字列。
メソッド
- this.fire([oEvent])
- HTC 利用者に対してイベントを発動します。このメソッドは、コンテキスト情報を もったイベントオブジェクトを指定する oEvent 引数を使うこともできます。 イベントオブジェクトの詳細は、W3C Document Object Model の将来の版で定義されます。
要素情報
出現回数 何回でも 親要素 COMPONENT またはなし 子要素 なし
注釈
同じ NAME 属性を要素にすでに定義された標準のイベントに定義することで、 動作をその要素の既定のそのイベントに対するイベントハンドラをオーバーライドできます。
動作に対して定義されたイベントは、発生するものではなく、その動作が割り当てられた 要素に対して発動するだけです。
例
次の例は、電卓の動作例に基づいています。結果が変化するたびに、HTC は カスタムの onResultChange イベントをページに対して発動し、 結果をイベントオブジェクトに追加したプロパティとして渡します。 この例では createEventObject() メソッドを想定しています。 Document Object Model では今のところイベントをカバーしていないので、 この使い方は一時的なものかもしれません。
<HTML xmlns:PUBLIC="urn:HTMLComponent"> <PUBLIC:EVENT NAME="onResultChange" ID="eventOnResultChange" /> <SCRIPT LANGUAGE="JScript"> function doCalc() { : oEvent = createEventObject(); oEvent.result = sResult; eventOnResultChange.fire (oEvent); }これを使うページはつぎのようになります。
<HTML xmlns:LK="urn:com.microsoft.htc.samples.calc"> <HEAD> <STYLE> LK\:CALC { behavior:url(engine.htc); } </STYLE> </HEAD> <LK:CALC ID="myCalc" onResultChange="resultWindow.innerText=window.event.result"> <TABLE> <TR><DIV ID="resultWindow" STYLE="border: '.025cm solid gray'" ALIGN=RIGHT>0.</DIV></TR> <TR><TD><INPUT TYPE=BUTTON VALUE=" 7 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" 8 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" 9 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" / "></TD> <TD><INPUT TYPE=BUTTON VALUE=" C "></TD> </TR> <TR><TD><INPUT TYPE=BUTTON VALUE=" 4 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" 5 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" 6 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" * "></TD> <TD><INPUT TYPE=BUTTON VALUE=" % " DISABLED></TD> </TR> <TR><TD><INPUT TYPE=BUTTON VALUE=" 1 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" 2 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" 3 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" - "></TD> <TD><INPUT TYPE=BUTTON VALUE="1/x" DISABLED></TD> </TR> <TR><TD><INPUT TYPE=BUTTON VALUE=" 0 "></TD> <TD><INPUT TYPE=BUTTON VALUE="+/-"></TD> <TD><INPUT TYPE=BUTTON VALUE=" . "></TD> <TD><INPUT TYPE=BUTTON VALUE=" + "></TD> <TD><INPUT TYPE=BUTTON VALUE=" = "></TD> </TR> </TABLE> </LK:CALC> </HTML>
<ATTACH> 要素は、イベントがそのコンポーネントの要素で発動した時に その関数が呼ばれるように、HTC の関数をイベントに関連付けます。
書式
<ATTACH
EVENT = sEvent
FOR = "document" | "element" | "window"
HANDLER = sEventHandler
URN = sURN
/>
属性
- EVENT
- 必須。Object Model のイベント、つまり HTC 独自のイベント か oncontentchange か ondocumentready のいずれかの 名前を指定する文字列。
- FOR
- 必須ではない。イベントの発動先となるオブジェクトを示す文字列値。
document コンポーネントはイベントを document オブジェクトに関連付け、送信する。 element コンポーネントはイベントを要素オブジェクトに関連付け、送信する window コンポーネントはイベントをウィンドウオブジェクトに関連付け、送信する。 - HANDLER
- 必須。イベントを受け取る関数の名前を指定する文字列。
- URN
- 必須ではない。イベントを関連付けるソースの URN を指定する文字列。 これは、そのイベントに複数のソースが存在する場合に有用。
要素情報
出現回数 何回でも 親要素 COMPONENT またはなし 子要素 なし
注釈
関連付けられたコンポーネントに対して指定したイベントが発動すると、 コンポーネントのイベントハンドラよりも先に、その要素のイベントハンドラが 最初に呼ばれます。
例
以下の例は HTC を使ってないようの展開・縮退を実装したものです。 HTC は要素の onclick イベントに関連付け、onclick イベントを 受け取るたびにリストの展開・縮退を行ないます。 さらに、マウスが上にある時に展開可能なリスト項目が指されているとして強調表示効果を 実装するために、要素の onmouseover および onmouseout イベントにも関連付けています。 この例では、7 節で書かれている 'element' オブジェクトを利用しています。
<HTML xmlns:PUBLIC="urn:HTMLComponent"> <PUBLIC:PROPERTY NAME="child" /> <PUBLIC:ATTACH EVENT="onclick" HANDLER="onclick_handler" /> <PUBLIC:ATTACH EVENT="onmouseover" HANDLER="onmouseover_handler" /> <PUBLIC:ATTACH EVENT="onmouseout" HANDLER="onmouseout_handler" /> <SCRIPT LANGUAGE="JScript"> function onmouseover_handler() { element.style.color = "red"; } function onmouseout_handler() { element.style.color = "black"; } function onclick_handler() { var i; var sDisplay; // 子の現在の display プロパティを基に、リストの現在の状態 (つまり、展開されているか // 縮退されているかを確定します。 bCollapsed = (document.all(child).style.display == "none"); if (bCollapsed) { element.style.listStyleImage = "url('/workshop/graphics/blueminus.gif')"; element.style.display = ""; } else { element.style.listStyleImage = "url('/workshop/graphics/blueplus.gif')"; element.style.display = "none"; } } </SCRIPT>
HTML Component には Components に独自なイベントも 2 つあります。 そのイベントは、Component とそのホストの関係によります。
ondocumentready イベントは、その動作を含む文書がパーズされた時に発動します。
例
次の例は、ページ上の ondocumentready イベントの基本的な使い方を示します。
<ATTACH EVENT=ondocumentready HANDLER=documentready_handler /> <SCRIPT LANGUAGE="JScript"> function documentready_handler() { window.alert ("ondocumentready イベントが発動しました。"); } </SCRIPT>
'oncontentchange' イベントは、Component が関連付けられた要素がパーズされたときや 要素の内容が変更されたときに発動します。
例
次のサンプルコードはページ上の oncontentchange イベントの 基本的な使い方を示します。
<HTML xmlns:PUBLIC="urn:HTMLComponent"> <PUBLIC:ATTACH EVENT="oncontentchange" HANDLER="contentchange_handler" /> <SCRIPT LANGUAGE="JScript"> function contentchange_handler() { window.alert ("oncontentchange イベントが発動しました。"); } </SCRIPT> </HTML>
さらに、HTC は "element" オブジェクトをその HTML Component の オブジェクトモデルの利用者に公開します。そのコンポーネントはもとの文書のオブジェクト モデルで公開されていた、同じ Element オブジェクトです。 こうすると HTC は関連付けられた HTML 要素に直接にアクセスして影響することができます。 これがどう使えるかの例については、6 節を参照してください。
この節は規範的なものではありません。この文書では HTML Component から HTML 文書の 要素へのリンク機構があると仮定しています。この文書の例の中には、 W3C によって承認されていない CSS スタイルシートのリンク機構を使っているものがあります。 このリンク機構は現在議論中で、大きく変わることがあります。
この文書の例で使われているリンク機構は、カスケーディング・スタイルシートに 追加されるべき新しいプロパティです。
| 値: | <uri> | none | inherit |
| 初期値: | none |
| 適用対象: | すべての要素 |
| 継承: | なし |
| 割合: | 不可 |
| メディア: | すべて |
このプロパティは、要素を、その要素のオブジェクトモデルを通じて動的な動作を受け取る ことのできるハンドラにリンクします。この文書の目的 (HTC の説明) としては、 このハンドラは HTML Component でなければなりません。
次のコードは、移動効果のコンポーネントを例示しています。 このコンポーネントを使うと、ページ製作者が動的な移動の効果を自分のページに 簡単に加えることができます。このコンポーネントは、 Document Object Model Working Group がまだ承認していない インラインスタイルのオブジェクトを利用しています。
このコンポーネントは HTML Component の機能を最大に活用しています。 ページ製作者が移動効果の種類を制御できるようにプロパティを、 効果を開始・終了するためにメソッドを、ページに必要なプロパティを設定し エフェクトの終了時にページに通知するためにカスタムのイベントを使っています。
<HTML xmlns:PUBLIC="urn:HTMLComponent"> <PUBLIC:METHOD NAME="start" /> <PUBLIC:METHOD NAME="stop" /> <PUBLIC:PROPERTY NAME="direction" GET="getDir" SET="setDir" /> <PUBLIC:EVENT NAME="onFlyFinished" /> <PUBLIC:ATTACH EVENT="onclick" HANDLER="onClick" /> <SCRIPT LANGUAGE="ECMAScript" > var direction = 0; // 0 = 左, 1 = 上, 2 = 右, 3 = 下 var x = 0; var y = 0; var xScaler = 0; var yScaler = 0; var bFlying = false; var timer; function start() { switch ( direction ) { case 0: // 左 x = -100; xScaler = 5; y = 0; yScaler = 0; break; case 1: // 上 x = 0; xScaler = 0; y = -100; yScaler = 5; break; case 0: // 右 x = 100; xScaler = -5; y = 0; yScaler = 0; break; default: // 下 x = 0; xScaler = 0; y = 100; yScaler = -5; break; } bFlying = true; element.style.position = "relative"; tick(); } function stop() { if ( bFlying ) { window.clearTimeout( timer ); element.style.left = "0"; element.style.top = "0"; bFlying = false; var eventElem = document.getElementsByTagname( "public:event" )[0]; var oEvent = createEventObject(); eventElem.fire( oEvent ); } } function setDir( dir ) { if ( dir == "left" ) direction = 0; else if ( dir == "top" ) direction = 1; else if ( dir == "right" ) direction = 2; else direction = 3; } function getDir() { switch ( direction ) { case 0: return "left"; break; case 1: return "top"; break; case 0: return "right"; break; default: return "bottom"; break; } } function tick() { element.style.left = x; element.style.top = y; x += xScaler; y += yScaler; if ( x == 0 && y == 0 ) stop(); else timer = window.setTimeout( "tick()", 100 ); } function onClick() { alert( "x is '" + x + "%', y is '" + y + "%'." ); } </SCRIPT>これを使った HTML ページは次のようになります。
<HTML> <HEAD> <STYLE> #flier { behavior: url( fly.htc ); text-align: center; } </STYLE> </HEAD> <BODY> <H1 ID=flier>動くタイトル!</H1> <P><BUTTON onclick="document.getElementsByTagname( "H1" )[0].stop();">Stop</BUTTON></P> <SCRIPT> var flyingElem = document.getElementsByTagname( "H1" )[0]; flyingElem.onFlyFinished = "alert('移動終了');" flyingElem.direction = "left"; flyingElem.start(); </SCRIPT> </BODY> </HTML>