Dynamic HTMLの基礎(2)


ここでは Dynamic HTML を使った具体例をいくつか紹介することにします。Dynamic HTML を表示させるには、Internet Explorer 4.0x Windows 版か、Netscape 4.0x が必要です。 Windows 以外の方は Netscape 4.0x で見て下さい。

「Dynamic HTML を使った」と述べましたが、Dynamic HTML と呼ばれる一定のコンピュータ言語があるわけではありません。従来の HTML にスタイルシートとスクリプト(ここでは JavaScript)を組み合わせてブラウザ上で動的な表現を行うことを俗に Dynamic HTML と呼んでいます。 当然、スタイルシートやスクリプトをサポートしているブラウザ・バージョンでしか表現されませんし、また Internet Explorer と Netscape とでは Dynamic HTML の構築方法にしばしばかなりの違いがあることを念頭に置かなければなりません。

ユーザがどんなブラウザでアクセスするか、わからないわけですから、HTML のヘッダー部分でユーザのブラウザとバージョン、(IE 4.0x の場合は)使用OSを取得しておかなければなりません。 こうすることによって、IE 4.0x for Win や Netscape 4.0x 以外のブラウザでアクセスしたときに何も表示されなかったり、エラーが起こることを回避します。

<SCRIPT Language="JavaScript">
<!--
check=0;
Br = navigator.appName;
Ver = navigator.appVersion;
Ver = Ver.substring(0,1);
if (Br == "Microsoft Internet Explorer" && Ver>3 && navigator.platform=="Win32") check=1;
else if(Br == "Netscape" && Ver>3) check=2;
else check=0;

これは、0をデフォルトとする整数型変数 check を用意し、ブラウザがもし Win 32 bit 版の IE 4.0x なら check に0を、Netscape 4.0x なら2を、それ以外は0を代入しておくことを表しています。
また以下のサンプルではタイマー・オブジェクトを使うので、タイマー用の変数 timer とカウント用の変数 C も用意します。

timer=0;
C=0;
//-->
</SCRIPT>

Dynamic HTML では画像や文章の内容、位置、表示形式(色や大きさなど)を自由に変えられることは「Dynamic HTMLの基礎(1)」でも述べた通りです。 下の「注意!」ボタンを押すと、画像が斜め上に移動し、自動的に戻ります。




これを実行するには、「注意」ボタンをフォームで設定するほかに、画像の表示形式を JavaScript でページ内に書き込む必要があります。 あらかじめ画像の位置は IE 4.0x ではスタイルシートで、Netscape 4.0x では LAYER タグで規定しなければ、それぞれの Dynamic HTNL を実行できないからです。

<SCRIPT Language="JavaScript">
<!--
if(check==1) document.write('<IMG src="Chui.gif" id="chui" style="position: absolute; left: 50;top: 665">');
else if(check==2) document.write('<LAYER id="chui" left="50" top="600"><IMG src="Chui.gif"></LAYER>');
else document.write('<IMG SRC="Chui.gif">');
//-->
</SCRIPT>

ここで left と top はページ上での画像の x 座標と y 座標を絶対値で指定しています。 50とか665、600とかは、あくまでこのページ上での使用例ですので、実際に使うときは条件に応じた数値に入れ替えて下さい。 IE が画像タグに直接スタイルを定義しているのに対し、Netscape では LAYER タグに定義しているのがわかると思います。 いずれの場合も JavaScript で操作できるように ID に名前を指定しています。

ボタンが押されると(onClick)、Move() という関数を呼び出します。HTML のヘッダー部に戻って、この関数を定義しましょう。

function Move() {
clearTimeout(timer);
timer=setTimeout("Move()",1);
C++;
if(check==1)
{
if(C<20)
{
chui.style.posLeft+=10;
chui.style.posTop-=10;
}
if(C>=20)
{
chui.style.posLeft-=10;
chui.style.posTop+=10;
}
if(C==38)
{
clearTimeout(timer);
C=0;
}
}
else if(check==2)
{
if(C<20)
{
document.chui.left +=10;
document.chui.top -= 10;
}
if(C>=20)
{
document.chui.left -=10;
document.chui.top +=10;
}
if(C==38)
{
clearTimeout(timer);
C=0;
}
}
}

ここでは変数Cでカウントして画像の動きを制御していますが、ほかに画像の座標値を条件付けとして制御する方法もあります。

Netscape が LAYER タグを使用し、LAYER の動きで画像を制御していることには利点もあります。LAYER オブジェクトが保有するさまざまのプロパティを使えば、画像(や文)の表示・非表示や、重なり合う2つの LAYER の上下関係を自由に切り替えることが出来るからです。

Netscape 4.0x をお使いの方は、下の「切り替え」ボタンを押してみて下さい。下にあるパネルが上に、上にあるパネルが下になります。もう1度クリックすると元に戻ります。 「消す」ボタンをクリックすると、下にあるパネルが消えます。元に戻すには「切り替え」ボタンをクリックして下さい。

赤いパネル青いパネル

これら2つの画像は別々の LAYER タグによって規定されています。

<LAYER NAME="red" left="100" top="1900"><IMG SRC="Panel1.gif"></LAYER>
<LAYER NAME="blue" left="110" top="1910"><IMG SRC="Panel2.gif"></LAYER>

HTML のヘッダー部分では、文字列型の変数Aを次のような初期値を入れておきます。

A = "red";

次に「切り替え」ボタンを押すと(onClick)呼び出される lap() 関数を定義します。本当は関数など定義せずに、直接タグ内にルーチンを記述できるほど簡単なのですが、他のブラウザでのエラーを回避するためです。

function lap() {
if(check==2)
{
with(document.layers[A])
{
visibility='show';
moveAbove(above);
A=below.name;
}
}
else alert("Netscape 4.0x 以外では実行できません。");
}

同様に「消す」ボタンで呼び出す vanish() 関数も次のように記述します。

function vanish() {
if(check==2) document.layers[A].visibility='hide';
else alert("Netscape 4.0x 以外では実行できません。");
}

Netscape 4.0x の LAYER タグを使うとこんなに簡単な定義で済むのですが、同じことを IE でやろうとすると、不可能ではないまでも、相当複雑なスクリプトを書かなければならないと思います。

IE が LAYER オブジェクトをサポートしない理由は、JScript(=JavaScript)であれ VBScript であれ、ブラウザ上で実行されるスクリプトの機能を Windows アプリケーション並みのユーザ・インターフェースに近づけようとする Microsoft の考え方によるものと思います。 IE と Netscape が同じく Cascading Style Sheet level 1 をサポートしているとされながら、その機能には微妙な差があり、例えば文字にマウスカーソルを近づけると文字の色や大きさを変化させるというような機能は Netscape 4.0x にはありません。 そうした不足を補うためにも、Netscape 4.0x で Dynamic HTML を実行するには、どうしても LAYER オブジェクトの助けが必要なのです。

IE が主にスクリプトとスタイルシートの機能だけで Dynamic HTML を実行するのに対し、全く同じような効果でも Netscape では LAYER タグを必要とすると言う点をもう少し見てみる必要があります。 この続きは「Dynamic HTMLの基礎(3)」で述べることにします。 See you!




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

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

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