入門HTML+TIME

本稿はエーアイムック283「JavaScript XML CGIでホームページを改造しよう」で私(井上健語)が書いた
HTML+TIMEの元原稿をWeb用に再編集・再構成したものです。HTML+TIMEのまとまった入門記事としては最
適かと思います。なお、本記事の著作権は私(井上健語)にあります。無断での引用、印刷しての配布等
はご遠慮ください。よく分からない場合は、こちらまでご連絡をお願いいたします。

目次
■STEP1.基本編1(HTML+TIMEとは何か)  ●不思議 楽しい 超便利 HTML+TIMEとは?  ●HTML+TIMEの基本的な考え方  ●HTML+TIMEのひな形ソース   コラム HTML+TIMEのひな形の意味 ■STEP2.基本編2(基本的な記述方法)  ●スタートと継続時間を指定するbegin属性とdur属性  ●timeaction属性を指定して同じ場所で表示/非表示を切り替える  ●end属性で終了時間も指定可能  ●「クリックしたとき」の動作も指定できる   コラム 読込直後に画像を表示しておくには  ●<t:animate/>で値を変化させる   コラム leftとtopを変化させる際の重要なポイント  ●色を変化させる<t:animateColor/>  ●要素を動かす<t:animateMotion/>   コラム 曲線的な動きも可能 ■STEP3.応用編(HTML+TIMEで作る楽しいWebページ)  ●文字が落ちてくる!?  ●ダイナミックなメニューを作る1  ●ダイナミックなメニューを作る2  ●スクリプトも使える  ●HTML+TIMEをもっと知りたい方は

Webページでアニメーションを実現するには、スクリプトやDynamicHTML、Flashなどの技術が必要です。しかし、それがすべてではありません。まだ方法はあるのです。しかもその方法は、覚えることが少ないわりに効果は高いと筆者は思います。HTML+TIMEが、それです。なお、HTML+TIMEには、次の2つのバージョンがあります。

HTML+TIME2……Internet Explorer5.5以降
HTML+TIME1……Internet Explorer5

HTML+TIMEは、Internet Explorer5(以下、IE)で初めて利用可能になった技術で、そのときのバージョンが1です。そして、IE5.5になってバージョン2になりました。1と2では仕様が若干異なりますが、マイクロソフトではバージョン2を推奨しています。本記事でもバージョン2に準拠しますので、対応ブラウザはIE5.5以上となります(Navigatorは対応していません)。本記事では、次の3つのステップでHTML+TIMEの世界を解説します。

■STEP1.基本編1(HTML+TIMEとは何か)
いくつかのサンプルを見ながら、HTML+TIMEで何ができるかを解説し、HTML+TIMEの基本的な考え方、書き方を押さえます。なお、HTML+TIMEはスタイルシート(CSS)と深い関係があるので、スタイルシートの知識は必須です。

■STEP2.基本編2(基本的な記述方法)
HTML+TIME特有のタグ・属性の書き方・使い方を解説します。スタイルシートの知識は必要ですが、スクリプトはまったく使用しません。「スクリプトを使わないでどれだけのことができるか」に、ぜひ注目してください。

■STEP3.応用編(HTML+TIMEで作る楽しいWebページ)
STEP1、2で学んだ内容を応用し、HTML+TIMEを使った面白いページを作ってみます。スクリプトを使わなくてもかなりのことができますが、スクリプトを使って、さらに可能性を広げることもできます。スクリプトを使いこなしている方にも、ぜひ目を通してほしいと思います。

STEP1.基本編1(HTML+TIMEとは何か)

不思議 楽しい 超便利 HTML+TIMEとは?

HTML+TIME(エッチティーエムエルプラスタイム)は、IE5.0から利用可能になったHTMLの拡張言語です。正確には、XMLのボキャブラリー(XMLによって作成されたマークアップ言語)の1つで、W3Cで策定されているSMIL(Synchronized Multimedia Integration Language)のマイクロソフト仕様です。が、ここでは、そういった難しい話は一切抜き。HTML+TIMEの楽しさを最優先に紹介したいと思います。まず、HTML+TIMEを使えば、

スクリプトをまったく使わないでアニメーションを作成できます

JavaScriptやDynamicHTMLに詳しい人なら、きっと「そんな馬鹿な」と思うでしょう。Webページで文字や画像を動かしたり色を変化させるには、(Flashなどのプラグインを使わないとすれば)スクリプトを使う……というより、スクリプトなしでは不可能と考えるのがこれまでの常識だからです。  論より証拠。サンプルを紹介します。

【time001.html】
ボタンが左右に動く。

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>HTML+TIMEサンプル</TITLE>
<STYLE>
.time	{	behavior: url(#default#time2);		}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<BUTTON ID="button1" STYLE="position:relative;">HTML+TIME</BUTTON>
<t:animateMotion targetElement="button1" begin="1" from="0,0" to="100,0"
 dur="1" autoreverse="true" repeatCount="indefinite">
</BODY>
</HTML>

これをIE5.5に読み込むと、「HTML+TIME」と書かれたボタンが表示され、左右に交互に動き続けます。ソースを見ても、スクリプトを意味する<SCRIPT>タグは見あたりません。もちろん、プラグインらしき記述もありません。見慣れない記述もいくらか含まれてはいますが、その秘密はあとで解説するとして、サンプルをもう1つ。

【time002.html】
「HTML+TIME」という文字が表示され、背景色が「白→黒」、文字色が「黒→白」に変化する。

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>HTML+TIMEサンプル</TITLE>
<STYLE>
.time	{	behavior: url(#default#time2);		}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<CENTER>
<DIV ID="head1" style="position:relative;width:400;background-color:white;color:black;
text-align:center;font-family:Comic Sans MS;font-size:50pt;padding:20;">HTML+TIME</DIV>
<t:animateColor targetElement="head1" attributename="color" begin="1" from="black"
 to="white" dur="1" autoreverse="true" repeatCount="indefinite">
<t:animateColor targetElement="head1" attributename="background-color" begin="1"
 from="white" to="black" dur="1" autoreverse="true" repeatCount="indefinite">
</CENTER>
</BODY>
</HTML>

IE5.5で読み込むと、「HTML+TIME」という文字が表示され、背景色が「白→黒」、文字色が「黒→白」へと変化し、この変化が繰り返されます。このソースにも<SCRIPT>タグはありません。もう1つサンプルを紹介します。

【time003.html】
リンク文字の「Yahoo! JAPAN」にマウスカーソルを合わせると背景が青、文字が白になる。
このサンプルでもスクリプトはまったく使っていない。
<HTML XMLNS:t="urn:schemas-microsoft-com:time"> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis"> <TITLE>HTML+TIMEサンプル</TITLE> <STYLE> .time { behavior: url(#default#time2); } </STYLE> </HEAD> <BODY style="font-size:30pt;"> <a id="link1" class="time" end="link1.mouseout" begin="link1.mouseover" timeaction="style" style="background-color:blue;color:white;text-decoration:none;" href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a> </BODY> </HTML>

IE5.5に読み込むと「Yahoo! JAPAN」の文字が表示されます。マウスカーソルを合わせると背景が青、文字が白になり、マウスカーソルを離すともとに戻ります。同じことは、DynamicHTMLでも実現できますが、やはりソース中に<SCRIPT>タグはありません。スクリプトに詳しい方なら、「キツネつままれた」感じかもしれません。では、少しずつ、種明かしをしていきましょう。

HTML+TIMEの基本的な考え方

HTMLでは文書の論理構造を記述します。HTMLのタグを使って、「ここは見出し」とか「ここは画像」といった記述をするわけです。そして、"見た目"をスタイルシートで指定します。「見出しの文字サイズは20ポイントで色は赤」といった指定をするのがスタイルシートの役割です。

しかし、HTMLとスタイルシートだけでは絶対にできないことがあります。それは、Webページに動きを与えることです。たとえば、Webページを読み込んで3秒後に見出しを消したいとしましょう。HTMLにはそれを実現するタグはありません。もちろん、スタイルシートにも何かを消す機能はありません。

そこで登場するのが「スクリプト」です。スクリプトを使えば、Webページを読み込んだあとで、ページにさまざまな変化・動きを与えることが可能です(その技術の総体を「DynamicHTML」と呼びます)。もちろん、ページを読み込んだあとで見出しを消したり、再び表示するのも簡単です。例を示しましょう。

【time004.html】
これはDynamicHTMLのサンプル。ページ読込後、3秒経過すると文字が消える。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>DHTMLサンプル</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function chVisible()	{
	head1.style.visibility = "hidden"
}
</SCRIPT>
</HEAD>
<BODY onload="setTimeout('chVisible()',3000)">
<H1 ID="head1">WELCOME</H1>
</BODY>
</HTML>

これは、ごく簡単なDynamicHTMLのサンプルです。ページが読み込まれてから3秒後にchVisible()関数が呼び出され、見出し(head1)を消します。ただし、これが唯一の方法ではありません。結果は同じでも別のアプローチがあるのです。それがHTML+TIMEです。同じことをHTML+TIMEで実現したのが、次のサンプルです。

【time005.html】
同じことをHTML+TIMEで実現。同じくページ読込後、3秒経過すると文字が消える。
結果は同じでも、実現方法が異なる。

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>HTML+TIMEサンプル</TITLE>
<STYLE>
.time	{	behavior: url(#default#time2);		}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<H1 CLASS="time" begin="0" dur="3">WELCOME</H1>
</BODY>
</HTML>

<H1>タグに注目してください。最上位の見出しを作るタグなのはご存じだと思いますが、beginとdurという見慣れない属性が使われています。begin="0"は、ページが読み込まれて0秒後を意味します(つまりページ読込直後)。そして、dur="3"が、<H1>を3秒間表示するという意味です。beginもdurもHTMLのリファレンスにはのっていません。HTML+TIMEによって設定可能になる属性です。このように、HTML+TIMEを使うと、Webページの要素に特殊な属性を指定できるようになります。もう1つサンプルを紹介します。

【time006.html】
背景色が黒←→黄に1秒ごとにスムーズに変化するサンプル。

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>HTML+TIMEサンプル</TITLE>
<STYLE>
.time	{	behavior: url(#default#time2);		}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY ID="body1" STYLE="background-color:black;color:white;">
<t:animateColor targetElement="body1" attributeName="background-color"
 begin="1" to="yellow" dur="1" autoreverse="true" repeatCount="indefinite" />
</BODY>
</HTML>

今度は、黒い背景のページが読み込まれますが、すぐに背景色が黒←→黄に1秒ごとにスムーズに変化しはじめます。これも、スキルさえあればDynamicHTMLで実現できます。しかし、これほど短いソースでは不可能なはずです。

このソースには、<t:animateColor/>という変わったタグがあります。さらに、このタグにはtargetElementやautoreverseといった、これまた見慣れない属性が使われています。

<t:animateColor/>は、Webページの要素の色を変化させる特殊なタグです。targetElement="body1"なので、変化させる対象はid="body1"を指定してある<BODY>タグで、attributeName="background-color"なので変化させるスタイルはその背景色です。begin="1"なので、その変化はページ読込後1秒後にスタートします。そして、to="yellow"が黄色、dur="1"は1秒間、autoreverse="true"が変化の反転を意味するので、背景色は1秒で「黒→黄色」に変化し、再び1秒で「黄色→黒」に変化します。さらに、repeatCount="indefinite"によって、この変化はページが表示されているあいだずっと繰り返されます。

...といった具合に、HTML+TIMEを使うとこのような特殊なタグを利用できるようになります(詳細は後ほど)。特殊なタグにはさまざまな属性が用意されていて、Webページの要素を変化させることができます。変化するということは、そこに必ず時間が介在します。これがHTML+TIMEの「+TIME」の意味です。つまり、HTML+TIMEとは、

時間を制御してWebページを変化させるタグ・属性の集合体

なのです。

HTML+TIMEのひな形ソース

時間を制御するタグ・属性が使えるといっても、一般的なHTMLのソースにいきなり特殊なタグ・属性を書いても、IEは正しく解釈してくれません。HTML+TIMEで定義されているタグ・属性を使うことをIEに知らせる必要があります。ここまでのサンプルであまり見かけない記述が出てきたのも、その指定です。次は、HTML+TIMEのソースのひな形です。

【HTML+TIMEのソースひな形】

<HTML XMLNS:t ="urn:schemas-microsoft-com:time">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<STYLE>
.time {behavior: url(#default#time2);}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<!-- ここにソースを書く -->
</BODY>
</HTML>

「<!-- ここにソースを書く -->」の部分にソースを書き、それ以外は固定(決まり切った指定)と考えてください。XMLの知識があれば固定部分の意味も分かると思いますが、HTML+TIMEのいいところは、スクリプトやXMLも知らなくても動きのあるページを作成できることですから、無理に知る必要はありません(どうしても知りたい方はコラムを参照してください)。

●コラム HTML+TIMEのひな形の意味

XMLを使用すると、独自のタグを作り出すことができます。HTML+TIMEも、このXMLによって作られたタグ・属性の集合体です。したがって、HTMLファイル中では、独自のタグ・属性を使えるようにXML特有の記述が必要です。 まず、次の2つはXMLの名前空間(namespace)の指定です。

<HTML XMLNS:t ="urn:schemas-microsoft-com:time">
<?IMPORT namespace="t" implementation="#default#time2">

これによって、<t:animate/>のように、先頭に「t:」の付いた特殊なタグが使用できるようになります。
そして次が、behavior(ビヘイビア)の指定です。

<STYLE>
.time {behavior: url(#default#time2);}
</STYLE>

behaviorは、IE5から利用可能になった、Web要素に動きを与えるコンポーネントです。詳細は省きますが、この指定によって、通常のHTMLのタグであっても、CLASS="time"を指定することによって、HTML+TIME特有の属性を指定できるようになります。
XMLに関心があれば、それぞれの指定の意味を深く突っ込んで調べてみるといいでしょう。関心がなければ(多くの人がそうだと思います)、"決まり事"として機械的に書けば問題ありません。

STEP2.基本編2(基本的な記述方法)

スタートと継続時間を指定するbegin属性とdur属性

最もシンプルなHTML+TIMEのサンプルから始めましょう。次は、3つの画像を1秒ずつ順番に表示するサンプルです。

【time007.html】
3つの画像を1秒ずつ順番に表示する。

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>HTML+TIMEサンプル</TITLE>
<STYLE>
.time {behavior: url(#default#time2);}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<IMG SRC="photo001.jpg" CLASS="time" WIDTH="170" HEIGHT="227" begin="0" dur="1">
<IMG SRC="photo002.jpg" CLASS="time" WIDTH="170" HEIGHT="227" begin="1" dur="1">
<IMG SRC="photo003.jpg" CLASS="time" WIDTH="170" HEIGHT="227" begin="2" dur="1">
</BODY>
</HTML>

3つの<IMG>タグには、CLASS属性として「time」を指定しています。これはスタイルシートの「クラス」の指定と同じです。これによって、ヘッダ部の<STYLE>〜</STYLE>に指定してあるtimeクラスが適用され、<IMG>タグでHTML+TIME特有の属性が使えるようになります。

その属性がbeginとdurです。beginはページが読み込まれてからの時間、durが継続時間を意味します。3つの画像には、beginとdurをぞれぞれ次のように指定してあります。

画像1……begin="0" dur="1"
画像2……begin="1" dur="1"
画像3……begin="2" dur="1"

このため、「ページ読込直後(0秒後)に画像1が現れて1秒間表示され、1秒後に画像2が現れて1秒間表示され、2秒後に画像3が表示されて1秒間表示される」ことになります。

timeaction属性を指定して同じ場所で表示/非表示を切り替える

1つ前のサンプルでは、時間によって画像(Webページの要素)の表示/非表示が切り替わりました。ただし、表示/非表示が切り替わっただけで、画像の表示エリアはそれぞれ確保されていました。つまり、スタイルシートで言えばvisibilityプロパティが切り替わったわけです。もしも、同じ場所で画像を次々に切り替えるなら、timeaction属性でdisplayを指定します。次がそのサンプルです。

【time008.html】
このサンプルでは、同じ位置で画像が順番に表示される。time007.htmlとはtimeaction属性の指定が異なる。

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>HTML+TIMEサンプル</TITLE>
<STYLE>
.time {behavior: url(#default#time2);}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<IMG SRC="photo001.jpg" CLASS="time" WIDTH="170" HEIGHT="227" begin="0" dur="1" timeaction="display">
<IMG SRC="photo002.jpg" CLASS="time" WIDTH="170" HEIGHT="227" begin="1" dur="1" timeaction="display">
<IMG SRC="photo003.jpg" CLASS="time" WIDTH="170" HEIGHT="227" begin="2" dur="1" timeaction="display">
</BODY>
</HTML>

各画像が1秒間だけ順番に表示される点は先のサンプルと同じですが、このサンプルでは同じ場所で画像が切り替わります。これは、それぞれの<IMG>タグで、timeaction属性にdisplayを指定したからです。timeaction属性にvisibilityを指定すれば、1つ前のサンプルと同じ動きになります(つまり、何も指定しなければtimeaction属性のデフォルト値はvisibilityです)。

end属性で終了時間も指定可能

begin属性とdur属性の他に、終了の時間を指定するend属性も用意されています。たとえば、time008.htmlと同じことをend属性を使って書くと、次のようになります。

【time009.html】
time008.htmlと同じことをend属性を使って実現したサンプル。

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>HTML+TIMEサンプル</TITLE>
<STYLE>
.time {behavior: url(#default#time2);}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<IMG SRC="photo001.jpg" CLASS="time" WIDTH="170" HEIGHT="227" begin="0" end="1" timeaction="display">
<IMG SRC="photo002.jpg" CLASS="time" WIDTH="170" HEIGHT="227" begin="1" end="2" timeaction="display">
<IMG SRC="photo003.jpg" CLASS="time" WIDTH="170" HEIGHT="227" begin="2" end="3" timeaction="display">
</BODY>
</HTML>

このサンプルでは、dur属性ではなく、end属性を使っています。begin属性で表示の開始時間は指定できますから、「どれだけ表示するか(dur属性)」か「表示をいつ終わらせるか(end属性)」のちがいだけです。

「クリックしたとき」の動作も指定できる

begin属性とend属性には、時間以外の指定もできます。たとえば、「何かがクリックされたとき」といった指定ができるのです。次がその例です。

【time010.html】
<オン>ボタンをクリックすれば画像が表示され、<オフ>ボタンをクリックすると消える。
HTML+TIMEは、マウス操作に応じた変化も付けられる(マウスイベントにも対応できる)。

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>HTML+TIMEサンプル</TITLE>
<STYLE>
.time {behavior: url(#default#time2);}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<CENTER>
<IMG SRC="photo001.jpg" CLASS="time" WIDTH="170" HEIGHT="227" begin="button1.click" end="button2.click">
<BR>
<BUTTON ID="button1">オン</BUTTON>
<BUTTON ID="button2">オフ</BUTTON>
</CENTER>
</BODY>
</HTML>

IEに読み込むと<オン>と<オフ>の2つのボタンが現れます。<オン>ボタンをクリックすれば画像が表示され、<オフ>ボタンをクリックすると消えます。<IMG>タグのbegin属性とend属性は次のように指定してあります。

begin="button1.click"
end="button2.click"

「button1」は<オン>ボタンのID名、「button2」は<オフ>ボタンのID名です。これで、<オン>ボタン(button1)がクリックされたら画像を表示し、<オフ>ボタン(button2)がクリックされたら画像が消えるのです。

JavaScriptを知っている方なら、同様の処理は「イベントハンドラ」で実現することをご存じだと思います。しかしHTML+TIMEでは、JavaScriptで言うところの「イベントハンドラ」の機能が、タグの属性として実現されているのです。

もちろんクリックだけではありません。他のマウス操作にも対応しています。次は、「写真」という文字にマウスカーソルがのると画像が表示され、離れると画像が消えるサンプルです。

【time011.html】
「写真」という文字にマウスカーソルがのると画像が表示され、離れると画像が消える。

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>HTML+TIMEサンプル</TITLE>
<STYLE>
.time {behavior: url(#default#time2);}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<CENTER>
<IMG SRC="photo001.jpg" CLASS="time" WIDTH="170" HEIGHT="227" begin="p1.mouseover" end="p1.mouseout">
<BR>
<DIV ID="p1" STYLE="width:170;text-align:center;background-color:black;
color:white;cursor:default;padding:10;">写真</DIV>
</CENTER>
</BODY>
</HTML>

<IMG>タグのbegin属性とend属性の指定は次のとおりです。

begin="p1.mouseover"
end="p1.mouseout"

「p1」は、「写真」の文字を表示してある<DIV>のID名です。そして、「mouseover」がマウスがのったとき、「mouseout」がマウスが離れたときを意味します。

●コラム 読込直後に画像を表示しておくには

time010.htmlでは、ページを読み込んだ直後は画像が表示されず、ボタンをクリックして初めて表示されます。これをページ読込直後に画像を表示しておくなら、<IMG>タグのbegin属性を次のように修正します。

  begin="button1.click"
   ↓
  begin="0;button1.click"

この場合、ページ読込後0秒後(つまりページ読込直後)に画像が表示され、ボタン(button1)のクリックでも画像が表示されます。このように、begin属性(およびend属性)では、複数の時間、イベント(clickやmouseoverなどのこと)をセミコロンで区切って指定できます。

<t:animate/>で値を変化させる

HTML+TIMEを使えば、スタイルシート(CSS)の設定値をさまざまに変化させられます。ここまでのサンプルで画像の表示/非表示を切り替えたのは、言い換えれば、スタイルシートのvisibility属性やdisplay属性を切り替えたわけです。

もちろん、スタイルシートにはvisibility属性やdisplay属性以外の属性もあります。たとえば、topやleft、widthやheight、font-size、font-family、borderなどです。これらの属性のうち、数値で指定するタイプ(top、left、font-size等)の値は、<t:animate/>タグで変化させられます。たとえば、画像のtopとleftを変化させると画像を動かすことができます。次は、leftを変化させるサンプルです。

【time012.html】
<t:animate/>タグで画像の位置を変化させるサンプル。

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>HTML+TIMEサンプル</TITLE>
<STYLE>
.time {behavior: url(#default#time2);}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<IMG SRC="photo001.jpg" ID="img1" WIDTH="170" HEIGHT="227" STYLE="position:relative;">
<t:animate targetElement="img1" attributeName="left" from="0" to="300" begin="1" dur="1" />
</BODY>
</HTML>

<t:animate/>では、まず最後が「/>」で終わっている点に注意してください。これは、HTML+TIMEのタグの決まり事として覚えておきましょう(実際はXMLのルールの1つです)。

次に重要なのが、targetElement属性とattributeName属性です。各属性で指定する内容は、次のとおりです。

targetElement……変化させる要素
attributeName……変化させる属性

targetElement属性では、変化させる要素(オブジェクト)をID名で指定します。サンプルでは「img1」を指定していますから、変化させるのは画像です。attributeName属性では、変化させるスタイルシートの属性を指定します。サンプルでは「left」を指定しているので、スタイルシートのleft属性の値を変化させることになります。以上から、このサンプルでは、画像(img1)の左端からの距離(left属性)を変化させることになります。

あとは、具体的な数値を指定するだけです。from属性が「0」、to属性が「300」なので、left(左端からの距離)は0〜300ピクセルまで変化します。また、begin属性が「1」、dur属性が「1」なので、ページ読込後1秒後に画像が動き始め、その動きは1秒間継続します。つまり、次のように動作することになります。

ページ読込後1秒後(begin="1")に画像が動き始め、
1秒間(dur="1")で左端から(from="0")300ピクセルの位置まで(to="300")動く

●コラム leftとtopを変化させる際の重要なポイント

<t:animate/>で要素のleftとtopを変化させるときは、もう1つ重要なポイントがあります。それは、動かす要素のスタイルシートで必ずposition属性を指定することです。

position属性では、「relative(相対位置)」か「absolute(絶対位置)」を指定できます。「relative」だと、その要素は他の要素との関係で位置が変わります。この場合、他の要素との関係によって決まる位置が、その要素の原点となります。一方、「absolute」を指定すると、その要素の親要素の左上が原点となります。親が<BODY>タグであれば、ページ表示エリアの左上が原点となります。

<t:animate/>で要素のleftとtopを変化させるときは、"どこを原点にするか"を決める必要があります。そうしないと、"どこから動かせばいいか分からない"からです。それが、position属性の指定が必要な理由です。サンプル(time012.html)では、画像(img1)のposition属性を「relative」にしています。このため、他の要素との関係で決まる位置が原点となり、そこから右方向に300ピクセル動くことになります。

今度は、先のサンプル(time012.html)を少し編集し、別の動き方をさせてみます。次がそのサンプルです。

【time013.html】
同じく<t:animate/>タグで画像を動かすサンプル。autoreverse属性が「true」なので元の位置に戻り、
repeatCount属性が「3」なので、動作が3回繰り返される。

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>HTML+TIMEサンプル</TITLE>
<STYLE>
.time {behavior: url(#default#time2);}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<IMG SRC="photo001.jpg" ID="img1" WIDTH="170" HEIGHT="227" STYLE="position:relative;">
<t:animate targetElement="img1" attributeName="left" from="0" to="300" begin="1"
 dur="1" autoreverse="true" repeatCount="3" />
</BODY>
</HTML>

修正点は、タグにautoreverse属性とrepeatCount属性を追加したことだけです。autoreverse属性は動きを反転させるかどうかを指定する属性で、「true」を指定すれば反転し、「false」だと反転しません。repeatCount属性は動きの繰り返し回数の指定です。

このサンプルでは、autoreverse属性を「true」、repeatCount属性を「3」にしていますから、次の動きが3回繰り返されることになります(動作の総時間は6秒)。

left属性が0→300まで1秒間で変化
left属性が300→0まで1秒間で変化

なお、ページが表示されているあいだずっと動作を繰り返すなら、repeatCount属性に「indefinite」を指定します。

<t:animate/>タグの最後の例として、文字サイズを変化させるサンプルを紹介しましょう。文字サイズを変化させるには、スタイルシートのfont-size属性で変化させればOKです。次がそのサンプルです。

【time014.html】
<t:animate/>タグで文字サイズ(font-size)を変化させる例。
<t:animate/>は数値タイプのスタイルシートの属性を変化させるとき便利だ。

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>HTML+TIMEサンプル</TITLE>
<STYLE>
.time {behavior: url(#default#time2);}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<CENTER>
<DIV ID="div1" STYLE="font-family:Comic Sans MS;">HELLO</DIV>
<t:animate targetElement="div1" attributeName="font-size" from="10" to="150"
 begin="1" dur="1" autoreverse="true" repeatCount="indefinite" />
</CENTER>
</BODY>
</HTML>

ここまでの内容が把握できていれば、指定は難しくないはずです。まず、文字の表示に<DIV>タグを使い、そのID名を「div1」としています。そして、targetElementで「div1」を指定し、attributeNameで「font-size」を指定します。fromは「10」、toは「150」なので、div1の文字サイズ(font-size)は10から150ポイントまで変化します。そして、beginが「1」、durが「1」なので、変化はページ読込後1秒後にスタートし、1秒間で150ポイントになります。autoreverseは「true」なので、再び1秒間で150ポイントから10ポイントに戻り、repeatCountが「indefinite」なので、ページが表示されているあいだは同じ動作が繰り返されます。

以下に、ここまでのサンプルで利用した<t:animate/>タグで設定できる属性をまとめておきます。

▼targetElement……変化させる要素・対象
▼attributeName……変化させるスタイルシートの属性
▼from……変化させる数値の開始値
▼to……変化させる数値の終了値
▼begin……変化を開始する時間
▼dur……変化に要する時間
▼autoreverse……変化の反転の有無(true/false)
▼repeatCount……変化の繰り返し回数(ページ表示中ずっと繰り返すなら「indefinite」を指定)

色を変化させる<t:animateColor/>

<t:animateColor/>は、色を変化させたいとき便利なタグです。機能そのものが「色を変化させる」ことに特化しているため、指定方法もシンプルで分かりやすくなっています。まずは、簡単なサンプルを紹介しましょう。

【time015.html】
<t:animateColor/>タグを使った例。背景が「黒→シルバー→黒→シルバー……」とスムーズに変化する。

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>HTML+TIMEサンプル</TITLE>
<STYLE>
.time	{	behavior: url(#default#time2);		}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<DIV ID="div1" STYLE="width:300;font-size:30pt;font-family:Comic Sans MS;
background-color:black;color:silver;padding:10;text-align:center;">AI MOOK</DIV>
<t:animateColor targetElement="div1" attributeName="background-color" begin="0"
 dur="1" from="black" to="silver" autoreverse="true" repeatCount="indefinite" />
</BODY>
</HTML>

背景色が黒、文字がシルバーで「AI MOOK」という文字が表示され、ページ読込と同時に背景色が「黒→シルバー→黒→シルバー……」とスムーズに変化し、それが繰り返されます。タグの属性を書き出すと、次のようになっています。

targetElement="div1"
attributeName="background-color"
begin="0"
dur="1"
from="black" 
to="silver"
autoreverse="true"
repeatCount="indefinite"

いずれの属性もここまでに解説済みですが、from属性とto属性で色名を指定している点が異なります。要するに、from属性で指定した色からto属性で指定した色に変化するのです。色の指定には「#FFFF00」などの16進数表記も使えます。

このサンプルでは背景色を変化させていますが、背景色と文字色を同時に変化させることも可能です。次がそのサンプルです。

【time016.html】
<t:animateColor/>タグを2つ使って、背景色と文字色を変化させる例。背景色と文字色が交互に入れ替わる。

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>HTML+TIMEサンプル</TITLE>
<STYLE>
.time	{	behavior: url(#default#time2);		}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<DIV ID="div1" STYLE="width:300;font-size:30pt;font-family:Comic Sans MS;
background-color:black;color:silver;padding:10;text-align:center;">AI MOOK</DIV>
<t:animateColor targetElement="div1" attributeName="background-color" begin="0"
 dur="1" from="black" to="silver" autoreverse="true" repeatCount="indefinite" />
<t:animateColor targetElement="div1" attributeName="color" begin="0" dur="1"
 from="silver" to="black" autoreverse="true" repeatCount="indefinite" />
</BODY>
</HTML>

このサンプルでは、<t:animateColor/>タグを2つ使っています。2つの<t:animateColor/>タグの属性を比べてみましょう。

属性1つ目2つ目
targetElementdiv1div1
attributeNamebackground-colorcolor
begin00
dur11
fromblacksilver
tosilverblack
autoreversetruetrue
repeatCountindefiniteindefinite

いずれも、targetElementはdiv1ですが、1つ目はattributeNameがbackground-color、2つ目はcolorです。つまり、1つ目のタグではdiv1のbackground-color(背景色)、2つ目のタグではcolor(文字色)を変化させます。そして、1つ目はfromがblack、toがsilverなので、黒→シルバーに変化し、2つ目はその逆なのでシルバー→黒に変化します。それ以外のbeginやdur、autoreverse等の属性はまったく同じなので、背景色と文字色がちょうど交互に入れ替わるような変化になるわけです。

以上2つのサンプルでは2つの色をスムーズに変化させましたが、もっと多くの色を指定することもできます。それには、values属性を利用します。次がサンプルです。

【time017.html】
values属性を使えば複数の色も指定できる。

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>HTML+TIMEサンプル</TITLE>
<STYLE>
.time	{	behavior: url(#default#time2);		}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY ID="body1" STYLE="background-color:black;">
<t:animateColor targetElement="body1" attributeName="background-color"
 values="black;red;blue;yellow;white" begin="1" dur="2" autoreverse="true" repeatCount="indefinite"/>
</BODY>
</HTML>

targetElement属性ではID名を「body1」とした<BODY>タグ、attributeName属性では「background-color」を指定してあるので、変化させるのはページ全体の背景色です。ポイントは次の指定です。

values="black;red;blue;yellow;white"

このように、values属性を使うと、複数の色をセミコロンで区切って指定できます。このサンプルではdur属性が「2」ですから、ページの背景色は「black→red→blue→yellow→white」と2秒間でスムーズに変化します。そして、autoreverse属性が「true」なので、再び2秒間かかって逆の順番で色が変化し、これを繰り返します。

要素を動かす<t:animateMotion/>

先に、タグでtopやleftを変化させ、要素(サンプルでは画像)を動かす例を紹介しました。が、じつは、HTML+TIMEにはWebページの要素を動かす専用のタグが用意されています。それが、<t:animateMotion/>です。サンプルを示しましょう。

【time018.html】
要素を動かすなら<t:animateMotion/>タグが便利。開始位置と終了位置のleftとtopを指定できる。

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>HTML+TIMEサンプル</TITLE>
<STYLE>
.time	{	behavior: url(#default#time2);		}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<IMG SRC="photo001.jpg" ID="img1" style="position:relative;width:170;">
<t:animateMotion targetElement="img1" begin="1" from="0,0" to="100,100" dur="1" autoreverse="true">
</BODY>
</HTML>

ページが読み込まれると、画像(img1)が「0,0」の位置から「100,100」の位置まで1秒間で移動し、再び1秒間でもとの位置に戻ります。<t:animateMotion/>タグで設定してある属性をチェックしてみましょう。

targetElement="img1"
begin="1"
from="0,0"
to="100,100"
dur="1"
autoreverse="true"

いずれもここまでに登場した属性ですが、from属性とto属性が2つの数値のペアである点に注目してください。さらに、attributeName属性がない点にも注目してください。

まず、<t:animateMotion/>タグは「Web要素のleftとtopを変化させる専用のタグ」です。このため、わざわざ「どの属性を変化させるか」を指定する必要がありません。それが、attributeName属性がない理由です。次に、leftとtopを指定するため、from属性とto属性に2つの数値をセットします。指定の順番は、最初にleft、2番目にtopです。

<t:animateMotion/>では、3カ所以上の通過点を指定することもできます。この場合は、from属性とto属性の代わりにvalues属性を利用します。次がvalues属性を利用したサンプルです。

【time019.html】
<t:animateMotion/>タグでは、values属性で複数の通過点を指定できる。

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>HTML+TIMEサンプル</TITLE>
<STYLE>
.time	{	behavior: url(#default#time2);		}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<IMG SRC="photo001.jpg" ID="img1" style="position:relative;width:170;">
<t:animateMotion targetElement="img1" begin="1" values="0,0;200,0;200,200;0,200;0,0"
 dur="2" autoreverse="false">
</BODY>
</HTML>

<t:animateMotion/>タグのvalues属性の指定に注目してください。サンプルの指定は次のようになっています。

values="0,0;200,0;200,200;0,200;0,0"

この指定によって、画像(img1)は、2秒間(dur="2")で次のように動くことになります。

    スタート
  (0,0)─────────→(200,0)
 ゴール↑           │
    │           │
    │           │
    │           │
    │           │
    │           ↓
  (0,200)←────────(200,200)

このように、values属性ではleftとtopの値のペアを半角セミコロン(;)で区切って指定します。

●コラム 曲線的な動きも可能

本文では触れませんでしたが、タグでは、曲線(ベジェ曲線)に沿って要素を動かすこともできます。加速/減速を指定して、動きをスムーズに見せることも可能です。なお、タグで要素を動かすときは、タグと同様に、動かす要素のスタイルシートでposition属性を指定しておく必要があります。

STEP3.応用編(HTML+TIMEで作る楽しいWebページ)

文字が落ちてくる!?

ここまでに紹介した知識を応用して、いくつかの面白いサンプルを紹介しましょう。まずは、次のサンプルから。

【time020.html】
4つの文字がページの上から次々に落下してくる。<t:animate/>タグを使った。

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>HTML+TIMEサンプル</TITLE>
<STYLE>
.time	{	behavior: url(#default#time2);		}
.type1	{	position:absolute;font-size:20pt;
			width:300;font-family:Comic Sans MS;
			background-color:black;color:yellow;
			top:-100;
}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<DIV class="type1" id="msg1">WELCOME</div>
<t:animate targetElement="msg1" attributeName="top" begin="0" from="-100" to="100" dur="0.5" fill="hold"/>
<DIV class="type1" id="msg2">TO</div>
<t:animate targetElement="msg2" attributeName="top" begin="0.5" from="-100" to="130" dur="0.5" fill="hold"/>
<DIV class="type1" id="msg3">HTML+TIME WORLD</div>
<t:animate targetElement="msg3" attributeName="top" begin="1" from="-100" to="160" dur="0.5" fill="hold"/>
<DIV class="type1" id="msg4">Enjoy!</div>
<t:animate targetElement="msg4" attributeName="top" begin="1.5" from="-100" to="190" dur="0.5" fill="hold"/>
</BODY>
</HTML>

ページを読み込むと、ページの上から4つの文字が次々と落ちてきます。使用しているのは<t:animate/>タグです。4つの文字は4つの<DIV>〜</DIV>内に書き、それぞれに対応する<t:animate/>を4つ使用し、top属性を変化させています。

ポイントは2つ。第一は、4つの文字をあらかじめページの外に配置しておくことです。ヘッダ部の<STYLE>〜</STYLE>で「type1」という名前のクラスを定義していますが、そのposition属性をabsolute(絶対指定)にしたうえでtop属性を「-100」としているのがそれです。そして、<t:animate/>のfrom属性で「-100」を指定し、ページの外からページの中へ文字が動いてくるようにしてあります。

もう1つは、ここまでのサンプルには登場しなかったfill属性です。これは、動作が終わったとき、そのWeb要素をどうするか指定します。いくつかの値を指定できますが、ここでは2つだけ紹介します。

hold……動作が終わったら、その位置に停止したままにする
remove……動作が終わったら開始位置に戻る

このサンプルではfill属性に「hold」を指定してあるので、文字が落下したあと、その文字は落下位置(to属性で指定した位置)に停止します。もしも、fill属性を「remove」にすると、落下したあと文字はすぐにスタート位置(ページの外)に戻ってしまいます(fill属性を省略した場合も「remove」を指定した場合と同じになります)。

ダイナミックなメニューを作る1

今度は、HTML+TIMEを活用したリンクメニューを作ってみました。

【time021.html】
マウスカーソルを合わせると、枠線が点滅する。もちろん、クリックすればページが切り替わる。
<t:animateColor/>タグを使用。

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>HTML+TIMEサンプル</TITLE>
<STYLE>
.time	{	behavior: url(#default#time2);		}
.type1	{	border:5 solid white;padding:5;cursor:hand;font-weight:bold;
			font-family:Comic sans MS;color:blue;text-decoration:none;
		}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<CENTER>
<A CLASS="type1" ID="link1" HREF="http://www.ai-pub.co.jp/">AI-Publishing</A>
<A CLASS="type1" ID="link2" HREF="http://www.st.rim.or.jp/~makoto3">MAKOTO3 AREA</A>
<A CLASS="type1" ID="link3" HREF="http://www.yahoo.co.jp/">Yahoo! JAPAN</A>
<t:animateColor targetElement="link1" attributeName="border-color" from="white" to="blue"
 begin="link1.mouseover" end="link1.mouseout" dur="0.1" autoreverse="true" repeatCount="indefinite" />
<t:animateColor targetElement="link2" attributeName="border-color" from="white" to="blue"
 begin="link2.mouseover" end="link2.mouseout" dur="0.1" autoreverse="true" repeatCount="indefinite" />
<t:animateColor targetElement="link3" attributeName="border-color" from="white" to="blue"
 begin="link3.mouseover" end="link3.mouseout" dur="0.1" autoreverse="true" repeatCount="indefinite" />
</CENTER>
</BODY>
</HTML>

「AI-Publishing」「MAKOTO3 AREA」「Yahoo! JAPAN」の3つのリンクメニューが表示され、マウスカーソルを合わせると周囲に青い枠が表示され、点滅を繰り返します。マウスカーソルを離すと枠が消えます。

このサンプルで使用したのは、色を変化させる専門のタグ <t:animateColor/>です。変化させる対象は3つの<A>タグで、それぞれに対応する<t:animateColor/>タグを3つ用意してあります。

属性の指定では、特に変わったことはしてません。確認のため、最初の<t:animateColor/>の属性をチェックしてみましょう。

targetElement="link1"
attributeName="border-color"
from="white"
to="blue"
begin="link1.mouseover"
end="link1.mouseout"
dur="0.1"
autoreverse="true"
repeatCount="indefinite"

まず、変化させる要素はID名を「link1」とした<A>要素(targetElement="link1")で、変化させる属性は境界線の色(attributeName="border-color")です。色は白(from="white")から青(to="blue")に変化させ、動きがスタートするのは要素にマウスカーソルがのったとき(begin="link1.mouseover")、動作が終わるのはマウスカーソルが離れたとき(end="link1.mouseout")です。その変化は0.1秒で完了し(dur="0.1")、再び同じ時間でもとの色に戻ります(autoreverse="true")。そして、この動作がページが表示されているあいだ繰り返されます(repeatCount="indefinite")。特に難しい点はないでしょう。

ダイナミックなメニューを作る2

今度は、タグを使ったリンクメニューです。ページを読み込むと4つのリンク用のボタンがそれぞれ別の場所から飛んできて、ページ中央に縦に並びます。

【time022.html】
ページの外から4つのボタンが飛んできて中央に並ぶ。<t:animateMotion/>タグを使用。

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>HTML+TIMEサンプル</TITLE>
<STYLE>
.time	{	behavior: url(#default#time2);
		}
.type1	{	position:relative;background-color:skyblue;color:black;width:150;height:25;
		}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<TABLE WIDTH="100%" HEIGHT="100%" BORDER="0">
<TR><TD ALIGN="center">
<BUTTON ID="button1" CLASS="type1" onclick="document.location='http://www.st.rim.or.jp/~makoto3/'"
 STYLE="left:-1000;top:-750;">MAKOTO3 AREA</BUTTON>
<t:animateMotion id="t1" begin="0" targetElement="button1" to="1000,750" dur="1" fill="hold" />
<BR>
<BUTTON ID="button2" CLASS="type1" onclick="document.location='http://www.ai-pub.co.jp/'"
 STYLE="left:1000;top:750;">AI-Publishing</BUTTON>
<t:animateMotion id="t2" begin="0" targetElement="button2" to="-1000,-750" dur="1" fill="hold" />
<BR>
<BUTTON ID="button3" CLASS="type1" onclick="document.location='http://www.yahoo.co.jp/'"
 STYLE="left:1000;top:-750;">Yahoo! JAPAN</BUTTON>
<t:animateMotion id="t3" begin="0" targetElement="button3" to="-1000,750" dur="1" fill="hold" />
<BR>
<BUTTON ID="button4" CLASS="type1" onclick="document.location='http://www.lycos.co.jp/'"
 STYLE="left:-1000;top:750;">Lycos</BUTTON>
<t:animateMotion id="t4" begin="0" targetElement="button4" to="1000,-750" dur="1" fill="hold" />
</TD></TR>
</TABLE>
</BODY>
</HTML>

まず、各ボタンのクリックでページを切り替えるため、<BUTTON>タグで次のように指定してあります。

onclick="document.location='リンク先URL'"

これは、純粋にJavaScriptに関わる記述で、HTML+TIMEとは関係ありません。ページの幅と高さがそれぞれ100%でセルが1つだけのテーブルを用意しているのも、HTML+TIMEとは無関係です。これは、文字や画像をページ中央に配置するテクニックの1つです。

HTML+TIMEが関係しているのは、このボタンを動かすところだけです。まず、4つのボタンは、スタイルシートのクラス指定でposition属性を「relative」にしてあります。また、各ボタンは<BR>タグで改行してあります。このため、4つのボタンは、特に位置を指定しなければ、テーブル中央(=ページ中央)に縦に並ぶことになります。そして、その位置が各ボタンの原点ということになります。

しかし、実際には各ボタンはSTYLE属性でtopとleftを指定してあります。たとえば1番目のボタン(button1)は、leftが「-1000」、topが「-750」です。これによって、このボタンがもともと配置される位置(原点)から右に-1000ピクセル、下に-750ピクセルの位置に配置されます。

そして、ページが読み込まれると、このボタン(button1)は、その位置(-1000,-750)から<t:animateMotion/>のto属性で指定されている「1000,750」だけ動き、もともとの原点に返ってくるという仕組みです(fill属性が「hold」なので動いたあと停止します)。他のボタンも、まったく同じ仕組みで、もとの原点まで戻ってきます。

スクリプトも使える

最後に、スクリプトを使ったサンプルを紹介します。HTML+TIMEのメリットはスクリプトなしでWebページに動きを与えられることだと冒頭に書きました。それは事実ですが、だからといってHTML+TIMEをスクリプトでコントロールできないわけではありません。実際には、HTML+TIMEの機能は、JavaScriptなどのスクリプト言語で完全にコントロール可能です。

たとえば、<t:animateMotion/>タグのtargetElement属性をスクリプトで切り替えて動かす要素を変更したり、from属性やto属性の値をスクリプトで変化させられます。また、スクリプトを使って動きを一時停止したり、再開させたりといった処理も可能です。HTML+TIMEとスクリプトの組み合わせは、じつは非常に強力かつ柔軟なのです。次は、そんなサンプルの一例です。

【time023.html】
マウスカーソルをカニの画像が追いかける。HTML+TIMEの機能をスクリプトで制御している。
スクリプトとHTML+TIMEの組み合わせは、じつは非常に強力かつ魅力的。

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>HTML+TIMEサンプル</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var fromX = 0
var fromY = 0
var toX = 0
var toY = 0
function moveCursor()	{
		t1.from = fromX + "," + fromY
		t1.to = toX + "," + toY
		t1.beginElement()
		fromX = toX
		fromY = toY
}
function getPoint()	{
	toX = event.x
	toY = event.y
}
document.onmousemove = getPoint
</SCRIPT>
<STYLE>
.time {behavior: url(#default#time2);}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY ID="body1" onload="setInterval('moveCursor()',1000)" BGCOLOR="#009911">
<IMG ID="img1" src="ani03.gif" style="position:absolute;">
<t:animateMotion id="t1" targetElement="img1" begin="indefinite" from="" to=""
 dur="1" autoreverse="false" fill="hold" />
</BODY>
</HTML>

これは、マウスカーソルを画像が追いかけるサンプルです。画像にはGIFアニメーションファイルを使いました。<t:animateMotion/>タグを1つ使っていますが、begin属性が「indefinite」になっている点、from属性とto属性が空値(from="" to="")である点に注目してください。

まず、ページ上でマウスカーソルが動くと、getPoint()関数が呼び出されます。その機能は、マウスカーソルの位置(x,y)を変数toXとtoYに入れることです。

また、ページが読み込まれると、onload="〜"に記述したsetInterval()メソッドによって、1秒ごとにmoveCursor()関数が呼び出されます。moveCursor()関数の機能は、ID名を「t1」とした<t:animateMotion/>タグの属性を設定し、動作をスタートさせることです。その内容は次のとおりです(説明のため便宜点に行番号を付けました)。

001:	t1.from = fromX + "," + fromY
002:	t1.to = toX + "," + toY
003:	t1.beginElement()
004:	fromX = toX
005:	fromY = toY

1行目は、from属性の設定です。初期設定では変数fromXとfromYはともに「0」なので、

t1.from = "0,0"

となります。2行目では、to属性を設定しています。変数toXとtoYにはマウスカーソルの位置(x,y)が入っていますから、

t1.to = "マウスカーソルのx位置,マウスカーソルのy位置"

となります。そして、3行目でt1をスタートさせます。スクリプトで動作をスタートさせたいときは、

動作させたいHTML+TIMEのタグのID名.beginElement()

とします。ここでの注意点は、タグのbegin属性で「indefinite」を指定しておくことです。このように、スクリプトで動作させたいときは、begin属性を必ず「indefinite」にしておきます。

4、5行目では、変数toXの値を変数fromXに、変数toYの値を変数fromYに入れます。moveCursor()関数は1秒ごとに呼び出されますから、この処理によって、次に呼び出されたとき前回のゴール位置がスタート位置になります。

HTML+TIMEをもっと知りたい方は

HTML+TIMEは、やればやるほど奥の深い世界であることが分かってきます。本記事はほんの"さわり"にすぎません。関心のある方は、MAKOTO3.NET ARCHIVEに置いてある他のHTML+TIMEのサンプルも試してみてください。さらに詳しく知りたい方は、ぜひマイクロソフトのHTML+TIMEの関連サイトをのぞいてみてください。URLは次のとおりです。

http://msdn.microsoft.com/workshop/author/behaviors/time.asp

MAKOTO3.NET
2002年8月30日アップ ©井上健語(MAKOTO3)