全サンプル共通のコントローラーのソースコード
次にコントローラーのソースコードを見てみます。前述のとおり、このソースコードは、全サンプル共通で利用されます。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
■ イベントハンドラで行われていること
コントローラーには、これまでの連載と同様にイベントハンドラの設定および、イベントハンドラを記述します。イベントハンドラ内では、次のように処理を委譲します。
- アプリケーションロジック→モデルのクラスへ委譲
- 描画ロジック→ビューのクラスへ委譲
今回は、「商品数量変更」「削除ボタン押下」の2つのイベントそれぞれのケースでビューを呼び出しています。
prototype.jsのイベントハンドラの設定方法などについては、連載第2回「prototype.jsでYouTubeをインクリメンタルサーチ」でも解説をしていますので、こちらも参照してください。
■ CSSセレクタによるDOM要素検索
下記ソースコードの、「$$()」は、prototype.js 1.6.0で新しく追加された、CSSセレクタによるDOM要素検索の記述です（参考）。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
それでは、以降から各サンプルのビューのソースコードを見ながら、script.aculo.usの使用方法について解説を行っていきます。
エフェクトのないサンプルのビュー
まず、冒頭で紹介したエフェクトが何もないビューのソースコードを見てみましょう。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
「削除」ボタンを押された場合は、その行を丸ごと消し、その後、合計金額を更新する、という実装になっています。合計金額の更新は、innerHTMLに代入をするだけです。
数量を変更した場合は、合計金額を更新するだけです。モデルクラスのgetSum()メソッドをビューから呼び出して、合計金額を取得しています。
コアエフェクトの使用例
■ サンプル【1】合計金額が変更されたら強調表示する
次に、合計金額が変更されたら、その個所を強調表示してみます。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
サンプル【1】（拡大表示はこちら）
これは、$("cost")に、合計金額をセットした後、下記のように呼び出すことで実現しています。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
■ コアエフェクトの種類
上記、「Effect.Highlight」などを、script.aculo.usでは、「コアエフェクト」と呼んでいます（参考「Core Effects in script.aculo.us wiki」）。コアエフェクトには次の種類があります。
| コアエフェクト名 | 説明 | |
|---|---|---|
| Effect.Opacity | 透明度の変化 | |
| Effect.Scale | サイズの変化 | |
| Effect.Morph | 任意のパラメータの変化 | |
| Effect.Move | 表示位置の変化 | |
| Effect.Highlight | 背景色の変化 | |
| Effect.Parallel | 複数パラメータの同時変化（詳しくは後述） |
■ コアエフェクトの構文
エフェクトは、次の構文で利用できます。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
- 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】削除行をフェードアウト後、合計金額を変更
次に、「削除」ボタンを押されたら、その行をフェードアウトした後に、合計金額を変更するようにします。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
サンプル【2】（拡大表示はこちら）
このような動作にするために、ビューの削除時の描画方法を次のように修正しました。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
コアエフェクトのEffect.Opacityを使用して、削除された行の透明度を落とすようにしています。実際の削除処理は、「afterFinish」の中で行っています。この「afterFinish」を「コールバック」といいます。
■ エフェクトのコールバック
エフェクトの引数「option」には、コールバックを指定できます。エフェクトの進行状況に応じて各コールバックの呼ばれるタイミングが違います。
| コールバック名 | 説明 | |
|---|---|---|
| beforeStart | エフェクトがスタートする前に呼ばれる | |
| beforeUpdate | エフェクトを実行中の描画ループ中の各更新前に呼ばれる | |
| afterUpdate | エフェクトを実行中の描画ループ中の各更新後に呼ばれる | |
| afterFinish | エフェクトが完了した後に呼ばれる |
「サンプル【2】」では、afterFinishコールバックの中で、DOM要素「$("item" + id)」の削除を行っています。これにより、エフェクトが完了してから要素が削除されるようになります。
さらに次ページでは、コンビネーションエフェクト、Queue、Parallelの使用例を解説します。
Copyright © ITmedia, Inc. All Rights Reserved.