script.aculo.usの一歩進んだテクニック
今回紹介するscript.aculo.usは、以下のような機能を提供するAjax（JavaScript）フレームワークです。
- ビジュアルエフェクト
- ドラッグ＆ドロップ
- DOM操作
- オートコンプリート
- スライダー
- 単体テスト
prototype.jsをベースのライブラリに使用しているので、prototype.jsとともに利用したことがある方も多いのではないでしょうか。
今回はscripot.aculo.usのエフェクト機能に焦点を絞り、より突っ込んだ使い方を紹介していきます。
■ Ajaxの弱点を補う「エフェクト」の必要性
Ajaxを活用することで、画面全体を再描画せずに画面上の一部分のみを変更したり、要素の追加・削除が可能になります。これによって、軽快なユーザーインターフェイスが実現できるわけですが、画面が再描画されないため、アプリケーション上で何が起こったのか、ユーザーにうまく理解してもらえない場合があります。
このため、例えば、変更個所の背景色を一時的に変更したりして、画面上で変化した部分にユーザーの注意を引き、その変化に気付いてもらうことが重要となります。
script.aculo.usはこういったエフェクト機能を提供するライブラリとしてよく知られています。今回は、そのような基本的なエフェクトの解説をしていくとともに、script.aculo.usの一歩進んだ機能をうまく利用することで、楽しい演出を加えて、ユーザーエクスペリエンスの向上につなげる可能性についても解説したいと思います。
ただし、エフェクトを多用すると、マシンへの負荷が増えたり、軽快な操作の妨げになったりすることがあるため、利用に当たっては十分に注意をしなくてはなりません。
■ scripot.aculo.usのエフェクト機能の原理
scripot.aculo.usのエフェクト機能は、要素の大きさ（widthやheight）、位置（topやleft）、色（backgroundcolorなど）、透明度（opacity）などのプロパティ値を短い時間間隔で少しずつ変化させることで実現されています。
下記は、テキストフィールドの幅（size）をsetTimeout()を使って、50ミリ秒置きに1ずつ増やすことで、テキストフィールドの幅が少しずつ伸びるように見せるサンプル・プログラムです。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
テキストフィールドの幅を少しずつ伸びるように見せるサンプル・プログラム（「伸びる」ボタンを押してください。「初期状態にもどる」をクリックすると、元に戻ります、※注意：Operaブラウザでは、一部表示が異なる部分があります）
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
script.aculo.usも内部的にこのような処理を走らせることでアニメーションを実現しています。
オンライン・サンプルを段階的に進化させて解剖！
■ エフェクトがないシンプルなAjaxショッピングカート
まずは、こちらのサンプルを見てみてください。これから出てくるすべてのサンプルは、数値が入ったコンボボックスの値を変えると合計金額が変わり、「削除」ボタンを押すとアイテムが消え、合計金額が変わります。「初期状態に戻す」をクリックすると、元に戻ります
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
今回の一番シンプルなサンプル・プログラム（拡大表示はこちら）
これは画面遷移をせずにショッピングカートを更新できるようにしたもので、エフェクトは使われていません。
今回はこのサンプルに少しずつ機能を加えていきながら、script.aculo.usの使い方を解説していきます。次の8段階のサンプルを使用して解説していきます。
- コアエフェクトの使用例
サンプル【1】合計金額が変更されたら強調表示する - エフェクトのコールバックの使用例
サンプル【2】削除行をフェードアウト後合計金額を変更 - コンビネーションエフェクトの使用例
サンプル【3】「削除」時のエフェクトをDropOutに - エフェクトを順番に実行させる、Queueの使用例
サンプル【4】商品画像をゴミ箱にEffect.MoveしてからEffect.DropOut - 複数のエフェクトを同時実行する、Parallelの使用例
サンプル【5】X方向、Y方向それぞれの移動をEffect.Morphで別々に指定 - パラメータの変化スピードを変える、Transitionの使用例
サンプル【6】Y方向の進行スピードを変えてみる - 自作したTransitionの適用例
サンプル【7】商品画像をバウンドさせてみる - 独自エフェクトの作成例
サンプル【8】合計金額の変化を連続的に見せる
■ サンプル・プログラムの最終進化形
先に、今回作成していくサンプルの最終形（8つ目のサンプル）を見てみましょう。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
サンプル・プログラムの最終進化形（拡大表示はこちら、※注意：Operaブラウザでは、一部表示が異なる部分があります。また、サンプルのライセンスはGPL 2となります）
script.aculo.usのコアエフェクトや、コンビネーションエフェクトはすでに利用したことがある方も多いと思いますが、Queue、Parallel、Transitionなどを活用すると、かなり凝ったギミックを実現できることがお分かりいただけると思います。
今回のサンプルはscript.aculo.usの利用の仕方の解説に重点を置いているため、エフェクトが必用以上に多用されていますが、実際のシステムでは軽快な操作の妨げにならないように注意が必要です。
サンプルのHTMLソースコードを解剖
まずは、基本となるショッピングカートのHTMLソースを確認します。今回の8つのサンプルではいずれも、タイトルタグなどがサンプルごとに異なりますが、基本的な構造はすべて同じHTMLを利用します。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
■ サンプルのHTMLファイル（<head>タグ部分）
今回のサンプルは、<script>タグで次のJavaScriptファイルを読み込んでいます。
- javascripts/prototype.js
prototype.js 1.6.0 - javascripts/scriptaculous.js?load=effects
script.aculo.us 1.8.0のエフェクト用ライブラリ - javascripts/models/cart/effective_cart.js
モデル - javascripts/views/cart/effective_cart_view_X.js（X＝1、2、3、……、8）
ビュー（※注意：サンプルごとに、ビューのファイルが違う- サンプル1：javascripts/views/cart/effective_cart_view_1.js
- サンプル2：javascripts/views/cart/effective_cart_view_2.js
- ……（略）……
- サンプル8：javascripts/views/cart/effective_cart_view_8.js
）
- javascripts/controllers/cart/effective_cart_controller.js
コントローラー
script.aculo.usのバージョンは1.8.0です。これまでの連載記事と同様にMVC（モデル・ビュー・コントローラー）による役割でソースコードを分けています。
MVCに分割することで、各サンプルのコントローラーやモデルのソースコードは同じものを使用し、各サンプルのビューを差し替えるだけで済むようにしました。
■ サンプルのHTMLファイル（<body>タグ部分）
今回のシステムでは、「商品数量変更」「削除ボタン押下」などのアクションを行うことができます。これらのアクションを行うと、合計金額の再計算が行われます。
このため、下記のソースコードのように、フォーム要素や金額など各項目には一意のIDを付けることができ、各値の更新や値の取得がしやすいようにしています。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
「サンプル【4】」以降のサンプルでは、カートの中の商品を「削除する」と、商品画像がゴミ箱に入るようになります。下記は、そのためのHTMLタグになります。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
次ページからは、実際に動くサンプルとそのソースコードを見ながら、script.aculo.usのエフェクトの実践テクニックについて解説します。
Copyright © ITmedia, Inc. All Rights Reserved.