自分で書いて，しくみを理解！

古いけれども今も使える『無料の』技術で，Webプログラミングの面白さを，再発見してみましょう！ ぜひ，リストを追いながら，初心にかえって，入力してみてください。プログラミングの楽しさを実感できることでしょう。

XHTML+CSS+JavaScript，そしてDynamic HTML！

　今回から，実際にスクリプトを書いていきましょう。スクリプトを埋め込む基本のXHTMLについては，第1回目で準備しましたね。構造はXHTMLで，ビジュアル・デザインはCSS（Cascading Style Sheet）で表現します。CSSには，ご存じの通り，次の3種類があります。

  • 外部スタイルシートcssファイルを外部に置いて，参照する。<link rel="stylesheet" type="text/css" href="CSSファイル名（拡張子は.css）" />のように記述する
  • エンベデッド・スタイルシート HTMLファイルの<style type="text/css"></style>ブロック内にCSSを定義する
  • インライン・スタイルシート HTML要素のstyle属性に指定する。 <div style="スタイル指定"></div>のように記述する

　本稿では，処理の見通しをよくするため，基本的にエンベデッド・スタイルシートを使います。一部のデザインが異なる場合や，スクリプトによってスタイルを動的に変える場合には，インライン・スタイルシートを使います。

　そして，動的処理を実現するDynamicHTMLオブジェクト・モデルを操作するために，スクリプトを記述します。Dynamic HTMLは，Webページ上で動的な処理を実現するための技術です。MicrosoftとSoftQuadの提案をベースに策定された，W3C（World Wide Web Consortium）の「DOM（Document Object Model）」に基づいています。DOM Level 1 ワーキングドラフト（1997年）に先立ち，Microsoft Internet Explorer（IE） 4.0 PLATFORM PREVIEW1（＝β1）がサポートし，爆発的に普及しました。

　Dynamic HTMLは，スタティックなWebページを一変させました。それまで，ビジュアル表現においては，JavaアプレットやGIFアニメーション，ActiveXコントロールなどを使って，動的コンテンツをページに埋め込むことしかできませんでした。それが，コンテンツのテキスト，スタイル，座標値を，ユーザーのアクションに応じてインタラクティブに変化させられるようになったのです。また，DynamicHTMLイベント・モデルである，Microsoft Tabular Data Control（TDC）を使って，データ・バインドも実装できるようになりました。

　つまり，DynamicHTMLは，ビジュアル・デザインを変化させる機能ではなく，インタラクティブなWebページを実現するためのAPIなのです。ですから，決して「古びた技術」ではなく，「古くから利用されている現役の技術」として，現在も開発現場でよく用いられています。本稿ではJavaScriptを使いますが，基本を理解しておけば，他の開発言語（C#，Visual Basic .NETなど）からも利用できます（＊1）。

　DynamicHTMLを使ったクライアント処理では，表示は，エンドユーザーのブラウザに依存します。ところが，ブラウザごとに仕様への対応が異なります。W3Cの標準に準拠していなかったり，逆に，標準仕様のように普及している独自拡張機能を実装している場合もあります。そのため，Ajaxでも然り，クロスブラウザ対応のコーディングが必要になります。実務でのWebページは複数のブラウザで表示を確認したほうがよいでしょう（＊2）。

動的処理を実装するための基本

　インタラクティブなWebページを作るには，処理を引き起こすトリガーとなるものが必要です。それは，マウスがクリックされたときや，マウスポインタがオブジェクトの上に乗ったとき，といったイベントです。これらのイベントが発生したときに処理を実行するようなスクリプトを書けばよいわけです。

　DynamicHTMLオブジェクト・モデルには，表1のようなマウスイベントがあります。これら以外にも，オブジェクトがフォーカスを持った時に発生するonfocusイベントや，オブジェクトがフォーカスを失ったとき発生するonblurイベントなどがあります。必要に応じて解説します。

イベント 説明
onmousedown マウスボタンが押された時に発生するイベント
onmousemove マウスが移動したときや移動中に発生するイベント
onmouseup マウスボタンが離されたときに発生するイベント
onclick マウスの左ボタンがクリックされたときに発生するイベント
ondbclick マウスの左ボタンがダブルクリックされたときに発生するイベント
onmouseover マウスポインタが要素の適用範囲に入ったときに発生するイベント
onmouseout マウスポインタが要素の適用範囲から外れたときに発生するイベント
ondragstart ドラッグ＆ドロップ操作が開始されたときに発生するイベント
onselectstart マウスで，要素に対して新しい選択が開始されたときに発生するイベント
onselect 選択中に発生するイベント

表1●Dynamic HTMLオブジェクト・モデルの，よく使われるイベント

カーソルを乗せると，文字色が変わる！

　では，さっそくサンプル・スクリプトを書いていきましょう。まずは，図1のように，文字の上にマウスポインタが乗った時に文字色が変化するという簡単なものからです。表1のonmouseoverとonmouseoutイベントを使用します。XHTMLファイルの中に，CSSとJavaScriptを記述し，JavaScriptの中でDynamicHTMLを使います。

図1●マウスマーソルを乗せると，文字色が赤に変わる（図をクリックすると別ウィンドウで開きます
図1●マウスマーソルを乗せると，文字色が赤に変わる（図をクリックすると別ウィンドウで開きます 

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
<title>カーソルを乗せると文字色が変わる。</title>
<script type="text/javascript">
<!--
//onmouseoverイベントで実行されるプロシジャ
function mojiChange(){
  document.getElementById("moji").style.color="red";
}
//onmouseoutイベントで実行されるプロシジャ
function mojiReset(){
  document.getElementById("moji").style.color="silver";
}
//-->
</script>
<style type="text/css">
<!--
h1{～略～}
.sample{
  font-family : Verdana ;
  font-size   : 20pt  ;
  color       : silver;
  cursor      : hand  ;
  margin-top  : 20px  ;
  font-weight : bold  ;
  width       : 250px ;
}
-->
</style>
</head>

<body>
<h1>カーソルを乗せると文字色が変わる。</h1>
<div id="moji" class="sample" onmouseover="mojiChange()"
 onmouseout="mojiReset()">DynamicHTML</div>
</body>
</html>
リスト1●図1のソースコード
(ここをクリックするとソースコードをダウンロードできます)

　Webページを開いた時，「DynamicHTML」というテキストは，銀色で表示されています。 これは，「DynamicHTML」というテキストをデータとする<div>要素の class属性に「sample」という値を指定し，エンベデッド・スタイルシートの中で， colorにsilverを指定しているためです。

<div id="moji" class="sample"
onmouseover="mojiChange()" onmouseout="mojiReset()">
DynamicHTML</div>
　～中略～
.sample{
font-family : Verdana ;
font-size : 20pt ;
color : silver;
cursor : hand ;
margin-top : 20px ;
font-weight : bold ;
width : 250px ;
}

　さらに，エンベデッド・スタイルシートでcursor:handを指定し， マウスポインタが乗った時は，ポインタが手の形に変わるようにしています。 ただし，このcursor:handはIE 7.0でのみ機能します（Firefox 2.0では変わりません）。

　<div>要素のid属性には「moji」という値を指定しています。 onmouseoverイベントで実行される，mojiChangeプロシジャ内では， HTML DOMのgetElementByIdメソッドを使って，idがmojiである<div>ノードにアクセスし， style属性のcolorの値をredに指定しています。

document.getElementById("moji").style.color="red";

　これで，マウスポインタが文字の上に乗ったとき，文字色が赤に変化するようになります。

　onmouseoutイベントで実行されるmojiResetプロシジャでは，文字色をsilverに戻しています。

document.getElementById("moji").style.color="silver";

　以上で図1のような処理が実現できます。あまりに簡単なので，あっけにとられたかもしれませんね(^^)。