連載
» 2008年01月07日 00時00分 公開

パターンとライブラリで作るAjaxおいしいレシピ(4):Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト (2/4)

[志田裕樹,アークウェブ株式会社]

全サンプル共通のコントローラーのソースコード

 次にコントローラーのソースコードを見てみます。前述のとおり、このソースコードは、全サンプル共通で利用されます。

var cart = new Object();

// コントローラー
cart.EffectiveCartController = Class.create({
    initialize: function() {
        Event.observe(window, 'load', this.onLoadWindow.bind(this));
    },

    // ページが読み込まれたとき
    onLoadWindow: function() {

        // 数量セレクトのハンドラ設定
        $$('.item select').each(function(select) {
            Event.observe(select, 'change',
                this.onChangeQuantity.bind(this));
        }.bind(this));

        // 削除ボタンのハンドラ設定
        $$('.item button').each(function(button) {
            Event.observe(button, 'click',
                this.onClickDelete.bind(this));
        }.bind(this));
    },

    // 数量が変更されたとき
    onChangeQuantity: function(e) {
        // 合計金額の変更をビューに依頼
        cart.EffectiveCartView.updateSum();
    },

    // 削除ボタンがクリックされたとき
    onClickDelete: function(e) {
        //e.targetは<button id="delete1">など正規表現でid値を抜き出す
        e.target.id.match(/delete(\d)/);
        var id = RegExp.$1;

        // 商品の削除と合計金額の変更をビューに依頼
        cart.EffectiveCartView.deleteItem(id);
    }
});

new cart.EffectiveCartController();

イベントハンドラで行われていること

 コントローラーには、これまでの連載と同様にイベントハンドラの設定および、イベントハンドラを記述します。イベントハンドラ内では、次のように処理を委譲します。

  • アプリケーションロジック→モデルのクラスへ委譲
  • 描画ロジック→ビューのクラスへ委譲

 今回は、「商品数量変更」「削除ボタン押下」の2つのイベントそれぞれのケースでビューを呼び出しています。

 prototype.jsのイベントハンドラの設定方法などについては、連載第2回「prototype.jsでYouTubeをインクリメンタルサーチ」でも解説をしていますので、こちらも参照してください。

CSSセレクタによるDOM要素検索

 下記ソースコードの、「$$()」は、prototype.js 1.6.0で新しく追加された、CSSセレクタによるDOM要素検索の記述です参考

$$('.item select').each(function(select) {
    Event.observe(select, 'change', this.onChangeQuantity.bind(this));
}.bind(this));

 それでは、以降から各サンプルのビューのソースコードを見ながら、script.aculo.usの使用方法について解説を行っていきます。

エフェクトのないサンプルのビュー

 まず、冒頭で紹介したエフェクトが何もないビューのソースコードを見てみましょう。

cart.EffectiveCartView = {
    // アイテムを削除する
    deleteItem: function(id) {
        $("item" + id).remove();
        this.updateSum();
    },
    // 合計金額を更新する
    updateSum: function() {
        var sum = cart.EffectiveCart.getSum();
        $("cost").innerHTML = sum;
    }
}

 「削除」ボタンを押された場合は、その行を丸ごと消し、その後、合計金額を更新する、という実装になっています。合計金額の更新は、innerHTMLに代入をするだけです。

 数量を変更した場合は、合計金額を更新するだけです。モデルクラスのgetSum()メソッドをビューから呼び出して、合計金額を取得しています。

コアエフェクトの使用例

サンプル【1】合計金額が変更されたら強調表示する

 次に、合計金額が変更されたら、その個所を強調表示してみます。

サンプル【1】(拡大表示はこちら

 これは、$("cost")に、合計金額をセットした後、下記のように呼び出すことで実現しています。

updateSum: function() {
    var sum = cart.EffectiveCart.getSum();
    $("cost").innerHTML = sum;
    new Effect.Highlight("cost",
        {startcolor:'#9999ff',
        endcolor:'#ffffff',
        duration: 3,
        fps: 10,
        delay: 0})

}

コアエフェクトの種類

 上記、「Effect.Highlight」などを、script.aculo.usでは、「コアエフェクト」と呼んでいます(参考「Core Effects in script.aculo.us wiki」)。コアエフェクトには次の種類があります。

表1 コアエフェクトの種類
コアエフェクト名 説明
Effect.Opacity 透明度の変化
Effect.Scale サイズの変化
Effect.Morph 任意のパラメータの変化
Effect.Move 表示位置の変化
Effect.Highlight 背景色の変化
Effect.Parallel 複数パラメータの同時変化(詳しくは後述

コアエフェクトの構文

 エフェクトは、次の構文で利用できます。

new Effect.EffectName(element, required-params, [options]);

  • element
    エフェクトを適用する対象の要素を指定
  • required-params
    多くの場合指定が不要だが、一部のエフェクトで必要になる場合がある。どのような値を指定するかは、エフェクトごとに異なる
  • options
    ハッシュを指定。次の値が指定可能
    • duration:エフェクトの長さを秒数で指定
    • fps:アニメーション時の、1秒当たりのフレーム数を指定。この値が多きければ大きいほど動きは滑らかになるが、その分負荷が掛かる
    • transition後述
    • from:エフェクト開始前のパラメータの値
    • to:エフェクト完了後のパラメータの値
    • sync:後述
    • queue後述
    • delay:エフェクトが開始されるまでの時間を秒数で指定
    • direction:transitionの向きを指定。「top-left」「top-right」「bottom-left」「bottom-right」「center」が指定可能。「Grow」と「Shrink」のエフェクトのみで使用される

エフェクトのコールバックの使用例

サンプル【2】削除行をフェードアウト後、合計金額を変更

 次に、「削除」ボタンを押されたら、その行をフェードアウトした後に、合計金額を変更するようにします。

サンプル【2】(拡大表示はこちら

 このような動作にするために、ビューの削除時の描画方法を次のように修正しました。

deleteItem: function(id) {
    new Effect.Opacity("item" + id,
        {from: 1.0,
        to: 0.0,
        afterFinish: function() {
            $("item" + id).remove();
            this.updateSum();
        }.bind(this)});

},

 コアエフェクトのEffect.Opacityを使用して、削除された行の透明度を落とすようにしています。実際の削除処理は、「afterFinish」の中で行っています。この「afterFinish」を「コールバック」といいます。

エフェクトのコールバック

 エフェクトの引数「option」には、コールバックを指定できます。エフェクトの進行状況に応じて各コールバックの呼ばれるタイミングが違います。

表2 コールバックの種類
コールバック名 説明
beforeStart エフェクトがスタートする前に呼ばれる
beforeUpdate エフェクトを実行中の描画ループ中の各更新前に呼ばれる
afterUpdate エフェクトを実行中の描画ループ中の各更新後に呼ばれる
afterFinish エフェクトが完了した後に呼ばれる

 「サンプル【2】」では、afterFinishコールバックの中で、DOM要素「$("item" + id)」の削除を行っています。これにより、エフェクトが完了してから要素が削除されるようになります。

 さらに次ページでは、コンビネーションエフェクト、Queue、Parallelの使用例を解説します。

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。