パターンとライブラリで作るAjaxおいしいレシピ
連載一覧へ
パターンとライブラリで作るAjaxおいしいレシピ（4）

Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト


アークウェブ株式会社
志田 裕樹
2008/1/7

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


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

　次のサンプルは、X方向は一定のスピードで移動していますが、Y方向は、だんだん早くなり、目的地に近づくにつれてだんだん遅くなるように、進行スピードを変化させたものです。
サンプル【6】（拡大表示はこちら、※注意：Operaブラウザでは、一部表示が異なる部分があります）

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

deleteItem: function(id) {
    var img = $("img" + id);
    img.absolutize();
    var trashPosition = Position.page($('trash'));
    new Effect.Parallel(
        [new Effect.Morph(img,
            {style: {
                left: trashPosition[0] + 'px'},
            transition: Effect.Transitions.linear,
            sync: true}),
        new Effect.Morph(img,
            {style: {
                top: trashPosition[1] + 'px'},
            transition: Effect.Transitions.sinoidal,
            sync: true})
        ],
        {duration: 2,
        queue: 'end'});
    new Effect.DropOut("item" + id,

……（略）……

}
- PR -

　このように、「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を、新しく用意することで、縦方向でバウンドができるようにしたものです。
サンプル【7】（拡大表示はこちら、※注意：Operaブラウザでは、一部表示が異なる部分があります）

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

Effect.Transitions.easeOutBounce = function(pos) {
    if(pos < (1/2.75)) {
        return (7.5625*pos*pos);
    } else if(pos < (2/2.75)) {
        return (7.5625*(pos-=(1.5/2.75))*pos + .75);
    } else if (pos < (2.5/2.75)) {
        return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
    } else {
        return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
    }
}

……（略）……

new Effect.Morph(img,
    {style: {
        top: trashPosition[1] + 'px'},
    transition: Effect.Transitions.easeOutBounce,
    sync: true})

■ Transitionは新しく追加が可能

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

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

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

独自エフェクトの作成例


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

　最後のサンプルは、合計金額の変化を連続的にしたものです。
サンプル【8】（拡大表示はこちら、※注意：Operaブラウザでは、一部表示が異なる部分があります）

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

Effect.CartTotalUpdater = Class.create(Effect.Base, {
    initialize: function(element) {
        this.element = $(element);
        var options = Object.extend({
            from: this.element.innerHTML || 0,
            to: 100
        }, arguments[1] || { });
        this.start(options);
    },
    update: function(position) {
        this.element.innerHTML = Math.round(position);
    }
});

……（略）……

updateSum: function() {
    var sum = cart.EffectiveCart.getSum();
    new Effect.CartTotalUpdater("cost",
        {from: $("cost").innerHTML,
        to: sum});
}

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

　このサンプルでは、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となります）。

■ ＠IT関連記事


古くて新しいAjaxの真実を見極める
「Webインターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう
「Web Client & Report」フ ォーラム 2005/8/2

Ajax解体新書

よりAjaxを深く理解するために、ブラウザ上の「見た目」だけに注目するのではなく、実際に目に見えない舞台裏の通信内容をモニタリングしてみよう

最終更新 2006/11/22

Ajax うきうき Watch

Ajaxという流行技術の定義を明確にしながら、Ajaxの動向からうきうきするような面白いもの、確実に押さえておきたいものを厳選してお届けしていく

最終更新 2008/5/26

JavaScriptプログラミング再入門

　Ajax全盛のいま、オブジェクト指向ベースのJavaScript知識は不可欠。過去を振り返りつつ、まずは最新開発事情をチェック

最終更新 2007/9/25

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

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

 

1-2-3-4

　INDEX
パターンとライブラリで作るAjaxおいしいレシピ（4）
Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト
  Page1
今回はscript.aculo.usの一歩進んだテクニック
オンライン・サンプルを段階的に進化させて解剖！
サンプルのHTMLソースコードを解剖
  Page2
全サンプル共通のコントローラーのソースコード
エフェクトのないサンプルのビュー
コアエフェクトの使用例
エフェクトのコールバックの使用例
  Page3
コンビネーションエフェクトの使用例
エフェクトを順番に実行させる、Queueの使用例
複数のエフェクトを同時実行する、Parallelの使用例
Page4
パラメータの変化スピードを変える、Transitionの使用例
自作したTransitionの適用例
独自エフェクトの作成例
新しいユーザーエクスペリエンスを

パターンとライブラリで作るAjaxおいしいレシピ バックナンバー 連載インデックスへ»


リッチクライアント＆帳票 全記事一覧へ

TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH