エレメントビヘイビア

[アーティクル]
12/10/2008

これは暫定的なドキュメンテーションであり、変更される可能性があります。

Microsoft® Internet Explorer 5.5 では、HTML コンポーネント (HTC) を使ってカスタムタグ、すなわちエレメントビヘイビアを作成することができます。エレメントビヘイビアを使うと、DHTML ビヘイビアを完全にエレメントにバインドすることができます。これにより、エレメントビヘイビアは HTML ドキュメントの中で他のエレメントと同じように使用することができ、ビヘイビアの機能がエレメントから決して削除されないことが保証されます。

これまでメインの HTML ファイルに入れられていたスクリプトは、現在は HTC ファイルに入れることが可能になり、HTML ファイルの中でのタグの使用が、HTC ファイルの中での実装から完全に隔離できるようになりました。Microsoft® Internet Explorer 5 でビヘイビアが導入される前は、ビヘイビアを変更したいタグの個々のインスタンスに対してスクリプトをアタッチする必要がありました。ビヘイビアの登場により、既存の個々のタグに自動的にアクションをアタッチできるようになりましたが、エレメントビヘイビアはこの機能を拡張して、カスタムタグにもビヘイビアをアタッチできるようにします。

従来は、プログラマがスクリプトを書き、デザイナがレイアウトの問題を扱うという分業が行われてきました。このような分業体制は Web パラダイムではあまりうまく機能しません。HTML ファイルにはスクリプトとタグが混在していることが多く、個々人の責任を分割するのが難しいからです。しかし、エレメントビヘイビアの登場により、デザイナは HTML ファイルを扱い、スクリプト開発者は HTC ファイルの作業を行うという完全な分業が可能になります。

この概要では、エレメントビヘイビアについて説明し、サンプルコードを示します。

このドキュメントでは以下のトピックを扱っています。

エレメントビヘイビアによるカスタムタグの作成
ロールオーバータグの作成
タグの中の内容へのアクセス
リテラルコンテンツ
エレメントビヘイビアタグの要約
関連トピック

エレメントビヘイビアによるカスタムタグの作成

PUBLIC:COMPONENT タグの新しい tagName 属性を使って、HTC の中にタグの実装をカプセル化することができます。エレメントビヘイビアは同期的なので、Microsoft® Internet Explorer はエレメントビヘイビアが最初に使用される前に、そのエレメントビヘイビアを完全にロードします。ロードを確実に完了させるために、イベントハンドラを書く必要はなくなりました。

エレメントビヘイビアの用途の 1 つに、Microsoft® ActiveX® コンポーネントと OBJECT タグに似た、Web ページでの利用が可能な「Component Object Model (COM) コンポーネントを作成する」というものがあります。次の例は、オンラインのチェッカーゲームの作成方法を示しています。スクリプトオーサーは、Internet Explorer 5.5 とエレメントビヘイビアの組み合わせにより、ゲーム (この例ではチェッカーゲーム) をインプリメントする HTC を作成し、デザイナはこの新しく作成されたタグを Web ページ上で使用します。スクリプトオーサーは checkers.htc という名前の HTC ファイルを作成します。


<PUBLIC:COMPONENT tagName="checkers">
<SCRIPT>

</SCRIPT>
</PUBLIC:COMPONENT>

このように、スクリプトオーサーはチェッカーゲームのスクリプトを SCRIPT タグの間に書くことになります。チェッカーゲームの実装は、checkers.htc ファイルに完全に含まれている、つまりカプセル化されています。

この新しいチェッカータグを使用するには、まず新しい名前空間を作成します (タグは名前空間の中に存在していなくてはなりません)。名前空間は XMLNS 属性を使って宣言します。


<HTML XMLNS:games>

上のタグは、games という名前の名前空間を宣言しています。次に、HTC に含まれているタグの定義をインポートします。


<?IMPORT namespace="games" implementation="checkers.htc" >

このタグは他のタグと同じように使用することができますが、名前の中で名前空間の名前を指定する必要があります。


<games:checkers />

また、次のように使用することもできます。


<games:checkers></games:checkers>

チェッカーのインプリメンテーションを使用する HTML ファイルは次のようになります。


<HTML xmlns:games>
<?IMPORT namespace="games" implementation="checkers.htc" >
<BODY>
<games:checkers />

</BODY>


</HTML>

checkers.htc ファイルは、checkers タグの定義と、チェッカーゲームの実装を含んでいます。


<PUBLIC:COMPONENT tagName="checkers">
<SCRIPT>

</SCRIPT>
</PUBLIC:COMPONENT>

checkers タグの実装が名前空間への参照を含んでいないことに注意してください。実際のアプリケーションでは、メイン HTML ファイルの中で同じタグを複数の名前空間にインポートすることができます。また、新しいタグでは、イベントハンドラを使って、タグ定義がその使用の前にロードされていることを確認する必要がないことに注意してください。

注ユーザーが checkers タグをコピーして貼り付けると、Internet Explorer は名前空間宣言と IMPORT 処理命令も同時にコピーします。これにより、エレメントビヘイビアの整合性が保たれます。コピーと貼り付けを正常に機能させるためには、名前空間宣言とインポートタグが必要です。

checkers タグの現在のインプリメンテーションには、チェッカーボードの外見や、指し手の強さといった設定を指定するための属性がありません。開発者は、Internet Explorer 5 の通常のビヘイビアと同じように、PUBLIC:PROPERTY タグを使って checkers タグに属性を追加することができます。例:


<PUBLIC:PROPERTY NAME="boardWidth" />

ビヘイビアで PUBLIC:PROPERTY タグを使用する方法については、HTML コンポーネントを使ってスクリプトで DHTML ビヘイビアをインプリメントする方法を参照してください。

ロールオーバータグの作成

これよりも複雑な例として、ロールオーバーをインプリメントするタグの作成を取り上げます。ロールオーバーとは、マウスポインタが上に乗ったときに外見を変えるテキストブロックのことです。一般にロールオーバーは、視覚的なフィードバックによって、ユーザーがどこでマウスをクリックできるのかを知らせるために使用されます。

注この例は、エレメントビヘイビアを使ってロールオーバータグをインプリメントする方法を示しています。しかし、ロールオーバーのインプリメントとしては、A タグのビヘイビアを変更するという方法の方が優れています。この方法では、新しいタグを使わなくても、現在の Web ページにロールオーバー効果を追加することができます。アタッチされたビヘイビアを使ってロールオーバーをインプリメントする方法の例については、Using DHTML Behaviors を参照してください。

ロールオーバー HTC ファイルの作成

HTC ファイルはロールオーバータグの実装を含んでいます。このタグは、ユーザーがロールオーバーをクリックしたときの移動先となる Web ページのハイパーリンクである、href という名前のプロパティを 1 つ持っています。ロールオーバータグは、3 つの異なるイベントのためのイベントハンドラを作成しなくてはなりません。

onmouseover - ユーザーがマウスポインタをロールオーバーの上に移動したときに発生します。イベントハンドラは、テキストを赤に変更し、下線を付け、カーソルを手の形に変更します。
onmouseout - ユーザーがマウスポインタをロールオーバーから離したときに発生します。イベントハンドラはテキストを元の状態に戻します。
onclick - ユーザーがロールオーバーをクリックしたときに発生します。イベントハンドラは、href プロパティによって指定されている Web ページをロードします (このプロパティが定義されている場合)。

次の例は、ロールオーバータグのための HTC ファイルの作成方法を示しています。

HTC ファイルを作成します。

rollover.htc という名前のテキストファイルを作成し、ファイルの先頭に次の行を追加します。
```
<PUBLIC:COMPONENT tagName="rollover">
```
この例は、HTC ファイルが rollover という名前のタグのインプリメンテーションを含んでいることを示しています。ファイルの終わりには、次の行を追加します。
```
</PUBLIC:COMPONENT>
```
プロパティ定義を追加します。

最初の行の後に、href のプロパティ定義を追加します。
```
<PUBLIC:PROPERTY NAME="href" />
```
この例は、href プロパティをロールオーバータグの一部として定義しています。
イベントハンドラを作成します。

ロールオーバータグに関連付けられた 3 つのイベントに対応するハンドラをアタッチします。
```
<PUBLIC:ATTACH EVENT="onmouseover" FOR="element" ONEVENT="Hilite()" />
<PUBLIC:ATTACH EVENT="onmouseout" FOR="element" ONEVENT="UnHilite()" />
<PUBLIC ATTACH EVENT="onclick" FOR="element" ONEVENT="GotoLink()" />
```
この例は、ロールオーバーエレメントに、以下のイベントをアタッチしています。
- onmouseover は Hilite() を呼び出します。
- onmouseout は UnHilite() を呼び出します。
- onclick は GotoLink() を呼び出します。
イベントハンドラスクリプトを作成します。

スクリプトを作成し、イベントハンドラを囲む SCRIPT タグを追加します。
```
<SCRIPT>
</SCRIPT>
```
次に、SCRIPT タグの間に、個々のイベントハンドラの定義を追加します。Hilite イベントハンドラについては、次の定義を使用します。
```
function Hilite()
{
    normalColor = element.style.color;
    normalDecoration = style.textDecoration;

    element.style.color = "red";
    element.style.curosr = "hand";
    element.style.textDecoration = "underline";
}
```
Hilite イベントハンドラは、ロールオーバータグに含まれるテキストの色とテキスト装飾を保存し、色を赤に設定し、カーソルを (ハイパーリンクを示す) 手の形に設定し、装飾を下線に設定します。

UnHilite イベントハンドラについては、次の定義を使用します。
```
function UnHilite()
{
    element.style.color = normalColor;
    element.style.textDecoration = normalDecoration;
    element.style.cursor = "";
}
```
このイベントハンドラは、ロールオーバータグに含まれるテキストの色とテキスト装飾を、Hilite イベントハンドラで保存した値に戻します。

最後に、GotoLink イベントハンドラについては、次の定義を使用します。
```
function GotoLInk()
{
    if(element.href)
    {
        location.href=element.href;
    }
}
```
このイベントハンドラは、href プロパティが定義されているかどうかをチェックします。定義されていれば、その Uniform Resource Locator (URL) にナビゲートします。

これでロールオーバータグの実装が完成したので、HTML ファイルの中で使用することができます。

ロールオーバータグの使用方法

次の例は、ロールオーバータグの使用方法を示しています。

HTML ファイルを作成します。

HTML ファイルを作成し、ファイルの先頭で、そのファイルが使用する名前空間を宣言します。この例では addon という名前の名前空間を使用します。名前空間がどのような名前であるかは重要ではなく、何らかの名前が宣言されているということが重要となります。
名前空間を宣言します。

名前空間を宣言するには、次の構文を使用します。
```
<HTML xmlns:addon>
```
タグの実装をインポートします。

次のようにして、タグの実装をインポートします。
```
<?IMPORT namespace="addon"
 implementation="rollover.htc" >
```
インポートタグは処理命令 (PI) と呼ばれ、タグの開始には単なる < ではなく <? を使用します。
新しいタグを使用します。

これで、HTML ファイルの中でタグを使用することができます。例:
```
<addon:rollover 
href="https://www.microsoft.com">Visit the 
Microsoft Web Site</addon:rollover>
```

ユーザーがロールオーバータグの上にマウスポインタを移動すると、そのタグの中に含まれているテキストは下線付きの赤い文字になり、カーソルは手の形に変わります。ユーザーがマウスポインタをロールオーバータグの外に移動すると、カーソルは矢印の形に戻り、テキストは前の状態に戻ります。ユーザーがロールオーバータグの中のテキストをクリックした場合、href 属性が定義されているならば、href 属性によって指定されている URL がロードされます。

タグの中の内容へのアクセス

タグの中に定義されている内容にアクセスするには、element オブジェクトを使用します。たとえば、HTC ファイルの中では、element オブジェクトを参照することで、タグの内容にアクセスし、変更することができます。


element.style.color = "red";

上の例は、タグに含まれているテキストの色を赤に変更します。

また、次の構文を使用すると、HTC から HTML ファイルの document オブジェクトにアクセスすることができます。


element.document

document オブジェクトを単独で使用した場合には、HTC ファイルの document オブジェクトが参照されます。

リテラルコンテンツ

タグを、その中のテキストが解析もレンダリングもされないデータアイランドとして使用したい場合には、PUBLIC:COMPONENT エレメントの literalContent 属性を設定します。これはリテラルコンテンツとも呼ばれます。literalContent 属性を真に設定すると、innerText プロパティを使ってタグの内容にアクセスすることはできなくなります。この目的には、innerHTML プロパティを、oncontentready イベントが起こった後に使用しなくてはなりません。このイベントの前に innerHTML プロパティを使用すると、innerHTML プロパティがまだ使用不可能であることを示すエラーが発生します。

リテラルコンテンツのために oncontentsave という新しいイベントが 1 つ作成されており、既存のイベントである oncontentready にはリテラルコンテンツを扱うための新しい特性が追加されています。

oncontentsave イベントは、保存、コピー、innerText の取得、innerHTML の取得、またはドラッグアンドドロップ操作の際に起こります。

oncontentready イベントは、リテラルコンテンツが innerHTML プロパティに格納され、アクセスの準備ができたときに起こります。

注 innerText プロパティは、リテラルコンテンツのエレメントビヘイビアでは使用できません。このプロパティを HTC ファイルまたは HTML ファイルの中で設定しようとすると、エラーが発生します。このプロパティの読み込みを試みると、null が返されます。代わりに innerHTML プロパティを使用してください。

詳細については、XML Data Islands を参照してください。

エレメントビヘイビアタグの要約

エレメントビヘイビアをインプリメントし、使用するためには、3 つのタグが必要です。

PUBLIC:COMPONENT タグは、HTC ファイルがインプリメントしているタグの名前を識別します。


<PUBLIC:COMPONENT tagName = "tag">

...

</PUBLIC:COMPONENT>

HTML ファイルでは、次のタグが、タグのインポート先の名前空間を宣言します。


<HTML xmlns:namespacename>

...

</HTML>

IMPORT タグは、HTC ファイルから名前空間にタグの実装をインポートします。


<?IMPORT namespace="namespacename"
 implementation="file.htc" >

次の例は、新しいタグの使用方法を示しています。


<namespace:tag>

...

</namespace:tag>

次の方法で共有

エレメントビヘイビア

これは暫定的なドキュメンテーションであり、変更される可能性があります。

エレメントビヘイビアによるカスタムタグの作成

ロールオーバータグの作成

ロールオーバー HTC ファイルの作成

ロールオーバータグの使用方法

タグの中の内容へのアクセス

リテラルコンテンツ

エレメントビヘイビアタグの要約

関連トピック

その他のリソース

次の方法で共有

エレメント ビヘイビア

これは暫定的なドキュメンテーションであり、変更される可能性があります。

エレメント ビヘイビアによるカスタム タグの作成

ロールオーバー タグの作成

ロールオーバー HTC ファイルの作成

ロールオーバー タグの使用方法

タグの中の内容へのアクセス

リテラル コンテンツ

エレメント ビヘイビア タグの要約

関連トピック

その他のリソース

エレメントビヘイビア

エレメントビヘイビアによるカスタムタグの作成

ロールオーバータグの作成

ロールオーバータグの使用方法

リテラルコンテンツ

エレメントビヘイビアタグの要約