Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト：パターンとライブラリで作るAjaxおいしいレシピ（4）（4/4 ページ）

[志田裕樹，アークウェブ株式会社]

パラメータの変化スピードを変える、Transitionの使用例

■ サンプル【6】Y方向の進行スピードを変えてみる

　次のサンプルは、X方向は一定のスピードで移動していますが、Y方向は、だんだん早くなり、目的地に近づくにつれてだんだん遅くなるように、進行スピードを変化させたものです。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

サンプル【6】（拡大表示はこちら、※注意：Operaブラウザでは、一部表示が異なる部分があります）

　ソースコードは次のようになります。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　このように、「option」の「transition」を設定をすることで、パラメータの変化スピードを変えることが可能になります。

■ Transitionでパラメータの変化スピードに変化を

　「options」の「transition」を設定することで、パラメータの変化スピードに変化を与えることが可能です。Transitionには、次の種類があります。

• Effect.Transitions.sinoidal（デフォルト）
• Effect.Transitions.linear
• Effect.Transitions.reverse
• Effect.Transitions.wobble
• Effect.Transitions.flicker

　Transitionを変更するとどのような効果になるか、いろいろ試してみると面白いと思います。Effect.Transitions.flickerなどは、Effect.ScaleやEffect.Highlightなどに使用するのも効果的です。

自作したTransitionの適用例

■ サンプル【7】商品画像をバウンドさせてみる

　次のサンプルは、Y方向のTransitionを、新しく用意することで、縦方向でバウンドができるようにしたものです。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

サンプル【7】（拡大表示はこちら、※注意：Operaブラウザでは、一部表示が異なる部分があります）

　ソースコードは次のようになります。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

■ Transitionは新しく追加が可能

　script.aculo.usにデフォルトで用意されているTransitionは種類が多くありませんが、「サンプル【7】」のように簡単に追加ができます。

　Transitionに渡る引数「pos」は、エフェクト開始から終了までの合計時間（totaltime）に対する経過時間（time）の割合、つまりtime/totaltimeです。戻り値は、初期値から目的値までの差分に対する現在値の割合を0〜1の範囲で返します。

　今回は、secondlifeさん（舘野さん）が作成されたJSTweenerのeaseOutBounceの数式を変換して導入しました。JSTweenerは、JavaScriptによるモーショントゥイーン用ライブラリです。

独自エフェクトの作成例

■ サンプル【8】合計金額の変化を連続的に見せる

　最後のサンプルは、合計金額の変化を連続的にしたものです。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

サンプル【8】（拡大表示はこちら、※注意：Operaブラウザでは、一部表示が異なる部分があります）

　ソースコードは次のようになります。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

■ フレームワークを理解すれば独自エフェクトの作成も可能

　このサンプルでは、Effect.Baseを継承して、「Effect.CartTotalUpdater」という新しいエフェクトを作成しています。今回は、initialize()とupdate()という2つのメソッドをオーバーライドしました。

　Effect.Baseのstart();を実行すると、エフェクトが開始されます。Effect.Baseのupdate()は、エフェクト実行時に呼び出されます。update()に渡される「position」は、現時点でのパラメータの値になっています。

　Effect.Baseの正式なドキュメントは見当たりませんでしたが、script.aculo.usのフレームワークを理解すれば、どうしても既存のエフェクトが要望にマッチしない場合などに、自分でエフェクトを新しく作成をしてしまうことも可能です。

新しいユーザーエクスペリエンスを

　以上、8つのサンプルを通して、script.aculo.usの使用方法を解説しました。

　Ajaxを活用したシステムでは、画面遷移がないため、画面要素が書き換わっても、ユーザーがそれに気付かない場合があります。エフェクトはユーザーに情報の更新を気付かせる方法の1つです。

　さらにエフェクトをうまく活用し、楽しいギミックを実装できれば、ほかのサイトにはない新しいユーザーエクスペリエンスを利用者に提供することもできるのではないでしょうか。ぜひ、script.aculo.usを使いこなして、楽しいAjaxライフに役立てていただければと思います。

　今回使ったソースコードはこちらからダウンロードできます（サンプルのライセンスはGPL 2となります）。

著者紹介

プロフィール：志田 裕樹（しだ ゆうき）

株式会社アークウェブ取締役。Webシステムのシステムエンジニアとして開発に従事している。
Ajax、Ruby on Rails等を使用したWeb 2.0的システムの開発実績を持つ。
オープンソースのECサイト用CMS、Zen Cartの日本語コミュニティでコミッターとして活動している。

「次回」へ

「パターンとライブラリで作るAjaxおいしいレシピ 」バックナンバー

• Aptana Jaxerで解決するAjaxのSEO対策とは？
• jQuery UIで実現！ Ajaxで複数選択ドラッグ＆ドロップ
• Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト
• Ext JSとprototype.jsで作るリッチなUI
• prototype.jsでYouTubeをインクリメンタルサーチ
• jQueryを使ってTwitterをおいしくマッシュアップ