ひな形スクリプト講座23

HTML+TIMEエレメントをスクリプトで作動させてみます。

[ソース]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 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">

</STYLE>
</head>
<body style="margin:0px; padding:0px">
<img id="img1" src="a_whale_blue.gif" onclick="time1.beginElement()" style="position:absolute; top:300px; left:500px">

<t:animatemotion id="time1" targetelement="img1" begin="indefinite" dur="5" path="m 0 0 c -100 0 -200 0 -300 0" fill="hold" />

</body>
</html

xmlnsとはHTMLドキュメントの中にカスタムタグのための名前空間（NameSpace)を宣言するもので、赤い部分はtという接頭語をschemas-microsoft-com:timeという唯一的な名前空間を特定する文字列で定義するものです。

青い部分はスタイルシート一括指定方式で、class識別子（クラスセレクタ）.timeと接頭語t:を持つエレメントに対する振る舞いを当てはめています。Internet Explorerではデフォルトでtime2というbehaviorを持っており、そのbehavior（振る舞い）に特定させているわけです。

尚、t\:*ですが、tが接頭語、\:は:を意味し、*はワイルドカードになっています。

尚t\:* {behavior:url(#default#time2)}の代わりに<?IMPORT namespace="t" implementation="#default#time2">を記述する方法もありますが、メールでは時折悪さをするので、これは入れないほうがよいと思います。

HTML+TIMEにはtime1.0とtime2.0があり、1.0はIE5.0以降でサポートされ、2.0はIE5.5以降でサポートされています。IE5.0での動作保証する場合はtime1.0のみ使用するようにしなければなりません。

さて上記ひな形ではコーヒーブレークン（くじら）が表示されそのままでは動きませんが、鯨をクリックすると動き始めます。この動きはスクリプトではなくHTML+TIMEによるものです。

TIMEを動かすには通常TIMEエレメントにbegin="開始時間"で行いますが、DHTML実装されていますので、スクリプトでスタートさせることが可能になります。

TIMEエレメントのbegin属性で開始させずに、beginElement()メソッドでスタートさせるには、予めTIMEエレメントにbegin属性でindefiniteを入れておかなければなりません。というのもbeginを省略した場合、begin="0"というデフォルトでスタートしてしまうからです。

そこでbeginに不定を示すindefinitteを入れておきます。indefiniteは無期限という意味ですね。BGSOUNDエレメントのloop="inifinite"に使用されるinfiniteは無限という意味で若干違います。

IMGエレメントクリックでスタートですから、onckickイベントハンドラをくじらのIMGエレメントに記述、スクリプトはTIMEエレメントに対するbeginElement()メソッドを使用します。TIMEエレメントにもIDをHTMLエレメント同様につけることができます。

onclick="time1.beginElement()"

object.beginElement()・・・タイムライン（スケジュール）上でエレメントを開始します。

TIMEエレメントでのオブジェクトにはbegin()メソッドというものもありますが、これはプレーヤでの再生開始メソッドですので、間違えないようにしてください。object.beginというプロパティは存在します（下に説明有）。

サンプル

TIMEの動作・振る舞いをスタイルシート一括指定していましたが、勿論タグにインラインスタイルシートで記述しても構いません。

<t:animatemotion id="time1" style="behavior:url(#default#time2)" targetelement="img1" begin="indefinite" dur="5" path="m 0 0 c -100 0 -200 0 -300 0" fill="hold" />

またスクリプトで設定することも可能です。behaviorプロパティを使用します。読み書き可能ですよ。

time1.style,behavior="url(#default#time2)"

次のようにHTMLエレメントにbehaviorを設定することも可能です。これはvisibilityをhiddenからvidsibleにするもので、begin="2"により、2秒後に表示開始されます。

[ソース]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 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>
</head>
<body style="margin:0px; padding:0px">
<img id="img1" begin="2" src="a_whale_blue.gif" onclick="time1.beginElement()" style="behavior:url(#default#time2); position:absolute; top:300px; left:500px">

<t:animatemotion id="time1" targetelement="img1" begin="indefinite" dur="5" path="m 0 0 c -100 0 -200 0 -300 0" fill="hold" />
<script>
time1.style.behavior="url(#default#time2)"
</script>
</body>
</html>

サンプル

begin="スクリプト"式での開始。

begin="img1.onclick"・・・これはイベントハンドラでの始動。begin="img1.click"・・・TIMEのbegin属性に適用できる値として、object.clickやobject.beginがあります。click()メソッドではありません。またonclickイベントハンドラでもありません。begin="img1.click()"とするとエラーにはなりませんが、希望する動きにならないでしょう。
object.click()メソッドはエレメントにクリックイベント(onclick)を発生させるものです。

begin="img1.click+3"とするとクリックして3秒後にスタートします。begin="img1.begin+4"とすると、img1が表示開始されて（img1のbegin="2"によりimg1は2秒後に表示開始される）、4秒後にスタートします。

[ソース]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 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>
</head>
<body style="margin:0px; padding:0px">
<img id="img1" begin="2" src="a_whale_blue.gif" style="behavior:url(#default#time2); position:absolute; top:300px; left:500px">

<t:animatemotion id="time1" targetelement="img1" begin="img1.click+3" dur="5" path="m 0 0 c -100 0 -200 0 -300 0" fill="hold" />
<script>
time1.style.behavior="url(#default#time2)"
</script>
</body>
</html>

サンプルクリックして3秒後に右移動する。

次はHTML+TIMEとスクリプトを交互に実行させてみましょう。

スクリプトでTIMEエレメントを開始させるのは今までと同じですが、TIMEの動作が終了したらスクリプトの関数を実行させます。その関数にはTIMEエレメントの開始が書かれていますので、繰り返し実行ができます。

HTMLTIMEではrepeatcount属性で繰り返しが可能（repeatcount="indefinite"とすれば無限に繰り返しします）ですが、スクリプトとの併用でTIMEだけではできないことが可能になります。

拙作ソフト「ぴあにしも」の位置を変えて現れる機能を題材にしてみます。

[ソース]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 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">

</STYLE>
</head>
<body style="margin:0px; padding:0px;">

<img CLASS="time" begin="2" src="octopus.gif" id="img1" style="position:absolute; width:150px; height:162px">

<t:par id="tpar" begin="indefinite">
<t:TRANSITIONFILTER id="gtrans" TargetElement="img1" BEGIN="2" DUR="3" TYPE="progid:DXImageTransform.Microsoft.Strips(motion=rightdown)" />
<t:TRANSITIONFILTER id="goff" TargetElement="img1" BEGIN="10" DUR="3" TYPE="irisWipe" Subtype="rectangle" mode="out" onend="reps()" />
</t:par>
<script>
function reps(){
img1.style.visibility='hidden'
img1.style.pixelLeft=Math.floor(Math.random()*(document.body.clientWidth-150))
img1.style.pixelTop=Math.floor(Math.random()*(document.body.clientHeight-162))
setTimeout("img1.style.visibility='visible'",2000)
tpar.beginElement()
}
setTimeout("reps()",2000)
</script>
</body>
</html>

ここでは余り紹介されていないスタイルシートの書き方に注目。

.time,t\:*{behavior:url(#default#time2)}・・・[.time]クラスセレクタと[t\:*]接頭語にbehavior:url(#default#time2)を適用する。
複数のセレクタに同じスタイルを適用させる場合は、,（コンマ）で区切れば可能です。これはCSSの規定にあります。

<img CLASS="time" begin="2" src="octopus.gif" id="img1" style="position:absolute; width:150px; height:162px">
imgエレメント（img1）にはtimeというクラスがついてみます。これはHTMLエレメントをTIMEの振る舞いに当てはめることを意味します。で、デフォルトの振舞い方ですが、visibilityがhidden状態からvisible状態になるというタイムラインでの動作になります。begin="2"ですから、2秒後（HTML+TIMEタイムラインはドキュメント全てが読み込み完了した時点をスタート---0秒にします）にimg1のvisibilityがhiddenからvisibleになるということですが、あくまでもHTML+TIMEのアニメーション空間でのことです。実際にvisibility属性値がそのように変化するのではありませんが、このことはまたの機会に触れたいと思います。

<t:par id="tpar" begin="indefinite">
<t:TRANSITIONFILTER id="gtrans" TargetElement="img1" BEGIN="2" DUR="3" TYPE="progid:DXImageTransform.Microsoft.Strips(motion=rightdown)" />
<t:TRANSITIONFILTER id="goff" TargetElement="img1" BEGIN="10" DUR="3" TYPE="irisWipe" Subtype="rectangle" mode="out" onend="reps()" />
</t:par>

parエレメントはTIMEコンテナです。TIMEサブエレメントをグループ化し包括します。parエレメントの動作はサブエレメントを通常の方法でタイムライン上に配置します。一番目のサブエレメントであるgransのbeginは3ですので、タイムライン上に配置された時に2秒後にスタートします。二番目のサブエレメントのgoffはbeginが10ですね。タイムライン上に配置されて10秒後にスタートします。

parコンテナですが、beginがindefiniteですね。ということはタイムライン上に配置する開始時間が不定ということです。つまりparコンテナでタイムラインに乗らない限りgransもgoffも開始しません。

スクリプトの関数reps()を見ていきましょう。

img1.style.visibility='hidden'・・・img1エレメントをDOMにおいて非表示にします。TIMEアニメーション空間で非表示にするのとは違います。

img1.style.pixelLeft=Math.floor(Math.random()*(document.body.clientWidth-150))・・・document.body.clientWidthは表示部分の横幅でしたね。150はimg1エレメントの横幅（画像の表示横幅）です。表示部の横幅から画像の横幅分を差し引いたものを範囲に、乱数にしてimg1のLEFTにしています。画像をを表示部の横幅内にランダムに表示させるためのLEFT計算です。

img1.style.pixelTop=Math.floor(Math.random()*(document.body.clientHeight-162))・・・こちらもLEFT同様ですので、意味はお分かりですね。

setTimeout("img1.style.visibility='visible'",2000)・・・DOMにおけるimg1エレメントを時間差をつけて表示させるものです。TIMEのトランジションで表示させるものと同じ時間に設定しています。

tpar.beginElement()・・・いよいよparコンテナをスタートさせます。これによりタイムライン上に配置されます。配置されるとタイムライン上でサブエレメントが発動するようになります。

なぜDOMでのvisibilityをhiddenにしたり、visibleにしたりする必要があるのか？

これについては難しくなりますが、上のソースからimg1.style.visibility='hidden'とsetTimeout("img1.style.visibility='visible'",2000)をコメントアウトして実行させないようにすれば確認できます。gransエレメントやgoffエレメントにfill="hold"を入れてもうまくいきません。

TIMEアニメーション空間は通常のHTML描画(DOM)とは別領域に本来の属性を変更することなく表示されるのです。TIMEでの表示が消えた後、残るのはDOMでの表示状態です。DOMでの表示状態がvisibleなら、TIMEアニメーション空間での表示が消えた後再びDOM領域で表示が起きてしまうのです。

さて、[goff]TIMEエレメントにはonend="reps()"というイベントハンドラによるスクリプト実行がありますね。HTMLエレメント同様にイベントハンドラからスクリプトを実行させることができます。

onend・・・TMIEエレメントの終了イベントを獲得する。イベントハンドラ。

<t:TRANSITIONFILTER ～～ />・・・トランジション（時間的変遷）を行う。

属性：typeと属性：subtype

Type Associated Subtype(s)

starWipe fivePoint (this must be specified)

barWipe leftToRight, topToBottom

barnDoorWipe vertical, horizontal

irisWipe rectangle, diamond

ellipseWipe circle

clockWipe clockwiseTwelve

fanWipe centerTop

snakeWipe topLeftHorizontal

spiralWipe topLeftClockwise

pushWipe fromLeft

slideWipe fromLeft

fade crossfade

Type	Associated Subtype(s)
starWipe	fivePoint (this must be specified)
barWipe	leftToRight, topToBottom
barnDoorWipe	vertical, horizontal
irisWipe	rectangle, diamond
ellipseWipe	circle
clockWipe	clockwiseTwelve
fanWipe	centerTop
snakeWipe	topLeftHorizontal
spiralWipe	topLeftClockwise
pushWipe	fromLeft
slideWipe	fromLeft
fade	crossfade

または、typeにはCSSのトランジションフィルタを使用できる。
例）<t:TRANSITIONFILTER BEGIN="4" DUR="3" TYPE="progid:DXImageTransform.Microsoft.Wheel(spokes=8)"/>

主な属性はtargetelement（トランジション効果を適用するHTMLエレメント）, begin, dur, modeなど。

勿論属性はDHTMLでのプロパティとして用意されています。

例）object.begin=sTime・・・スクリプト、<t:tagName begin="sTime" … />・・・HTML

sTimeに当てはめる内容

sTime 以下の値の1つ以上を指定するか、または受け取ることが可能な文字列。

clock-value Timeフォーマットでの時間(ミリ秒、秒、分、時など）

id.event[+clock-value] オブジェクトのイベント。オプションとして時間を加算できる。.

indefinite 不定。始動には、 beginElement()メソッドで行う。.

読み書き可能で、初期値は0（秒）。

ということで
<t:par id="tpar" begin="indefinite">
<t:TRANSITIONFILTER id="gtrans" TargetElement="img1" BEGIN="2" DUR="3" TYPE="progid:DXImageTransform.Microsoft.Strips(motion=rightdown)" />
<t:TRANSITIONFILTER id="goff" TargetElement="img1" BEGIN="10" DUR="3" TYPE="irisWipe" Subtype="rectangle" mode="out" onend="reps()" />
</t:par>
TIMEコンテナがbeginelement()でスタートすると、コンテナ内のサブエレメントがタイムライン上に配置されます。時間は動いています。開始時間を待ちます。gransが2秒後にスタートし、その8秒後にgoffがスタートします。goffのトランジション時間はdur="3"なので、スタートして3秒後にトランジション変化は終了し、endイベントが発生します。onendでキャッチし、スクリプトであるreps()が実行されます。

reps()の動作は説明済みですね。

位置をランダムにセットしてimg1エレメントがTIMEトランジションで表示され、さらにTIMEトランジションで消え、また関数reps()によって位置がランダムにセットされ、・・・・と繰り返しが起こります。

ランダムに位置を変えるという部分はHTML+TIMEでは実現できません。そこでスクリプトとHTML+TIMEを組み合わせているわけですね。

ではご覧ください。

ランダム出現

ランダム出現img1.style.visibility='hidden'とsetTimeout("img1.style.visibility='visible'",2000)をコメントアウトしたもの。

HTML+TIMEの概念：僕なりにイメージしてみました。あくまでもイメージですから。

拡張マークアップ言語（XML)ベースで定義済みの属性やメディアなどの要素を、ウェブページに簡単に利用するために用意されている。

ドキュメントが読み込み完了された時点でドキュメントスケジュールは開始され、時間に正確に進展し続けます。スケジュール上にはタイムラインが並び、TIMEエレメントはタイムライン上に配置されます。配置のされ方は並列であったり、直列であったり、他のエレメントとの同期を取ることもあります。どのTIMEエレメントも繰り返し回数や持続時間をもつことができます。時間予定がなされないTIMEエレメントはタイムラインに配置されません。時間予定が発動された時あるいはTIMEコンテナが配置された時にタイムライン上に配置され、時間が来るまで発動を待ちます。タイムライン上の配置された個々のTIMEエレメントはDOMによって停止・再開を可能にします。HTML+TIMEモデルではDOM内容を読み取ることができますが、TIMEスケジュールによる要素の変化はDOMへの影響をなんら与えません。タイムライン上で開始時間が来たとき、準備できていないメディアについては準備が整い次第スタートするでしょう。HTML+TIMEモデルでは影武者要素を時間内に置き、イベントベースでありながら、あたかもスケジュールタイミングであるかのように発動させます。またあたかも始めから定義されたかのように、影武者要素はスケジュールに追加されるでしょう。HTML+TIMEベースではないHTMLエレメントについてもHTML+TIMEはその内容とスタイル要素を見分け、あたかも同じ土俵上にあるかのようにショーを演じます。

次回の予定：トランジションフィルタのapply()とplay()って？
apply()・・・適用、play()・・・再生

【予習】

MSDNより転載--トランジション

トランジションとは時間経過で変化するビジュアルフィルタである。これにより、コントロールをある状態から次の状態に視覚的に移動できる。よく使われる例として、画像のSRCを変更してある画像を他に変更するものがある。トランジションで、新しい画像へと何らかのアニメーション効果を得られる。また、visibilityプロパティを変更すると、次第に表示されたり非表示になるコントロールを作成できる。

トランジションフィルタには、処理用のメソッドとイベントがある。フィルタでイベントを発生させたい場合は、onfilterchangeイベントを使う。イベントオブジェクトのsrcFilterプロパティをスクリプトで使うことで、イベントについて必要な情報をすべて得ることができる。この方法により、スクリプト側でトランジションの終了が分かる。フィルタのメソッドが、トランジションの適用、実行を許可する。

Applyメソッドでは、トランジションが最初に適用されるコントロールの視覚的な外観をフリーズさせる。これにより再描画は行われなくなるが、内部的な変更は続く。Playメソッドは、トランジションを実行する。スクリプトは、どんなときでも"追跡を終了する"ことができ、Stopメソッドを呼び出してトランジションを終了できる。

Blendトランジションフィルタ、Revealトランジションフィルタ・・・Internet Explorer 4.0以降

以下のテーブルはインターネットエクスプローラー4.0のRevealTransトランジションから、適切なインターネット・エクスプローラー5.5での構文への写像です。

revealTransトランジションの値とIE 5.5フィルタマッピングの対比
Transition Property Value	Alternate 5.5 implementation
0 - Box in	DXImageTransform.Microsoft.Iris(irisstyle='SQUARE', motion='in')
1 - Box out	DXImageTransform.Microsoft.Iris(irisstyle='SQUARE', motion='out')
2 - Circle in	DXImageTransform.Microsoft.Iris(irisstyle='CIRCLE', motion='in')
3 - Circle out	DXImageTransform.Microsoft.Iris(irisstyle='CIRCLE', motion='out')
4 - Wipe up	DXImageTransform.Microsoft.Blinds(direction='up', bands=1)
5 - Wipe down	DXImageTransform.Microsoft.Blinds(direction='down', bands=1)
6 - Wipe right	DXImageTransform.Microsoft.Blinds(direction='right', bands=1)
7 - Wipe left	DXImageTransform.Microsoft.Blinds(direction='left', bands=1)
8 - Vertical blinds	DXImageTransform.Microsoft.Blinds(direction='right')
9 - Horizontal blinds	DXImageTransform.Microsoft.Blinds(direction='down')
10 - Checkerboard across	DXImageTransform.Microsoft.CheckerBoard(direction='right')
11 - Checkerboard down	DXImageTransform.Microsoft.CheckerBoard(direction='down')
12 - Random dissolve	DXImageTransform.Microsoft.RandomDissolve
13 - Split vertical in	DXImageTransform.Microsoft.Barn(orientation='vertical', motion='in')
14 - Split vertical out	DXImageTransform.Microsoft.Barn(orientation='vertical', motion='out')
15 - Split horizontal in	DXImageTransform.Microsoft.Barn(orientation='horizontal', motion='in')
16 - Split horizontal out	DXImageTransform.Microsoft.Barn(orientation='horizontal', motion='out')
17 - Strips left down	DXImageTransform.Microsoft.Strips(motion='leftdown')
18 - Strips left up	DXImageTransform.Microsoft.Strips(motion='leftup')
19 - Strips right down	DXImageTransform.Microsoft.Strips(motion='rightdown')
20 - Strips right up	DXImageTransform.Microsoft.Strips(motion='rightup')
21 - Random bars horizontal	DXImageTransform.Microsoft.RandomBars(orientation='horizontal')
22 - Random bars vertical	DXImageTransform.Microsoft.RandomBars(orientation='vertical')
23 - Random	上のフィルタ群からランダムに適用させる。

※DXTMETA2.DLLが導入されているパソコンでは、メタクリエーションズ・トランジションフィルタが使用できます（Direct2D）。

DXTMETA2.DLLのダウンロード・・・187 KB (191,488 バイト)
ダウンロード後、サイズを確認してから正常にダウンロードできていることを確認ください。
インストールはダブルクリックで行います。インストール先を変えずにインストールを完了してくださいね。

HTML(CSS)=>filter:progid:DXImageTransform.MetaCreations.filterValue(duration=sTime,)

スクリプト=>
object.filter='progid:DXImageTransform.MetaCreations.filterValue(duration=sTime,)

*filterValue*	*CopyrightValue*
ColorFade	{2A54C908-07AA-11D2-8D6D-00C04F8EF8E0}
GlassBlock	{2A54C913-07AA-11D2-8D6D-00C04F8EF8E0}
Liquid	{AA0D4D0A-06A3-11D2-8F98-00C04FB92EB7}
Twister	{107045CF-06E0-11D2-8D6D-00C04F8EF8E0}
CenterCurls	{AA0D4D0C-06A3-11D2-8F98-00C04FB92EB7}
PageCurl	{AA0D4D08-06A3-11D2-8F98-00C04FB92EB7}
Water	{107045C5-06E0-11D2-8D6D-00C04F8EF8E0}
LightWipe	{107045C8-06E0-11D2-8D6D-00C04F8EF8E0}
RollDown	{9C61F46E-0530-11D2-8F98-00C04FB92EB7}
Wormhole	{0E6AE022-0C83-11D2-8CD4-00104BC75D9A}
Lens	{107045CA-06E0-11D2-8D6D-00C04F8EF8E0}
FadeWhite	{107045CC-06E0-11D2-8D6D-00C04F8EF8E0}
Jaws	{2A54C904-07AA-11D2-8D6D-00C04F8EF8E0}
FlowMotion	{2A54C90B-07AA-11D2-8D6D-00C04F8EF8E0}
Vacuum	{2A54C90D-07AA-11D2-8D6D-00C04F8EF8E0}
Grid	{2A54C911-07AA-11D2-8D6D-00C04F8EF8E0}
Threshold	{2A54C915-07AA-11D2-8D6D-00C04F8EF8E0}
Ripple	{AA0D4D03-06A3-11D2-8F98-00C04FB92EB7}
Curls	{AA0D4D0E-06A3-11D2-8F98-00C04FB92EB7}
PeelABCD	{AA0D4D10-06A3-11D2-8F98-00C04FB92EB7}
Curtains	{AA0D4D12-06A3-11D2-8F98-00C04FB92EB7}
BurnFilm	{107045D0-06E0-11D2-8D6D-00C04F8EF8E0}

スクリプト

object.filters['DXImageTransform.MetaCreations.filterName'].プロパティ or メソッド

例）img1.filters['DXImageTransform.MetaCreations.ColorFade']..Copyright = "Copyright MetaCreations Corp. 1998. Unauthorized duplication of this string is illegal. {2A54C908-07AA-11D2-8D6D-00C04F8EF8E0}"

このフィルタの場合は、Copyrightプロパティ（属性）を正しく設定しておかないと、MetaCreationsという会社ロゴが表示されてしまいます。

サンプル１ロゴ出現

そこでCopyrightを設定しておきます。

サンプル２ロゴなし

このCopyrightの文字列ですが、上記のように種類によって異なるのです。スクリプトで種類をランダムに設定する場合、Copyrightもそれに合わせて変更しなければなりません。

次回説明しますね。