次々に効果を実行する
同時に効果を実行するのでなく、順番に実行するにはどうすればよいのでしょうか。実は、これは簡単です。実行したい効果を順番に記述すれば良いのです。ただし、それだけだと、効果が終わるのを待たずに次々と実行していくため、実際にはほとんど同時に実行されることになってしまいます。
では、どうすればいいか。実は、「queue」というオプションを指定することで、順に実行させることができます。これは、その効果の実行順を配列の前後に追加していくためのものです。例えば、queue:'front'とすれば先頭に追加され、queue:'end'では末尾に追加されます。
<a href="#" onclick="new Effect.Move($('div_1'),{x:300, y:0, mode:'relative',queue:'end'});
new Effect.Move($('div_2'),{x:300, y:0, mode:'relative',queue:'end'});
new Effect.Move($('div_3'),{x:300, y:0, mode:'relative',queue:'end'});
return false;">Parallel Effect!</a>
<br />
<div id="div_1" style="background: #FFAAAA; width:100px; height:100px;">First</div>
<div id="div_2" style="background: #AAFFAA; width:100px; height:100px;">Second</div>
<div id="div_3" style="background: #AAAAFF; width:100px; height:100px;">Third
</div>
これは、3つのエフェクトを順にqueue:'end'で追加したものです。こうすると、それぞれのエフェクトが順番に実行されていきます。もちろん、frontを指定しても可能です。この場合は、最後に組み込んだものから順に実行されることになります。
複数のParallelを順次実行する
このqueueによる指定は、個々の効果を実行するのには便利なのですが、では同時に複数の効果を実行するParallelを使う場合には注意が必要です。Parallelは、その中に複数の効果をもっていますので、それらは同時に実行し、かつParallelどうしは順次実行する、というようにしなければいけません。
<a href="#" onclick="new Effect.Parallel([
new Effect.Opacity('div_3',{from: 1.0, to: 0}),
new Effect.Move($('div_3'),{x:300, y:0, mode:'relative'})],{queue:'front'});
new Effect.Parallel([
new Effect.Opacity('div_2',{from: 1.0, to: 0}),
new Effect.Move($('div_2'),{x:300, y:0, mode:'relative'})],{queue:'front'});
new Effect.Parallel([
new Effect.Opacity('div_1',{from: 1.0, to: 0}),
new Effect.Move($('div_1'),{x:300, y:0, mode:'relative'})],{queue:'front'});
return false;">Parallel Effect!</a>
<br />
<div id="div_1" style="background: #FFAAAA; width:100px; height:100px;">First</div>
<div id="div_2" style="background: #AAFFAA; width:100px; height:100px;">Second</div>
<div id="div_3" style="background: #AAAAFF; width:100px; height:100px;">Third</div>
これは、複数のParallel指定を順に実行していくサンプルです。Parallelを次々に配列の先頭に追加していくため、すべてが追加されたところで先頭から順に実行がされていきます。不思議なことに、queue:'end'を指定した場合には、なぜかすべてほぼ同時に実行されてしまいます。これは、現在のScript.aculo.usの問題なのか、そういう仕様なのか、そもそもParallelでは使うべきでないのか……。とりあえず、現状では「Parallelをqueueで順次実行させる場合には問題がある」ということだけは言えそうです。
独自の効果を定義する
ここで紹介した効果を組み合わせることで、大抵のことはできるでしょうが、しかし完璧というわけではありません。Script.aculo.usの効果は、基本的に「スタイルシートの値を変化させる」というものであり、それ以外のものを変化させることはできません。そこで、独自に値を変化させるものを簡単に定義する方法について触れておきましょう。それは「Tween」というものを利用します。これは、次のような形で実行します。
new Effect.Tween( タグID , 開始値 , 終了値 , 属性または関数 ); new Effect.Tween( タグID , 開始値 , 終了値 , オプション設定 , 属性または関数 );
このTweenは、特定のタグの属性を開始値から終了値まで変化させていくというものです。非常に面白いのは、属性だけでなく関数定義を指定することもできるという点です。この関数は引数を1つもっており、変化する値が渡されます。実際に簡単な例を挙げておきましょう。
<a href="#" onclick="new Effect.Tween('div_1',0,22,{duration: 5},
function(n){
var str = 'Welcome To JavaScript.';
this.innerHTML = str.substring(0,Math.round(n));
});
return false;">
<div id="div_1" style="font-size: 18pt; background: #FFCCCC; width:300px; height:40px;">Click!</div>
</a>
これは、クリックすると「Welcome To JavaScript.」というテキストがゆっくりとタグに書き出されていくサンプルです。ここでは、第5引数に関数を指定し、その中でinnerHTMLにテキストを設定しています。操作する対象オブジェクトは、thisで指定できます。このように関数で定義することで、大抵の操作は行えるようになるでしょう。
まとめ
今回は、Script.aculo.usの主な視覚効果の使い方について紹介しました。複数の効果を組み合わせたり、独自の処理を用意するようになるとそれなりにJavaScriptを学ばなければいけなくなりますが、基本的な効果をいくつか使う程度ならそれほど知識がなくとも十分利用できるでしょう。それだけでも、サイトのインターフェイスはぐっとクールになるはずです。
JavaScriptそのものは、本格的に使いこなそうとすると非常に奥の深いものですが、こうしたライブラリを使うことで、ビギナーでも簡単に導入できるようになります。プログラミング・ビギナーこそ、こうしたAjaxライブラリを使ってみてほしいと思うのですが、いかがでしょうか。
