Dynamic HTMLの基礎(1)


今回は Dynamic HTML について考えてみます。Dynamic HTML って何でしょう。ダイナミックな HTML? いえいえ、従来の文字と静止画像の表示を主体とした「静的」HTML に対して、ユーザ入力やアクセス条件などに応じて、ページの表示内容を変化させる「動的」HTML のことです。

それによって Web ページは最近のソフトウェアのようにイベント駆動型になり、アプリケーションに近くなります。 パソコンがかつての MSDos のような文字データの入出力をメインとしたものから近年の Windows や Macintosh のようにビジュアルで直感的な使いやすさを重視した GUI 環境に変わったように、 インターネットも文字中心のネットニュースから、情報内容を自由にデザインでき、画像や音のようなマルチメディアコンテンツを扱えるようにした WWW に進化してきています。

どんなに地味な Web ページでも、HTML を使ってページをデザインし、ハイパーリンクでページやデータファイルを呼び出すという最低限の機能は備えているはずです。 それはすでに単純なテキストファイルとは違って、れっきとしたGUI アプリケーションと言うことが出来ます。但し HTML だけでは(ハイパーリンクなど若干のデフォルト機能を除き)イベント駆動は出来ません。 「ページがロードされた」「ボタンが押された」「或る時間になった」等々の条件(イベント)に呼応して情報を動的に処理するには JavaScript や VBScript のようなスクリプトの援用が必要になります。

従来からスクリプトとフォームなどを使って Web ページにアプリケーション機能を加える試みは行われてきましたが、1つの限界がありました。それは(いくつかの例外を除き)ページ内容をランタイムに変化させることが出来なかった、という点です。 Web 制作者が HTML やスクリプトなどを使ってページを設計するとき、或いはユーザがすでにロードしたページから新しい Web ページを生成すべく条件入力を求められるとき、これをデザインタイムと言います。 これに対し、或る Web ページがブラウザ上にロードを完了した時をランタイムと言います。

バージョン 3.0x までの Internet Explorer や Netscape Navigator では、例えばページの背景色(<BODY bgcolor=> で定義される色)をランタイムで変化させることは可能でしたが(これによってページの色をパタパタ変える、などのことも行いえたのです)、 文字の色や TABLE タグ内の背景色をランタイムに変えることは出来ませんでした。また、よくあるメッセージの自動スクロールも Internet Explorer 3.0 以降では <MARQUEE> タグを使ってページ上に直接表示することが可能でしたが、 他のブラウザではこれは出来ず、テキストボックスの中かステータスバーの上でしかメッセージを流すことは出来ませんでした。 つまりテキストボックスやステータスバーといったOS自体が持つコントロールをシステムから呼び出して、その中でメッセージ表示のタイマー制御をしていたのです。

Dynamic HTML に於てはスタイルシートや(Netscape では)JavaScript の layer オブジェクトを使用することによって、Web ページそのものに表示される文章や画像の内容、色などの外観、位置、表示の仕方などをランタイムに変化させることが可能になりました。 これは、バージョン 3.0x までの Internet Explorer や Netscape Navigator での JavaScript プログラミングに慣れてきたものにとっては、かなり驚くべきことです。 そうでなくても、WWW を長いこと見てきた人にとっては、Inernet Explorer が <BLINK> タグを使うことなしに文字を点滅させたり、Netscape が <MARQUEE> タグを使うことなしにページ内で文字を流すことが出来るようになった、と聞けば驚くに違いありません。

それが、HTML にスタイルシートとスクリプトを併用することによって可能となる Dynamic(動的)HTML の機能なのです。それによって、OSとインターネットをシームレスにして行くという、最近 Microsoft などが打ち出している方向性が WWW ブラウザの側でも実現されて行くことになります。 今後 Web アプリケーションの主流となるのは Java(Applet)でも Shockwave でもなく、DynamicHTML だ、と言う人さえいます。

前口上が長くなりました。「DynamicHTML の基礎(2)」では DynamicHTML の具体例をソースと共にサンプル表示します。




次のトピックは「Dynamic HTMLの基礎(2)」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで