Internet Explorer 5.5 および インターネット ツールにおける DHTML の新機能
Dave Massy
Microsoft Corporation
January 2000
日本語版最終更新日 2000 年 10 月 23 日
はじめに
この記事は、Microsoft® Internet Explorer 5.5 と Microsoft Windows® 用のインターネット ツールについて説明しています。
これらのツールは、http://www.microsoft.com/windows/ie/default.htm  からダウンロードできます。
以下にリストしたサンプルを実行するには、Internet Explorer 5.5 を使用する必要があります。
Internet Explorer 5.5 では、ブラウザのユーザーはナビゲーション パフォーマンスの改善や印刷プレビューのサポートなど、強化された機能を利用できます。
この記事では、DHTML コンテンツの作者や開発者に対する新機能について紹介します。
すべてのアプリケーション ユーザー インターフェイス (UI) 開発の対象とするために、Internet Explorer Version 5.5 の機能がどれだけ興味深いプラットフォームになっているかを説明します。
このリリースで特別注目されている領域には、いくつかの興味深いビジュアル効果以外にも、ビヘイビア コンポーネント モデルへの強化、編集機能の改善、および縦書きテキスト レイアウトのサポートなどがあります。
その機能の詳細説明へのリンクと共に、ここですべての機能に焦点を当てて説明します。
この記事を最大限に活用するためには、Internet Explorer で以前に利用できた DHTML サポートを理解しておくことをお勧めします。
サンプルを含めた完全なリファレンス マニュアルは DHTML Reference にあります。
これらの注目すべき興味深い新しい機能の詳細を説明する前に、注目を集めている問題や Internet Explorer 5.5 でサポートされる標準について説明します。
このリリースの Internet Explorer では、インライン要素の境界線、マージン、パディングなどの機能、および first-letter や first-line 擬似要素と共に、CSS1 などの標準に対するサポートを改善しています。
また、Internet Explorer は XML などのテクノロジの最先端のサポートを含め、以前のリリースでサポートされていたすべての標準を引き続きサポートします。
この製品の各リリースでは、顧客が現実のソリューションを構築するために必要な機能のセットを提供する一方、標準のサポートを改善しています。
弊社では、Internet Explorer を将来のリリースに移行するときに、開発用の優れたプラットフォームを開発者に提供するため、サポートしている標準を再評価する予定です。
特定のコンポーネントまたは機能に対する標準サポートに関する特定の情報については、DHTML Reference の新しい標準のドキュメントを調べてください。 標準サポートに関する弊社のポリシーの詳細については、「DHTML Dude」 の 2 月のコラムをご覧ください。
コンポーネント モデル
ビヘイビア コンポーネント モデルに対する作業で注目したことは、DHTML ドキュメント内でほかの要素が使用する独自のカスタム要素を開発者が追加できるようにすることでした。
"コンポーネント モデル" という用語は、開発者が機能を拡張、強化するために独自の DHTML 要素を構築できるいくつかの個別の機能、またはそれらをまとめた機能を指します。
拡張または強化された要素は、その後ほかの開発者が DHTML コンテンツで再利用できます。
たとえば、開発者は INPUT、TEXTAREA、および SELECT などの組み込みの HTML と同程度に豊富で強固なツリー形式のリスト コントロールを作成できます。
DHTML ビヘイビア サポートは Internet Explorer 5 で導入されました。
これを強化したビヘイビア コンポーネント モデルを使用して、プログラマは潜在的な名前の競合、予期しないスタイルの継承に煩わされないでコードをカプセル化、再利用できます。
再利用可能なコンポーネントを構築するための完全で強固なモデルにするにはいくつかの要因があります。
このセクションでは、DHTML を使用してコンポーネントを構築し、DHTML ドキュメントで構築したコンポーネントの使用を補助することに、これらの機能がどの程度重要な役割を果たすかを説明します。
エレメント ビヘイビア
エレメント ビヘイビア は、Internet Explorer 5.5 で導入された新しいタイプの DHTML ビヘイビアです。
エレメント ビヘイビアは、要素に対して異なるバインディング方法を提供するために、Internet Explorer 5 でサポートされていた既存のビヘイビアを基礎として構築されました。バージョン 5.0 で導入された DHTML ビヘイビアと同様に、エレメント ビヘイビアはスクリプトまたはネイティブのバイナリ コードで実装できます。
違いを明確にするために、Internet Explorer 5 でサポートされていたビヘイビアを "アタッチされる" ビヘイビアと呼ぶことにします。従来のサポートでは、CSS 宣言では
behavior プロパティを使用して、手順的には addBehavior メソッドと removeBehavior メソッドを使用して、ビヘイビアが各要素にアタッチされるためです。
対照的に、エレメント ビヘイビアでは、ビヘイビアを分離できないように要素にバインドし、定義される要素に本来備わっている部分であるかのように見なされます。
アタッチされるビヘイビアとは異なり、要素ごとに 1 つだけエレメント ビヘイビアが許可されます。
さらに、 カスタム要素 これらの要素は、明示的な名前空間を持ちます) だけが、1 つのエレメント ビヘイビアを持ちます。
エレメント ビヘイビアは、標準の HTML 要素であるかのようにプログラミングできるカスタム要素を実装することと考えられます。
アタッチされるビヘイビアも依然として多くの用途に対して適切であることは覚えておいてください。
そのため、DHTML の資産からそれらを削除する必要はありません。
エレメント ビヘイビアがアタッチされるビヘイビアよりも優れているわけではありません。
また、エレメント ビヘイビアがアタッチされるビヘイビアに置き換わるわけでもありません。
エレメント ビヘイビアは、単に独自のカスタム要素を記述したい開発者が利用するために提供されます。
さらに、"アタッチされるビヘイビア" をエレメント ビヘイビアとして実装されるカスタム要素にアタッチすることもできます。
では、ここで説明する強固なカスタム要素とは何を意味するのでしょうか。 DHTML ドキュメント用に、豊富なツリー コントロール ユーザー インターフェイスを提供するカスタム要素 <MYSTUFF:TREE> を開発することを考えてみましょう。標準の HTML 要素 (DIV、SPAN、INPUT、SELECT など) を使用するのと同じ方法で、<MYSTUFF:TREE> 要素を再利用したい場合もあります。しかし、従来の要素に対してアタッチされるビヘイビアのメカニズムでは、カスタム要素が作成された後に実行する二次的な添付メカニズムを必要とするので、このツリー コントロールの再利用はできません。
たとえば、要素がスクリプトで createElement メソッドを使用して作成され、ビヘイビアが CSS を使用してアタッチされる場合 createElement に続くすべてのスクリプトおよびそのビヘイビアが提供するメソッドを参照するすべてのスクリプトは、その時点でビヘイビアがアタッチされていないので、おそらく失敗します。エレメント ビヘイビアでは、要素が作成されるときにビヘイビアのインスタンスがすぐに作成されます。そのため、ビヘイビアが提供するメソッドは必ず存在していると想定できます。さらに、エレメント ビヘイビアは、ビヘイビアが予期しないで削除されるような CSS 宣言の変更を心配することなく使用できます。 CSS を使用するのではなく、処理指示を持つビヘイビアを宣言することにより、カスタム要素に対するエレメント ビヘイビアのバインディングを達成できます。独自のエレメント ビヘイビアを使用または記述する方法の詳細については、「エレメント ビヘイビア」を参照してください。
ViewLink
ViewLink 機能を使用して、エレメント ビヘイビアはそのビヘイビアが使用されているドキュメントに影響することなしに、ユーザー インターフェイスに対して DHTML を使用できます。この機能の本当の意味を理解するために、Internet Explorer 5 で代表的な DHTML ビヘイビアを調べてみます。
Calendar Behavior を見ると、ユーザーが日付を選択できる完全に動的なカレンダを表示するアタッチされるビヘイビアを持つカスタム要素 <CAL:CALENDAR> を見ることができます。カレンダの UI は DHTML を使用して表示されます。カレンダのグリッドをレイアウトするために、標準の <TABLE> タグを使用し、動的なユーザー機能を提供するためにスクリプトを使用します。カレンダを表示するには、要素の innerHTML プロパティを使用して、メイン ドキュメントに表を挿入する必要があります。これは機能しますが、複雑なアプリケーションの構築を開始するときに、多くの不利益が生じます。 タグを使用した作者が気付かないうちに、メインのドキュメントがオリジナル ドキュメントのコンテンツで破損される可能性があります。たとえば、スタイル規則ですべての表が 10 ピクセルの紫の境界線を持ち、ピンクで表示されるように定義する場合、カレンダがこの形式で表示されます。ドキュメントの作者は、「これは不思議だ。表だけをこの方法で表示しようとしたのに、カレンダまで影響を受けてしまった。」と考えることでしょう。ドキュメントの作者にとっては、このコンポーネントが表を使用しているという事実は、この作者が独自のオーサリングを行うときにまったく認識する必要のない実装上の仕様です。
このような失敗を避けるために、エレメント ビヘイビアを使用しているプライマリ ドキュメントのドキュメント構造が破損する可能性を取り除くように、作者は ViewLink 機能を使用してコンテンツを完全にカプセル化できます。ビヘイビアの作者は、予期しない方法でビヘイビアに影響を及ぼすスタイルを指定しているドキュメントについて心配する必要がなくなります。
ViewLink はどのように機能するのでしょうか。 Internet Explorer Version 5.5 は、メイン ドキュメントから独立したドキュメント フラグメントを可能にしている Internet Explorer 5 のサポートを基礎として構築されているので、独立したフラグメントに ViewLink できます。そのため、独立したフラグメントを特定の要素に対してレンダリングできます。この結果、ビジュアル効果を向上するために複数の独立した DHTML フラグメントを互いにリンクできます。ただし、オブジェクト モデルに関する限りは、依然として互いに独立していると考えられます。 ViewLink を使用する最新の カレンダ サンプル が MSDN Online Web Workshop にあります。
より詳細な説明と完全なサンプルについては、「ViewLink の概要」を参照してください。
軽量 HTML コンポーネント
Internet Explorer 5.5 は、コンポーネント オブジェクト モデルに対して特別な強化を行っています。それは、軽量 HTML コンポーネントと呼ばれるコンポーネントに対するサポートです。ビヘイビアを HTML コンポーネントとして、または .htc ファイルとして実装するときに、.htc ファイルは独立した HTML ドキュメントとして構築、解析されます。この強化は上記で説明した ViewLink 機能にとっては非常に役に立つものですが、ある用途に対してビヘイビアの表示を ViewLink が宣言的に定義することを許可することは、効率の面で高価なオーバーヘッドを要することを意味します。
Internet Explorer 5.5 では、コンポーネントが独立した HTML ドキュメントとして構築されるのを避けるために、コンポーネントを軽量コンポーネントとして設定できます。これは、HTML コンポーネント ファイルがそのファイル内に宣言された HTML コンテンツを持っていないときに適しています。コンポーネントが軽量コンポーネントとして設定されている場合は、<PUBLIC:*> 宣言とコンポーネントのスクリプトだけが使用できます。コンポーネントを軽量コンポーネントとして設定する方法の詳細については、<PUBLIC:COMPONENT> 要素のマニュアルを参照してください。
ウィンドウなしのフレーム
Internet Explorer 5.5 開発チームは、フレームおよびインライン フローティング フレーム (iframe) をより効果的なものにすることに成功しました。以前のバージョンの Internet Explorer では、フレームと iframe はフレームごとにメイン ブラウザ コンポーネントのインスタンスを個別に管理することにより実装されていました。これは、フレームを実装するための直接的な技法ではありましたが、効率的ではありませんでした。特にある程度以上のフレーム数を必要とする場合に効率的ではありません。 Internet Explorer はフレームの HTML ドキュメントを管理するために ViewLink テクノロジを使用するようになり、ブラウザ コンポーネントの複数のインスタンスを持つことなしにフレームを表示するようになりました。
この変更により 2 つの大きな利点が生まれました。第 1 に、フレーム ページのパフォーマンスが大幅に改善され、その結果コンポーネントとしてフレームを使用するアプリケーションの構築がより現実的なものになります。第 2 に、いくつか非常に優れたビジュアル効果を達成できるようになります。
Internet Explorer 5 以前は、iframe は、 z-index 位置指定が可能な要素ではありませんでした。ページ上で <IFRAME> 要素の位置付けは可能でしたが、ホスト ドキュメントからより大きな z インデックス値を使用している iframe 上にコンテンツを配置することはできませんでした。 Internet Explorer 5.5 でこの機能がサポートされるようになりました。また、Internet Explorer Version 5.5 では透明なフレームをサポートします。フレームのドキュメントの背景を透明にするように宣言し、コンテナに透過性の許可を宣言させることにより、含まれているドキュメントの背景が透けて見えるようにできます。
詳細については、「IFREME の使用方法」 とそこに含まれている サンプル を参照してください。
ポップアップ
その他の新機能としてポップアップがあります。ポップアップを使用して、Internet Explorer ウィンドウの境界線の外側に HTML コンテンツを表示できます。この機能は、ブラウザのインスタンスの外部にレンダリングする必要のあるメニューやツールヒントを表示する場合に特に便利です。 Internet Explorer 4.0 および 5.0 では、適切な位置に DIV 要素を使用してメニュー効果やツールヒント効果を実現できました。ただし、これらはクリップされてしまうため、ブラウザ外部には表示できませんでした。詳細については、http://msdn2.microsoft.com/en-us/library/ms535882.aspx を参照してください。
色付きのスクロール バー
Internet Explorer 5.5 では、DHTML ドキュメントのスクロール バーの色は Windows オペレーティング システム標準の灰色に制限されなくなりました。スタイル シートを使用して、スクロール バーの色を指定できるようになります。この機能は、ドキュメントの残りの部分のビジュアル テーマに従ってスクロール バーの色を調整することにより、消費者の立場で UI を作成する場合に特に便利です。 http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarColor.htm を参照してください。
ズーム
ドキュメントの特定の部分をズームしたかったことはありませんか ? Internet Explorer 5.5 では、すべての要素の CSS プロパティとしてズームをサポートします。ズームを使用して、興味深いビジュアル効果を作成できます。たとえば、大きなドキュメントを表示し、ユーザーが特定の領域だけを強調表示できるようにします。また、ドキュメントのサムネイル ビューを提供できます。ドキュメントとそれに含まれるサンプルについては http://msdn2.microsoft.com/en-us/library/ms535169.aspx を参照してください。
CSS サポートの強化
CSS スタイルの境界線、パディング、およびマージンが、インライン要素に対してもサポートされるようになりました。では、インライン要素とは何を指すのでしょうか。インライン要素とは、テキストの複数の行にまたがってラップできる <SPAN> や <B> のような要素のことです。対照的にブロック 要素とは、ページの矩形領域を占め、それ自体はラップできない <TABLE> や <DIV> などのことです。ただしブロック 要素のコンテンツはラップできます。また、CSS1 推奨に準拠して、CSS の border-style プロパティに点線と破線の境界線のサポートを追加しました。
さらに、first-letter および first-line 擬似要素のサポートを追加しました。これらの要素を使用して、段落の先頭文字または先頭行でその段落の残りの部分と異なるフォント サイズを使用するような、新聞や雑誌が使うスタイルで記事をレイアウトできます。
Internet Explorer 5.5 の最も注目すべき重要な新機能の 1 つは、縦書きテキスト レイアウトのサポートです。中国語の繁体字や日本語ではページの上部から下部に向かって垂直にレイアウトする必要があるので、このような言語でオーサリングするためには、この機能が重要であることは明白です。これまでは、テキストを垂直に表示するために、ドキュメントの作者はイメージまたは水平レイアウトを使用する必要がありました。これらの技法は、中国語や日本語のコンテンツを迅速また最適に公開する助けにはなりませんでした。 Internet Explorer 5.5 では、新しく提案された CSS writing-mode プロパティを "tb-lr" に設定することにより、テキストを縦書きにできるようになりました。この設定により、コンテンツは上から下、左から右に表示されるようになります。 writing-mode プロパティは International Layout W3C Working Draft  の一部として提案されています。
マルチメディア
HTML+TIME を使用して、ページの異なる部分の要素がイベントや時間値に対してどの時点で表示、消去、または応答するかを指定する豊富なメディアに対応した対話型のコンテンツを作成できます。 P、DIV、SPAN などの従来の HTML 要素に以外にも、DirevtMusic コンテンツも含めた、ムービー クリップ、アニメーション、イメージ、およびオーディオを制御できます。
HTML+TIME は、スクリプティングを必要としないで、この対話性や豊富性を有効にできます。たとえば、ユーザーのクリックに応答して、イメージやムービーを表示し、サウンドを再生できます。また、その要素をページ上のほかの要素のタイミングに同期させることもできます。 systemCaptions 属性により提供される Accessibility サポートを使用して、ユーザーがキャプションの表示を選択したときにテキストを表示するようにできます。その他の新しいシステム属性には systemLanguage と systemOverdubOrSubtitle があります。これらは共に、ユーザーのシステム設定を基準にコンテンツを選択します。たとえば、ページにフランス語と英語の両方が含まれている場合に、ユーザーのシステムがフランス語に設定されていると、フランス語のテキストだけが表示され、フランス語のオーディオだけが再生されます。
animate、 set、 animateMotion、および animateColor 属性の形式で、アニメーション サポートに新機能が含まれます。これらの属性を使用することにより、スクリプトを使わないで、ある径路や一連の点に沿ってページ上で HTML 要素を移動でき、要素の色を変更でき、高さなどのその他の属性を変更できます。
複数のナレーション、広告、または説明を含む高度なインタラクティブ コンテンツでは、excl 要素を使用して、ユーザーが複数の選択肢やメディアの種類から選択できます。たとえば、ユーザーは複数のムービーやストリームから見たいものを選択できます。さらに、ストリームにはメイン コンテンツを一時停止し、終了時に再開するような広告を含めることができます。 excl 要素は、非アクティブなメディアや HTML 要素を自動的に無効にし、ユーザーの選択を基準にした再生を管理します。
次の HTML の例は、Web ページに HTML+TIME を組み込む方法を示し、HTML+TIME 属性の簡素化された構文を例示しています。 Internet Explorer 5.5 では、属性に対して t: 名前空間修飾子は必要なくなりました。ただし、HTML+TIME 要素では依然として t: プレフィックスが必要です。たとえば、ムービー クリップの開始時間を指定する場合は、t:begin の代わりに begin を使用します。この例では、"Space Shuttle Launch" というテキストがページが読み込まれてから 12 秒間表示されます。 clipBegin 属性を指定することにより、ビデオの最初の 3 秒間を読み飛ばします。ムービーは、ページが読み込まれてから 14 秒間再生されます。
<html xmlns:t ="urn:schemas-microsoft-com:time" >
<head>
<style>
.time { behavior: url(#default#time2) }
t\:media { behavior: url(#default#time2) }
</style>
</head>
<body>
<p class="time" begin="0" dur="12">Space Shuttle Launch</p>
<t:media id="clip1" begin="0" dur="14" style="width=300;height=200" clipBegin="3"
src="http://www.microsoft.com/directx/dxm/samples/multimedia/media/movie/movie.avi" />
</body>
</html>
サンプルの動きをご覧ください
グラフィックス
Internet Explorer 5.5 では、 DHTML フィルタとトランジションの領域で重要な強化が行われています。ダウンロード時間を増やさず、大きな帯域幅も必要としないで、クライアント側でより視覚に訴えかけるコンテンツをレンダリングできる多くのフィルタが提供されています。いくつかの例として、Gradient、Matrix、AlphaImageLoader フィルタなどがあります。
Gradient フィルタ を使用すると、固定解像度で定義済みのグラデーションのイメージを作成しないで、クライアント側のディスプレイの解像度でカラー グラデーションをレンダリングできます。グラデーションには色定義の一部として透明度の値を含めることもでき、コンテンツの作成者は興味深いビジュアル効果を作り出すこともできます。グラデーションを定義する色の値にアクセスでき、フィルタが公開しているプロパティを使用して動的に変更できます。
Matrix フィルタ は、コンテンツの作者が倍率と回転を組み合わせて要素に任意の変換を適用できます。 AlphaImageLoader フィルタを使用すると、デザイナはページの残りの部分と正しく調和できる、ピクセルごとにアルファ カラー値を持つ PNG イメージをインポートできます。
編集
このリリースでは、HTML 編集機能について作業してきました。編集機能では、ブラウザ内での HTML の完全なインプレイス編集のサポートと、完全な HTML 編集機能を Win32 アプリケーションに組み込むための Internet Explorer コンポーネントの管理の許可の両方を行います。
標準の HTML 要素と同じ形式で機能できるカスタム要素を記述する作者の能力をより強化するために、 Internet Explorer 5.5 は HTML ドキュメント内での編集可能領域のサポートを提供します。つまり、ドキュメント内の任意の要素をいつでも編集モードに切り替えられます。ユーザーは、豊富な HTML コンテンツを完全に WYSIWYG (what you see is what you get) 編集できるようになります。開発者はこれらの豊富な編集要素を使用して、たとえばフォームに独自のデータ入力フィールドを作成するような、すぐれた作業を行うことが可能になります。詳しい説明とサンプルについては、http://msdn2.microsoft.com/en-us/library/ms537837.aspx を参照してください。
Internet Explorer 5.5 で大きく強化されたもうひとつの側面は、豊富な HTML WYSIWYG 編集を提供する Internet Explorer の Mshtml.dll コンポーネントをホストするアプリケーションを有効にすることです。編集機能の一般的な改善に加えて、フックを追加しました。ユーザーはこのフックを使用して、既定の編集操作の一部をオーバーライドするホストを有効にでき、ユーザー独自の拡張を提供することにより価値を追加できます。詳しい説明とサンプルについては、 The MSHTML Editing Platform in Internet Explorer 5.5.を参照してください。
まとめ
これで、Internet Explorer 5.5 でサポートされる新機能に関する簡単なツアーは終わりです。このツアーが読者の役に立ち、新たな機能を使用した調査や実験を始めるきっかけになることを願っています。 Internet Explorer 5.5 と呼ばれるこのリリースは重要な機能拡張を含んでいます。このリリースは優れた対話型アプリケーションを構築できるので、DHTML コンテンツの作成者はこのリリースを重要なものと感じることでしょう。
|
