ViewLink の概要

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

Microsoft® Internet Explorer 5.5 の新機能である ViewLink を使うと、Dynamic HTML (DHTML) でコンポーネントを開発することができます。ViewLink により、HTML コンポーネント (HTC) ファイルで作成されたコンテンツのカプセル化とレンダリングが可能になります。HTC ファイルの中に作成された HTML コンテンツは、ViewLink を通して、プライマリ (呼び出し元) HTML ドキュメントの中でレンダリングされ、ドキュメントフラグメントの内容がユーザーから見えるようになります。ViewLink は、リンクされたドキュメントフラグメントの構造をプライマリドキュメントから隠蔽することでカプセル化を実現します。

ViewLink が登場する前、HTML ドキュメントの中で使用されるカスタムコントロールを作成するためには、Microsoft® ActiveX® コントロールを使用するしかありませんでした。HTML 作成者は OBJECT タグを使って、ActiveX コントロールを自分のページに取り込む必要がありました。ActiveX コントロールのレンダリングを行うためには、クライアントマシンにコントロールがインストールされていなくてはなりませんでした。

ViewLink により、DHTML オーサーは、すでに慣れ親しんでいる DHTML を使って、独自のコントロールやその他のコンポーネントを開発することができます。また ViewLink では、コンポーネントは他の HTML タグと同じほど単純に使えるカスタムエレメントとしてインプリメントされるので、コンポーネントがはるかに使いやすくなります。ViewLink コンポーネントはプライマリドキュメントの一部としてダウンロードされ、レンダリングされるので、クライアントマシン上へのインストールは必要ありません。

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

用語
DHTML コンポーネント
ViewLink の実装
CSS の継承
イベントルーティング
ViewLink の中でのタブ指定
ViewLink のネスト
関連トピック

用語

このセクションでは、ViewLink 機能を説明するために使用される用語の定義を示します。

プライマリドキュメント	ユーザーがブラウザを使って開く HTML ファイル。
ドキュメントフラグメント	ViewLink 機能を使ってプライマリドキュメントにリンクされる、HTC ファイルの中に定義されたドキュメントツリー。
エレメントビヘイビア	DHTML ビヘイビアを完全にエレメントにバインドできるようにする、Internet Explorer 5.5 の新機能。これにより、HTML ドキュメントの中で、エレメントビヘイビアを他のエレメントと同じように使用することができ、ビヘイビアの機能が決してエレメントから削除されないことが保証されます。詳細については、エレメントビヘイビアの項を参照してください。
マスタエレメント	ViewLink がアタッチされている Extensible Markup Language (XML) のカスタムエレメント。ViewLink により、ドキュメントフラグメントを、プライマリドキュメントの中のコンテンツとしてレンダリングすることができます。
ViewLink ドキュメント	ドキュメントフラグメントと同じ。

ViewLink コンポーネントは、プライマリドキュメントの中で使用されるカスタムタグをインプリメントします。プライマリドキュメントの中のカスタムエレメントと、HTC ファイルの中に作成されたドキュメントフラグメントの間にリンクが確立されます。ViewLink コンポーネントを使用する Web 作成者は、プライマリドキュメントの中のスクリプトを通して、コンポーネントのビヘイビアやコンテンツを変更することはできません。プライマリドキュメントからのアクセス可能範囲は、コンポーネント作成者が公開することを選択したプロパティ、メソッド、およびイベントだけに限定されます。

DHTML コンポーネント

ViewLink では、OBJECT タグを通して使用できる Component Object Model (COM) オブジェクトに似た DHTML コンポーネントを開発することができます。開発者は、COM コンポーネントと同じように、DHTML コンポーネントのプロパティ、メソッド、およびイベントを公開することができます。コンポーネントは HTC ファイルの中に完全にカプセル化されています。

Microsoft® Internet Explorer 5 は、DHTML ビヘイビアの使用を通してスクリプトとビヘイビアを 2 つの異なるファイルとして保持し、開発するというカプセル化の最初のステップを実現していました。ビヘイビアにより、Web 作成者は目的の効果を HTC ファイルの中にカプセル化し、デザイナはカスケーディングスタイルシート (CSS) 属性を通してビヘイビアをメインページ上のエレメントに適用することができます。

次に、ビヘイビアを使用するプライマリドキュメントのコードを示します。

<HTML>
<HEAD>
  <TITLE>Behavior Example</TITLE>
</HEAD>

<BODY>
  This text uses a behavior to make text both 
  <SPAN STYLE="behavior:url(italic_bold.htc)">
  italic and bold
  </SPAN>.
</BODY>
</HTML>

次に HTC ファイルのコードを示します。

<!-- italic_bold.htc -->
<SCRIPT>
  element.style.fontWeight = "bold";
  element.style.fontStyle = "italic";
</SCRIPT>

この機能を使用するためには、Microsoft® Internet Explorer 5.0 またはそれ以降が必要です。下のアイコンをクリックすると最新バージョンがインストールされます。その後、このページを再ロードしてサンプルを表示してください。

上のインプリメンテーションは、スクリプトをコンテンツから分離するという点では有用ですが、既存のタグにしか適用できないという問題があります。Internet Explorer 5.5 では、エレメントビヘイビアを使って、プライマリドキュメントの中のコンテンツに対して回り込みを行えるカスタムタグを作成することができます。プライマリドキュメントのコンテンツは、ビヘイビアのコードの影響を受けます。

次に、エレメントビヘイビアを使用するドキュメントのコードを示します。

<HTML XMLNS:IE>
<HEAD>
  <?IMPORT NAMESPACE="IE" IMPLEMENTATION="elem_behavior.htc"/>
</HEAD>

<BODY>
  This text uses an element behavior to make text both 
  <IE:IB>italic and bold</IE:IB>.
</BODY>
</HTML>

次に HTC ファイルのコードを示します。

<!-- elem_behavior.htc -->
<PUBLIC:COMPONENT tagName=IB>
</PUBLIC:COMPONENT>

<SCRIPT LANGUAGE="JScript">
  element.style.fontWeight = "bold";
  element.style.fontStyle = "italic";
</SCRIPT>

この機能を使用するためには、Microsoft® Internet Explorer 5.5 またはそれ以降が必要です。下のアイコンをクリックすると最新バージョンがインストールされます。その後、このページを再ロードしてサンプルを表示してください。

上の例で、プライマリドキュメントの中の IMPORT 処理命令は、カスタムエレメントのビヘイビアをインプリメントするファイルを指定しています。

ViewLink の実装

このセクションでは、単純な ViewLink コンポーネントを実装する方法について説明します。プライマリドキュメントとドキュメントフラグメントの間に ViewLink をセットアップする方法には、プログラム的な方法と宣言的な方法の 2 つがあります。

プライマリドキュメントとドキュメントフラグメントの間にプログラム的に ViewLink をセットアップするには、次の文を使用します。この文は HTC ファイル内のスクリプトの中に置かれます。

defaults.viewLink=document;

ViewLink は宣言的に確立することもできます。次の例は、HTC ファイルの中のドキュメントフラグメントのルートエレメントを、プライマリドキュメントの中のマスタエレメントに自動的にリンクします。

<PUBLIC:DEFAULTS viewLinkContent/>

プライマリドキュメントと名前空間

ViewLink 機能では、プライマリドキュメントの中で XML 名前空間を使用する必要があります。開発者は、プライマリドキュメントの中で名前空間を宣言し、カスタムタグにはその名前空間をプレフィックスとして付けなくてはなりません。ViewLink コンポーネントのインプリメンテーションを名前空間に関連付けるには、IMPORT 処理命令を使用します。次の例は、Toolbar_Button.htc という名前のファイル中にインプリメントされている、TOOLBAR_BUTTON という名前のカスタムタグを使用するプライマリドキュメントを示しています。

<HTML XMLNS:IE>
<HEAD>
  <?IMPORT NAMESPACE="IE" IMPLEMENTATION="Toolbar_Button.htc">
</HEAD>
<BODY>
<IE:TOOLBAR_BUTTON> </IE:TOOLBAR_BUTTON>
</BODY>
</HTML>

タグの IE: 宣言は、カスタムタグの名前空間を宣言するために必要です。IMPORT 処理命令は、それが処理命令であり、通常のエレメントではないことを示すために、疑問符 (?) を前に付けます。

HTC ファイル

ViewLink コードは、PUBLIC:COMPONENT タグと BODY タグの 2 つのセクションを含んでいる HTC ファイルの中に置かれます。次に、宣言的な構文を使って、PUBLIC:DEFAULTS オブジェクトに ViewLink を設定する単純な HTC ファイルを示します。

<!-- Toobar_Button.htc -->
<PUBLIC:COMPONENT tagName=TOOLBAR_BUTTON>
  <PUBLIC:DEFAULTS viewLinkContent/>
</PUBLIC:COMPONENT>

<BODY>
Some day this will be a toolbar button.
</BODY>

例

次の HTC ファイルの例は、ツールバーボタンをインプリメントしています。マウスポインタをボタンの上に移動すると、3-D 効果が現れます。この効果は、マウスポインタをボタンから離すと消えます。

<!-- Toolbar_Button.htc -->
<HEAD>
<PUBLIC:COMPONENT tagName=TOOLBAR_BUTTON>
  <ATTACH event="oncontentready" onevent="fnInit()"/>
</PUBLIC:COMPONENT>

<STYLE>
  .clsButton { background-color:#D6D3CE;  
               border:solid 1px;
               border-color:#D6D3CE;
             }
</STYLE>

<SCRIPT LANGUAGE="JScript">
// Entry point
function fnInit()
{
  var oButton = document.body;
  oButton.className = "clsButton";
  oButton.innerHTML = "&nbsp;" + element.innerHTML + "&nbsp;";
  defaults.viewLink = document;
}

// Mouse handler functions
function fnMouseOver()
{
  var oButton = document.body;
  oButton.style.borderColor = "ThreeDHighlight " +
                              "ThreeDDarkShadow " +
                              "ThreeDDarkShadow " +
                              "ThreeDHighlight";
  oButton.style.cursor = "hand";
}

function fnMouseOut()
{
  var oButton = document.body;
  oButton.style.borderColor = "#D6D3CE";
  oButton.style.cursor = "default";
}

function fnOnMouseDown()
{
  var oButton = document.body;
  oButton.style.borderColor = "ThreeDDarkShadow " +
                              "ThreeDHighlight " +
                              "ThreeDHighlight " +
                              "ThreeDDarkShadow";
}

function fnOnMouseUp()
{
  var oButton = document.body;
  oButton.style.borderColor = "ThreeDHighlight " +
                              "ThreeDDarkShadow " +
                              "ThreeDDarkShadow " +
                              "ThreeDHighlight";
}
</SCRIPT>
</HEAD>
<BODY onmouseover="fnMouseOver()"
      onmouseout="fnMouseOut()"
      onmousedown="fnOnMouseDown()"
      onmouseup="fnOnMouseUp()">
</BODY>

次のファイルは、インプリメントされたツールバーボタンを使用するプライマリドキュメントです。

<!-- Toolbar_Button.htm -->
<HTML XMLNS:IE>
<HEAD>
  <TITLE>Toolbar Button Demo</TITLE>
  <?IMPORT namespace="IE" implementation="Toolbar_Button.htc">

<STYLE>
  .clsButton { font-family:Arial,Helvetia,sans serif;
               font-size:12;
             }
</STYLE>
<SCRIPT>
function fnClick()
{
  alert("You clicked: " + window.event.srcElement.innerText);
}
</SCRIPT>
</HEAD>

<BODY>

<!-- DIV for the toolbar with TOOLBAR_BUTTONs inside. -->
<DIV STYLE="background-color:#D6D3CE;">
  <IE:TOOLBAR_BUTTON CLASS="clsButton" onclick="fnClick()">
    <U>N</U>ew
  </IE:TOOLBAR_BUTTON>
  
  <IE:TOOLBAR_BUTTON CLASS="clsButton" onclick="fnClick()">
    <U>O</U>pen
  </IE:TOOLBAR_BUTTON>
  
  <IE:TOOLBAR_BUTTON CLASS="clsButton" onclick="fnClick()">
    <U>S</U>ave
  </IE:TOOLBAR_BUTTON>
  
  <IE:TOOLBAR_BUTTON CLASS="clsButton" onclick="fnClick()">
    Save <U>A</U>s...
  </IE:TOOLBAR_BUTTON>
</DIV>

</BODY>
</HTML>

CSS の継承

高さ、幅、およびフォントの色など、カスタムエレメントに直接に適用されるスタイルは、ViewLink コンポーネントに影響を与えます。ドキュメントフラグメントはプライマリドキュメントのスタイルを継承しますが、コンポーネントの作成者はプライマリドキュメントで設定されているスタイルをオーバーライドすることができます。HTC ファイルで設定されたスタイルは、プライマリドキュメントの中のカスタムタグに適用されたスタイルよりも優先されます。

前のセクションの例では、適切な CSS スタイルを適用することで、ボタンのフォントを太字に変更することができます。例:

<IE:TOOLBAR_BUTTON CLASS="clsButton" onclick="fnClick()" STYLE="font-weight:bold">
    <U>N</U>ew
</IE:TOOLBAR_BUTTON>

color の CSS スタイルを適用して、ボタンのテキストカラーを変更することはできません。これは、ViewLink コンポーネントが、HTC ファイルの STYLE ブロックで color を設定して、プライマリドキュメントで設定されているスタイルをオーバーライドしているためです。

<STYLE>
  .clsButton { color:#0000FF;
               background-color:#D6D3CE;  
               border:solid 1px;
               border-color:#D6D3CE;
             }
</STYLE>

イベントルーティング

このセクションでは、ViewLink コンポーネントの中で起こされたイベントが、プライマリドキュメントから見てどのように処理されるかについて説明します。また、どのようなイベントがドキュメントフラグメントからプライマリドキュメントに対して起こされるのか、どのようなイベントが起こされないのか、またどのようなイベントに特に注意を払わなくてはならないかも説明します。

HTC ファイルの中の DIV オブジェクトで onclick イベントが発生されると、そのイベントはルートエレメントに達するまで、HTC ファイルのツリーの中を昇っていきます。イベントの発生がなければ、この onclick イベントは HTC に対してローカルなままで、プライマリドキュメントからは見えません。しかし、Internet Explorer 5.5 では、イベントを自動的にプライマリドキュメントに対して発生させるようになっています。さらに、イベントはマスタエレメントに対して発生し、それが上へと昇っていくイベントであれば、プライマリドキュメントのツリーの中で昇っていきます。プライマリドキュメントツリーのどのエレメントからも、このイベントはマスタエレメントタグから発したイベントのように見えます。

一般に、上に上っていくイベントは ViewLink コンポーネントで発生し、昇っていかないイベントは発生しません。ただし、どのイベントが発生するかを判断する際には、他の点も考慮する必要があります。マウスやキーボードに関わるような大部分のユーザーイベントは発生します。また、一般的な ViewLink シナリオで使用されるイベントも、マスタエレメントに対して起こされます。

特殊ケースのイベント

イベントがプライマリドキュメントの中で発生すると、ViewLink のマスタエレメントは、プライマリドキュメント中の他のタグと同じように振る舞います。たとえば、ユーザーが ViewLink コンポーネント上にマウスポインタを移動すると、マスタエレメント上で onmouseover イベントが発生します。ユーザーがコンポーネントからマウスポインタを離すと、マスタエレメント上で onmouseout イベントが発生します。しかし、ユーザーがマウスポインタを ViewLink コンポーネント中のエレメント上に移動した場合には、onmouseover イベントも onmouseout イベントもプライマリドキュメントに対して発生されることはありません。このため、マウスおよびフォーカスイベントがマスタエレメントに対して発生されたことを示す特殊ケースのイベントが作られています。

マウスイベント

onmouseover および onmouseout イベントは、HTC ツリーの中の最上位エレメント上で、それぞれ onmouseenter および onmouseleave エレメントが発生した場合にのみ、マスタエレメント上で発生します。

onmouseenter および onmouseleave イベントは上に昇っていかず、キャンセルすることもできません。onmouseenter イベントは、マウスポインタがエレメントに入ったときに発生し、onmouseleave イベントは、ポインタがエレメントを離れたときに発生します。鍵は、これらのイベントが上に昇らないという点にあります。このため、これらの HTC 内のイベントがプライマリドキュメント上で起こるするのは、それらが HTC ツリーのルートエレメント上で発生した場合に限られます。

たとえば、ルートエレメント上で onmouseenter が発生すると、onmouseenter および onmouseover イベントの両方がマスタエレメント上で発生します。onmouseleave イベントとそれに対応する onmouseout イベントについても、同じアクションが起こります。

その結果、ユーザーがプライマリドキュメントの中のマスタエレメント上にマウスポインタを移動すると、onmouseover イベントが 1 回発生します。ユーザーがマスタエレメントからマウスポインタを離すと、onmouseout イベントが 1 回発生します。ユーザーが ViewLink コンポーネントの中のエレメントの上にマウスポインタを移動したり、そこからマウスポインタを離した場合、マスタエレメントに対して onmouseover または onmouseout イベントが発生することはなく、HTC ファイルに対してローカルな影響しか及びません。

フォーカスおよびブラー (Blur) イベント

上記のマウスイベントについて説明した関係は、onactivate と onfocus の間、および ondeactivate と onblur の間にも見られます。たとえば、ユーザーがコンポーネントの中の異なるエレメントの間でフォーカスを移動したときにも、マスタエレメント上で複数のフォーカス／ブラーイベントが発生するのは望ましくなく、またその間もマスタエレメントはフォーカスを失わないようになっている必要があります。そのため、これらのフォーカスイベントはマウスイベントと同じように扱われることになります。onfocusenter および onfocusleave イベントはキャンセルできません。HTCツリーのルートエレメント上で onfocusenter および onfocusleave イベントが発生すると、プライマリドキュメントのマスタエレメント上で、それぞれ onfocus および onblur イベントが発生します。

onbeforefocusenter および onbeforefocusleave イベントは上に昇っていきませんが、キャンセルすることはできます。これらのイベントにも、上で述べたのと同じシナリオが適用されます。たとえば、ユーザーがコンポーネント中の 2 つの要素間でタブ移動を行っているときに、マスタエレメント上で複数のイベントが発生するのは望ましくありません。このため、マスタエレメント上では、HTC ツリーのルートエレメント上でのイベントだけが発生するようになっています。また、これらのイベントはキャンセルできるので、マスタエレメントのフォーカスをキャンセルすることが可能です。

自動的に発生しないイベント

ドキュメントフラグメントからマスタエレメントに対して自動的に発生しないイベントも、スクリプトを通して発生させることができます。次の例は、HTC ファイルからプライマリドキュメントに対して手動でイベントを発生させる方法を示しています。

<!-- HTC file -->
<PUBLIC:COMPONENT tagName="ABC"/>
<PUBLIC:DEFAULTS viewLinkContent/>

<BODY>
<DIV onmouseover="element.fireEvent('onmouseover', event)">
  Move the mouse over this text.
</DIV>
</BODY>

ViewLink の中でのタブ指定

ViewLink 機能には、1 つのタグが複数のエレメントを含むことができる新しいコンポーネントモデルが導入されています。これらのエレメントはタブオーダーに参加することができます。この状況を処理するために、tabIndex プロパティのモデルが拡張されました。

ドキュメントフラグメントの中でのタブ指定は、プライマリドキュメントのタブシーケンスとは独立にカプセル化されています。ドキュメントフラグメントの中のオブジェクトは、その tabIndex に基づいて独自のタブシーケンスに従います。

また、マスタエレメントは、タグの初期状態を指定する tabStop という名前の保護属性を持っています。

ViewLink のネスト

HTC ファイルは他の ViewLink コンポーネントにリンクすることができます。カレンダの ViewLink の例を考えてみましょう。カレンダ内の個々の日は、その日の予定を含んでいるポップアップウィンドウを表示する別の ViewLink コンポーネントによって表現することができます。このとき CALENDAR タグの HTC ファイルには、DAY オブジェクトをインプリメントしている HTC ファイルへのリンクを提供する IMPORT 処理命令を持たせることになります。

次に、このシナリオのためのプライマリドキュメントを示します。

<HTML XMLNS:IE>
<HEAD>
  <TITLE>Calendar Example</TITLE>
  <?IMPORT NAMESPACE="IE" IMPLEMENTATION="calendar.htc"/>
</HEAD>

<BODY>
<P>Click a day in the calendar...</P>

<IE:CALENDAR/>

</BODY>
</HTML>

次に、CALENDAR タグをインプリメントする HTC ファイルを示します。

<HTML XMLNS:IE>
<HEAD>
  <?IMPORT NAMESPACE="IE" IMPLEMENTATION="day.htc"/>
  
<PUBLIC:COMPONENT tagName="CALENDAR">
  <ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/>
</PUBLIC:COMPONENT>

<SCRIPT>
function fnInit()
{
  defaults.viewLink = document;
}
</SCRIPT>

<STYLE>
  TD { text-align:center;
       border:solid 1px;
       cell-padding:2;
       cell-spacing:2;
       width:50;
       height:50;
     }
</STYLE>
</HEAD>

<BODY>
  <TABLE STYLE="border:solid 1px; cell-padding:2; cell-spacing:2;">
    <TR>
      <TH>Sun</TH>
      <TH>Mon</TH>
      <TH>Tue</TH>
      <TH>Wed</TH>
      <TH>Thu</TH>
      <TH>Fri</TH>
      <TH>Sat</TH>
    </TR>
    <TR>
      <TD><IE:DAY value="1"/></TD>
      <TD><IE:DAY value="2"/></TD>
      <TD><IE:DAY value="3"/></TD>
      <TD><IE:DAY value="4"/></TD>
      <TD><IE:DAY value="5"/></TD>
      <TD><IE:DAY value="6"/></TD>
      <TD><IE:DAY value="7"/></TD>
    </TR>
    <TR>
      <TD><IE:DAY value="8"/></TD>
      <TD><IE:DAY value="9"/></TD>
      <TD><IE:DAY value="10"/></TD>
      <TD><IE:DAY value="11"/></TD>
      <TD><IE:DAY value="12"/></TD>
      <TD><IE:DAY value="13"/></TD>
      <TD><IE:DAY value="14"/></TD>
    </TR>
    <TR>
      <TD><IE:DAY value="15"/></TD>
      <TD><IE:DAY value="16"/></TD>
      <TD><IE:DAY value="17"/></TD>
      <TD><IE:DAY value="18"/></TD>
      <TD><IE:DAY value="19"/></TD>
      <TD><IE:DAY value="20"/></TD>
      <TD><IE:DAY value="21"/></TD>
    </TR>
    <TR>
      <TD><IE:DAY value="22"/></TD>
      <TD><IE:DAY value="23"/></TD>
      <TD><IE:DAY value="24"/></TD>
      <TD><IE:DAY value="25"/></TD>
      <TD><IE:DAY value="26"/></TD>
      <TD><IE:DAY value="27"/></TD>
      <TD><IE:DAY value="28"/></TD>
    </TR>
    <TR>
      <TD><IE:DAY value="29"/></TD>
      <TD><IE:DAY value="30"/></TD>
      <TD><IE:DAY value="31"/></TD>
    </TR>
  </TABLE>
</BODY>
</HTML>

最後に、DAY タグをインプリメントする HTC を示します。

<HTML XMLNS:IE>
<HEAD>
<PUBLIC:COMPONENT tagName="DAY">
  <PROPERTY NAME="value"/>
  <ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/>
</PUBLIC:COMPONENT>

<STYLE>
  .clsDay { width:50;
            height:50;
            background-color:lightyellow;
            align:center;
          }
</STYLE>

<SCRIPT>
function fnInit()
{
  document.body.innerText = element.value;
  document.body.className = "clsDay";
  defaults.viewLink = document;
}

function fnShowAppts()
{
  alert("Show appointments for day " + element.value + "!");
}
</SCRIPT>
</HEAD>

<BODY onclick="fnShowAppts()">
</BODY>
</HTML>