次のページへ全サンプル共通のコントローラーのソースコード次にコントローラーのソースコードを見てみます。前述のとおり、このソースコードは、全サンプル共通で利用されます。イベントハンドラで行われていることコントローラーには、これまでの連載と同様にイベントハンドラの設定および、イベントハンドラを記述します。イベントハンドラ内では、次のように処理を委譲します。ボタン押下」の2つのイベントそれぞれのケースでビューを呼び出しています。prototype.jsのイベントハンドラの設定方法などについては、連載第2回「prototype.jsでYouTubeをインクリメンタルサーチ」でも解説をしていますので、こちらも参照してください。1.6.0で新しく追加された、CSSセレクタによるDOM要素検索の記述です(参考)。this.onChangeQuantity.bind(this));}.bind(this));それでは、以降から各サンプルのビューのソースコードを見ながら、script.aculo.usの使用方法について解説を行っていきます。エフェクトのないサンプルのビューまず、冒頭で紹介したエフェクトが何もないビューのソースコードを見てみましょう。sum;}}「削除」ボタンを押された場合は、その行を丸ごと消し、その後、合計金額を更新する、という実装になっています。合計金額の更新は、innerHTMLに代入をするだけです。数量を変更した場合は、合計金額を更新するだけです。モデルクラスのgetSum()メソッドをビューから呼び出して、合計金額を取得しています。サンプル【1】合計金額が変更されたら強調表示する次に、合計金額が変更されたら、その個所を強調表示してみます。サンプル【1】(拡大表示はこちら)これは、$("cost")に、合計金額をセットした後、下記のように呼び出すことで実現しています。コアエフェクトには次の種類があります。コアエフェクトの構文エフェクトは、次の構文で利用できます。[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」が指定可能。次に、「削除」ボタンを押されたら、その行をフェードアウトした後に、合計金額を変更するようにします。サンプル【2】(拡大表示はこちら)このような動作にするために、ビューの削除時の描画方法を次のように修正しました。id).remove();this.updateSum();}.bind(this)});},コアエフェクトのEffect.Opacityを使用して、削除された行の透明度を落とすようにしています。実際の削除処理は、「afterFinish」の中で行っています。この「afterFinish」を「コールバック」といいます。エフェクトのコールバックエフェクトの引数「option」には、コールバックを指定できます。エフェクトの進行状況に応じて各コールバックの呼ばれるタイミングが違います。id)」の削除を行っています。これにより、エフェクトが完了してから要素が削除されるようになります。次ページでは、コンビネーションエフェクト、Queue、Parallelの使用例を解説します。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。