Internet Explorer 5: サイト ビルダーのための概要
Michael Wallent
Microsoft Corporation
Updated November 4, 1998 Posted June 11, 1998
日本語版最終更新日 1999 年 3 月 19 日
編集者注: Behaviorは、Internet Explorer 5の新しいオーサリング機能の多くと同様に、HTML 4.0やCSS2といったWorld Wide Web Consortium(W3C)の承認済みの標準の拡張案です。
Webの持つ能力は、ここ2年間だけで大きく変化しました。しばらく前までは、Webページのインタラクティブ性はたかだかアニメーション GIFに留まっていました(それでも進歩だったのです)。Webはもっぱらドキュメントとページを扱うためのものでした。Web上のアプリケーション? スプレッドシート? 退職金ファンドのためのイントラネット アプリケーション? 売上報告ツール? そういうものは単なる夢に過ぎませんでした。
クライアント サイド スクリプティングと、より高度なサーバーの導入に伴い、Web上でのアプリケーションの構築は、単なる夢からいくぶん現実に近づきました。しかし、これらのアプリケーションは、ある程度のインタラクティブ性を実現するためにはサーバーに大きく依存するしかなく、しかもWeb以前の典型的なデスクトップ アプリケーションと比べるとかなりの違いを感じさせました。
問題: 往復が多すぎる
Microsoftの旅行計画サイト、 Expedia  , はWebアプリケーションの良い例です。このアプリケーションでは、航空機のチケット、ホテルの部屋の予約、およびその他の旅行サービスをオンラインで素早く簡単に購入することができます。しかし、フライト計画ウィザード ページにある、ユーザーがカレンダから旅行の日付を選べるようにしている機能では、ブラウザが別のカレンダ ページにナビゲートする必要があります。ユーザーが日付を選択すると、サブミット文字列に日付をエンコードした状態で、ページがサーバーに再サブミットされます。その後、新しいページがユーザーに対して送信されますが、このページは目的の日付が挿入されている点を除けばオリジナルのページとまったく同じものです。つまり、ユーザーは本質的に同じページを2回ダウンロードしたことになります。これはかなりの処理量です。
なぜこのようなことが起こるのでしょう? Webには何が欠けていたのでしょう? その答えは、サーバーからまったく新しいページを受け取る以外に、ページを変更する手段がなかったということです。1つの単語を青色で表示したい? 新しいページが必要です。ページ上の時刻を変更したい? 新しいページが必要です。何かしら新しいコンテンツを表示したい? 新しいページが必要です。
幸いなことに、Internet Explorer 4.0はDynamic HTMLによってこの状況を改善しました。DHTMLは、本質的にはHTMLのためのアプリケーション プログラミング インターフェイスと考えることができます。ページは静的なものではなくなりました。1つの単語を青色で表示したい? 1行のスクリプトで済みます。ページ上の時刻を変更したい? 簡単です。何かしら新しいコンテンツを表示したい? 問題ありません。重要なのは、この新しいインタラクティブ性が、サーバーからまったく新しいページを受け取らなくても、クライアント側で迅速かつ簡単に実現できるということです。
これにより、ユーザーがデスクトップ上で使用してきたアプリケーションのように高速で高機能な真のアプリケーションを、HTMLとWebを使って構築できるようになったのです。
ブラウザではなく、プラットフォームを構築する
これで問題は解決しました。では、なぜInternet Explorerチームに長期休暇を与えなかったのか? それは、プラットフォームの構築はブラウザの作成とは違うからです。Internet Explorer 4.0の開発は貴重な経験でした。顧客(あなた方のことです)から、どの機能がよかったか、どの機能に改善の必要があるかといった意見を聞くのは貴重な経験でした。その結果として、第2世代のDHTMLブラウザであるInternet Explorer 5が作られたのです。われわれは前回の経験からいくつかの教訓を得ました。あなたと、あなたの顧客が新たな変更点を気に入ってくださることを期待しています。
より高速かつ安定で、より予測可能に
アプリケーションを構築する場合、そのアプリケーションのプラットフォームは強力かつスケーラブルでなくてはなりません。Internet ExplorerチームがDHTMLを使用している開発者から受け取った重要なメッセージの1つは、DHTMLがより高速で安定したものにならなくてはならないということでした。DHTMLがアプリケーションの開発のための効果的な手段となるためには、「ブラウザ レベルの速度でなく、アプリケーション レベルの速度」にならなくてはなりません。Internet Explorer 5では、いくつかの変更点により、パフォーマンス、安定性、そして予測可能性が強化されています。
CSS Positioning
CSS Positioningは、開発者がページ上の要素の位置とレイアウトを細かく制御するための効果的な手段です。Internet Explorer 4.0にあった位置指定に関連する制限のいくつかが解消されています。たとえば、現在ではすべてのHTML要素を絶対と相対の両方の方式で配置することができます。また、要素の位置を指定するかどうかを、任意の時点で変更することができます。
スタイル シート
Internet Explorer 4.0は、カスケーディング スタイル シート(CSS)レベル1を、業界を代表するレベルでサポートしていました 。しかし、CSS1は扱うのが簡単とはいえません。たとえば、ページ上のテキストのフォント サイズを増やそうとした開発者は、CSSの継承の規則のために、要素が表示される実際のフォント サイズがその親要素によって制御されることがあるということに気づきます。しかも、要素のフォント サイズを調べても、実際の表示サイズではなく、その要素に対して直接に設定されたフォント サイズが返されます。このようなタスクを簡単にするために、Internet Explorer 5では、すべてのCSSプロパティについて、個々の要素が現在使用している値を公開するcurrentStyleオブジェクト(element.currentStyle)が導入されています。
固定レイアウトの表
Internet Explorer 5では、パフォーマンスが2つの点で改善されています。第1に、DHTMLやデータ バインディングで大きなドキュメントを扱うといったタスクを単に高速に実行することができます(Webのブラウジングも高速化されています)。さらに、Webオーサーがページに関してより多くのヒントを指定できるようになっています。これにより、ページの処理が簡単になり、多くのケースでは驚くほど高速化されます。
HTMLの表は、本質的に低速な処理の一例です。表はレイアウトとグリッド サービスの2つの機能を持っています。表をレイアウト操作に使用するオーサーは、表がコンテンツに合わせてスケーリングされる機能を利用してきました。これには時間がかかります。しかし、ページ オーサーは一般に列と行のサイズを知っており、前もって決定することができます。このような場合には、表をグリッドのように使うことができ、ブラウザが必要とする情報もごくわずかです。
Internet Explorer 5がこの問題を解決するために使用しているメカニズムは固定レイアウトの表です。固定レイアウトの表は、オーサーが列のサイズを指定し、表のセルの中のコンテンツのサイズが表のレイアウトに影響を与えないという点で通常の表と違います。多くの場合、固定レイアウトの表を使うと、パフォーマンスが2桁近く改善されます(100秒が1秒に)。しかも、これを使うためには、表に新しいCSSプロパティを1つ追加するだけで済みます(table-layout:fixed)。さらに、固定レイアウトの表はプログレッシブ レンダリングが可能です。このため、ブラウザは表をダウンロードしながら表示します。通常の表では、表全体がダウンロードされるまでは表示が行われません。これにより、ページのロードが高速化されるだけでなく、最初のデータ ページが表示されるまでの時間が大幅に短縮されます。
有効期限のチェック
われわれが対処したもう1つの問題が、ページと画像の両方のHTTP-Expiresヘッダです。Internet Explorer 5は、オブジェクトに対する要求をキャッシュによって満たすことができ、そのオブジェクトの有効期限が過ぎていなければ、最初にネットワークをチェックしないようになりました。これにより、更新されることの少ない画像を多数使用しているページでのネットワーク トラフィックが大幅に削減されます。これまで、この要求は使われず、すべてのオブジェクトについて更新されていないかどうかをチェックしていました。
アプリケーションのためのリッチなプラットフォーム
Internet Explorer 5は、これまでのブラウザよりも高速になり、安定性を増しただけでなく、より強力にもなりました。ドキュメントの作成に必要なHTMLは、本格的なアプリケーションの構築に必要なHTMLとは違います。以下に、Internet Explorer 5の、高度なアプリケーションの構築を可能にする機能をいくつか紹介します。
フォントサイズの変更
CSSはHTMLドキュメントのルック アンド フィールを指定するためのきわめて強力な手段です。これまで、複雑な動作を表現するためには、何らかのクライアント サイド スクリプティングが必要でした。たとえば、ページのフォント サイズをスクリーン サイズに応じて変更したいと思った場合には、onloadイベントとonresizeイベントを処理し、これらのイベント ハンドラの中でCSS設定をリセットすることでフォント サイズを変更する必要がありました。しかし、いまではこのようなことは不要です。次の行を書くだけで済みます。
<body
style="font-size:function(this.clientWidth/20);">
これは、このドキュメントに適用されるフォント サイズを、ドキュメントの幅を20で割った値にするという意味です(640x480の解像度では約32ピクセル)。開発者が指定するのはこれだけです。ドキュメントのサイズが変わると、インテリジェントな計算エンジン(Microsoft Excelなどのスプレッドシート アプリケーションで使用されているのに似たテクノロジ)が依存関係を判断し、プロパティをリセットします。
この機能はダイナミック プロパティと呼ばれます。ダイナミック プロパティを使うと、任意のプロパティを、他の任意のプロパティの関数として設定することができます。これはCSS Positioningを使用しているページには大きな効果があります。現在では、簡単に作成でき、スクリプトを必要とせず、スクリーンの変化に動的に反応するきわめて複雑なスクリーン レイアウトを簡単にセットアップすることができます。これまでは数百行のスクリプト コードを必要としていたページが、スクリプトなしで表現できるようになったのです。
CSSクラス
Internet Explorer 5で追加されたもう1つのCSSの機能が、要素に複数のCSSクラスを追加できる能力です。要素のクラス プロパティは、適用されるCSSクラスのリストを持てるようになりました。これにより、たとえばマウスが要素の上に置かれたとき、また要素から離れたときに、要素にエフェクトを追加し、削除するのがきわめて簡単になります。
Internet Explorer 4.0では、ページ上の個々の要素がマウス、キーボード、およびフォーカス イベントを受け取れるリッチなイベント モデルが導入されました。Internet Explorer 5は、このイベント モデルに加えて、ドラッグ アンド ドロップをフルにサポートします。HTMLページは、デスクトップや他のアプリケーションに対する完全なドラッグ アンド ドロップのソースとなることができます。カーソルの完全な制御、ドラッグの初期化、およびクリップボード サポートも追加されています。
Persistence
DHTMLを使って実現される一般的な機能の1つに、展開リストがあります。Site Builder Network Workshopは、これをナビゲーション バーに使用しています。このようなリストの問題の1つは、リストに戻るたびに、デフォルトの閉じられた状態に戻っていたことです。リストが自分の状態を「覚えて」いたら便利だとは思いませんか? Internet Explorer 5ではこれが可能です。ページは、不法なクロス ドメイン アクセスから保護されており、cookieの4Kの制限がないローカル ストアに簡単に状態をキャプチャすることができます。さらに、プロパティは名前／値のペアとして格納できるので、格納と取り出しが単純化されています。オーサーはこの情報の格納と取り出しを制御します。状態はお気に入りのページにも関連付けることができるので、1つのページを、それぞれ異なる状態の複数のお気に入りのページとして格納できます。また、このテクノロジは、お気に入りのページにフレームセットの状態を正確にキャプチャさせるために内部的に使用されています。このように、Internet Explorer 5のユーザーは、お気に入りのフレームセット サイトの状態を正確に反映させた形で記録しておくことができます。
XMLサポートと拡張性
Internet Explorer 5では、XMLが2つの形でサポートされています。
XMLは、ドキュメントの中にデータまたはメタデータとして埋め込むことができます。この形式では、XMLは <XML> タグまたは <script language=XML> タグの中に含まれています。その後、要素上で完全なXMLドキュメント オブジェクト モデル(DOM)が公開されますが、XMLタグの中の要素はページ上にはレンダリングされず、HTML DOMには含まれません。これは、XMLデータ ソース オブジェクトを導入したInternet Explorer 4.0におけるXMLサポートの自然な拡張です。
XMLは新たなプレゼンテーション マークアップとして利用することができます。このように、XMLタグはHTMLドキュメント ストリームと混在させることができます。これらの要素にはCSSプロパティを直接に適用して、その表示を制御することができます。
Good Behaviors
この方法でXMLをプレゼンテーションのために使用すると興味深いデモンストレーションを行えますが、これを新しいDHTML Behavior機能と組み合わせると、XMLのプレゼンテーション マークアップとしての真のパワーが引き出せます。
DHTML Behavior (別の特集記事、を参照)は、新しいメソッド、プロパティ、およびイベントを、HTMLまたはXML要素に適用できる「Behavior」にカプセル化する手段です。
DHTMLを使って作成できる機能の一例に、マスク入力フィールドがあります(金額、日付、または時刻などの特定の入力だけを受け付けるフィールド)。マスク入力フィールドをInternet Explorer 4.0で作成する場合、ページ オーサーはページ上に<input>タグを追加し、フォーカスと、コントロールのキーボードとの相互作用を監視するスクリプトを追加することになります。このスクリプトは、新しいマスク入力タイプを必要とするすべてのページについて手作業で作成しなければなりません。一方、DHTML Behavior を使うと、すべてのスクリプトを素早く簡単に使用できるBehavior にカプセル化することができます。このBehavior は、スクリプティングに関する知識がない人でも利用することができます。
例として、マスク入力フィールドの例を示します。たったこれだけで、マスク入力フィールドを使用することができるのです。
<input type=text
style="behavior:url(mask.sct)"
maskType="date">
新しいCSSプロパティbehavior は、Behavior を含んでいるスクリプト ファイルをポイントしています。このBehavior は、maskBehaviorにどのようなタイプのデータを受け付けるべきかを指定する新しいプロパティmaskTypeを定義しています。Behavior のオーサーは、Internet Explorer 4.0でDHTMLを作成するのに使ってきたのと同じテクニックを、いくぶん新しい形で使用することになります。
CSSはXMLにも適用できるので、ページ オーサーは、簡単に使える、自分のドメインに固有の特殊化されたBehavior を持つカスタム タグを作成することができます。たとえば、Internet Explorer 4.0でよく使われたエフェクトに「フライイン」というものがあります。これは、ページがロードされると、その内容がスクリーン外から飛んでくるというものです。これをInternet Explorer 4.0で実現するためには、スクリプティングに関するかなりの知識が必要でした。しかし、いまではそのような知識は不要です。
<style>
MyTag/:flyin { behavior: url(fly.sct);}
</style>
<MyTag:flyin delay="1000">
This content will fly in one second
after the page loads
</MyTag:flyin>
先頭のスタイル ブロックは、<MyTag:flyin>タグのタグ ルールを定義しています。つまり、これがつねにフライインのBehaviorを持つように定義しています。この例では、フライインのBehaviorはインライン スタイルで追加することもできます。
<MyTag:flyin
style="behavior:url(fly.sct)"
delay="1000">
これは、若干異なる構文で、まったく同じ機能を実現しています。
プロパティに加えて、DHTML Behaviorは新しいイベントを作成し、新しいメソッドをサポートすることができます。たとえば、フライインのBehavior はonflyinイベントを持ち、fly()またはstopFly()メソッドを公開することができます。これらは、ドキュメント上では普通のイベントやメソッドとまったく同じように見えます。
すべての人に役立つDHTML
上に示したように、Webページ上でのDHTMLの使用はきわめて簡単になりました。デザイナは、スクリプトを書かなくてもDHTMLを使用することができます。デザイナは自分の使い慣れた用語体系の中で作業を行うことができ、実装から完全に隔離されます。
サイトは、そのプロセスとデザインを表現する共通スキーマを作成することができます。たとえば、ニュース サイトのデザイナが、<MY:TITLE>セクションと<MY:CALLOUT>セクションを持つ<MY:NEWSTORY>タグを使用する、あるいは書店が<BOOKS:REVIEW>タグを使用するなどといったことが考えられます。これらのドメイン固有のタグを使用している人々は、DHTMLの実装上の細部を扱う必要がありません。サイトのデザインだけに専念すればよいのです。
これに加えて、サイトのコンテンツ、スタイル、および動作が完全に分離されているので、サイトのデザイン(または再デザイン)はすべてのページに手を加えなくても行うことができます。たとえば、<MY:NEWSTORY>タグの定義を変更するだけで、このタグを使用しているすべてのページが自動的に更新されます。
DHTML Behavior はDHTMLのコンポーネント モデルですが、開発者とデザイナの両方が使えるようにモデル化されています。
完全なコンポーネント化
Internet Explorer 3.0は、初めての完全にコンポーネント化されたブラウザでした。MicrosoftはMSNシェルなどの社内向けアプリケーションにこれを大いに活用しましたし、America Onlineなどの他のWebブラウザ開発チームも同様でした。
Internet Explorer 4.0は、コンポーネント化のポリシーを押し進めると同時に、コンポーネントの世界にHTML Editingを導入しました。20社以上のパートナ企業が、Internet Explorer 4.0の基本編集機能を使ったアプリケーションを出荷しています。
Internet Explorerでは、コンポーネントの再利用は「組み立て不要」のプロセスです。Internet Explorerのコンポーネントは、完全にビルド、コンパイル、およびテストされており、独自の高機能アプリケーションの中で自由に使用することができます。
|
