Dynamic HTML

[アーティクル]
03/19/2008


		次のトピック: ダイナミックスタイル

Dynamic HTML

Dynamic HTMLは、Microsoft® Internet Explorer 4.0の革新的な機能の1つである。Dynamic HTMLにより、オーサーはドキュメントのレンダリングとコンテントを動的に変更でき、視覚的に優れたHTMLドキュメントを作成できる。Dynamic HTMLドキュメントでは、これらの変更はユーザーとの対話によって可能となるため、サーバー側のプログラムや、特殊効果を実現する複雑なHTMLページに依存することがない。

Dynamic HTMLにより、今まで実現することが難しかった効果を簡単にドキュメントに追加できる。次に、追加できる効果の例を示す。

ドキュメント内のテキストと画像を非表示にしておき、時間の経過やユーザーの要求があるまで、このコンテントを非表示にしておく。

ドキュメント中のテキストや画像をアニメーションとして動かせる。これは、指定したパス（開始位置から終了位置まで）によって動くため、各エレメントの動作とは無関係である。

最新のニュース、株価速報、その他のデータによって、コンテントを自動的にリフレッシュするチッカを作成する。

ユーザーがフォームに入力したデータの読み込み、処理、応答を即座に行える。

Dynamic HTMLでは、現在のドキュメントを変更することでこれらの効果を実現でき、自動的にドキュメントを整形しなおし再表示することで、この変更を反映する。このとき、ドキュメントのリロードや、新しいドキュメントのロード、サーバーへの新しいコンテント生成の要求は必要ない。その代わりに、クライアントマシンでその変更のための計算を行い、実行する。つまり、ユーザーは、テキストやデータの変更結果がサーバーから送られてくるのを待つ必要がないのである。さらに、Dynamic HTMLでは、変更を実行するために、アプリケーションや埋め込みコントロールに追加のサポートを要求しない。通常、Dynamic HTMLドキュメントは自己内蔵型であり、スタイルや短いスクリプトを使って、ユーザー入力を処理したり、ドキュメントのHTMLタグ、属性、スタイル、テキストを直接処理する。

Dynamic HTMLのHTMLエレメント、属性、スタイルは、既存のHTML、カスケーディングスタイルシート（CSS）の仕様に基づいている。ユーザーは、Internet Explorer 4.0あるいは他のブラウザによってドキュメントをブラウズできる。もちろん、Dynamic HTMLをサポートしていないブラウザでこのドキュメントをブラウズした場合、ドキュメントに追加した動的でインタラクティブな機能は十分に作用しない。しかし、Dynamic HTMLはいくつかの基本的なガイドライン"degrade gracefully"に従って設計されているため、ドキュメントのコンテントは他のブラウザでも参照できる。

Dynamic HTMLは、アプリケーションやActiveX™コントロール、他の埋め込みオブジェクトなど十分に機能する。既存のアプリケーションやコントロールを利用でき、またDynamic HTMLの機能を使った新しいものを作成することもできる。また、アプリケーションやコントロールによって複雑な演算処理を行ったり、その出力結果やユーザー入力処理などをDynamic HTMLによって行える。例えば、Dynamic HTMLのデータバインド機能とデータソースオブジェクトを組み合わせて、サーバー上の大規模データベースの内容を照会、表示、変更できるドキュメントを作成できる。データソースオブジェクトではデータベースを読み出してデータをセットし、Dynamic HTMLでは残りの処理（ユーザークエリーの処理、データの表示、オブジェクトに必要なインタラクションの実行）を行う。

つまり、Dynamic HTMLは、以前のブラウザ技術の短所を取り除いたのである。オーサーは、対話機能や特殊効果でのパフォーマンスを犠牲にすることなく、インターネット／イントラネットのいずれに対しても、革新的なWebサイトを構築できる。Dynamic HTMLでは、ドキュメントの見栄えを改良するだけではなく、サーバーへのアクセスを減らすことでその負担を軽減し、パフォーマンスを向上させている。

次に、Dynamic HTMLの各機能について説明する。各トピックをクリックすると、適切な個所にジャンプできる。

ダイナミックスタイル

ダイナミックコンテント

位置指定とアニメーション

フィルタとトランジション

フォントのダウンロード

データバインド

Dynamic HTMLオブジェクトモデル

Microsoft社は、W3C（World Wide Web Consortium）と共同で、Webをよりオープンな環境をするための、最も標準的なソリューションを提供している。これで、効率的でインタラクティブなマルチメディアコンテントの構築が可能となる。これらの試みとしてのDynamic HTMLにおけるHTML拡張やCSS拡張のすべては、W3C仕様準拠、あるいはW3Cで審査中のものである。Microsoft社は、今後もW3C勧告に準拠するため、Internet Explorerでの対応を予定している。

ダイナミックスタイル

ダイナミックスタイルは、Dynamic HTMLの中心的な機能である。エレメントの追加や削除を行わなずに、スタイルやスタイルシートを使って、ドキュメントの見た目やエレメントの整形を即座に変更できる。このため、ドキュメントサイズが少なくなくて済み、スクリプトの処理も速い。

オブジェクトモデルによって、スタイル変更をプログラム的に扱えるようになった。これにより、個々のエレメントに対してインラインスタイルを設定できるし、簡単なスクリプトを記述すればドキュメントのカスケーディングスタイルシート（CSS）のスタイルルールも設定できる。スクリプト言語してはJavaScript、JScript、VBScriptで記述できる。

インラインスタイルは、STYLE属性を使って、そのエレメントに適用されるCSSスタイルを割り当てる。これらのスタイルは、個々のエレメントに対するstyleオブジェクトを読み出すことで、調べたり設定できる。例えば、見出しのテキストにマウスを移動したときにそのテキストを強調したい場合、見出しのインラインスタイルを使ってフォントを拡大し、色を変更することができる。次に、これを実現する簡単な例を示す。
<HTML>
<HEAD><TITLE>Dynamic Styles</TITLE>
<SCRIPT LANGUAGE="JScript">
function doChanges() {
window.event.srcElement.style.color = "green";
window.event.srcElement.style.fontSize = "20px";
}
</SCRIPT>
<BODY>
<H3 ID=heading onmouseover="doChanges()" STYLE="color:black;font-size:18">Welcome to Dynamic HTML!</H3>
<P>You can do the most amazing things with the least bit of effort.
</BODY>
</HTML>
上記の例では、onmouseoverステートメントを含んだHTMLタグにカーソルを移動したときの応答プロセス（イベントハンドラ）が、ユーザーがそのHTMLタグ（見出し）の上へマウスを最初に移動したとき（イベント）に制御を受け取る。このイベントハンドラではeventオブジェクトのsrcElementプロパティにより、どのエレメントがイベントのソースであるか（この場合はH3エレメント）を決定する。その後、styleオブジェクトのcolorプロパティとfontSizeプロパティで、エレメントの色やフォントサイズを変更する。これらのプロパティを設定することで、見出しのSTYLE属性で指定された、CSSの"color"属性と"font-size"属性が変更される。そして、ブラウザでは即座に画面上のテキストを更新し、これらの新しい属性値を表示する。

スタイルを使えば、ページ上でマウスをクリックするとマーク付きリストの項目を表示するような、ドキュメントを簡単に作成できる。次に例を示す。
<HTML>
<HEAD><TITLE>Dynamic Styles</TITLE>
<SCRIPT LANGUAGE="JScript">
function showMe() {
document.all.MyHeading.style.color = "red";
document.all.MyList.style.display = "";
}
</SCRIPT>
<BODY onclick="showMe()">
<H3 ID=MyHeading>Welcome to Dynamic HTML!</H3>
<P>You can do the most amazing things with the least bit of effort. Just click and see!
<UL ID=MyList STYLE="display:none">
<LI>Change the color, size, and typeface of text
<LI>Show and hide text
<LI>And much, much more
</UL>
<P>And this is just the beginning!
</BODY>
</HTML>
上記の例では、CSSのdisplay属性を"none"に設定しているため、ドキュメントがロードされた直後はULリストは表示されない。ユーザーがページ上をクリックすると、イベントハンドラがこの属性の値をクリアし、ブラウザ上にULリストを表示させる。このリストに続くコンテントは、それがどのようなものであれ、レンダリングの結果、下にシフトされる。

ダイナミックスタイルは、静的スタイルシートにおけるW3C Recommendation for Cascading Style Sheets (CSS)の仕様に準拠している。ダイナミックスタイルの詳細については、ダイナミックスタイルを参照すること。

ダイナミックコンテント

Dynamic HTMLでは、ロードした後でもドキュメントのコンテントを変更できる。Internet Explorerには、動的にドキュメントを構築し変更できるプロパティやメソッドが数多く用意されている。これらを使えば、エレメントの挿入や削除から、個々のエレメント内のテキストや属性の変更まで行える。

Dynamic HTMLオブジェクトモデルは、ドキュメント内のすべてのエレメントにアクセスできる。次に、簡単な例を示す。（色やテキストを変更するのと同様に）数行のスクリプトを記述することで、エレメントを置き換えたり変更できる。
<HTML>
<HEAD><TITLE>Welcome!</TITLE>
<SCRIPT LANGUAGE="JScript">
function changeMe() {
document.all.MyHeading.outerHTML = "<H1 ID=MyHeading>Dynamic HTML!</H1>";
document.all.MyHeading.style.color = "green";
document.all.MyText.innerText = "You can do the most amazing things with the least bit of effort.";
document.all.MyText.align = "center";
document.body.insertAdjacentHTML("BeforeEnd", "<P ALIGN="center">Just give it a try!</P>");
}
</SCRIPT>
<BODY onclick="changeMe()">
<H3 ID=MyHeading>Welcome to Dynamic HTML!</H3>
<P ID=MyText>Click anywhere on this page.</P>
</BODY>
</HTML>
ユーザーがページ上でクリックすると、スクリプトによりH3エレメントがH1エレメントに置き換わり、段落をセンタリングし、ドキュメントの最後に新しい段落を挿入する。このようにスクリプトを使用すると、ドキュメントのあらゆるエレメントやテキストの追加、削除、置き換えが行える。

ダイナミックコンテントの詳細については、ダイナミックコンテントを参照すること。

位置指定とアニメーション

位置指定は、エレメントにx座標、y座標、z-indexを指定することにより、ドキュメント上の指定した位置にHTMLエレメントを配置することができる。これは、表示したい位置に、画像、コントロール、テキストなどのエレメントを配置できることを意味している。また、2つのエレメントを同じ位置に定義することで、特殊なオーバーラップ（重ね合わせ）効果も可能となる。

位置指定は、カスケーディングスタイルシートを拡張したものである。エレメントのCSS属性を設定することで、エレメントの表示位置を設定できる。画像の表示を絶対位置で指定する例を次に示す。
<HTML>
<HEAD><TITLE>Positioning</TITLE>
<BODY>
<H3>Welcome to Dynamic HTML!</H3>
<P>With positioning, you can place images exactly where you want them, even behind text and other images.
<IMG STYLE="position:absolute;top:0; left:0; z-index:-1" SRC="banner.gif">
</BODY>
</HTML>
上記の例では、ページの左上に画像を配置している。z-index属性を-1に設定することで、画像とテキストを重ね合わせ、画像の前面にテキストを配置できる。

Internet Explorer 4.0では、ドキュメントをロードした後でも、エレメントの位置指定やアニメーションをサポートしている。ユーザーは、オブジェクトモデルを使用して、スタイルやスタイルシートにアクセスできるので、色を設定したり変更するのと同様に、簡単にエレメントの位置を指定したり変更することができる。このため、ユーザーが今見ているドキュメントの、エレメントの位置変更やアニメーションでさえ、簡単に行える。アニメーションの場合、インターバルごとのエレメントの位置を調節することだけである。次の例は、バナー画像がページ上部を右から左に動いていき、左上隅で止まるというものである。
<HTML>
<HEAD><TITLE>Dynamic Positioning</TITLE>
<SCRIPT LANGUAGE="JScript">
var id;
function StartGlide()
{
document.all.Banner.style.pixelLeft =
document.body.offsetWidth;
document.all.Banner.style.visibility = "visible";
id = window.setInterval("Glide()",50);
}
function Glide()
{
document.all.Banner.style.pixelLeft -= 10;
if (document.all.Banner.style.pixelLeft<=0) {
document.all.Banner.style.pixelLeft=0;
window.clearInterval(id);
}
}
</SCRIPT>
<BODY onload="StartGlide()">
<H3>Welcome to Dynamic HTML!</H3>
<P>With dynamic positioning, you can move images anywhere in the document even while the user views the document.
<IMG ID="Banner" STYLE="visibility:hidden;position:absolute;top:0; left:0; z-index:-1" SRC="banner.gif">
</BODY>
</HTML>
上記の例では、ドキュメントがロードされると"StartGlide"関数が呼び出される。この関数は、ドキュメントボディの右上隅にバナー画像の絶対位置を設定し、画像を表示した後、画像の移動が開始される。"Glide"関数は50ミリ秒間隔で呼び出される。この関数では、画像を10ピクセル左に移動させ、画像が最終的に左隅に行くと移動が停止される。

動的な位置指定は、コンシューマやビジネスアプリケーションで広く使われている。ダイナミックスタイル、位置指定、透過画像、透過ActiveXコントロールを組み合わせることにより、ドキュメント上で豊富なアニメーション効果を表現できる。

動的な位置指定とアニメーションはW3C Working Draft on Positioning HTML with Cascading Style Sheetsに基づき、最終勧告に準拠するよう必要に応じて適応される。位置指定を使ったドキュメントは、標準的なブラウザとの互換性がある。

CSS Positioningについての詳細は、位置指定を参照すること。

フィルタとトランジション

Internet Explorer 4.0は、CSSのプロパティを使って、フィルタやトランジションを記述できるように、拡張アーキテクチャをサポートしている。ビジュアルフィルタは、スクリプトを使わずに、エレメントにビジュアル効果を適用できる。次に例を示す。
filter: filter_name( param1, param2, ...)
トランジションは、エレメントの表示を変更する（例えば、ある画像から他の画像に切り替える）ときに適応される効果である。ページ内の特定エレメントに対するトランジションと、ページ間トランジションの両方がサポートされている。トランジションは、"スライドショー"などがよく知られている例であろう。フィルタは、Webページのコンテントに適用できる効果（テキストのドロップシャドウ効果など）である。Internet Explorer 4.0は、標準のフィルタやトランジションが用意されているし、サードパーティから供給されるものでそれらを補うことも可能だ。フィルタの詳細については、ビジュアルフィルタとトランジションによるマルチメディア効果の作成を参照すること。

フォントのダウンロード

Internet Explorer 4.0では、動的にダウンロードされたフォントの使用もサポートしている。@font-faceスタイル属性を使うと、そのページだけで使われているフォントを自動的にダウンロードして参照できる。しかし、いったんページが無効になるともはや表示されることはない。次の例は、フォントのダウンロードの使用例である。
<HTML><HEAD>
<STYLE>@font-face {font-family:comic;0 src:url(http://abc.domain.com/fonts/comicbold.eot);}
</STYLE>
</HEAD>
<BODY>
<p style="font-family:comic;font-size:18pt">this line uses the @font-face style element to display this text using the Comic Sans MS font in 18-point size and bold.
<p>
</BODY></HTML>
データバインド

データバインドはDynamic HTMLのすばらしい機能のひとつであり、データベースやCSVファイル（カンマ区切りのテキストファイル）など他のデータソースからのデータに、ドキュメント中のエレメントを簡単にバインド（連結）できる。ドキュメントがロードされると、自動的にデータソースからデータが読み出され、エレメント内に整形されて表示される。

データバインドのもっとも現実的な使用例としては、ドキュメント内で自動的かつ動的に表を作成することである。これは、TABLEエレメントをデータソースにバインドすることで可能となる。ドキュメントがロードされると、その表には、データソースから各レコードを読み出すための新しい行が作成され、、データソースのレコードフィールドのデータで各行のセルが埋めらていく。この作成は動的に行われるため、新しい行が順次作成されている途中でも、ユーザーはページをブラウズすることができる。さらに、いったんデータが表示されてしまえば、そのデータに対するソートやフィルタなどの操作は、サーバーへの追加リクエストなしに行える。つまり、データバインド機能を使うと、いったん読み出したデータを使って、簡単に表を再構成できるのである。

もうひとつ使用例を紹介しよう。それは、ドキュメント中の複数のエレメントを、指定されたレコードの特定フィールドとバインドすることだ。ドキュメントがロードされると、エレメントはレコードフィールドのデータで埋められる（この場合、そのレコードが"カレント"レコードであるケースも多い）。この単純な例としては、名前、e-mailアドレス、その他の個人情報からなるフォームデータを、データベースからのデータで作成する例があるだろう。この場合、一人の個人データをバインドするのであれば、単にカレントレコードとなるレコードを指定するだけであり、他の操作は必要ない。

さらに、フォーム内の各フィールドに各レコードフィールドをバインドする場合にも利用できる。フォームの設定や値を変更すれば、（バインドされたデータを単に表示するだけでなく）ユーザーがコンテントを変更することも可能となる。つまり、変更したデータを（HTTPサーバーや、サーバー上のデータベースなどの）データソースに送信すれば、これらの変更を反映することもできるのだ。

ドキュメントでデータバインドを行うには、ドキュメントにデータソースオブジェクトを追加しなくてはならない。データソースオブジェクトには、データソースとの間でデータをやり取りできるActiveXコントロールやJavaアプレットがある。Microsoft社は、Internet Explorer 4.0で、この他に2つのデータソースオブジェクトを追加提供している。1つはCSVファイル（カンマ区切りのテキストファイル）にアクセスするもの、もう1つはSQL Serverや他のODBCソースのSQLデータにアクセスするものである。また、この他のデータソースオブジェクト（例えば、JDBCデータソースアプレットなど）でも、Microsoft社およびサードパーティのものであればアクセスできる。

次の例では、簡単にデータソースにバインドする方法を示している。このドキュメントがロードされると、"sampdata.csv"ファイルの全レコードから先頭の3フィールドを読み込んで、表形式で表示する。
<HTML>
<BODY>
<OBJECT CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" ID=sampdata>
<PARAM NAME="DataURL" VALUE="sampdata.csv">
<PARAM NAME="UseHeader" VALUE="True">
</OBJECT>
<TABLE BORDER=1 DATASRC="#sampdata">
<THEAD>
<TR><TH>First Field<TH>Second Field<TH>Third Field
<TBODY>
<TR><TD><SPAN DATAFLD=A></SPAN><TD><SPAN DATAFLD=B></SPAN><TD><SPAN DATAFLD=C></SPAN>
</TABLE>
</BODY>
</HTML>
データバインドの詳細については、データバインドを参照すること。

Dynamic HTMLオブジェクトモデル

オブジェクトモデルは、Dynamic HTMLの基盤であり、Dynamic HTMLの機能を利用するためのスクリプトやコンポーネントのインターフェイスを提供している。

オブジェクトモデルを使えば、ドキュメント内のすべてにアクセスでき、それを操作することも自由自在である。ドキュメント内のHTMLエレメントは、個々のオブジェクトとして利用できる。つまり、プロパティの読み込みや設定、あるいはメソッドの呼び出しによって、エレメントやその属性を調べたり、変更することができる。テキストは、エレメントのプロパティやメソッドから利用できる。

また、オブジェクトモデルでは、キーの状態やマウスクリックなどのユーザーアクションをイベントとして利用できる。イベントハンドラの関数やルーチンを作成することで、これらのアクションや他のイベントを中断したり処理できる。イベントハンドラは、指定されたイベントが起こるごとにその制御を受けとり、ドキュメントを変更するオブジェクトモデルの使用も含めて、あらゆるアクションを実行できる。

ドキュメントを変更するオブジェトモデルの単純な例を次に示す。ページ上でマウスをクリックすると、見出しの色を変更し、テキスト行を追加する。
<HTML>
<HEAD><TITLE>Welcome!</TITLE>
<SCRIPT LANGUAGE="JScript">
function changeMe() {
document.all.MyHeading.style.color = "green";
document.all.MyText.innerText = "You can do the most amazing things with the least bit of effort.";
}
</SCRIPT>
<BODY onclick="changeMe()">
<H3 ID=MyHeading>Welcome to Dynamic HTML!</H3>
<P ID=MyText>Click anywhere in this document.</P>
</BODY>
</HTML>
上記の例には"changeMe"というイベントハンドラがあり、マウスクリックを処理している。イベントハンドラは、documentオブジェクトのallコレクションを使って、H3エレメントやPエレメントで設定されているID値を取得する。またstyleオブジェクトのcolorプロパティの設定によって、見出しの色が変更される。そしてinnerTextプロパティの設定によって、段落のテキストが置き換えられる。

オブジェクトモデルは、Netscape NavigatorでのJavaScriptオブジェクトモデルのスーパーセットである。これは、Dynamic HTMLをサポートしていないブラウザともある程度の範囲で互換性があることを意味する。基本的なガイドラインに準拠していれば、Internet Explorerで実行する際に、オブジェクトモデルの利点を完全に引き出すスクリプトを書くことができる。また、Dynamic HTMLをサポートしていないブラウザで実行しても適度な結果がもたらす。

オブジェクトモデルに関する重要なトピックについては、ウィンドウ、フレーム、ダイアログボックスにおける機能、エレメントとコレクションにおけるスクリプト記述、イベントモデルの理解を参照すること。

オブジェクトモデルのオブジェクト、プロパティ、メソッド、コレクションについては、DHTMLリファレンスを参照すること。

参考

Dynamic HTMLでは、従来のHTMLやカスケーディングスタイルシートが拡張され、ドキュメントのすべての要素（タグ、属性、スタイル、画像、オブジェクト、テキスト）にアクセスし処理できるようになって。また、必要に応じて、これらを作成したり、移動、変更などが自在に行える。

なお、HTML、カスケーディングスタイルシート、スクリプト言語に関して詳しくない場合は、Dynamic HTMLページを作成する前に、以下のドキュメントを参照すること。

HTML 3.2 Reference Specification

W3C Recommendation for Cascading Style Sheets (CSS)

W3C Working Draft on Positioning HTML with Cascading Style Sheets

VBScript

JScript

トップに戻る
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.

Dynamic HTML

Dynamic HTML

ダイナミックスタイル

ダイナミックコンテント

位置指定とアニメーション

フィルタとトランジション

フォントのダウンロード

データバインド

Dynamic HTMLオブジェクトモデル

参考

その他のリソース