jQuery を扱う: 第 3 回 jQuery と Ajax による RIA: 一歩進んだ Web アプリケーションを今すぐ作成する

エフェクトと Ajax

jQuery は、動的な RIA (Rich Internet Application) を容易に作成する方法を求める開発者にとって最適な JavaScript ライブラリーとして人気が高まりつつあります。デスクトップ・アプリケーションに取って代わりブラウザー・ベースのアプリケーションが増え続ける中、こうしたライブラリーを使用する機会も増える一方です。jQuery に注目するこのシリーズの記事では、jQuery について知ると同時に、Web アプリケーション・プロジェクトの中で jQuery を実装する方法について学びます。

Michael Abernethy, Product Development Manager, Optimal Auctions

Mike AbernethyMichael Abernethy はこの 10 年間の技術生活の中で、多種多様な技術を扱い、また多種多様な顧客と共に作業を行ってきました。彼は現在、オークション・ソフトウェアの会社である Optimal Auctions の製品開発マネージャーとして働いています。彼は最近、RIA と、RIA をもっと複雑にすると同時にもっと簡単にすることに力を注いでいます。コンピューターに向かっている時間以外には、彼はメキシコの海岸で良い本を読みながら時間を過ごしています。



2008年 10月 28日

はじめに

jQuery は、この数ヵ月の間に急速に人気を集め、Web 開発者の間で最もよく使われる JavaScript ライブラリーとなっています。また時を同じくして、RIA へのニーズやその使用頻度は急速な高まりを見せており、いまやブラウザー・ベースのアプリケーションはデスクトップ・アプリケーションに取って代わろうとしています。スプレッドシートから給与処理アプリケーション、そして E メールに至るまで、すべてのアプリケーションが、デスクトップ・アプリケーションでのユーザー・エクスペリエンスをブラウザーの中に再現しようとしています。こうしたアプリケーションの数が増え、また複雑になるにつれ、そのようなアプリケーションを作成するための確固たる基盤として、JavaScript ライブラリーはより一層重要になります。開発者にとって、jQuery はそうした基盤として最適の選択肢であると見られています。このシリーズの記事では、jQuery について掘り下げていき、迅速かつ容易に RIA を作成するための確固たる基礎を開発者の皆さんに提供します。

前回の記事では、RIA を構築するための 3 つの基本コンポーネントについて、また任意のページに対話性を持たせる方法について学びました。最初に学んだイベント・モジュールでは、ページ上で行われるユーザーの対話動作のキャプチャーや、その対話動作への応答をプログラムで行うことができ、ボタン操作やマウス操作などに対してコードを付加することができます。次に検証を行った属性モジュールでは、ページ上の要素の値の取得方法と設定方法、またページ上の要素は変数を持つデータ・オブジェクトとして考えられることを説明しました。これらの変数には、ユーザーに対してどのタイプのレスポンスを返すかを決定するために使われる情報の大部分が含まれています。そして最後に取り上げた CSS 操作では、ページ上の任意の要素のレイアウトや色、フォントなどを、ページをリロードせずに変更する方法を紹介しました。そしてこの 3 つのモジュールを使って、ユーザーによる対話動作のキャプチャー (イベント)、情報の収集 (属性)、そしてイベントと情報との組み合わせに基づくフィードバックの提供 (CSS) という、対話型 Web ページの基本的な三要素について学習しました。

この記事では、この対話型 Web ページの基本的な三要素をさらに一歩進め、今日見られる高度な Web アプリケーションの一部を成している「クールな」効果や機能を実現します。この記事で説明するモジュールは RIA を提供するうえで必須のものではありませんが、ユーザーの印象に残るような機能を提供してくれるもので、RIA の幅を大きく広げるとともに、RIA の機能を大幅に拡張してくれるものでもあります。最初に取り上げるのは、エフェクト・モジュールです。エフェクト・モジュールには、要素を非表示にする機能や、要素を動かす機能、要素のフェードイン、フェードアウトを行う機能などがあります。言い換えれば Web ページをクールに見せるための「装飾」です。次に説明するモジュールは Ajax (Asynchronous JavaScript + XML) モジュールです。多くの人が RIA と同一視しているのが Ajax です。Ajax を使うと、Web アプリケーションはページをロードしなおすことなくサーバーと通信し、サーバーとの間で情報の受け渡しを行うことができるようになります (Web 上での一部の意見には反しますが、Ajax は JavaScript による単なるクールなアニメーションではありません)。そして jQuery には非常に使いやすい Ajax ツールが用意されていること、また実際 jQuery のおかげで Ajax を使うのが通常の JavaScript メソッド呼び出しと同じくらい簡単になることがわかるはずです。

この記事のサンプル・アプリケーションでは、それまでの内容のまとめとして、エフェクト・モジュールと Ajax モジュールをデモ用の Web アプリケーション (Web メール・アプリケーション) の中でどのように活用できるかについて紹介します。このデモにいくつかのエフェクト・モジュールを追加してクールな視覚効果を実現し、さらに重要な点として、少しばかり Ajax コードを追加し、メール・アプリケーションがページをリロードせずにメッセージを表示できるようにします。

エフェクト

エフェクト・モジュールはその名前から、「真面目な」 Web ページには使われないようなアニメーションやエフェクトのみを含んでいると思われてしまうかもしれません。しかし必ずしもそうではありません。ほとんどのアプリケーションでは、あるページ要素を非表示にしたり、あるページ要素の表示/非表示を別のページ要素の状態に応じて切り換えたりする必要が生じることがあるはずです。こうした種類の変化は RIA にとって欠かせないものです。なぜなら、そうした変化を実現する上で必要なことは、ページを 1 度だけロードしてそのページの全要素を取得しておくことだけで、あとは特定の要素の表示/非表示を切り換えることで必要な情報のみを表示することができるからです。そうせずにページをロードしなおす方法は適切なソリューションではありません。例えば、2 つの選択肢を持つコンボ・ボックスを考えてみてください。このボックスでは、一方の選択肢で div を非表示にし、もう一方の選択肢で div を表示します。当然ですが、クライアント・サイドのコードで単純に div の表示/非表示を切り替える方が、コンボ・ボックスが変更されるたびにページをロードしなおして div の表示/非表示を切り替えるよりも簡単で効率的です。単純に表示したり非表示にしたりするのか、あるいはフェードインやフェードアウトをさせるのかは皆さん次第です。

上で説明したような最も基本的なエフェクトは、show() 関数と hide() 関数を使って行います。これらの関数は非常に単純であり、ページ上の特定の要素を表示したり非表示にすることは言うまでもありません。

リスト 1. hide 関数と show 関数
// shows every <p> on the page
$("p").show();

// hides every <p> on the page
$("p").hide();

// hides every other <p> on the page
$("p:odd").hide();

show() 関数と hide() 関数のどちらにも、こうした基本的な操作だけでなく、表示/非表示の動作をもう少し細かく制御できる機能が用意されています。これらの関数のドキュメントには「graceful (優雅)」な表示/非表示と説明されていますが、これを show() の場合について言うと、フェードインとスライドアウトの組み合わせということです。

いくつかの例を見る前に、一歩前に戻り、エフェクト関数に渡すことができる引数について説明しましょう。各関数には (汎用的な show() 関数と hide() 関数を除いて)、エフェクトの速さと、そのエフェクトが終了したときに呼び出す関数を渡すことができます。エフェクトの速さによって、そのエフェクトを実行したい速さを制御します。この引数は “slow””fast””normal” のいずれかのストリングです。またアニメーションに要する時間を正確に制御する必要がある場合には、ミリ秒単位の時間を引数として渡すこともできます。エフェクト関数の 2 番目の引数は関数そのものであり、この関数はそのエフェクトが終了すると呼び出されます。いくつかのエフェクトを連結して大きな 1 つのエフェクトにする際に、この 2 番目の引数は重要になります。この引数を指定することで、1 つのエフェクトが終了した時点で次のエフェクトが開始できるよう確実に制御することができるからです。

リスト 2. 複雑なエフェクト
// the img with an ID of "picture" should start hidden
// when the "showPicture" button is pressed, show the img with an ID of "picture"
// and animate it, so it appears quickly in a fade In and slide out, and when
// it's done being shown, show the caption of the picture, which is
// always in the span right after the <img> tag

<input type="button" id="showPicture">

<img src="/pic.jpg" id="picture"><span>This is the picture's caption</span>

// jQuery code inside the document.ready() function

$("#picture").hide().next().hide();
$("#showPicture").click(function(){
   $("#picture").show("fast", function(){
       $("#picture").next().show();
   });
});

// notice how it took more text to describe what you want to happen than it took
// to actually code it!

エフェクト・モジュールには他にも、show()hide() とよく似た関数や、最終的に行っていることは同じという関数があります。ただし、それらの関数はそれぞれ極めて特殊な方法で表示と非表示を行います。例えば slideDown() 関数と slideUp() 関数はどちらも、ページ要素を表示したり非表示にしたりする関数です。ただしその際に、これらの関数はアニメーションを用いて、要素を下にスライドさせたり上にスライドさせたりします (命名規則に苦労の跡が見られることに注目してください)。先ほど説明した、show() 関数と hide() 関数の強化版の場合と同じように、スライドする速さと、スライドする動作が終了したときに呼び出される関数を制御することができます。さらに、ページ要素を表示または非表示にするためには、もう 1 つ選択肢があり、それが fadeIn() 関数と fadeOut() 関数です。名前からもわかるように、例えば fadeOut() 関数であれば、ページ要素が透明になって消えるまで、それをフェードアウトさせます。これらの選択肢を使う場合にも、速さと、フェードが終了した際に呼び出される関数を、カスタム設定することができます。

また、ページ要素を完全には表示または非表示にしない興味深い関数があり、それが fadeTo() 関数です。この関数を使うと、ページ要素を半透明にすることができます。これは RIA では非常に重要な関数と言えます。なぜなら、透過性は、ページ上のある要素を強調するのに非常に有効であり、またページ上の無効にされた領域の表示にも使えるからです。例えば、ページ上にいくつかのタブがある場合、選択されたタブ以外のすべてのタブを半透明で表示することによって、それらのタブが選択されていないことを強調することができます。あるいは、ページのフォーム上でフォーカスが置かれていない要素をすべて半透明にすることによって、現在フォーカスが置かれているのはどの Form 要素なのかをユーザーに強調することができます。それに、透明にすると、とにかくクールです。何かを設計する際には、おなじみの言葉、「If Apple does it, it MUST be cool (Apple 社がすることならクールに違いない)」に従うのが賢明でしょう。

リスト 3. fadeTo() を使ってクールにする
// make all the Form elements on the page show transparency at 60%, except
// the one that currently has focus, which will not have any transparancy.  
// This is Apple cool!

$(":input").fadeTo("fast", .60);
$(":input").focus(function(){
    $(this).fadeTo("fast", 1);
});
$(":input").blur(function(){
    $(this).fadeTo("fast, .60);
    });

エフェクト・モジュールの中から紹介する最後の関数は、最もクールであると同時に最もエラーの原因となりやすい、カスタムのアニメーション手法です。この手法を使うとアニメーションのすべてのパラメーターを指定することができ、後は jQuery がそのとおりに処理してくれます。最終値が入ったパラメーターの配列を提供すると、jQuery はそれらのパラメーターの現在の値を判断し、そこから指定された最終値に達するまで、パラメーターとして渡された指定の速さで動くアニメーションでページ要素をスムーズに表示します。リスト 4 はカスタムのアニメーション手法の例を示しています。当然ですが、この関数には無限の可能性があります。そのため、独自にカスタマイズしたアニメーションが必要と思われる場合には、とにかくこの関数をいろいろ試してみることをお勧めします。

リスト 4. カスタムのアニメーション手法
// when the button is clicked, make the div with an ID of "movingDiv"
// have the custom animation provided.
$("#myButton").click(function(){
   $("#movingDiv").animate({
      // will increase the width, opacity, and fontSize of "movingDiv"
      // and do it in 5 seconds
      width: 700;
      opacity: 0.5;
      fontSize: "18px";
   }, 5000);
   });

Ajax

現在では、どの Web ページに対しても「Ajax を使っているかどうか」が大きな関心事となっていますが、Ajax とは本当は何であるかを誰もが理解しているのでしょうか。Google で「Ajax」を検索すると (大部分の検索と同様) 何百万もの結果が得られますが、そうした結果を見ると、Ajax という用語の意味するところに関していくらか混乱があるように見受けられます。ページ上の実にクールなアニメーションや、非常にクールな影を付けたポップアップ・ウィンドウが Ajax なのではありません。いくら Ajax がクールだからといって、Web ページ上に見られる興奮に満ちたもののすべてが Ajax というわけではないのです。Ajax とは本質的には、クライアント・サイドの Web ページが、ページをロードしなおすことなくサーバーとの間で情報をやり取りできるようにするための手法です。つまり、Ajax はページ上でクールなエフェクトを実現することはできませんが、Web アプリケーションをデスクトップ・アプリケーションのように見せる手段を備えています。Ajax が大きな話題になっていることには十分な理由があり、Ajax が広く使われるようになった直接の結果として、今日見られるように RIA が急成長しているのです。

jQuery を使うと、Ajax の処理が信じられないほど容易になります。決して誇張して言っているのではありません。これまで JavaScript ライブラリーを使わずに Ajax を扱わざるを得なかった人や、XMLHttpRequest を扱わざるを得なかった人、Microsoft® 版と Firefox 版の XMLHttpRequest の違いに対処せざるを得なかった人、戻りコードの解析を行わざるを得なかった人などに対して、ここで明言します。jQuery によって、Ajax は 1 つの関数呼び出しと同じくらい簡単になります。本当にそうなのです。これまで 100 行のコードが必要だったものが、今や 3 行か 4 行のコードで済みます。信じられないほど大幅な時間の節約です。筆者自身、jQuery が登場する前までは、至る所に Ajax 関数を追加するには大量の作業が必要になりそうだと思っていました。今やその作業は非常に単純になり、おかげで Ajax で可能になるものをアプリケーションでフルに活用できるようになったのです。通常の関数呼び出しと同じくらい単純なら、使わない理由はありません。

皆さん自身が Ajax を必要とする場合に使う可能性が最も高い関数、post() メソッドと get() メソッドを見てみましょう。これらの関数の動作は、ここまでの時点で皆さんが読んできた他の jQuery の関数から想像できるものとほとんど同じであり、呼び出し対象の URL と渡すべきパラメーターを指定することができ、そして Ajax メソッドからリターンした際に呼び出す関数を指定することができます。つまりこの 2 つのメソッドは、jQuery で Ajax メソッドを呼び出すための方法が jQuery で他のメソッドを呼び出す方法とまったく同じになるように構成されているのです。リスト 5 を見てください。

リスト 5. Ajax 用の post メソッドと get メソッド
// this code would be in a php file named myTest.php
// why did I switch to PHP for the Ajax examples?  Java/JSP gets tough because
// you need to show the code in the Servlet, which isn't necessary with PHP.  The
// functions work equally well in both PHP and Java/JSP though.
<?php
     echo "This is my return String";
?>

// here's how simple the Ajax calls are in jQuery
// This is a post function
$.post("myTest.php", {}, function(data){
   $("p").text(data);
});

$.get("myTest.php", {}, function(data){
   $("p").text(data);
   });

この 2 つの例を見るとわかるように、これらの関数は jQuery の他の関数とほとんど同じであり、JavaScript ライブラリーを使わない場合よりもずっと使いやすくなっています。また、Ajax 呼び出しの関数を拡張するために使用できる、いくつかの引数があります。最初の引数は、もちろん呼び出し対象の URL です。この URL は PHP ファイルの場合もあれば、JSP ファイルやサーブレットの場合もあり、要するにリクエストを処理するものなら何でも可能です。この URL はリクエストに対しレスポンスを返すものである必要もありません (これについては後でサンプル・アプリケーションのなかで説明します)。2 番目の引数はオプションで、post/getでデータを渡すためのものです。この引数は配列の形式です。通常はフォームの要素に含まれる情報や、ページから得られる userID などを渡しますが、サーバー・ベースのファイルがリクエストを処理するために必要となる任意のものを含めることができます。3 番目の引数もオプションで、これは Ajax 関数から適切にリターンされた時に実行される関数です。この引数には通常、サーバーから返されてきた任意の結果としての情報を処理するためのコードを指定します。リスト 6 は、この最初の 3 つの引数の例をいくつか示しています。この後で 4 番目の引数について説明します。

リスト 6. オプションの引数を使った post メソッド
// place a username and password input field on the page
<input type=text id="username">
<input type=password id="pass">

// call a server-based PHP file that will process the information passed to it
$.post("myFormProcessor.php", {username: $("#username").val(), 
                               password: $("#pass").val()});

// conversely, this PHP file could also return information to the function, from which
// you could process the results
$.post("myFormProcessor.php", {username: $("#username").val(), 
                               password: $("#pass").val()},
       function(data){
           // the data variable contains the text returned from the server, you don't
           // have to set anything up ahead of time, jQuery will do it all for you
           if (data != "ERROR")
              $("#responseDiv").text(data);
       }
       );

jQuery で Ajax を扱うことは非常に単純で容易なことはすぐにわかります。しかし、サーバーから返される情報が単純なテキスト・ストリングよりも複雑なものになると、それを処理するための関数はもっと複雑になります。複雑な Ajax 呼び出しを行う複雑な Web ページでは、戻りデータが XML 形式の場合があります。また戻りデータが JSON オブジェクトの形式の場合もあります (JSON は基本的に JavaScript コードでオブジェクトを定義するためのプロトコルです)。jQuery では、4 番目の引数をオプションとして先ほどの get/post メソッドに持たせることができ、この引数を使うことで、どのような型をサーバーからの戻り値として想定しているのかを事前に指定することができます。つまり XML ストリングを想定している場合には “xml” というストリングを渡し、HTML ストリング (またはプレーン・テキスト) を想定している場合には ”html” を、JavaScript コードを想定している場合には “script” を、JSON オブジェクトを想定している場合には “json” を渡します。例えば戻りオブジェクトの型を “json” と指定すると、jQuery はサーバーからのレスポンスに含まれるストリングを自動的に JSON オブジェクトに変換し、そのオブジェクトを即座に参照できるようにするのです。

リスト 7. Ajax で戻り型を指定する
// specify the return object to be a type JSON object, and process the
// return object as a JSON object, referencing fields in it without
// casting it to any object or evaluating it

$.post("myFormProcessor.php", {username: $("#username").val(), 
                               password: $("#pass").val()},
       function(data){
          // jQuery has already converted the data response into a JSON object, so 
          // you can immediately reference its fields, providing cleaner-looking code
          // and allowing future changes, and in my opinion, making it easier to work
          // with than XML responses
          $("#username").text(data.username);
          $("#address").text(data.address);
          $("#phone").text(data.phone);
       }, 
       "json"  // here you specify that the return type is JSON
       );

Ajax 関数のなかでもう 1 つ説明しておきたいのが load() 関数です。load() 関数を使うと、指定されたページをロードすることができ、その結果として HTML を取得することができます。この説明だけでは、それほど興味がそそられるような関数ではないように思われるかもしれません。しかし load() 関数を使うと、皆さんが起動時に自分の Web ページを解析するのとまったく同じように、jQuery コードを使って戻り情報を解析することもできるのです。これは何を意味するのでしょう。任意の Web ページをロードすることができ、そしてそのページを jQuery で解析できるということは、非常に効果的でプログラムしやすいページ・スクレーパーを手にしたことになり、このページ・スクレーパーによってあらゆるページからどんな種類の情報でも収集できるということです。では、その例を見てみましょう。

リスト 8. load() 関数の応用例
// create a very primitive stock price quote by calling Yahoo's stock quote, and then
// scraping the information from their pages.
// in this case, look up IBM's stock price, and place it in the text field with an ID of
// "stockPrice"
// the span with the ID of "yfs_l90_ibm" contains the stock price
$("#stockPrice").load("http://finance.yahoo.com/q?s=ibm #yfs_l90_ibm").text();

Ajax モジュールのなかで取り上げたい最後の 2 つの関数は、実は Ajax を扱う際に非常に役立つユーティリティー関数です。これまで何度も指摘したように、クライアントとサーバーとの間の多くの対話動作には、フォームと、そのフォームに含まれる要素が関係します。このタイプの通信は非常に一般的なため、jQuery にはサーバーに渡されるパラメーターの作成を補助するための 2 つのユーティリティー関数があり、これらの関数を使うことで HTTP クエリー・ストリングまたは JSON ストリングのいずれかの形式でパラメーターを作成することができるのです。どちらのユーティリティー関数も、Ajax に関して必要な作業を補助するためのユーティリティー関数として使用することができます。これらの関数の便利な点は、どちらの関数もフォーム全体をカプセル化することができ、開発中にどれほど多くの要素が追加/削除/変更されても影響を受けない点です。リスト 9 はこの例を示しています。

リスト 9. serialize() 関数と serializeArray() 関数
// the serialize function will look at every Form element inside the specified element
// and automatically construct an HTTP String that contains all the information
// of the elements, in the form of <element name>=<element value>&
// for example, "firstname=Michael&lastname=Abernethy"
// this can then be attached to the URL to pass the information via an Ajax call
$.post("myFormProcessor.php?" + $("#myForm").serialize());

// further, a similar thing could be done with the serializeArray function
// which will convert a Form into its JSON equivalent
$.post("myFormProcessor.php", {json: $("#myForm").serializeArray()});

これまでの内容を総合する

これまで学んだすべてを総括するため、最後にデモ用の Web アプリケーションとしてこれまで何回か登場しておなじみになった Web メール・アプリケーションを見てみましょう。まずこのアプリケーションに、クライアント・サイドからサーバー・サイドへの Ajax 呼び出しを複数追加し、情報を収集できるようにします。メッセージを読む際には Ajax を利用してメッセージ情報を取得するようにし、またメッセージを削除する処理にも Ajax メソッドを使用します。次に、このアプリケーションにいくつかのエフェクトを組み合わせます。ユーザーがメッセージを削除すると、それらのメッセージはユーザーがページをロードしなおさなくても即座に画面から削除され、実際の削除は Ajax 呼び出しを使って非同期で行われます。この記事の内容を学び終えると、皆さん自身の Web アプリケーションの中で Ajax 呼び出しを使うことがどれほど簡単か、また Ajax 呼び出しを使ってデスクトップ・アプリケーションに極めて近いものを作成する方法、そして、エフェクトを駆使してアプリケーションの使いやすさを向上する方法を理解できるはずです。

リスト 10. サンプル Web アプリケーション: メッセージを削除する
// First, let's look at how you handle deleting a message.

// The first step is to create a button that will actually delete messages
<input type=button id="delete" value="Delete">

// next, you'll add a checkbox in each row of the table, so that users can select
// which messages they want to delete.  You'll use these checkboxes later, and
// the information contained in them is equally important (that's called
// foreshadowing!)
// Notice how the value of each checkbox is the message.id!

<tr class="messageRow" id="<%=message.id %>">
<input type=checkbox name="delId" value="<%=message.id%>" class=selectable>

// Now that the HTML is complete, look at the jQuery code to execute these deletes

// First, attach an event to the delete button, so when it's pressed, it will
// start deleting the checked messages

$("#delete").click(function() {
   deleteMessages();
});

// Finally, let's define the deleteMessage() function, because that contains the meat of
// today's lessons.
// Because this is the culmination of every lesson, let's look at everything I did to
// get this working!
// Note 1 - I loop through each of the checkboxes that are checked by passing in a very
// specific search parameter, to find only the members of the "selectable" class that
// are checked.
// Note 2 - because the value of the checkbox is the same as the ID of the table row in
// which it is contained, you can use the Effects module to hide the entire table row,
// by passing in the value of the checkbox, and getting the table row back, and then
// hiding it.
// Note 3 - I make an Ajax call to actually delete the message from the DB.  I have
// to pass the messageID to the server so that it knows which one to delete.  That
// information is contained in the checkboxes value, which I pass with the Ajax call.
// Because I don't really care if it's successful or not, I ignore any reply from
// the server.

function deleteMessages()
{
    $(".selectable:checked").each(function() {
        $("#"+$(this).val()).remove();
        $.post("<%=HtmlServlet.DELETE_MESSAGES%>.do", {delId: $(this).val()});
    });
    }

2 番目の例として、メッセージを読む方法を見てください。これを見ると jQuery での Ajax の使い方もわかるはずです。

リスト 11. サンプル Web アプリケーション: メッセージを読む
// You've seen most of this code previously in the example from last article, so let's
// focus on the Ajax portion of the code.
// Note 1 - I make an Ajax call with all 4 arguments defined.  I have to pass two
// variables to the server in order to read the message.  The first is the message
// ID number, because I need to know which message I want to read.  The second is
// the current view...for reasons I can't recall (not important really).
// Note 2 - The fourth argument into the Ajax function is "json", indicating that
// I expect a JSON object back from the Ajax call.  jQuery will automatically
// convert the response String into a JSON object.
// Note 3 - Notice that I handle the JSON object directly, without using an
// eval() function, because jQuery has already created the object.  I can
// reference its fields directly.
$(".messageRow").dblclick(function() {
    if ($(this).hasClass("mail_unread"))
    {
        $(this).removeClass("mail_unread");
    }
    $.post("<%=HtmlServlet.READ_MESSAGE%>.do", {messageId: $(this).attr("id"),
                                                     view: "<%=view %>"}, 
      function(data){
        if (data != "ERROR")
        {
             // using JSON objects
             $("#subject").val(data.subject);
             $("#message").val(data.message);
             $("#from").val(data.from);
         }
      }, "json");
    $.blockUI(readMess, {width:'540px', height:'300px'});
    });

まとめ

さまざまなアプリケーションが次第にデスクトップからブラウザーに移植されるにつれ、jQuery のような JavaScript ライブラリーはますます重要となります。こうしたアプリケーションは今後も一層複雑になり、どのような Web アプリケーション・プロジェクトでも jQuery のようなクロスブラウザーの確固たる基盤が必要となるはずです。jQuery は他の JavaScript ライブラリーとは一線を画し、多くの開発者の間で最もよく使われるライブラリーとなりつつありますが、それは jQuery が使いやすく、必要なことをすべて行えるだけの豊富な機能を備えているからです。

このシリーズの第 3 回の記事である今回は、2 つのモジュールについて学びました。これらのモジュールによって、アプリケーションにはリッチな機能が実際に追加され、デスクトップ・アプリケーションと Web アプリケーションとの境界があいまいになります。今回学んだもののうち、最も強力なものは Ajax モジュールです。Ajax モジュールによって Ajax の使い方が大幅に単純化され、他のどの jQuery メソッドを呼び出す場合ともほとんど同じように簡単かつ直接的に Ajax を使えるようになります。また Ajax の強力さについてもいくつかの例をとおして学び、ページのリロードや遅延などに煩わされることなくアプリケーションの応答性を高める上で Ajax が素晴らしいツールであることも見てきました。今回学んだもう 1 つのモジュールであるエフェクト・パッケージでは、アニメーションやページ要素の表示/非表示を適切に使用すれば、適切な UI 設計を進める上で強力なツールになり得ることを見てきました。Ajax モジュールとエフェクト・モジュールを効果的に組み合わせると、Web サイトのダイナミズムを飛躍的に向上することができます。

最後に、サンプル用の Web アプリケーションを再度取り上げ、Ajax モジュールを追加することで、ページをロードしなおすことなくメッセージの読み取りと削除が行えることを学びました。さらに、Web アプリケーションの中でメッセージを削除し、(Ajax とエフェクトを組み合わせることによって) ユーザーのページと DB からメッセージを削除できること、しかもそのすべてがページをロードしなおさずに行えることも学びました。ユーザーにはメッセージの削除を行うプロセスは見えず、またプログラムによってそうした動作を実現することもできます。

今回で、すべての jQuery リリースに同梱されているコア・ライブラリーについて紹介する jQuery の記事のシリーズも終わります。この 3 回の記事では、jQuery に含まれているすべてのモジュールを紹介しました。これらの記事をとおして、jQuery を扱うのは容易かつ単純だということが明らかにできたようであれば幸いです。また、jQuery は JavaScript に関するあらゆるニーズに対応する確固たる基盤となるので、どのような Web アプリケーションに取り組む場合であれ、あらゆるタイプの RIA に jQuery は活用できるということも理解できたはずです。

このシリーズの記事では、皆さんが作成するコードの中で非常に気軽に jQuery を使えるように、jQuery についてひととおり説明しました。第 1 回の記事では jQuery が機能的にどのように動作するかを説明し、さらに jQuery を使ってページ要素を検索し、ループを使って通常の配列オブジェクトとまったく同じようにそれらの要素にアクセスする方法を説明しました。第 2 回では、リッチさを実現するための基本となる 3 つのモジュールを紹介しました。そして最後に今回の記事では、複雑な Web アプリケーションを完成させるために、このフレームワークの仕上げとなる部分を取り上げました。


ダウンロード

内容ファイル名サイズ
Zip file containing the sample applicationjquery.zip69KB

参考文献

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=354449
ArticleTitle=jQuery を扱う: 第 3 回 jQuery と Ajax による RIA: 一歩進んだ Web アプリケーションを今すぐ作成する
publish-date=10282008