エレメント ビヘイビア

  • [アーティクル]

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

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 ファイルの作成方法を示しています。

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

    rollover.htc という名前のテキスト ファイルを作成し、ファイルの先頭に次の行を追加します。

    
<PUBLIC:COMPONENT tagName="rollover">

    この例は、HTC ファイルが rollover という名前のタグのインプリメンテーションを含んでいることを示しています。ファイルの終わりには、次の行を追加します。

    
</PUBLIC:COMPONENT>

  2. プロパティ定義を追加します。

    最初の行の後に、href のプロパティ定義を追加します。

    
<PUBLIC:PROPERTY NAME="href" />

    この例は、href プロパティをロールオーバー タグの一部として定義しています。

  3. イベント ハンドラを作成します。

    ロールオーバー タグに関連付けられた 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() を呼び出します。

  4. イベント ハンドラ スクリプトを作成します。

    スクリプトを作成し、イベント ハンドラを囲む 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 ファイルの中で使用することができます。

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

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

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

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

  2. 名前空間を宣言します。

    名前空間を宣言するには、次の構文を使用します。

    
<HTML xmlns:addon>

  3. タグの実装をインポートします。

    次のようにして、タグの実装をインポートします。

    
<?IMPORT namespace="addon"
 implementation="rollover.htc" >

    インポート タグは処理命令 (PI) と呼ばれ、タグの開始には単なる < ではなく <? を使用します。

  4. 新しいタグを使用します。

    これで、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>

関連トピック