フィルタとトランジション

		前のトピック: 位置指定 次のトピック: ビジュアルフィルタとトランジションフィルタのリファレンス

フィルタとトランジション

Microsoft® Internet Explorer 4.0の登場により、Webページのオーサーはビジュアルフィルタとトランジションを使って、マルチメディア効果をコンテントに与えることができるようになった。このためには、Webページでカスケーディングスタイルシート（CSS）属性を使用できる。ビジュアルフィルタとトランジションは、標準的なHTMLコントロールに適用される。このHTMLコントロールにはテキスト コンテナ、画像、などの非ウィンドウのあらゆるオブジェクトなどが含まれる。トランジションとは、ビジュアルのある状態から他の状態へ時間とともに変化するフィルタである。基本的なスクリプト記述によりトランジションとフィルタを組み合わせることで、オーサーはビジュアルで対話型のドキュメントを作成する強力なツールを得る。

ビジュアルフィルタとトランジションによるマルチメディア効果の作成

ビジュアルフィルタの定義

フィルタのスクリプト記述

オブジェクト ベースのフィルタからの移行

フィルタ設計時における注意事項

ビジュアルフィルタ シナリオ

トランジション

ページ間トランジション

トランジション設計時における注意事項

トランジション シナリオ

ビジュアルとトランジション フィルタのリファレンス

ビジュアルフィルタ効果のリファレンス

プロパティ、メソッド、イベントのリファレンス

ビジュアルフィルタとトランジションによるマルチメディア効果の作成

ビジュアルフィルタとは、ドキュメントのコンテントに画面上で効果を与えるInternet Explorer 4.0の拡張機能である。フィルタで得られる効果には、スクリプトなど既存の機能よりも少ない場合がある。しかし、既存のスクリプト以上の効果を発揮したり、コントロールの外観を変更できる場合もある。ビジュアルフィルタを使うと、Webドキュメントに複雑な効果を簡単に取り込むことができる。

フィルタをHTMLコントロールに適用するには、スタイルシートのfilterプロパティを使用する。filterプロパティには、関数のような表記でフィルタを文字列で指定するが、スクリプトの知識などは必要ない。スタイル属性のfilterプロパティに記述する構文を次に示す。

filter:filtername(parameters)

スタイル属性として記述されたフィルタの例を次に示す。

<img id=sample src="sample.jpg" style="filter:blur(strength=50) flipv()">

上記のHTMLの例では、2つのフィルタをIMGコントロールに設定している。最初のフィルタでは、画像にピクセル数と青色を指定して表示している。2番目のフィルタでは、画像を上下に動かしている。

各フィルタにはオプション パラメータがあり、色や動作時間などの効果を明確に定義できる。画像の上下反転を定義するFlipVフィルタと、左右反転を定義するFlipHフィルタではパラメータを持たない（ただし、すべてのフィルタとトランジションにはenabledプロパティがあり、すべてのトランジションにはDurationプロパティがある)。複数のフィルタを同時に使用でき、上記の例では"flipv"フィルタと"blur"フィルタという2つのフィルタを組み合わせてIMGに用いている。

スクリプトで生成できる効果を、フィルタでも作成できる場合もよくある。「スクリプトで作成できることを何故フィルタで行うのか？」。その理由はいくつかある。一番の要素は、フィルタだとスクリプトが不要なことである。良くも悪くも、HTMLオーサーの多くは、スクリプトに対して逃げ腰である（または嫌がる）。スクリプトが生成できるものと同じ効果を得られる機能が、フィルタとして用意されている。また、他の利点もある。フィルタはCSSから継承した宣言文と構文を使用するので、オーサーはより簡単に利用でき、エレメントのすべてのクラスに適用できることが挙げられる。

フィルタを使うもう一つの理由は、下位互換性をとりやすいことである。filterプロパティやスタイルシートをサポートしないブラウザは、それらを単に無視する。filterプロパティをサポートしているブラウザでも、オーサーに影響を与えず、異なる方法で実行できる。例えば、Internet Explorer 4.0ではフィルタを特別なCOMオブジェクトで実行し、簡単に拡張できる一方で、Windows® 3.1版のように、組み込まれたサブセットの機能を実行することもありえる。

Internet Explorer 4.0で提供されるフィルタはすべて"ビジュアル"であるが、そうでなければいけないわけではない。非ビジュアルなフィルタの例としては、フィルタをかけたエレメントでさまざまなスタイルシート属性（色、フォントのサイズ、太さ、そして位置さえも）を変更するものが考えられる。これらのフィルタは、いかなるエレメントにも（コントロール以外でも）適用できる。

HTMLコントロールとは何か?

ビジュアルフィルタは、HTMLエレメントのうちコントロールにだけに適用できる。ブラウザでWebドキュメントを表示する場合、コントロール エレメントはブラウザ ウィンドウ内に矩形領域を定義する。コントロールはIFRAMEとは違ってウィンドウ化できない。利用可能なHTMLコントロールを次に示す。

BODY

BUTTON

DIV(高さ、幅、または絶対位置が定義されている)

IMG

INPUT

MARQUEE

SPAN(高さ、幅、または絶対位置が定義されている)

TABLE

TD

TEXTAREA

TFOOT

TH

THEAD

TR

構造化グラフィックやActiveX™コントロールなどの非ウィンドウのコントロールにも、フィルタ属性を適用できる。以下の例外を除いて、フィルタは（オブジェクトに適用された場合）標準的なCSS属性継承に従う。

位置指定していないエレメント内に入れ子された位置指定するエレメントでは、フィルタは無視される。例えば、位置指定していないDIVの中の位置指定するSPANである。これを解決する簡単な方法は、常に一番外側のエレメントの位置や幅を定義することである。

フィルタを持てないエレメントやウィンドウ化されたオブジェクトには、Java™アプレット、フォーム エレメント（IFRAME、SELECTおよびOPTION）、段落エレメント（P）、見出しエレメント（Hn）、論理テキストスタイル エレメント（EM、STRONG）がある。

ビジュアルフィルタの定義

ビジュアルフィルタにより、コントロールの外観を変更できる。実際、ビジュアルフィルタ効果を適用した結果は、コントロールの外観を完全に入れ替えることができる。ビジュアルフィルタの分かりやすい例として、Alphaフィルタを説明する。このフィルタは、背景とターゲットを混ぜ合わせる。オーサーは、混ぜ合わせる度合い（あるいは不透明度）を制御する。不透明度はパーセンテージで指定する。例えば、次に示すHTMLでは画像の不透明度を20パーセントに指定している。

<img id=sample src=sample.jpg style="filter:alpha(opacity=20)">

Internet Explorer 4.0では、前述のAlphaフィルタやLightフィルタ（コントロールが明るく光る色を付ける）などのビジュアルフィルタをサポートしている。次の表を参照すること。

フィルタ効果	解説
Alpha	透明レベルを設定する。
Blur	高速で移動する印象を作成する。
Chroma	特殊な透明色を作成する。
Drop Shadow	全体に影のオフセットを作成する。
FlipH	画像の左右反転を指定する。
FlipV	画像の上下反転を指定する。
Glow	オブジェクトの外枠を囲む輝度を指定する。
Grayscale	画像から色情報を取り去る。
Invert	色相、彩度、輝度の値を逆にする。
Light	光源をオブジェクトに映す。
Mask	オブジェクトから透明なマスクを作成する。
Shadow	オブジェクト全体に影を作成する。
Wave	x座標とy座標に沿った正弦波の形にゆがみを与える。
XRay	オブジェクトの端だけを表示する。

フィルタの効果を確認するには、以下のInternet Client SDKで提供されるサンプルを参照すること。
Filters Wizard
Wave Filter Wizard

フィルタのスクリプト記述

filtersコレクションは各エレメントで利用でき、これによってスクリプトが個々のフィルタにアクセスできる。filterコレクションは、他のオブジェクトモデル コレクションと同様にアクセスできる。例えば、id=theDivが指定されたエレメントのfilterコレクション中の最初のフィルタにアクセスするスクリプトは、次のようになる。

theDiv.filters.item(0).enabled = true;

フィルタは、組み込まれたコントロールのサブオブジェクトとみなされる。他のオブジェクトと同様に、フィルタは内部状態を変更できるようにプロパティとメソッドを公開している。また、他のオブジェクトモデル コレクションのように、フィルタは数種のアクセスをサポートしている。

<img id=sample src="sample.jpg" style="filter: alpha(opacity=50) fliph(enabled=0) blur(amount=10); position: relative">
<script language="JavaScript">
function foo()
{
sample.filters.alpha        // サブ オブジェクト
sample.filters["alpha"]     // インデックスの指定
sample.filters[0]           // 数値インデックス
}
</SCRIPT>

同じタイプのフィルタが1つ以上適用される場合や、フィルタのタイプが前もって分からない場合（インスタンスのために、スクリプトやデータバインドで設定された場合）には、数値アクセスが特に役立つ。これは、Amount、Color、Playなどの共通のプロパティとメソッドのあるフィルタとトランジションには特に重要である。

Alphaフィルタのopacityプロパティを変更すると、コントロールの不透明度を動的に変更できる。次に例を示す。

<img id=sample src=sample.jpg style="filter: alpha(opacity=50)">
<script language="javascript">
function foo()
{
sample.filters.alpha.opacity += 10;
}

Revealトランジションを作成するメソッドを呼び出す場合にも、上記と同じ構文が使える。次に例を示す。

<div id=mydiv style="height:50;width:50;filter:wave(strength=100) revealTrans(transition=3 duration=4)"> This is a div </div>

<script language="JavaScript">
mydiv.filters.revealTrans.apply()
mydiv.innerText = "This is different text"
mydiv.filters.revealTrans.play()
</script>

Revealトランジションはインデックスによってもアクセスできる。

<script language="JavaScript">
mydiv.filters[1].apply()
mydiv.innerText = "This is different text"
mydiv.filters[1].play()
</script>

フィルタ文字列

styleオブジェクトにもfilterプロパティがある。このプロパティは読み書き可能で、エレメントのCSSフィルタを直接処理できる。例えば、前の例でのDIVを使うと、次のコードのようになる。

<div id=mydiv style="height:50;width:50;filter:wave(strength=100) revealTrans(transition=3 duration=4)"> This is a div </div>

<script>
...
alert(mydiv.style.filter)
...
</script>

次の文字列が表示される。

wave(strength=100) revealTrans(transition=3 duration=4)

既存の値は上書きされ、ブラウザは直ちにこのエレメントを再描画することに注意しよう。このプロパティを書き換えることで、エレメントのフィルタを動的に変更でき、とても便利である。コレクションにFlipHフィルタを動的に追加する場合の例を次に示す。

<div id=mydiv style="height:50;width:50;filter:wave(strength=100) revealTrans(transition=3 duration=4)"> This is a div </div>

<script>
...
mydiv.style.filter = mydiv.style.filter +  " fliph()"
...
</script>

変更後、新しいフィルタの文字列は次のようになる。

wave(strength=100) revealTrans(transition=3 duration=4) fliph()

コレクションのフィルタの文字列にさらに変更を行うと、この新しい文字列の変更となる。複雑なフィルタの処理をするには、オーサーはそのエレメントのfilterコレクションの現行状態を覚えておく必要がある。

注　できるだけオブジェクトモデルを使ってCSSフィルタにアクセスし、オブジェクトモデルに不向きな特殊な状況でだけフィルタ文字列を直接アクセスすること。フィルタを動的に追加する場合でも、エレメントのスタイルシートにある初期フィルタ属性をenabled=0にして、フィルタを追加したほうがよい。スクリプトでフィルタを表示したい場合は、単にフィルタ属性をenabled=1に設定すれば、フィルタが表示される。

スクリプトからfilterプロパティを変更する簡単な例は、このWebページを参照すること。フィルタ メソッドと処理するプロパティを呼び出す、より複雑なスクリプトの例は、サンプルページを参照すること。

スクリプトによってfilterプロパティを変更する簡単な例は、サンプルページ“Using Script to Manipulate an Alpha Filter”を参照すること。フィルタ メソッドと処理するプロパティを呼び出す、より複雑なスクリプトの例は、サンプルページ“More Complex Filter Manipulation”を参照すること。

オブジェクト ベースのフィルタからの移行

Internet Explorer 4.0が開発されたとき、フィルタはまずOBJECTエレメントとしてサポートされた。Internet Explorer 4.0の最終版のリリースにより、フィルタ実装はCSSモデルへ論理的に切り替えられた。この切り替えは新しいWebページに影響しないが、OBJECTを使ってフィルタ効果を持たせた既存のドキュメントは今では使えない。現在、OBJECTの使用して、一度に多くの異なるコントロールにすることに慣れているオーサーは、各コントロールごとにフィルタを使って指定しなくてはならない。しかし、スクリプトのstyle.filter文字列を変更することで、前の例での構文も利用できる。

<object id=aFilter clsid=...><param name=param-name value=param-value> ... </object>
site.filter = aFilter

これは、次のようになる。

site.style.filter = "someFilter(param-name=param-value, ...)"

しかし、これはフィルタの最適な利用法とはとてもいえない。新しいCSS構文では、複数のフィルタを一度に組み込んだりアクティブにできる。enabledプロパティを使えば、指定したフィルタのオン／オフを切り替えることができる。

フィルタ設計時における注意事項

フィルタには、透明度を設定しないと正しく機能しないものがある。これらには、Shadow、DropShadow、Glow、Maskがある。テキストとオブジェクトとを重ね合わせる場合、背面に配置したオブジェクト（またはページ）に対して、テキストは自動的に透過される。GIFイメージの場合、これらのfilterプロパティで表示させるには、透過GIFイメージ（gif89aフォーマット）でなくてはならない。

フィルタの適用や表示では、マージンが影響する。フィルタが適用されるマージンやDIVの境界がオブジェクトに近接している場合には、"クリッピング"が生じる。例えば、テキストがDIVの境界のすぐ隣にある場合、マージンなしでテキストに発光を付けると、DIVの境界で発光効果がいくらかクリッピングされることもある。

フィルタを使ったWebページを設計する場合、パフォーマンスを十分に考慮しなくてはならない。Internet Explorer 4.0では、フィルタ効果を表示するためには、まずその演算処理に時間が必要となり、その効果の適用でさらに時間がかかることとなる。このことから、たとえブラウザが表示できても、負荷のかかるフィルタ（例えば、スクリプトで高速にループしながらLightフィルタ効果をエレメントに対して与えるなど）の適用や変更は、無駄である。

ブラウザ ウィンドウでテキストを選択している間は、適用されたどのようなフィルタ効果も無視される。マウスボタンが離されると、ブラウザは再びフィルタ効果をテキストに適用する。この処理は、すでに述べたパフォーマンスの限界への解答である。

エレメントのグループをDIVで囲むことで、それらに1つ以上のフィルタ効果を適用できる。DIVで囲まれたエレメントに位置を指定する場合、そのDIV自体の位置の指定に気を付けなくてはならない。前述したように、子エレメントにフィルタ効果を正しく適用するには、すべてのコンテナの位置あるいは幅が指定され、親エレメントの位置が定義されている必要がある。

フィルタには、エレメントに効果を与えるさまざまなメソッドがある。例えば、Alphaフィルタはそれ自体が関数として、各ピクセルに影響を与える（均一効果や傾斜効果などを作成する）。一方、Glowフィルタでは、各ピクセルはそれを直接囲むピクセルから影響を受ける効果を作成する。コンテントを選択する場合、フィルタが効果を発揮するために必要とする手法が影響を与えることもある。

ビジュアルフィルタ シナリオ

静的なWebページと動的なWebページのどちらでも、フィルタを制限なしで使える。ここでは、フィルタ スタイルに共通する興味深い適用例と、スクリプトとフィルタの組み込みについての例を説明する。

静的なビジュアル効果の作成

スタイル フィルタのもっともよく使われる例として、静的なビジュアル効果が挙げられる。これらは、テキストのドロップシャドウ効果のような固定された効果を作成し、DIVやオブジェクトに適用する。静的な効果は、最小限の努力と習熟（ときにはスクリプトを記述することもなく）でWebページのデザインを簡単に強化できる。

スクリプトを記述しない例

Dynamic HTMLの位置指定とAlphaフィルタを使って、字幕効果が得られる方法を次の例で示す。

<HTML>
<HEAD><TITLE>Static Alpha Filter Demo</TITLE>
</HEAD>
<BODY>
<DIV style="position:absolute; top:20; left:15; width:50%; height:35; background-color: black; filter: alpha(opacity=50)"></DIV>
<DIV style="color:red; position:absolute; top:20; width:50%; height:100; margin-top:5; margin-left:5;"><P style="font-size:14pt; font-weight:bold; text-align:center">HERE IS CAPTION TEXT</P></DIV>
<IMG src="sam2.jpg">
</BODY>
</HTML>

タイマースクリプトの例

タイマースクリプトを使うと、"動画"のようなビジュアル効果を与えることができる。次の例では、2つのビジュアルフィルタ（AlphaとGlow）を使い、setIntervalメソッドによって異なる2つのタイマーを設定している。

<HTML>
<HEAD><TITLE>Timer Demos</TITLE>
<SCRIPT>
function init()  {
makeFlash(bob)
setInterval("fred.filters.alpha.opacity = (fred.filters.alpha.opacity + 5) % 101", 100)
setInterval("foo(dave)", 100)
}
var delta = 5
function foo(obj)  {
if ((obj.filters.alpha.opacity + delta > 100)
||  (obj.filters.alpha.opacity + delta < 0))
delta = - delta
obj.filters.alpha.opacity += delta
}
function makeFlash(obj)  {
obj.flashTimer = setInterval("bob.filters.glow.enabled = !bob.filters.glow.enabled", 1000)
}
function stopFlash(obj)  {
clearInterval(obj.flashTimer)
}
</SCRIPT>
</HEAD>
<BODY onload="init()">
<DIV id=bob style="width:50%; filter:glow(Color=#FAF900,Strength=2,enabled=0);" onclick="stopFlash(this)"><H1>Here is some text</H1></DIV>
<DIV id=fred style="width:50%; filter:alpha(opacity=100);"><H1>Here is some text</H1></DIV>
<DIV id=dave style="width:50%; filter:alpha(opacity=50); color: blue"><H1>Here is some text</H1></DIV>
</BODY>
</HTML>

動的なビジュアル効果の作成

動的なビジュアル効果では、基本的な対話性をWebページに持たせることができる。動的な効果を与えるには、ドキュメントを変更するきっかけとなるイベントが必要となる。このイベントには、マウスイベント（マウスの動きやクリックなど）、タイマー インターバル、新しいコンテントの状態を呼び出すスクリプト関数などがある。

イベントスクリプトの例

すでに説明した"字幕"の例に、対話性を追加する例を次に示す。これは、マウスがインラインイメージに移動したときだけ、キャプションを表示できるものである。

<HTML>
<HEAD><TITLE>Dynamic Alpha Filter Demo</TITLE>
<SCRIPT>
function caption()  {
if (bob.style.visibility == "hidden")     {
bob.style.visibility = ""
fred.style.visibility = ""
}
else  {
bob.style.visibility = "hidden"
fred.style.visibility = "hidden"
}
}
</SCRIPT>
</HEAD>
<BODY>
<DIV id="bob" style="visibility:hidden; position:absolute; top:20; left:15; width:50%; height:35; background-color: black; filter: alpha(opacity=50)"></DIV>
<DIV id="fred" style="visibility:hidden; color:red; position:absolute; top:20; width:50%; height:100; margin-top:5; margin-left:5;"><P style="font-size:14pt; font-weight:bold; text-align:center">HERE IS CAPTION TEXT</P></DIV>
<IMG src="sam2.jpg" onmouseover="caption()" onmouseout="caption()">
</BODY>
</HTML>

タイマースクリプトの例

タイマーを使用すると、周期的な効果を付けることができる。次に対話型の例を示す。

UIエレメント表示におけるディスエーブル効果の作成

Webページにおいてもユーザーインターフェイスとして、使用できないナビゲーションボタンが、他のボタンと視覚的に区別できるとわかりやすい。従来はこれを実現しようとした場合、こうした無効ボタンのためにイメージ画像をもう一つ別に用意しておき、スクリプトで差し替えて表示させる必要があった。しかし、ビジュアルフィルタを使えば、もはやその必要はない。なお、以下で説明するフィルタ効果は、無効ボタンの表示だけにその利用が限定されるわけではない。いままで表示色の違いだけで複数のイメージを用意していたケースでも利用できる。

スクリプトを記述しない例

以下の例は、Grayscaleフィルタ効果とAlphaフィルタを使って、無効なボタンを視覚的に表現する方法について示す。

イベントスクリプトの例

このページでは、マウスイベントの応答で状態を変更する対話型オブジェクトを示す。

複雑なビジュアル効果の作成

Webオーサーはビジュアルフィルタ、トランジション、そして、複雑なプログラムを組み合わせることで、複雑で興味深いビジュアル デザインや対話型の機能を作成できる。次の例では、Internet Explorer 4.0の作成ツールで利用できる色々なビジュアル効果を示している。

単純なスクリプトの例

Maskフィルタとスタイル変更の種類を組み合わせると、興味深い効果をWebページに反映できる。次にこのWebページの例を示す。

イベントスクリプトの例

Lightフィルタは、独特で複雑なビジュアルフィルタである。マウスイベントとLightフィルタを組み合わせると、独特なDHTMLを作成できる。次にこの例を示す。

プログラム記述の例

複雑なプログラムを記述すると、同じLightフィルタを制御できる。次に例を示す。よりより複雑なInternet Explorer 4.0の例は、Microsoft Site BuilderのWebサイト デザインで見ることができる。

トランジション

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

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

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

<HTML>
<HEAD><TITLE>Transition Blend Demo</TITLE>
<SCRIPT language="JavaScript">
var fRunning = 0
function startTrans()
{
if (fRunning == 0)
{
fRunning = 1
SampleID.filters.blendTrans.Apply();
SampleID.src = "sunset.jpg";
SampleID.filters.blendTrans.Play()
}
}
</SCRIPT>
<SCRIPT for="SampleID" event="onfilterchange">
fRunning = 0
</SCRIPT>
</HEAD>
<BODY>
<IMG id="SampleID" src="beach.jpg" style="filter:blendTrans(duration=3)" onclick="startTrans()"><BR>
Click image for Transition Filter: Blend
</BODY>
</HTML>

Internet Explorer 4.0では、Blendトランジション フィルタとRevealトランジション フィルタを利用できる。Blendトランジションでは、指定した時間で単純なフェードイン／フェードアウトを行う。一方、Revealトランジションでは、Box In、Box Out、Vertical Blindsなどの複数の効果を指定できる。

2つの画像における単純なトランジションの例を、次のHTMLに示す。ボタンをクリックするとdoTransスクリプトを実行し、revealTransフィルタのApplyメソッドをまず呼び出して画像の描画を停止する。その後、別の画像を設定し、そのフィルタのPlayメソッドを呼び出してトランジションを適用する。この場合、トランジションの型は8に設定されているので、Vertical Blindsのトランジション効果が適用される。これは、IMGタグのインライン スタイルで適用できる。

<HTML>
<HEAD><TITLE>Transition Sample</TITLE>
<SCRIPT LANGUAGE=JavaScript>
Function doTrans()
{
theImg.filters.item[0].Apply();
theImg.src="circles.bmp";
theImg.filters.item[0].Play();
}
</SCRIPT>
</HEAD>
<BODY style="background-color:darkblue">
<IMG ID=theImg width=200 height=200
src="clouds.bmp" style="filter:revealTrans(Duration=3.3, Transition=8);">
<BR>
<INPUT type=button value="Start Transition" onClick="doTrans()">
<IMG src="clouds.bmp" style="position:relative; width:1; height:1;visibility:hidden">
<IMG src="circles.bmp" style="position:relative; width:1; height:1; visibility:hidden">
</BODY>
</HTML>

この例では、非同期と同期の変更の違いも示している。エレメントのinnerTextプロパティの変更は同期である。このステートメントの実行中に、アクションは完了する。srcプロパティを変更は非同期である。srcプロパティの変更は簡単にできるが、IMGエレメントの視覚的な状態は、新しい画像のダインロードが終了するまでは更新されない。よく考えられたスクリプトは、画像のonloadイベントが発生するまで待つ。別々のIMGタグで"ロードされた"グラフィックを指定するのは、同期問題を避けられる。しかし、すべての画像のダウンロードが終了した後に、トランジションが適用される場合に限られる。

ページ間トランジション

Webページをロードしたり閉じるような、ウィンドウ全体にビジュアル効果を適用するにはページ間トランジションを利用する。PowerPoint®のようなプログラムで、スライドの切り替えを行えるように、切り替え、フェード、さらに独自のトランジションを使用できる。

トランジションは、WebページのHEADセクションにあるMETAタグに記述する。METAタグではトランジションのタイプ、動作時間、他の変数を指定する。また、トランジションを次のページにまで適用するのか、現在のページだけに適用するのかも指定できる。

トランジションの構文

トランジションの構文は3つの部分から構成される。イベントの発生時期、トランジションの動作時間、使用するトランジション効果の種類である。ページの読み込みと、ページの終了におけるトランジションの設定方法を次に示す。

<META http-equiv="Page-Enter"
CONTENT="RevealTrans(Duration=4,Transition=1)>

<META http-equiv="Page-Exit"
CONTENT="RevealTrans(Duration=2.500,Transition=6)>

最初のMETAタグではトランジションとして1が指定されているので、ユーザーがページを読み込んだときに実行される。また、動作時間は4秒である。次のMEATタグのトランジションは6が指定されているので、ユーザーがページを終了したときに実行される。また、動作時間は2.5秒（2秒と500ミリ秒と記述する）である。

ページ間トランジションを開始するときに、4つのイベントがある。Page-Enter（ページの読み込み）、Page-Exit（ページの終了）、Site-Enter（サイトの読み込み）、Site-Exit（サイトの終了）である。動作時間の最大値は30秒である。

トランジションのリファレンス

Internet Explorer 4.0でサポートされているトランジションの種類を次に示す。

トランジション名	値
Box in	0
Box out	1
Circle in	2
Circle out	3
Wipe up	4
Wipe down	5
Wipe right	6
Wipe left	7
Vertical blinds	8
Horizontal blinds	9
Checkerboard across	10
Checkerboard down	11
Random dissolve	12
Split vertical in	13
Split vertical out	14
Split horizontal in	15
Split horizontal out	16
Strips left down	17
Strips left up	18
Strips right down	19
Strips right up	20
Random bars horizontal	21
Random bars vertical	22
Random	23

Internet Client SDKで配布されるウィザードに従うと、これらのトランジションはより簡単に構築できる。

• Transitions Wizard － ユーザーが入力したパラメータを基に、それぞれのトランジションにおけるコードを生成するHTMLベースのウィザード。

トランジション設計時における注意事項

トランジションを適用するにあたっての主な注意事項を示す。トランジションは非同期的に実行されるので、トランジションの終了が分かるイベント（onfilterchange）を使い、各トランジションの状態を追跡しなくてはならない。画像のダウンロードは非同期なので、画像が完全にダウンロードされるまでは、IMGタグの視覚的な状態は完全に更新されない。

トランジション シナリオ

静的なWebページと動的なWebページのどちらでも、フィルタを制限なしで使える。ここでは、トランジションと組み合わせたフィルタ スタイルの一般的で楽しい適用例と、スクリプト関数により複雑化した例を説明する。

イベントのないトランジションの作成

イベントのないトランジションは、静的なビジュアルフィルタと似ている。ドキュメントの対話機能を変更することなく、ページの視覚的な外観を変更するときに使用される。

単純なスクリプトの例

ページがロードされるときに興味深い情報を表示するトランジションの例を次に示す。

イベント ドリブン トランジションの作成

イベントスクリプトの例

マウスイベントが一連のトランジションを引き起こす例を次に示す。

複雑なトランジションの作成

ビジュアルフィルタとトランジションを組み合わせることで、Webオーサーは複雑で興味深い視覚的なデザインや対話型のWebを作成できる。次の例では、Internet Explorer 4.0の作成ツールで利用できる色々なビジュアル効果を示す。

イベントスクリプトの例

中間のWebページ（"ロゴ ページ"といわれることもある）では、トランジションの機能を発揮する機会を与えることができる。

タイマースクリプトの例

コンピュータ ベースのトレーニング アプリケーションでは、timedトランジションを使って主題を表示することができる。次に例を示す。

プログラム記述の例

ビジュアルフィルタ、スクリプト記述、トランジションを組み合わせると、複雑なサイトを開発できる。より複雑なInternet Explorer 4.0の例は、Microsoft Site BuilderのWebサイト デザインで見ることができる。

 トップに戻る
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.