Script.aculo.usで実現できる、さまざまな視覚効果

Script.aculo.us入門 （2）

表示をON/OFFする

　もっと単純に、リンクやボタンなどをクリックするたびに表示をON/OFFするような場合には、「toggle」が便利です。これは、3種類の効果のいずれかを使って、表示をON/OFFするものです。

<a href="#" onclick="Effect.toggle('target_div', 'slide'); return false;">Show/Hide Image!</a>
<br />
<div id="target_div" style="display:none;">
    <img id="img1" style="width:100px; height:100px;" src="./img/image1.jpg" />
</div>

クリックするごとに、イメージが上からスクロールして現れたり消えたりする。

　リンクをクリックすると、イメージがするすると引き出されて現れ、再度クリックするとするすると上に引き込まれて消えます。SlideUp,SlideDownと同じ効果が1つのリンクで実現できるわけです。このtoggleは、他とは少しだけ引数が異なります。

Effect.toggle( タグ , 効果名 , オプション設定 );

　第2引数に、使用する効果名をテキストで指定します。用意されている効果には、以下の3つがあります。

効果の種類

効果名	説明
'blind'	BlindDown,BlindUpによる表示
'slide'	SlideDown,SlideUpによる表示
'appear'	Appear,Fadeによる表示

　第2引数を指定するだけで、3つの効果によるON/OFFが作れますから、これが一番手軽で汎用性が高いかも知れませんね。

　また、これもタグを見れば分かるように、<img>単体では効果がありません。<div>タグなどの中に要素を収めておき、その<div>タグに対して効果を与えるようにするとよいでしょう。

透過度を変える

　ここまでの視覚効果は、要素を「消す」ものでした。こうした「消す」ための効果の他に、「要素の状態を変化させる」というものもあります。続いて、この「変化」のための機能について紹介しましょう。

　まずは「透明にする」ものです。これは「Opacity」というものです。fromとtoで開始時と終了時の透過度を指定し、滑らかに透過度を変えていきます。

<a href="#" onclick="new Effect.Opacity('img1',{from: 0, to: 1.0, duration: 3}); return false;">show Image!</a>
<br />
<a href="#" onclick="new Effect.Opacity('img1',{from: 1.0, to: 0, duration: 3}); return false;">
    <img id="img1" style="width:100px; height:100px;" src="./img/image1.jpg" />
</a>

クリックすると、イメージがゆっくり消えていく。ただし、見えなくなるだけでイメージはそこにあるままだ。

　リンクをクリックするとイメージが現れ、イメージをクリックすると消えていきます。フェードイン・フェードアウト（Appear,Fade）と同じように見えますが、決定的な違いが1つあります。それは「要素はなくならない」という点です。これは、要素の透過度を変えるだけであり、透明になっても依然としてその要素はそこにあり、なくなるわけではありません。

　また、メソッドを呼び出す際、newして新しいインスタンスを作成して実行している点にも注目しておきましょう。要素が消えるタイプの効果はただメソッドを呼び出すだけでしたが、変化するタイプの効果は、newして実行するのが基本です。これを忘れると、うまく効果が現れません。

補足

　そのまま呼び出すタイプと、newして呼び出すタイプは、一見したところ似たようなものに見えますが、内部的には大きく仕組みが異なっています。 newしないで呼び出すものはメソッドであり、内部で関数がそのまま割り当てられていますが、newするタイプのものはオブジェクトが割り当てられています。仕組みとしては異なっているのですが、おそらくはどちらも同じような感覚で違和感なく扱えるよう、あえて同じ形式で統一しているのでしょう。

移動と拡大・縮小

　要素の移動や拡大・縮小を行うものとして「Move」「Scale」といったものが用意されています。これもサンプルを挙げておきましょう。リンクをクリックするとイメージが縦横100ドット右下に移動します。またイメージをクリックすると、イメージが2倍に拡大されます。

<a href="#" onclick="new Effect.Move($('img1'),{x: 100, y: 100, mode:'relative'}); return false;">Move Image!</a>
<br />
<a href="#" onclick="new Effect.Scale('img1',200); return false;">
    <img id="img1" style="width:100px; height:100px;" src="./img/image1.jpg" />
</a>

クリックすると、イメージが右下へと移動する。

　移動は、「Move」を使います。これもnewでインスタンスを作って呼び出します。注意すべきは、第1引数が要素のIDではなく、オブジェクトになっているという点です。サンプルを見ると、'img1'ではなく、$('img1')が指定されていますね？ この$()というのは、prototypeにある機能で、document.getElementByIdの省略形です。Moveは、こうしてオブジェクトを指定して実行する必要があります。

　このMoveでは、オプションとして以下の3つを指定しておきます。これらは必須項目と考えてよいでしょう（modeについては、省略すると'relative'になります）。

指定するオプション

オプション名	説明
x	横方向の移動幅
y	縦方向の移動幅
mode	絶対位置か、相対位置か。'relative'または'absolute'で指定

　分かりにくいのはmodeでしょう。これは、その要素の基本位置からの絶対位置指定か、現在の場所からの相対位置指定かを示すものです。'relative'にすると（今の位置からの相対指定なので）実行するたびにどんどん移動していきます。'absolute'だと、（最初の位置からの絶対指定なので）一度移動すると、もう何度クリックしても移動しません。

　拡大・縮小を行っているのは「Scale」です。これは引数が若干他と違っています。第2引数に拡大率（パーセント換算）の数値を指定し、第3引数にオプションの指定をします。このScaleの面白いところは、イメージなどが拡大されるだけでなく、テキストのフォントサイズもあわせて大きく変化する、という点です。

<a href="#" onclick="new Effect.Scale('effect_span',200); return false;">
<span id="effect_span" style="background: #FFAAAA;">This is Sample!</span>
</a>

　例えば、これは、テキストをクリックするたびにテキストそのものが大きく拡大されていきます。要素の大きさだけでなく、そこにあるイメージや文字まできちんと拡大されるのです。