Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト：パターンとライブラリで作るAjaxおいしいレシピ（4）（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	エフェクトが完了した後に呼ばれる