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

» 2008年01月07日 00時00分 公開
[志田裕樹アークウェブ株式会社]

script.aculo.usの一歩進んだテクニック

 今回紹介するscript.aculo.usは、以下のような機能を提供するAjaxJavaScript)フレームワークです。

  • ビジュアルエフェクト
  • ドラッグ&ドロップ
  • DOM操作
  • オートコンプリート
  • スライダー
  • 単体テスト

 prototype.jsをベースのライブラリに使用しているので、prototype.jsとともに利用したことがある方も多いのではないでしょうか。

図 script.aculo.usのページ 図 script.aculo.usのページ

 今回は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ずつ増やすことで、テキストフィールドの幅が少しずつ伸びるように見せるサンプル・プログラムです。

テキストフィールドの幅を少しずつ伸びるように見せるサンプル・プログラム(「伸びる」ボタンを押してください。「初期状態にもどる」をクリックすると、元に戻ります、※注意:Operaブラウザでは、一部表示が異なる部分があります)

<input type='button' value='伸びる'
  onclick='updateSize($("textfield"), 20)' />
<input type='text' size='1' id='textfield' />
<script type='text/javascript'>
<!--
    function updateSize(element, to) {
        if (element.size < to) {
            element.size = element.size + 1;
            setTimeout(function(){
                updateSize(element, to)
            }, 50);
        }
    }
-->
</script>

 script.aculo.usも内部的にこのような処理を走らせることでアニメーションを実現しています。

オンライン・サンプルを段階的に進化させて解剖!

エフェクトがないシンプルなAjaxショッピングカート

 まずは、こちらのサンプルを見てみてください。これから出てくるすべてのサンプルは、数値が入ったコンボボックスの値を変えると合計金額が変わり、「削除」ボタンを押すとアイテムが消え、合計金額が変わります。「初期状態に戻す」をクリックすると、元に戻ります

今回の一番シンプルなサンプル・プログラム(拡大表示はこちら

 これは画面遷移をせずにショッピングカートを更新できるようにしたもので、エフェクトは使われていません。

 今回はこのサンプルに少しずつ機能を加えていきながら、script.aculo.usの使い方を解説していきます。次の8段階のサンプルを使用して解説していきます。

  1. コアエフェクトの使用例
    サンプル【1】合計金額が変更されたら強調表示する
  2. エフェクトのコールバックの使用例
    サンプル【2】削除行をフェードアウト後合計金額を変更
  3. コンビネーションエフェクトの使用例
    サンプル【3】「削除」時のエフェクトをDropOutに
  4. エフェクトを順番に実行させる、Queueの使用例
    サンプル【4】商品画像をゴミ箱にEffect.MoveしてからEffect.DropOut
  5. 複数のエフェクトを同時実行する、Parallelの使用例
    サンプル【5】X方向、Y方向それぞれの移動をEffect.Morphで別々に指定
  6. パラメータの変化スピードを変える、Transitionの使用例
    サンプル【6】Y方向の進行スピードを変えてみる
  7. 自作したTransitionの適用例
    サンプル【7】商品画像をバウンドさせてみる
  8. 独自エフェクトの作成例
    サンプル【8】合計金額の変化を連続的に見せる

サンプル・プログラムの最終進化形

 先に、今回作成していくサンプルの最終形(8つ目のサンプル)を見てみましょう。

サンプル・プログラムの最終進化形(拡大表示はこちら※注意:Operaブラウザでは、一部表示が異なる部分があります。また、サンプルのライセンスはGPL 2となります

 script.aculo.usのコアエフェクトや、コンビネーションエフェクトはすでに利用したことがある方も多いと思いますが、QueueParallelTransitionなどを活用すると、かなり凝ったギミックを実現できることがお分かりいただけると思います。

 今回のサンプルはscript.aculo.usの利用の仕方の解説に重点を置いているため、エフェクトが必用以上に多用されていますが、実際のシステムでは軽快な操作の妨げにならないように注意が必要です。

サンプルのHTMLソースコードを解剖

 まずは、基本となるショッピングカートのHTMLソースを確認します。今回の8つのサンプルではいずれも、タイトルタグなどがサンプルごとに異なりますが、基本的な構造はすべて同じHTMLを利用します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;
    charset=utf-8" />
  <title>サンプル0)エフェクトのないサンプルのビュー</title>
  <script type="text/javascript" src="javascripts/prototype.js">
  </script>
  <script type="text/javascript"
    src="javascripts/scriptaculous.js?load=effects"></script>
  <script type="text/javascript"
    src="javascripts/controllers/cart/effective_cart_controller.js">
  </script>
  <script type="text/javascript"
    src="javascripts/models/cart/effective_cart.js"></script>
  <script type="text/javascript"
    src="javascripts/views/cart/effective_cart_view_0.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  <h1>サンプル0)エフェクトのないサンプルのビュー</h1>
  <a id='reset' href='sample0.html'>初期状態に戻す</a>
  <div id="items">
  <div class="item" id="item1">
    <div class="image"><img id="img1" src="img/p1.gif"></div>
    <div class="name" ><span id="name1">四葉のクローバ</span></div>
    <div class="price"><span id="price1">4725</span>円</div>
    <div class="qty" ><select id="select1">
      <option value="1">1</option>
      <option value="2">2</option>
    </select></div>
    <div class="del" ><button id="delete1">削除</button></div>
  </div>
  <div class="item" id="item2">

……商品2品目(省略)……

  </div>
</div>
<div id="total">合計金額:
  <span id="cost">8715</span>円
</div>
  <div id="trash"><img src="img/trash.png" alt="ゴミ箱"
    title="ゴミ箱"/>
  </div>
</body>
</html>

サンプルの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を付けることができ、各値の更新や値の取得がしやすいようにしています。

<div class="item" id="item1">
  <div class="image"><img id="img1" src="img/p1.gif"></div>
  <div class="name" ><span id="name1">四葉のクローバ</span></div>
  <div class="price"><span id="price1">4725</span>円</div>
  <div class="qty" ><select id="select1">
    <option value="1">1</option>
    <option value="2">2</option>
  </select></div>
  <div class="del" ><button id="delete1">削除</button></div>
</div>

……(略)……

<span id="cost">8715</span>円

 「サンプル【4】」以降のサンプルでは、カートの中の商品を「削除する」と、商品画像がゴミ箱に入るようになります。下記は、そのためのHTMLタグになります。

<div id="trash"><img src="img/trash.png" alt="ゴミ箱" title="ゴミ箱"/>
</div>

 次ページからは、実際に動くサンプルとそのソースコードを見ながら、script.aculo.usのエフェクトの実践テクニックについて解説します。

       1|2|3|4 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。