梅ちゃん堂 > JavaScript 入門 > はじめに >
- Dynamic HTML について -

JavaScript が当初は LiveScript として Netscape Navigator 2.0 に搭載されて登場したことは前述しました。 その後、JavaScript は多くのブラウザがサポートするようになり、バージョンも1.3(注1)、今やウェブには書かせないスクリプト言語となっています。 JavaScript が短期間にこれほど急速な進化を遂げたのは、ウェブの急激な発展に伴う要求に応える必要があったからでしょう。

JavaScript 自体、かつては実現できなかった多くの表現性を獲得しています。 その中でも特筆すべきは、Dynamic HTML への応用でしょう。この言葉を知っている人も多いと思います。 では、Dynamic HTML(以下、DHTML と約します)って何?と聞かれて答えられますか?

スクリプトを使ってウェブページを動的に見せる技術...?必ずしも間違っていませんが、 それだけでは説明になっていません。例えば以下の簡単なサンプルを見て下さい。マウスに反応したオブジェクトの変化を扱っていますが、 ソースを見れば DHTML でないことがわかります。(DHTML でも同様のことが出来ます。)

Sample 2
「青」「赤」「黄」の上にマウスを当ててみて下さい。
青 赤 黄
タイトル

ソース

<SCRIPT type="text/javascript">
<!--
blue = new Image();
blue.src="images/title_b.png";
red = new Image();
red.src="images/title_r.png";
yellow = new Image();
yellow.src="images/title_y.png";

function SetColor(color) {
document.tfp.src = color.src;
}
//-->
</SCRIPT>
<A href="04.htm" onMouseover="SetColor(blue)"><IMG src="images/blue.png"></A>
<A href="04.htm" onMouseover="SetColor(red)"><IMG src="images/red.png"></A>
<A href="04.htm" onMouseover="SetColor(yellow)"><IMG src="images/yellow.png"></A>
<IMG name="tfp" src="images/title_b.png">

Dynamic HTML と言うからには、HTML の一種であるはずです。通常、HTML では文書を静的に表示するに過ぎません。 JavaScript を使用すれば、任意の HTML を有するウィンドウを生成したり、子ウィンドウやフレーム内の HTML を動的に書き換えることは出来ました。 しかしそれは、丸ごとの書き換えです。下のサンプルは子ウィンドウの例です。

Sample 3
「子ウィンドウ生成」ボタンをクリックすると、テキストエリアに設定した HTML を持つ子ウィンドウが作成されます。 テキストエリアの中味を変えると、その結果が子ウィンドウに現れます。

ソース

<FORM name="childwin_test">
<TEXTAREA name="child_text" cols=40 rows=5>
<HTML>
<HEAD></HEAD>
<BODY bgcolor="gold"><H1>Java Script</H1></BODY>
</HTML></TEXTAREA>
<INPUT type="button" value="子ウィンドウ生成" onClick="child = window.open('', 'child', 'width = 200, height = 100'); with(child.document) { open(); write(document.childwin_test.child_text.value); close(); child.focus();}">
</FORM>

また CGI を使ったことのある人は、CGI が HTML を生成したり、 HTML の内容の一部を書き換えたりすることが出来ることをご存知のはずです。 しかし CGI はサーバーの機能を用いるのでトラフィックに影響を与え、HTML の視覚的な表現のためだけに使用するのはどうかと思います。

サーバーの機能に頼ることなく、現在のページ内の個別の要素やタグにアクセスして、そのテキストを書き換えたり、表示の仕方や位置を変更したりすることが出来れば、 本当の動的 HTML になります。

では、現在のページ内の個別の要素やタグにアクセスするにはどうすれば良いでしょうか? そこで知ってほしいのが、ドキュメント・オブジェクト・モデル(Document Object Model。以下、DOM と約します。)という考え方です。 DOM とは、ウェブページという文書(document)を構造的に理解し、document を最上位のルート(root)と見なした場合に、 ページ内の個々の要素をそこから枝分かれしたオブジェクトと捉える考え方です(注2)

例えば、
document.getElementsByTagName("TABLE")[0].innerHTML(注3)
これを直訳すると、「文書中の "TABLE" という要素名を持つ最初のタグのテキストの中身」という意味になります。 ([0] は、0番目を意味し、DOM では多くのプログラミング言語に見られるように0から数え始めます。)

JavaScript を使い慣れた人なら、これとよく似た構文がすでに JavaScript に存在していたことに気づくでしょう。
document.forms[0].elements[1].value(注4)
「文書中の最初のフォームの2番目の要素の値」という意味で、例えばフォームの2番目の要素がボタンで、その value 属性に設定したテキストがこれに該当します。

しかし、これではちょっとわかりにくいので、普通はフォームや要素に name 属性で名前を設定しておき、
document.MyForm.MyElement.value
などと表現しますね。

これと同様のことが DOM でも可能で、name 属性の代わりに id 属性で名前を設定しておき、
document.getElementById("FirstTable").innerHTML
のような指定が出来ます。

Sample 4
「レイヤー作成」ボタンをクリックすると、表示部に設定した HTML の内容が表示されます。 (このサンプルは IE 5.0 以上及び Netscape 6.0 以上での動作のみ考慮しています。他のブラウザでは動作しない可能性があります。)

表示部

ソース

<FORM name="DHTML_test">
<TEXTAREA name="area_text" cols=40 rows=5>
<H1 style="width:200px;height:100px;
background:gold;">Java Script</H1></TEXTAREA>
<INPUT type="button" value="レイヤー作成" onClick="document.getElementById('show_result').innerHTML = document.DHTML_test.area_text.value;">
</FORM>

<DIV id="show_result">表示部</DIV>

もちろん DHTML を使って出来ることは、要素のテキスト内容の参照や設定だけではありません。 多くの人は、画像やテキストが位置を移動したり、表示・非表示を切り替えたりするのを目撃しています。 それはどのようにするのでしょうか?

ここで重要になる第2のポイントは、スタイルシート(注5)です。 スタイルシートはすでに多くの人々がウェブページ・デザインに使用しているので多言を要しないかも知れません。 W3C(注6) は HTML 4.0 において、HTML のタグは原則としてウェブページの論理構造の定義に使用し、 ページ・デザインのようなビジュアルな面はスタイルシートを用いるよう勧告しました。

つまり文字などの色、サイズ、種類、位置等々の視覚情報はタグやその属性の代わりにスタイルシートで定義する方法が推奨され、 スタイルシートの働きに大幅な裁量が与えられています。HTML はウェブ文書の論理内容を提供するだけで、 ページデザインはそれとは全く独立に、スタイルシートで事細かに規定できるのですから、DHTML がこれを利用しない手はありません。

上に述べた DOM は、オブジェクトのスタイルを定義する方法を教えています。
document.getElementById("MyText").style.left = 200;
document.getElementById("MyText").style.top = 400;
document.getElementById("MyText").style..color="#000000";
document.getElementById("MyText").style..visibility = "visible";
"MyText" という id を持つオブジェクトを左から200ピクセル、上から400ピクセルに置き、テキスト色を黒に、 またそのオブジェクトを可視にする、という意味です。このような命令をそのまま JavaScript に使うことが出来ます。

オブジェクトの位置をいちいち指定できるのですから、 初めてここでオブジェクトを「動かす」ことが出来るようになります。 但しオブジェクトを動かすためには、それをレイヤーとして認識させなくてはいけません。 Netscape Communicator 4.x には <LAYER> という独特なタグがあり、様々なメソッドやプロパティを持つオブジェクトの働きをしていましたが、 Internet Explorer など他のブラウザは、このタグを採用せず、HTML 4.0 にも取り入れられませんでした。

代わりに他のブラウザでは、スタイルシートの position 属性でオブジェクトがレイヤーであることを示します。
<DIV style="position: absolute; left: 100px; top: 300px;" id="MyLayer">
ここは動かすことが出来ます</DIV>

position 属性で "absolute" を指定すると、それはページ内での絶対位置に置かれるので、ページ内を自由自在に泳がすことが可能です。 これが <DIV> タグに使用されることが多いのは、"position: absolute" をスタイル属性とする <DIV> タグは、 Netscape Communicator 4.x の <LAYER> タグと互換性があり、用途が広いからでしょう。

以上、ざっと見ましたように、DHTML が HTML と JavaScript に加えて DOM とスタイルシートの助けを借りること、 その応用次第ではウェブページに多様な表現力を与えることがおわかりいただけたと思います。 このほかに、Data Binding(注7) や Scriptlets(注8) といった Internet Exolorer ベースの技術をも DHTML に含める場合がありますが、ここでは省略します。

注1
現在一般に普及している JavaScript のバージョンは1.3です。なお JavaScript 1.4 は Netscape サーバーで用いられるスクリプトを指します。 また JavaScript 1.5 が Netscape 6 以降でサポートされていると言われますが、詳細はわかりません。
注2
XML 文書の各部へのアクセスを可能にすることを目的として、W3Cのワーキングループによって勧告された API。 従って XML を念頭に置いて作成されたものですが、 HTML も XML の一種と考えることにより、同様の利用が可能になります。 ここで扱っているのは Level 1 DOM と呼ばれるものです。JavaScript や VBScripr、Perl、Java 或いはどんなプログラミング言語であろうと、DOM API を使用することが出来ます。
注3
document.getElementsByTagName や 下段の document.getElementById というメソッドは、 Level 1 DOM の仕様であり、 Internet Explorer 5.x 以上や Netscape 6.x 以上など、最新のブラウザでサポートされています。このほかに Netscape Communicator 4.x 専用の document.layers というメソッドがあり、 またInternet Explorer 4.x 以上と Opera でサポートされる document.all というメソッドもあります。
注4
JavaScript などでウェブ・プログラミングをする以上、 ページの各要素にアクセスしたいという要求は早くからありました。ここで挙げた例は Level 0 DOM の一種で、ページ内のリンク、イメージ、フォームなどへのアクセスを可能にします。
注5
ウェブ文書で使用されるスタイルシートには、HTML で広く使われるようになった CSS (Cascading Style Sheet) のほか、 DSSSL(Document Style Semantics and Speficication Language。かつては国際標準とされていました)や XSL(eXtensible Stylesheet Language。現在、XML 文書の表示を定義するために CSS と並んで使用されています)などがあります。 ここでは特に断らない限り、スタイルシートとは CSS のことと考えて下さい。
注6
World Wide Web Consortium。IETF(Internet Engineering Task Force)のワークグループで、HTML などWWWで用いられる技術の標準化と推進を目指しています。
注7
CSV ファイルや XML ファイルにまとめられたデータベースからスクリプトを使ってウェブ上にデータを読み出す技術。 表示するデータを制御したし、ソートしたりすることが可能です。
注8
他の HTML に書かれたスクリプトを <OBJECT> タグを用いて読み込み、 動きのあるウェブページを表示する技術。
前ページに戻る 前ページに戻る 次ページに進む
Copyright © 2003 梅ちゃん堂. All Rights Reserved