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	エフェクトが完了した後に呼ばれる

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

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