1.HTML+TIMEの基本
HTML+TIMEは、Microsoftが提唱しているHTMLの拡張機能で、
InternetExplorer 5以上の環境で動作します。
HTMLにTIME（時間的な機能）を加えたことにより、
指定した時間に画像やメッセージ表示させたり、動かしたり、変化をつけたりできます。
HTML+TIMEに関する
Microsoftの公式解説ページ（英語）はこちらです。
詳細で正確な情報を知りたい方は公式ページをご利用ください。
以前は、「HTML+TIMEひな形講座｣というWEBサイトが、
HTML＋TIMEの記述法とひな形用のサンプルソースを提供してくれていました。しかし、残念なことに、1年ぐらい前にWEBから消えてしまいました。
このひな形の作り方講座では、HTML＋TIMEの基本的なところを紹介し、
HTML＋TIMEのプログラムの記述を練習することにします。
HTML＋TIMEはHTML文が基本なので、JavaScriptに比べてプログラムが容易で、
基本的な記述法をマスターすれば、だれでもプログラムできます。
まず、大前提となるのは、基本的なHTML文の知識があるということです。
また、HTML＋TIMEで使うHTMLは、主にスタイルシート（CSS）の記述ですから、スタイルシートの知識も、ある程度、必要になってきます。
スタイルシートの基本を少しおさらいしておきましょう。
スタイルシートの記述法には、<head>内に書く方法と、
<body>内の要素1つ1つに個別に書く方法の2パターンがあります。
<head>内に書く方法は、「背景に画像を使う｣のページで練習した
「背景画像を横一列に並べて使う方法」のような書き方です。
主に、body全体にかかるような属性を指定するとき使います。
<style type="text/css">
<!--
body {
background-repeat:repeat-x;
}
-->
</style>
<body>内に書く方法は、「画像と文字を配置する｣のページで練習した
「画像の配置」のような書き方です。
img（画像）に直接、 style=という形で属性を指定したり、
<div>と</div>の間の領域に指定したりします。
<img src="kinokosgy.gif" style="top:250;left:300;position:absolute;width:77;height:76;">
<div style="top:250;left:300;position:absolute;width:77;height:76;">
<img src="kinokosgy.gif" width="77" height="76"></div>
スタイルシートを思い出したところで、次は、HTML＋TIMEの基本ソースです。
赤い部分はHTML＋TIMEを使うための必須条件ですから、必ず書いてください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
<!--
.time{
behavior:url(#default#time2);
}
t\:* {
behavior: url(#default#time2)
}
-->
</style>
</head>
<body id="body1">
<!-- HTML+TIMEのソースはここに書きます -->
</body>
</html>
|
この基本ソースをHTMLファイルにしたのが
こちら。
これからは、このファイルに様々なソースを書いて練習しましょう。
2.TIME表現の基本文法
HTML＋TIMEで、何かを表現するときの基本の文法を覚えましょう。
TIMEで何かを表現する記述法には、インライン要素として記述するやり方と、
ターゲットエレメントで記述するやり方があります。
[1]インライン要素として記述する
最もシンプルな記述法は、TIMEをインライン要素（ある物の中に含まれる属性）として使う書き方です。
例を示すと、次のような書き方です。
①
<img class="time" src="c1.gif" style="z-index:1; position: absolute; top:100;left:100;" begin="0" />
HTML+TIMEで何かを表すとき、表示するもの本体には、必ず
class="time"と書いておきます。つまり、「これをtimeを使って表示します」と宣言しているわけです。
このclass="time"は、<head>内に書いた、HTML+TIMEを使うためのスタイルシートを呼び出し、
imgがtimeによって動くことを許可されるという構造になっています。
imgの位置は個別のスタイルシート
style="z-index:1; position: absolute; top:100;left:100;"
で指定します。上から100ピクセル、左から100ピクセルが、この画像の最初の位置です。
実は、この例では、timeaction="visibility"「時間によって表示する」というタグが省略されているのですが、書かなくても結果は同じなので省略しています。
begin=" "は、始まりの時間です。この場合は、0ということで、このHTMLドキュメントが始まるときに同時に始まることになります。
0の場合は、begin="0"を書かなくても最初から表示されます。
②
<img class="time" src="c2.gif" style="z-index:2; position: absolute; top:200;left:200;" begin="2" />
begin="2"なので、2秒後に表示されます。
③
<img class="time" src="c3.gif" style="z-index:3; position: absolute; top:300;left:300;" begin="3" end="4" />
end=" "は終わりの時間です。end="4"なので、4秒後に表示が終わる、つまり、消えます。
①は初めから表示され終わりがない、②は2秒後に現われ終わりがない、③は3秒後に現われ4秒後に終わる。
これらをまとめて表示した結果が
こちらです。
[2]ターゲットエレメントで記述する
ひな形を作るときに、一般的に使われている記述法は、TIMEで表示する実体と、それを動かす命令文、に分けて書く記述法です。
画像を動かす
cp1.gifという画像を動かす例で説明します。
<img class="time" id="img1" src="cp1.gif" style="z-index:1; position: absolute; top:100;left:100;" />
<t:animateMotion id="idou1" targetElement="img1" from="0,0" to="400,100" begin="0" dur="3" fill="hold" />
この2行が1セットとなっています。
表示例はこちら
<img class="time" id="img1" src="cp1.gif" style="z-index:1; position: absolute; top:100;left:100;" />
が表示する実体です。
<t:animateMotion id="idou1" targetElement="img1" from="0,0" to="400,100" begin="0" dur="3" fill="hold" />
が、ターゲット（対象とする実体）を決めて「このように表現しなさい」と指示する命令文です。
ターゲットエレメント（targetElement）で記述する場合、どの実体に対してどの命令文が指示するのかを明確にするため、全ての物や動きに
idをつけておきます。
idはどんな名前にしても構いませんが、同じidを使ってはいけません。
この場合、表示する実体は、cp1.gifという画像ですが、idはimg1と名づけてあります。
命令文のほうは、idou1というidをつけてあります。
表示する実体には、必ず
class="time"と書いておきます。つまり、「これをtimeを使って表示します」と宣言しておきます。
命令文のほうは、どんな表現をするのかを指定する
t:○○○○から始まります。
この場合は、
t:animateMotionということで、画面の上を上下左右に位置移動する命令になっています。
何を動かすかは、
targetElement="id名" で指定します。この場合は、targetElement="img1"ですから、img1というidをつけられたものを
動かすことになります。
どこへ動かすかを指定するのが、
from="0,0" to="400,100" です。初めの位置を0,0として、
x方向に400（右に400ピクセル）、y方向に100（下に100ピクセル）動くことを指示しています。
begin="0" は、動き始めの時間。0だと、このプログラムが始まると同時に動き始めます。
dur="3"は、どのくらいの時間をかけて動くのか。この場合は、3秒で動くという意味です。
最後の、
fill="hold"は、終わりの状態を固定するという意味。つまり、「元の位置から指定の位置まで3秒かけて動いたら、そこで留まる」
ということを意味しています。
命令文の方を書き直して、いろいろな動きを試してみましょう。
①<t:animateMotion id="idou1" targetElement="img1" from="0,0" to="400,100" begin="0" dur="3" fill="hold" />
が、元の命令文。動き終わった位置で留まります。
②<t:animateMotion id="idou1" targetElement="img1" from="0,0" to="400,100" begin="0" dur="3"
repeatcount="2" />
と記述すると、終わった瞬間、元の場所からスタートして同じ動きを2回繰り返します。
③<t:animateMotion id="idou1" targetElement="img1" from="0,0" to="400,100" begin="0" dur="3"
autoreverse="true" repeatcount="2" />
と記述すると、オートリバースですから、終わりの位置から逆方向に動いて元に戻るところまでを1回の動きとして、repeatcountで指定した回数動きます。
④<t:animateMotion id="idou1" targetElement="img1" from="0,0" to="400,100" begin="0" dur="3" autoreverse="true"
repeatcount="indefinite" />
と記述すると、同じ動きを永遠に繰り返します。④の表示例は
こちら。
それでは、動き終わったら、その実体を消したい場合はどうするか？その場合は、表示する実体に
end=" "をつけて、終わりの時間を指定します。
⑤<img class="time" id="img1" src="cp1.gif" style="z-index:1; position: absolute; top:100;left:100;"
end="idou1.end" />
<t:animateMotion id="idou1" targetElement="img1" from="0,0" to="400,100" begin="0" dur="3" />
⑤の表示例は
こちら。
文字を動かす
img（画像）以外のものをTIMEで表現する場合の練習をしましょう。
img以外のものは、 spanでくくられた領域、 divでくくられた領域、 tableなど、もっと大きなところではbackground（背景）を、TIMEで表現することができます。
文字に表現を加える場合は、「文字を入れ込んだ領域全体」を表示する実体に決めて、targetElementで、表現を指示します。
文字数が少なく改行がない場合は、<span></span>を使って、<span>の間の領域ごと文字を動かします。
<span class="time" id="font1" style="z-index:1; position: absolute; top:100;left:100;">
<font color="#0000ff" size="5">こんにちは♪</font>
</span>
<t:animateMotion id="idou1" targetElement="img1" from="0,0" to="400,200" begin="0" dur="3" fill="hold" />
このソースの
表示例はこちら
連続した動きを表現する
先ほどの画像の移動と文字の移動を続けて表示して、連続的な動きを記述する練習をしてみましょう。
<img class="time" id="img1" src="c1.gif" style="z-index:1; position: absolute; top:100;left:100;" />
<t:animateMotion id="idou1" targetElement="img1" from="0,0" to="400,100" begin="0" dur="3" fill="hold" />
<span class="time" id="font1" style="z-index:2; position: absolute; top:100;left:500;"><font color="#0000ff" size="5">こんにちは♪</font></span>
<t:animateMotion id="idou2" targetElement="font1" from="0,0" to="-400,200" begin="idou1.begin+1" dur="3" fill="hold" />
表示例はこちら
初めに動く画像のソースは同じですが、2番目に動く文字は、ソースを変えてあります。
動きを指定する命令文のidが、1番目の動きと同じidにならないように、idou2というidをつけました。
最初の位置と動く方向も、今度は、
top:100;left:500;が最初の位置で、そこからto="-400,200"、左に400、下に200動きます。
さらに、始まりの時間、beginが、
begin="idou1.begin+1"になっています。これは、ido1の始まり＋1分という意味です。
単にbegin="1"と書いてもいいのですが、2番目の動きからは、前の動きのidを基準にして、
idou1.begin+1(ido1の始まり＋1分)、
idou1.end(ido1の終わり)、
idou1.end+2(ido1の終わり＋2分)といった他のidの動きを基準にした記述の仕方で、始まりのときを指定することができます。
そして、文字のz-indexは2にしてあります。こうしておくと、最初に動く画像と、2番目に動く文字が、動きの途中で重なったとき、文字のほうが上に乗ります。