IE5.0以降のHTCコンポーネントの定義の概要

Microsoft IE 5.0 がリリースされる前は、Web プログラミングにおける最大の課題は、コードの再利用と複数ページの共有を実現するコンポーネントを簡単に作成できないことでした。この問題は、DHTML (Dynamic HTML) Web ページプログラマーを常に悩ませてきました。複数のページで繰り返される機能や類似する機能に対応するには、HTML、CSS、JavaScript コードを書き直すしかありません。この状況は IE 5.0 ブラウザのリリース以降改善され、新しい命令組み合わせ方式が導入されました。これにより、特定の機能を実装するためのコードをコンポーネントにカプセル化できるようになり、複数のページでのコードの再利用が実現し、Web ページプログラミングがまったく新しい世界に到達しました。この新しいテクノロジーは、DHTML の「動作」(Behaviors) で説明するものです。

動作は、ページ上の特定の機能またはアクションをカプセル化するシンプルで使いやすいコンポーネントです。 WEB ページ内の要素に「動作」が付加されると、要素の本来の動作が変化します。したがって、Web ページプログラマーは、一般的な DHTML 命令を開発し、元のオブジェクトの一部のプロパティを変更して、「動作」を使用してオブジェクトの機能を強化し、同時にページの HTML コードを簡素化することができます。さらに、「動作」の作成と使用も非常にシンプルで便利であり、必要な知識は、すでに使い慣れている CSS スタイルシート、HTML 命令、および JavaScript スクリプト言語だけです。これについてある程度理解し、実践的なプログラミング経験があれば、「動作」の使い方を学習して習得するのに問題はありません。フォント効果を変更する「ビヘイビア」コンポーネントを例に、「ビヘイビア」の記述方法と使用方法を説明し、「ビヘイビア」がページ編集にもたらす利点と利便性を体験します。

まず、font_efftce.htc という名前の新しいテキストファイルを作成します。「動作」コンポーネントを構成するファイルはすべて .htc 拡張子を持ちます。このファイルの内容は、この「動作」の説明です。作成して使用する手順は次のとおりです。

コードをコピー

コードは次のとおりです。

（１）まず、この「動作」にいくつかのイベントレスポンスを追加します。ステートメントの記述形式は次のとおりです。
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()"/>
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()"/>
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()"/>
<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()"/>
[\s\S ]*\n
「EVENT」は必要なイベント名に対応します。ここでは、nmouseover、onmouseout、onmousedown、onmouseup です。もちろん、特定のニーズに合わせて他のイベント名を追加することもできます。「ONEVENT」は個々のイベントハンドラー、つまりイベントがトリガーされたときに呼び出される関数の名前に対応します。 glowit() 関数はフォントの周囲に赤い輝きを作成します。 noglow() 関数はフォントのグロー効果を排除します。 Font2yellow() 関数はフォントの色を黄色に変更します。 Font2blue() 関数はフォントの色を青に変更します。 4 つのイベントの定義はすべて似ています。
（２）次に、この「動作」にさらに２つの「方法」の定義を追加します。
<PUBLIC:メソッド名="move_down"/>
<PUBLIC:メソッド名="move_right"/>
「NAME」パラメータは、指定された「メソッド」名に対応します。 move_down と move_right は、それぞれ下と右に移動するための「メソッド」に対応する関数名です。メソッド名の後に「()」括弧を付けてはいけないことに注意してください。つまり、「move_down()」のように記述しないでください。これは、「メソッド」定義の構文では許可されていません。
（3）次のステップは、JavaScript スクリプトステートメントを使用して、使い慣れた DHTML 環境の「イベントハンドラー」と「メソッド」に対応する関数コンテンツを記述し、目的の効果を実現することです。具体的な内容については、以下のソースコードを参照してください。「要素」パラメータは、この「動作」が関連付けられているオブジェクトを参照します。これは、「動作」は常にページ上の要素に関連付けられ、この要素を通じて機能するためです。その他の記述はすべて DHTML プログラミングコンテンツなので、詳細には触れません。ご不明な点がある場合は、Microsoft の MSDN 開発ドキュメントの IE ブラウザに関するコンテンツを参照してください。このドキュメントには、詳細な DHTML プログラミングリファレンスコンテンツ、プロパティとメソッドの使用方法などが記載されており、多数の記事とサンプルプログラムも含まれています。特に初心者にとって、Microsoft の MSDN ドキュメントを頻繁に参照することは、良い学習習慣です。必要な答えはほとんど何でも得られます。URL は http://msdn.microsoft.com/ie/ です。
完全な「動作」ドキュメント「font_effect.htc」の内容は次のとおりです。
/////////////////////////「動作」ドキュメントの開始//////////////////////////////
//「動作」に 4 つのマウスイベントを追加します
[コード]
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()"/>
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()"/>
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()"/>
<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()"/>
//「動作」の2つのメソッドを定義する
<PUBLIC:メソッド名="move_down"/>
<PUBLIC:メソッド名="move_right"/>
<スクリプト言語="JScript">
//フォントの色を保存する変数を定義する
var フォントカラー;
//テキストを下へ移動するメソッドを定義する
関数move_down()
{
要素.style.posTop+=2;
}
//テキストを右に移動するメソッドを定義する
関数move_right()
{
要素スタイル.posLeft +=6;
}
//マウスのonmouseupイベントの呼び出し関数を定義する
関数font2blue(){
if (event.srcElement == 要素)
{
要素.style.color='青';
}
}
//マウスの onmousedown イベントの呼び出し関数を定義します
関数font2yellow(){
if (event.srcElement == 要素)
{
element.style.color='黄色';
}
}
//マウスの onmouseover イベントの呼び出し関数を定義します
関数 glowit()
{
if (event.srcElement == 要素)
{
フォントカラー=スタイル.色;
要素.style.color='白';
element.style.filter="glow(color=red,strength=2)";
}
}
//マウスのonmouseoutイベントの呼び出し関数を定義する
関数 noglow()
{
if (event.srcElement == 要素)
{
要素スタイルフィルター="";
要素.style.color=フォントの色;
}
}
</スクリプト>

///////////////////「動作」ドキュメントの終了/////////////////////////////////
（4）ページ上での「動作」の使い方
ページ上の「動作」コンポーネントを使用するために、新しい知識を習得する必要はありません。必要な知識はCSSスタイルシートとHTML設定だけです。以下の説明を参照してください。

コードをコピー

コードは次のとおりです。

<スタイル>
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
</スタイル>

ご覧のとおり、これは私たちがすでに慣れ親しんでいるスタイルシート設定とまったく同じです。上記のステートメントはスタイル名「myfilter」を定義し、新しいコンテンツは「behavior:url(font_effect.htc);」です。「behavior」は新しく追加された「behavior」属性の名前であり、スタイルシートで「behavior」が設定される方法です。括弧内の内容は、「Behavior」ドキュメントのファイル名です。この例では、「Behavior」ドキュメントがページファイルと同じディレクトリにあることを示しています。「Behavior」ドキュメントが他のディレクトリに配置されている場合は、このパラメータの前に対応するパス名を追加して、「Behavior」ドキュメントを正しく配置できるようにする必要があります。「スタイル」の残りの部分は通常のスタイルプロパティ設定であり、必要に応じて増減できますが、この例では「グロー」フィルター効果が使用されているため、少なくとも幅プロパティを設定する必要があります。上記のスタイル仕様により、フォント変更効果を持つ「動作」を備えた「myfilter」という名前のスタイルが作成されます。このスタイルをページコンポーネントの「動作」で使用したい場合も、非常に簡単です。以下の文に示すように、この「スタイル名」をコンポーネントのプロパティ設定領域に配置するだけです。
<span id="myspan" class='myfilter'>動作によって生成されるテキスト効果</span><br>
<span class='myfilter'>マウスをポイントすると光ります</span>
上記の記述には何も新しい点はありません。class='myfilter' は私たちがよく知っているスタイル設定です。最初の「span」タグの属性には、「id」タグも定義されています。これは、「動作」内で「メソッド」を呼び出す設定を示すために使用されていることが後でわかります。この設定を行うと、「span」要素のコンテンツは、「behavior」コンポーネントで事前に定義された効果を表示できるようになります。
1. マウスポインターをテキストコンテンツ上に移動すると、テキストの周囲に赤い輝き効果が生成され、テキストが白色に変わります。
2. マウスボタンを押すと、テキストの色が黄色に変わります。
3. マウスボタンを放すと、テキストの色が青に戻ります。
4. マウスポインターがテキスト領域の外側に移動すると、赤い輝きの効果が削除され、テキストは元の状態に戻ります。
さらに、「動作」を定義する際に、「move_down」と「move_right」という 2 つの「メソッド」を設定します。これら 2 つの「メソッド」を呼び出すために、2 つのボタンが定義されています。

コードをコピー

コードは次のとおりです。

<button onclick="myspan.move_right();">テキストの最初の行を右に移動する</button>

<button onclick="myspan.move_down();">テキストの最初の行を下に移動します</button>

ボタンの onclick イベントを使用して、これら 2 つの「メソッド」を呼び出します。以前に定義した「id」タグは、コンポーネントのオブジェクト名として使用されます。「myspan.move_down」を使用して「メソッド」を呼び出し、このオブジェクトを操作します。対応するボタンを押すと、最初の行のテキストが下または右に移動することがわかります。デモンストレーションでは最初の行のテキストのみを使用していますが、実際には対応する設定を行えば他のオブジェクトも移動できます。ページのソースドキュメントの完全な内容は次のとおりです。

コードをコピー

コードは次のとおりです。

<html>
<ヘッド>
<TITLE >行動効果のデモンストレーション< /TITLE >
<スタイル>
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
</スタイル>
</HEAD>
<本文>
<span id="myspan" class='myfilter'>動作によって生成されるテキスト効果</span>

<span class='myfilter'>マウスをポイントすると光ります</span>

<span class='myfilter'>同時に、テキストが白くなります</span>

<span class='myfilter'>マウスを押すとテキストが黄色に変わります</span>

<span class='myfilter'>マウスを離すとテキストが青色に変わります</span>

<span class='myfilter'>マウスを離すとテキストは元の状態に戻ります</span>

<button onclick="myspan.move_right();">テキストの最初の行を右に移動する</button>

<button onclick="myspan.move_down();">テキストの最初の行を下に移動します</button>
</本文>
</html>

上記の簡単な紹介から、1 つの「動作」に複数のテキスト変更効果を同時に簡単に組み合わせることができ、簡単な「スタイル」設定を通じてページ要素に任意に関連付けることができることがわかります。これは、「動作」コンポーネントの利点と強力な機能を反映しています。動作コンポーネントは、ページ内だけでなく、同じサイト上のすべてのページで再利用できます。上記の効果を実現するために「動作」を使用しない場合を想像してください。ページ内で事前に定義された一連の関数を呼び出して同じ機能を完了できますが、ページ内のテキスト効果を使用する各コンポーネントには、4 つのマウスイベントを添付する必要があります。複数のページで同じ効果を使用する場合、呼び出される関数も各ページで繰り返し設定する必要があります。比較すると、どちらが優れているかは明らかです。したがって、「Behavior」コンポーネントを使用すると、簡潔で効率的、普遍的で保守しやすいページを作成できます。この記事の例は、「動作」コンポーネントの作成と使用のプロセスを説明することだけを目的としており、読者が「動作」プログラミングの一般的な理解を身に付け、これに基づいて必要な「動作」コンポーネントを作成したり、個人のニーズを満たす既製の「動作」コンポーネントを直接参照したりすることができます。「コンポーネント共有」の概念は、「動作」開発者の本来の意図でもあるためです。最後に、この記事が読者にとって DHTML Web ページプログラミングの素晴らしい世界への出発点となることを願っています。

例:
HTC は HTML コンポーネントの略です。
これは IE5.0 の主要な拡張機能の 1 つです。
一般的なコンポーネントの再利用性に加えて、
また、開発や使用が簡単であるという利点もあります。
外部ファイルを導入する必要があるため、ここでは例は示しません。宝庫に例があります。

コントロールとコンポーネント
HTC は、スクリプトで DHTML の動作を実装するためのシンプルなメカニズムを提供します。 HTC ファイルは HTML ファイルと違いはなく、拡張子は「.htc」です。

HTC を使用すると、次の動作を実現できます。
プロパティとメソッドを設定します。カスタムイベントは、「PROPERTY」要素と「METHOD」要素を通じて定義されます。これは、「EVENT」要素を通じて行われ、要素の「fire()」メソッドを使用してイベントがリリースされます。
イベント環境は「createEventObject()」メソッドによって設定されます。
HTC を含む HTML ページの DHTML オブジェクトモデルにアクセスし、HTC の「要素」オブジェクトを使用して、動作が関連付けられた要素を返します。このオブジェクトを使用すると、HTC はドキュメントとそのオブジェクトモデル (プロパティ、メソッド、イベント) にアクセスできます。
通知を受信するには、「ATTACH」要素を使用します。ブラウザは、標準の DHTML イベントを HTC に通知するだけでなく、oncontentready イベントと ondocumentready イベントという 2 つの特別なイベントも HTC に通知します。

タグと名前空間の定義
HTC の基礎はカスタムタグです。ページのカスタムタグを定義するには、タグの名前空間を指定する必要があります。タグを使用するには、タグの前に正しい XML 名前空間プレフィックスを追加する必要があります。例:
以下は、新しいタグ RIGHT を定義するコードスニペットの例です。

コードをコピー

コードは次のとおりです。

<HTML XMLNS:DOCJS>
<ヘッド>
<スタイル>
@メディアすべて{
DOCJS\:RIGHT {テキスト配置:右; 幅:100}
}
</スタイル>
</HEAD>
<本文>
<DOCjs:右>
Doc javascriptのコラム、ヒント、ツール、チュートリアルを読む
</DOCjs:RIGHT>
</本文>
</HTML>

1 つの HTML タグで複数の名前空間を定義できます。
<HTML XMLNS:DOCJS XMLNS:DOCjavascript>
コンポーネントの定義コンポーネントの名前は、HTC ドキュメントの最初の行で定義された XML 名前空間によって決まります。ページが他の HTC を呼び出さない場合、名前空間定義は 1 つだけです。実際、HTML コンポーネントの定義は、カスタムタグの動作の定義です。動作には、属性とイベントが含まれます。

コードをコピー

コードは次のとおりです。

<HTML xmlns:マイタグ>
<ヘッド>
<PUBLIC:COMPONENT タグ名="MyTag">
<プロパティ名="値"></プロパティ>
<ATTACH EVENT="oncontentready" ONEVENT="fnInit()"<>/ATTACH>
</パブリック:コンポーネント>
<STYLE> //コンポーネントのスタイルシートを定義する
.cssMyTag{
}
</スタイル>
<スクリプト言語=javascript>
function MyTagBehavior1(){} //コンポーネントのメソッドを定義する
</スクリプト>
</HEAD>
<BODY onclick=MyTagBehavior1> //コンポーネントの応答イベントを定義する
</本文>
</HTML>

oncontentreadyは、呼び出し元によってコンポーネントが完全にインポートされたときにトリガーされます。fnInit()を見てみましょう。

コードをコピー

コードは次のとおりです。

関数fnInit() {
document.body.innerHTML = element.value; //コンポーネントの表示コンテンツを設定する
document.body.className = "clsMyTag"; //表示スタイルシートを設定します。
defaults.viewLink = document; // このコンポーネントを他のドキュメントから見えるようにする
element.aProperty = element.value; //コンポーネントのプロパティ値を設定する
}

コンポーネントの呼び出し

コードをコピー

コードは次のとおりです。

<<: CSS3 カウントダウン効果

>>: Xshell を使用して VMware 上の Linux 仮想マシンに接続する (グラフィック手順)