パターンとライブラリで作るAjaxおいしいレシピ
連載一覧へ
パターンとライブラリで作るAjaxおいしいレシピ（4）

Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト


アークウェブ株式会社
志田 裕樹
2008/1/7

コンビネーションエフェクトの使用例


■ サンプル【3】「削除」時のエフェクトをDropOutに

　「サンプル【2】」では、「削除」時のエフェクトはEffect.Opacityでしたが、これを、Effect.DropOutに変更しました。
サンプル【3】（拡大表示はこちら、※注意：Operaブラウザでは、一部表示が異なる部分があります）

　ソースコードは次のようになります。

deleteItem: function(id) {
    new Effect.DropOut("item" + id,
        {afterFinish: function() {
            $("item" + id).remove();
            this.updateSum();
        }.bind(this)});
},
- PR -

　この「Effect.DropOut」のようなエフェクトをscript.aculo.usでは、「コンビネーションエフェクト」と呼んでいます。

■ コンビネーションエフェクトとは？

　コンビネーションエフェクトとは、コアエフェクトを組み合わせることでより凝ったビジュアルエフェクトを実現できるようにしたものです。

　例えば、Effect.DropOutは、Effect.Opacityで、Opacityを「0」に近づけると同時に、Effect.Moveを用いて、表示位置を下に移動させることで実現されています。

　コンビネーションエフェクトの利用の仕方は基本的にコアエフェクトと同じです。いろいろなエフェクトが用意されていますので、ぜひ試してみてください（参考「Combination Effects in script.aculo.us wiki」）。

エフェクトを順番に実行させる、Queueの使用例


■ サンプル【4】商品画像をゴミ箱にEffect.MoveしてからEffect.DropOut

　「削除」時に、サンプル【3】で変更したEffect.DropOutを実行する前に、商品画像をゴミ箱にEffect.Moveするようにしました。
サンプル【4】（拡大表示はこちら、※注意：Operaブラウザでは、一部表示が異なる部分があります）

　ソースコードは次のようになります。

deleteItem: function(id) {
    var img = $("img" + id);
    img.absolutize();
    var trashPosition = Position.page($('trash'));
    new Effect.Move(img,
        {x: trashPosition[0],
        y: trashPosition[1],
        mode: 'absolute',
        queue: 'end'});
    new Effect.DropOut("item" + id,
        {queue: 'end',
        afterFinish: function() {
            $("item" + id).remove();
            this.updateSum();
        }.bind(this)});
},

　$('trash')で、ゴミ箱の位置を取得し、その座標に商品画像をEffect.Moveで移動させています。

　今回のサンプルでは、Effect.Move、Effect.DropOutの「options」パラメータに、「queue: 'end'」が指定されています。これはscript.aculo.usの「Queue」という仕組みです。

■ Queueはエフェクトを順番に実行させるための仕組み

　エフェクトのオブジェクトを生成すると、新しい（疑似）スレッドが立ち上がり、その上で実行が行われます。そのため、Effect.MoveとEffect.DropOutを続けて書くと、2つのエフェクトが同時に実行されてしまいます。

　もし、エフェクトを順番に実行させたい場合は、Queueを使用します。Queueとは、グローバルな待ち行列のようなもので、例えば、エフェクトAとエフェクトBがQueueの中に存在し、エフェクトCを「queue: 'end'」と指定すると、そのエフェクトは待ち行列の一番後ろに追加されます。

　もし、エフェクトCを「queue: 'front'」と指定すると、待ち行列の先頭に追加されます（参考「Effect Queues in scriptaculous wiki」）。

複数のエフェクトを同時実行する、Parallelの使用例


■ サンプル【5】X方向、Y方向それぞれの移動をEffect.Morphで別々に指定

　「サンプル【4】」では、ゴミ箱への移動にEffect.Moveを使用しましたが、汎用的なパラメータの変化を行う、Effect.Morphを使用することでも同様のことが実現できます。
サンプル【5】（拡大表示はこちら、※注意：Operaブラウザでは、一部表示が異なる部分があります）

　Effect.Moveの代わりに、次のように記述します。

deleteItem: function(id) {
    var img = $("img" + id);
    img.absolutize();
    var trashPosition = Position.page($('trash'));
    new Effect.Parallel(
        [new Effect.Morph(img,
            {style: {
                left: trashPosition[0] + 'px'},
                sync: true}),
        new Effect.Morph(img,
            {style: {
                top: trashPosition[1] + 'px'},
                sync: true})
        ],
        {duration: 2,
        queue: 'end'});
}

　このように、複数のエフェクトを同期させながら実行させる仕組みがParallelです。

■ Parallelで複数のエフェクトを同期で実行

　Parallelは、同時実行をさせたい要素を第1引数に配列として受け取ります。サンプル【5】では、下記の2つのエフェクトからなる配列を渡しています。

  1. left値をゴミ箱のleft値に近づけるEffect.Morph
  2. top値をゴミ箱のtop値に近づけるEffect.Morph

　また、Parallelに渡される個々のエフェクトでは「options」に「sync: true」を指定します。これにより、一方のエフェクトだけが実行されたりすることなく、各エフェクトが同期を取りながら実行されます（参考「Effect.Parallel in script.aculo.us wiki」）。

　Parallelを使うことで、デフォルトにはないコンビネーションエフェクトを作成することも可能になります。

　最後に次ページでは、Transitionの使用例、自作のTransitionの適用例、自作エフェクトの作成例について解説します。

1-2-3-4

　INDEX
パターンとライブラリで作るAjaxおいしいレシピ（4）
Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト
  Page1
今回はscript.aculo.usの一歩進んだテクニック
オンライン・サンプルを段階的に進化させて解剖！
サンプルのHTMLソースコードを解剖
  Page2
全サンプル共通のコントローラーのソースコード
エフェクトのないサンプルのビュー
コアエフェクトの使用例
エフェクトのコールバックの使用例
Page3
コンビネーションエフェクトの使用例
エフェクトを順番に実行させる、Queueの使用例
複数のエフェクトを同時実行する、Parallelの使用例
  Page4
パラメータの変化スピードを変える、Transitionの使用例
自作したTransitionの適用例
独自エフェクトの作成例
新しいユーザーエクスペリエンスを

パターンとライブラリで作るAjaxおいしいレシピ バックナンバー 連載インデックスへ»


リッチクライアント＆帳票 全記事一覧へ

TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH