【2/17】今年は「濃厚」技術トーク！＠ITメールセミナー スラッシュドット    はてなブックマーク  Yahoo!ブックマークに登録  印刷
パターンとライブラリで作るAjaxおいしいレシピ
連載一覧へ
パターンとライブラリで作るAjaxおいしいレシピ（4）

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


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

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

- PR -

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

  • ビジュアルエフェクト
  • ドラッグ＆ドロップ
  • 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のコアエフェクトや、コンビネーションエフェクトはすでに利用したことがある方も多いと思いますが、Queue、Parallel、Transitionなどを活用すると、かなり凝ったギミックを実現できることがお分かりいただけると思います。

　今回のサンプルは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

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

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


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

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

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

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

RSSフィード

＠IT 新着記事

スキルアップ／キャリアアップ（JOB@IT）

＠IT Special -PR-
操作もマニュアルも分かりやすい！
ユーザー視点で開発されたPC管理ツール
New！
【CTC事例】約30の基幹システムを統合！
膨大なバッチジョブを制御した方法は？
「どこでもオフィス」で業務効率アップ！
PHP研究所モバイルシンクライアント事例
コスト削減・信頼性向上をまとめて満たす
“高信頼Linux”を構築する方法とは？
世界に通用するストレージの作り方とは？
製品に込めた思いを富士通の開発者に聞く
急速に広がるHyper-Vでのサーバ仮想化
そのベストプラクティスをデルが解説
＠IT「Windows 7」 特設サイトオープン！
最新情報・移行ノウハウを公開しています

→＠IT Special ヘ

お勧め求人情報

キャリアアップ　〜JOB＠IT
＠IT Special -PR-
◆ 　 企業の仮想化に足りない“発想”とは？
仮想化運用管理のキモは意外なところに！
New！
◆ 　 操作もマニュアルも分かりやすい！
ユーザー視点で開発されたPC管理ツール
New！
◆ 　 仮想化すればコストは削減できるか？
仮想化に必要な「3つの視点」を解説する

◆ 　 セキュリティを知り尽くす上野氏が登壇！
＠ITメールソリューションLive! in Tokyo
◆ 　 運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？
◆ 　 世界に通用するストレージの作り方とは？
製品に込めた思いを富士通の開発者に聞く

◆ 　 OSSで手間も時間も、障害も減った――
「マピオンの事例」オープンソース活用法
◆ 　 「ノートPCの持ち出し禁止」で大丈夫？
情報漏えいを防ぐ管理手法とインフラは？
◆ 　 1日の処理を1秒に――MySQLの達人が語る
「コスト削減」できるチューニング

◆ 　 ドキュメント作成を自動化して、SEの作業
効率を大幅アップ！ Visio 2007の魅力
◆ 　 急速に広がるHyper-Vでのサーバ仮想化
そのベストプラクティスをデルが解説
◆ 　 ＠IT主催セミナーで語られた、「担当者に
求められるセキュリティ対策」をレポート

◆ 　 ＠IT「Windows 7」 特設サイトオープン！
最新情報・移行ノウハウを公開しています

→＠IT Special ヘ