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

» 2008年01月07日 00時00分公開

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

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

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

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

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

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

SpecialPR

スポンサーからのお知らせPR

SpecialPR

＠IT eBook

システム開発ノウハウ【発注ナビ】PR

編集部からのお知らせ

【無料セミナーITmedia Security Week 2024秋おすすめ講演】11/26(火)13:00～「こうしす！＠IT支線」の追い解説でおなじみ、井二かける氏の基調講演『ゼロトラストで万事解決？「信頼性ゼロ」にならないために』、12/2(月)10:00～大阪大学 D3センター教授, CISO 猪俣敦夫氏の基調講演『組織で考えるべきセキュリティ人材の育て方ーAIに振り回されない運用支援に必要なことー』

あなたにおすすめの記事PR

@ITについて

RSSについて

＠ITのRSS一覧

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

アイティメディアIDとは

メールマガジン登録

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

申し込みページへ

ITmediaはアイティメディア株式会社の登録商標です。

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

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

■ Ajaxの弱点を補う「エフェクト」の必要性

■ scripot.aculo.usのエフェクト機能の原理

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

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

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

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

■ サンプルのHTMLファイル（<head>タグ部分）

■ サンプルのHTMLファイル（<body>タグ部分）

＠IT eBook

Pythonで日付を扱う際の「はて？」を解決する無料の電子書籍『解決！Python　日付データ編』

「このままゼロトラストへ進んでいいの？」と迷う企業やこれから入門する企業も必見、ゼロトラストの本質、始め方／進め方が分かる無料の電子書籍

超IT用語解説漫画「食べ超」を読んで、テクノロジーの進化に思いをはせよう

先進企業はOSSにどう取り組んでいる？　OSPOとSBOMのリアルが学べる無料の電子書籍

編集部からのお知らせ

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

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

■ Ajaxの弱点を補う「エフェクト」の必要性

■ scripot.aculo.usのエフェクト機能の原理

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

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

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

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

■ サンプルのHTMLファイル（<head>タグ部分）

■ サンプルのHTMLファイル（<body>タグ部分）

＠IT eBook

Pythonで日付を扱う際の「はて？」を解決する無料の電子書籍『解決！Python 日付データ編』

「このままゼロトラストへ進んでいいの？」と迷う企業やこれから入門する企業も必見、ゼロトラストの本質、始め方／進め方が分かる無料の電子書籍

超IT用語解説漫画「食べ超」を読んで、テクノロジーの進化に思いをはせよう

先進企業はOSSにどう取り組んでいる？ OSPOとSBOMのリアルが学べる無料の電子書籍

編集部からのお知らせ

Pythonで日付を扱う際の「はて？」を解決する無料の電子書籍『解決！Python　日付データ編』

先進企業はOSSにどう取り組んでいる？　OSPOとSBOMのリアルが学べる無料の電子書籍