jQuery を扱う: 第 2 回 一歩進んだ Web アプリケーションを今すぐ作成する

イベント、属性、そして CSS

jQuery に関するシリーズの第 2 回であるこの記事では、Web サイトの対話性を高めて動的な RIA (Rich Internet Application) を実現する方法について説明します。ユーザーの対話動作によって生成されるイベントや、Web サイト自体から収集した情報、リロードせずにアプリケーションのルック・アンド・フィールを変更できる機能などを組み合わせ、jQuery で迅速かつ容易に動的な RIA を作成する方法を学びましょう。

Michael Abernethy, Product Development Manager, Optimal Auctions

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



2008年 9月 23日

はじめに

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

前回の記事では、開発環境の中で jQuery をセットアップする方法や jQuery のコア関数の動作など、jQuery の基礎を取り上げました。そこではまず、どのように jQuery による要素の選択メソッドやフィルタリング・メソッドを使って、ページ上の要素の検索や発見を容易に行うのかを紹介し、求める条件に正確に合致した要素または要素グループを見つける方法について説明しました。次に、選択結果をトラバースするために jQuery に用意されている、さまざまな方法について説明しました (こうした関数の多くは、他のプログラミング言語で皆さんがおそらくおなじみの関数と同様のものです)。そして最後に「Select All/Deselect All (すべてを選択/すべての選択を解除)」チェック・ボックスのサンプル・ウィジェットを取り上げて、jQuery を使うことで、このウィジェットをほんの数行のコードで作成できることを紹介しました。

この記事では jQuery の知識を広げるために、もっと華やかな機能に注目します。そして、単純でありきたりなインターネット・アプリケーションに、実際に「リッチなもの」を追加することで、デモ・アプリケーションを RIA と呼べるものにしていきます。最初に、jQuery がイベントをどのように処理するかを説明します。イベントは、マウス・クリックや強調表示、ドラッグなどとして定義されます。これらのイベントはボタンなどに限定されているわけではなく、任意の div や span などに対するマウス・クリックもイベントとして処理できることに注意してください。次に、Web ページ上のオブジェクトに対する属性の取得方法と設定方法の説明に移ります。属性の取得と設定には、フォーム要素からのテキストの取得や、div からの innerHTML の取得、さらにはどの要素にどのクラスが付加されているかの判断なども含まれます。最後のセクションでは、ページをリロードせずに、あるいは外部スタイルシートを変更せずに、ページ要素の CSS 特性を変更する方法について説明します。

サンプル・アプリケーションでは、上記すべての内容を盛り込んだウィジェットを Web メール・アプリケーションに追加します。それにより、ページ上での対話動作に基づきオブジェクトの色やサイズ、場所が変化するような、クライアント・サイドのリッチ・アプリケーションの作成方法を示します。(今回の記事では、これらの対話をクライアント・サイドに限定していますが、次回の記事ではサーバー・サイドとの対話も追加します。) この記事を最後まで読めば、jQuery のあらゆる手段を使えるようになり、独自の RIA を作成して皆さんの顧客をうならせることができるはずです。

イベント

jQuery のイベント・モジュールは、Web アプリケーションに対話性を持たせるための、まさに第一歩と言えます。なぜなら、ページ上で起こることというのは、通常はイベントがトリガーとなっているからです。「はじめに」のセクションでも指摘したように、イベントはフォーム要素でしか起こらないと考えてはなりません。実際、どのような要素もイベントをトリガーすることができ、このことを利用すれば、カスタム・ウィジェットをより容易に作成し、特定のフォーム要素自体と結びつけることなく固有の対話動作を追加することができるのです。

そうは言っても、大部分のイベントは実際のところ何らかの形でフォーム要素に関係しており、それらのフォーム要素を使ってそれぞれのイベント・メソッドのデモを行うのが、動作を理解する上で最も簡単な方法です。利用可能な関数について掘り下げる前に、イベント・モジュールの各関数には、あるパターンがあることに注目してください。各イベント関数には 2 通りの形式があり、1 つは何も引数を含まない形式、もう 1 つは関数を引数に取る形式です。両者の違いは重要であり、この違いは関数が異なっても一貫しています。引数を取らない関数は、実際にそのイベントをトリガーします。言い換えると、click() を呼び出すと、実際にボタンがクリックされます。一方、click(function) 関数が呼び出されるのは、ボタンが実際にクリックされた場合か、あるいはそのボタンの click() 関数が呼び出された場合です。混乱してしまったでしょうか。説明ではわかりにくいかもしれませんが、例を見ると明確に理解できるはずです。

リスト 1. jQuery のイベント・メソッド
// make the "myButton" click.  This will cause the button to click and any actions
// tied to it will occur - for example, it could submit a form, or other
// jQuery actions could be tied to it.
$("#myButton").click();

// use jQuery to setup what will actually happen when the "myButton" is
// actually clicked.
$("#myButton").click(function(){
   $("#myDiv").toggle();
});

// A common pattern in jQuery when setting up actions on a page is to trigger the
// action to occur initially when the page is loaded.  This occurs frequently
// with AJAX setups, where the values come from the server. 
// In this example, the myDiv has its visibility toggled every button click.  When
// the page is loaded, we call click() immediately, which toggles the view
// as soon as the page views (not a practical example, but you should see the design)
$("#myButton").click(function(){
   $("#myDiv").toggle();
}).click();

下に挙げたイベントはすべて上で説明した設計に従っており、それぞれ 2 つの関数が関連付けられています。ここでは簡潔にするために、最初の関数のみを挙げています。

  • blur() - フォーム要素からフォーカスが外されると呼び出されます (例えば、フォーカスがあったテキスト・フィールドからタブ操作でフォーカスが外された場合など)。
  • change() - フォーム要素からフォーカスが外された際に、(その要素にフォーカスが移った時から) その要素の値が変更されている場合に呼び出されます。Internet Explorer と Firefox では、この処理が少し異なります。
  • click() - ページ要素 (必ずしもフォーム要素である必要はありません) がクリックされると呼び出されます。
  • dblclick() - ページ要素 (フォーム要素である必要はありません) がダブルクリックされると呼び出されます。
  • error() - その要素に内部エラーがあると呼び出されます (これはブラウザーごとに異なり、これを見たことがある人はあまり多くないはずです)。
  • focus() - あるフォーム要素にフォーカスが移ったときに呼び出されます。
  • keydown() - あるページ要素に対してキーが押された場合に呼び出されます。
  • keyup() - あるページ要素に対して押されていたキーが離された場合に呼び出されます。
  • keypress() - 同じ要素に対して keydown と keyup が短時間に連続して行われた場合に呼び出されます。
  • select() - テキスト・フィールドでテキストが選択されると呼び出されます。コンボ・ボックスで何かが選択された場合には呼び出されません (これは変更イベントとなります)。
  • submit() - フォームが送信されると呼び出されます。

これらの他にも、上で紹介したパターンに従わず、呼び出せる関数を 1 つだけ引数に取る関数があります。これらの関数はあまり一般的に使われないため、ここではそれらを例外として挙げます。

  • resize(fn) - オブジェクトのサイズが変更されると呼び出されます。
  • scroll(fn) - iframe がスクロールされると呼び出されます。
  • load(fn)/unload(fn) - ページ上でオブジェクトがロードまたはアンロードされると呼び出されます。

最後に、ご想像のとおり、いくつかのイベントはマウスに結びつけられています。ここではそうしたイベントを独自の第 3 のセクションとしてまとめました。なぜなら、そうしたイベントは誤った使い方をされることが多いため、jQuery ではそれを踏まえて、それらの一部を独自の関数で置き換えているからです。ここでは単に基礎となる DOM イベントに直接対応させるためにそれらを挙げますが、実際には、これらのメソッドの代わりとなる他のメソッドを使用することになるはずです。ある要素に対してマウス・ボタンが押された場合、あるいはマウス・ボタンから手が離された場合には、mousedown(fn) メソッドと mouseup(fn) メソッドが呼び出されます。しかし多くの場合、これらのメソッドの代わりに click() メソッドを呼び出した方が適切です。なぜなら click() もイベントとしてスローすることができる上に、想定される動作に (mousedown(fn)mouseup(fn) よりも) 適しており、エラーの原因となりにくいからです。例えば、ユーザーがあるボタンの上でマウス・ボタンを押し、その操作が誤りだったと気付いてマウス・ボタンを押したままボタンの上から離れるようにマウスを移動し、その後でマウス・ボタンから手を離したと考えてみてください。もしそのユーザーが、mouseup(fn) が定義された別のページ要素の上でマウスから手を離した場合には、どんな動作が起こるでしょう。理想的には、この 2 つの関数は、(クリックでは適切に置き換えることができない) ドラッグ・アンド・ドロップのインターフェースに限定すべきなのです。

イベント・モジュールの最後の 2 つのメソッドである mouseover(fn)mouseout(fn) は、今日の大部分の Web サイトでよく使われるものです。この 2 つのメソッドは、ツールチップや、画像を表示するための影付きボックス、マウス・ポインターの場所に基づく色の変更などを表示するために使われます。jQuery では、この 2 つの関数が非常に頻繁に使われるようになると予想されること、また大部分の人はこの 2 つの関数を正しく使わないため無数のエラーが起こりやすいことを認識していました。人々が意図的にコードの中にバグを導入することはないものの、ページ上のネストされたコンポーネントなど複雑なものに関するコーディングはできないだろうと jQuery では想定したのです。そのため jQuery では、この 2 つの関数を置き換えるためのメソッドとして、hover(fn1, fn2) 関数がイベント・モジュールに追加されています。

リスト 2. jQuery の hover メソッド
// This demonstrates the hover() function as implemented by jQuery.  You define two
// functions:  what happens when the mouse moves over the specified element
// and what happens when the mouse moves off the element.
// In this example, each row in a table will get a red background when
// the mouse moves over it and a white background when the mouse leaves.
$("tr").hover(function(){
   $(this).css("background","#0000ff");
},
function(){
   $(this).css("background","#ffffff");
});

属性

対話型のページの特徴の 1 つに、ページ上のある領域から特定の情報を取得し、それを別の場所に転送できる機能が挙げられます。この具体的な例を挙げると、テキスト・フィールドから情報を取得して表の中に入れる、あるいはもっと範囲を広げ、コンボ・ボックスから情報を取得してサーバーに転送し、サーバーからのレスポンスを別のコンボ・ボックスに入れる、などがあります。本質的に、対話性とはページ上での情報転送の結果なのです。

ページ上に情報を保存するにはさまざまな方法がありますが、特にページ上の個々の要素に情報を保存する方法は多種多様です。皆さんも、単純な <p> はテキスト・フィールドほど多くの情報を含まない (実際にはそうであることもあれば、そうでないこともあります) ということは想像に難くないでしょうが、結果としては、その情報にアクセスするためにさまざまな関数が存在しているのです。同様に、ページ要素から情報を取得するための各種の方法に対応して、そうした要素に情報を設定することもできると皆さんはおそらく考えていることでしょう。実質的に、各ページ要素はデータ・オブジェクトであり、そこにはゲッターやセッターのメソッドによってカプセル化された変数が含まれます。こうした JavaBean モデルと、jQuery での実際の違いは、メソッド名と、一部の要素は特定の関数に適さないという制約にあります。

これらのメソッドの詳細を説明する前に、どんな情報をページ要素に保存できるのかを見てみましょう。<p> のような単純な要素は、情報として CLASS や ID しか含むことができません。一方、<img> のような要素は、ずっと多くの情報を含むことができます (「src」、「alt」、「width」、「height」など)。さらに、<input type="password"> のように複雑な要素は、「defaultValue」、「maxLength」、「readOnly」、「accessKey」などを含むことができます。

このように、考えられる変数が多岐に渡るため、jQuery では、そうした変数にアクセスするための汎用の関数が用意されています。それが attr(name) であり、この関数は、任意のページ要素から情報にアクセスするための汎用的な方法として使用することができます。この関数をどのように使うことができるのか、いくつかの例で見てみましょう。

リスト 3. jQuery の attr() 関数
<img src="/images/space.gif" id="spacer" class="a b c" alt="blank">

// Calls to the attr() function will return the following
$("#spacer").attr("src"); // will return "/images/space.gif"
$("#spacer").attr("alt"); // will return "blank"

// Similarly, you can access the ID in the same way
$(img).each(function(){
   $(this).attr("id"); // will return "spacer"
});

この attr() 関数は、ページに対話性を持たせ、しかもそれを簡潔に行おうとする場合に、非常に便利です。実際、data() 関数が追加される以前 (以下でその方法を説明します) には、通常、必要な情報は利用可能な変数の 1 つに詰め込まなければなりませんでした。例えば、2 つのフレームを持つページがあり、上の方のフレームにいくつかのタブを表示し、下のフレームには各タブの内容を表示する場合には、次のようなものをセットアップします。

リスト 4. attr() の実際
<!-- This would appear in the top frame as a tab.  The CSS file would control how
     the tab appears, and the only HTML code needed would be this -->
<td>
   <div class="tab" id="/messages.jsp">Messages</div>
</td>

// This code would appear in the jQuery section.  Notice how we get the ID from the tab,
// and use that information to set the bottom frame, named 'content' with the content
// on the page "messages.jsp"

$(".tab").click( function() {
   window.parent.frames['content'].location = $(this).attr("id");
});

各要素の属性値を取得することに加え、値を設定することもできます。これにより、要素の外観や動作をプログラムで変更できるという効果があります。

リスト 5. attr(str) を使って属性を変更する
// will change the image source, and the image displayed on the page will change
$("img").attr("src", "myimage.jpg");

// will change all the links on the page to go to one specific page
$("a").attr("href", "mypage.html");

// will change the maxLength on all password fields to 10 characters
$(":password").attr("maxLength", "10");

ページ上のフォーム要素には特別な関数があり、フォーム要素に対してその関数を呼び出すと、それらの要素に設定された値を取得することができます。これはフォームや妥当性検証を扱う際に特に便利であり、フォーム要素を持つ対話型の Web サイトを作成する場合には、これらの関数をとても頻繁に使用するはずです。

リスト 6. フォーム要素の val() 関数
// will get the text contained in the text field and check that it's not blank
$(":textfield").each(function(){
   // use the val() function to get the text inside the textfield
   if ($(this).val() == "")
       $(this).next().text("Error");
});

// on a new password page, this will compare the new one with the confirmation,
// to make sure they are equal
if ($("#newPassword").val() != $("#confirmPass").val())
   $("#newPassword").next().text("Error");

また、特定のタグの中に含まれている情報を取得できる関数もあります。なぜこれが便利なのでしょう。例えば、ある <td> タグの中のすべての情報を取得してその情報を置き換えたり、あるいは <p> の中のすべてのテキストを小文字に変えたりすることができます。こうした属性を取得するために使える関数は 2 つありますが、attr() 関数を使うことはできません。そして他のすべての属性関数と同様、この 2 つの関数にも対応するセッター・メソッドがあります。2 つの関数のうちの 1 つは、対象のタグのすべての innerHTML を返す html() 関数です。もう 1 つは、対象のタグの中にあるすべてのテキストを返す text() タグです。その違いは何なのでしょう。html() 関数は HTML タグを含むテキストを返しますが、text() タグは HTML タグを削除し、中にあるテキストのみを返します。2 つの関数の違いを次の例で見てみましょう。

リスト 7. html() と text() の比較
// this will examine every <td> tag, and if the value is blank, it will insert
// a "-" into it, as a placeholder.
$("td").each(function(){
   // check the text of the table cell
   if ($(this).text() == "")
       $(this).text("-");
});

// this will convert every paragraph's text to lowercase
$("p").each(function(){
   var oldText = $(this).text();
   var newText = oldText.toLowerCase();
   $(this).text(newText);
});

<-- This shows the difference between text() and html() -->
<div id="sample"><b>This is the example</b></div>

$("#sample").html(); // will return "<b>This is the example</b>"
$("#sample").text(); // will return "This is an example"

最後に、属性用として jQuery ライブラリーに最近追加されたものが data() 関数です。この関数は jQuery の UI プロジェクトから生まれ、最近、jQuery プロジェクト本体に取りこまれました。要するに UI プロジェクトの開発者達は、ある種のページ要素に対して利用可能な属性を「改造」するのではなく、情報を保存できる独自の属性を必要な数だけ作成できる方法を望んだのです。上記のさまざまなタブの例を思い出してください。その例では div の ID の中のリンクを「改造」しましたが、これはおそらく理想的な方法ではありません。しかし jQuery のこれまでのリリースの制約から、これが唯一の方法でした。data() 関数が加わったことによって、この問題に対してスマートなソリューションが可能になりました。data() 関数は、各ページ要素に含まれる内部マップにアクセスするための方法と考えることができます。マップは単純にキーと値のペアの集合です。これによって、ページ要素に対して必要な任意のカスタム属性を作成し、その属性に任意の値を設定することができます。こうすることで最終的にはコードが容易になり、そしてプロジェクトが大規模になればなるほどメンテナンスの容易さでも効果を発揮します。では、新しい data() 関数を使って上記の例を書き直してみましょう。

リスト 8. 新しい data() 関数
// create the div like we did above, but without any specific information.  In this
// way we can create a generic HTML layout and customize it in our jQuery code.

<td>
   <div class="tab"></div>
</td>

// Now customize each tab in the jQuery code.

$(".tab").eq(0).text("Messages");
$(".tab").eq(0).data("link", "messages.jsp");
$(".tab").click(function(){
   window.parent.frames['content'].location = $(this).data("link");
});

// Taking this a step further, you can picture all this information coming from
// an external properties file via a Java array.  This would be the code on a JSP
// page.  

<%
  // array containing tab names
  String[] tabNames;
  // array containing tab links
  String[] links;

  for (int i=0; i<tabNames.length; i++) {
%>
  $(".tab").eq(<%=i%>).text("<%=tabNames[i]%>");
  $(".tab").eq(<%=i%>).data("link", "<%=links[i] %>");
<% } %>

$(".tab").click(function(){
   window.parent.frames['content'].location = $(this).data("link");
});

CSS の操作

今回のレッスンの最後として、スタイルシートの調整やページのリロードを行わずに、ページの CSS を動的に操作する方法を説明します。この方法を利用すると、色やフォントなど簡単なものを変更することによって、いくつかの基本的な効果をページに加えることができます。実は、jQuery ライブラリーを作ろうという発想の元となったのが jQuery の CSS 部分なのです。jQuery ライブラリーの目標は、CSS のプログラミングをページ上で容易に行えるようにすることでした。そしてご承知のとおり、それ以来 jQuery プロジェクトは大きく成長しました。しかしこのプロジェクトの元々の目標はそのまま残っており、jQuery には CSS のプログラミングをはるかに容易にするためのメソッドが用意されています。ただしここでは、jQuery で CSS 操作のために提供されている従来の関数群は実際には今日の Web 環境には適切ではないことを示し、それらの関数に代わって使用すべき (同じく jQuery の) 別の関数について説明します。

ページ上で CSS を操作するための基本的な 2 つの関数を使うことによって、1 つの属性をストリングとして渡し、さらに値をストリングとして渡すか、あるいはストリングとストリングによる値の配列をすべて同時に渡すこともできます。どちらの関数もほとんど同じように動作し、どちらの場合もページ上の CSS を容易に変更することができます。

リスト 9. css() 関数
// change the background of every div to red
$("div").css("backgroundColor", "#ff0000");
// - or - 
$("div").css("backgroundColor", "red");
// - or - 
$("div").css({backgroundColor: "#ff0000"}); // notice the braces and lack of quotes

これを見ると、これらの関数が非常に単純であり、すぐに使えるものであることがわかると思います。しかし、最近の Web ページ設計の傾向を考えると、これらの関数に問題があることもわかるはずです。通常の Web ページでは、ページからスタイルが除去され、スタイルシートとして、外部ファイルや、別のコード・セクションに置かれています。できることなら JavaScript コードの中にスタイル・コードを含めることは絶対に避けたいものです。そんなことをすると、後でサイトの外観を変更することが困難になってしまいます。

幸いなことに、これらの関数に代わり、必要な分離を実現しつつ CSS 操作を容易かつ単純に行える関数があります。そうした関数を使うことによって、ページの要素にクラスを追加したり要素からクラスを削除したりすることができます。これらのクラスのスタイルを外部のスタイルシートに含めることによって、複雑なページにとって非常に重要な、スタイル、データ、イベントを分離しておくことができます。では、いくつかの例を見てみましょう。

リスト 10. addClass()removeClass() による望ましいCSS 操作
// will add the "input_error" class to any form elements that fail to validate
// you can picture the "input_error" class in the external CSS file defining
// a red border and red text

$(":textfield").each(function(){
   if ($(this).val() == "")
   {
       $(this).next().text("Error");
       // this will turn the text field's border/text red
       $(this).addClass("input_error");
   }
   // this tests if the text field has the class attached already
   else if ($(this).hasClass("input_error"))
   {
       $(this).next().text("");
       // this will remove the class, restoring a normal border/text
       $(this).removeClass("input_error");
   }
});

この例からわかるように、外部スタイルシートで定義されるクラスを参照することで CSS を調整する方が、ページ上の CSS を操作する方法としては適切です。こうすることで、Web サイトの作成者は、1 つのスタイルシートを変更するだけでサイト全体にわたってエラー・メッセージの処理方法を変更することができ、これまで css() メソッドを呼び出していた場合のように、コードの全インスタンスを追跡する必要がなくなります。css() メソッドは使いやすく、単純なメソッドですが、大規模な Web アプリケーションに適したソリューションではありません。css() メソッドを使うのは避け、addClass() メソッドと removeClass() メソッドを使うように心がける必要があります。

すべてを盛り込む

ここまでに説明したことをまとめるために、再度サンプル・アプリケーションを見てみましょう。このアプリケーションは対話型の Web アプリケーションであり、ユーザーに対し E メール用のデスクトップ・アプリケーションを使っているような印象を与える RIA の実現を目指します。この例では、イベント・モジュールと属性モジュール、そして CSS モジュールを利用することで、この Web メール・アプリケーションでのマウスのシングル・クリックとダブル・クリックの処理方法を定義します。下記のスクリーン・ショットを見ると、想定される動作がわかるはずです。ユーザーが表の中のある行をシングル・クリックすると、その行の色が変更され、ユーザーが現在選択しているものが強調表示されます。ユーザーがあるメッセージをダブル・クリックすると、そのメッセージを読むことができます。さらにそれが新着メッセージである場合には、その行の背景色も変更され、そのメッセージがもはや未読ではないことが示されます。

図 1. ある行をシングル・クリックする
ある行をシングル・クリックする
図 2. ある行をダブル・クリックする
ある行をダブル・クリックする
リスト 11. すべてを盛り込む
// First we add the rows to the table.  Each row is a member of the "messageRow" class.
//  We also give an ID to each row, and this ID is the message number itself, which is 
// gotten from the Java data object. Keep in mind this sits in a for loop in a JSP file.

<%
   for (int i=0; i<messages.size(); i++)
   {
      MessageData message = messages.get(i);
%>
      <tr class="messageRow" id="<%=message.id %>">
      
// Now that the table has been laid out, we can define our jQuery code to capture single
// mouse clicks and double mouse clicks.

// Notice how we capture a single click on the table row with the click() function.  Next
// notice how we use addClass() and removeClass() instead of manipulating the CSS
// directly with a css() function.  This lets us change the stylesheet underneath
// the code without modifying our jQuery code.
$(".messageRow").click(function() {
     $(".messageRow").removeClass("message_selected");
     $(this).addClass("message_selected");
});

// Now we capture the double click on a table row.  Ignore the AJAX methods with the
// post() function, which we'll get to in the next article.
// We use the dblclick() function here to capture double clicks.
// Notice in the AJAX call, how we get the ID out of the table row that was double 
// clicked.
// We pass this ID to the server in order to get the information about the message back
// from the server.  We defined the message number in the JSP code, so that the ID
// contained the message number.
$(".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){
            // Do AJAX stuff here
            });
     });
});

まとめ

さまざまなアプリケーションがデスクトップからブラウザーにポーティングされる傾向が続く中で、jQuery のような JavaScript ライブラリーの重要性は今後も高まるはずです。こうしたアプリケーションは今後もさらに複雑になると考えられ、どのような Web アプリケーション・プロジェクトにも jQuery のようなクロスブラウザーの安定した基盤が必ず必要になるはずです。jQuery は、その使いやすさと、開発者がライブラリーに求めることがすべて網羅されていることから、他の JavaScript ライブラリーとは一線を画すようになってきており、いまや開発者に最もよく使われるライブラリーとなりつつあります。

シリーズの第 2 回目としてこの記事では、jQuery に関する知識を深めるために Web ページの対話性に着目し、(サーバーから情報を得ることなく) クライアント上で基本的な対話を実現する方法について学びました。最初にイベント・モジュールを取り上げました。イベント・モジュールは、さまざまな対話動作 (例えばマウスによる対話動作や、キーボード、フォーカスによる対話動作など) に対してページの要素がどう反応するかを定義します。Web ページの対話性にとってイベントが大きな要素であること、またイベントを使用するためには必ずしもフォーム要素にイベントを関連付ける必要がないことが理解できたと思います。次に属性の説明に移り、ページ要素からの属性の取得とページ要素への属性の設定を適切に行う方法を説明しました。attr() 関数はすべての要素に対して汎用的に使えること、またフォーム要素には (その要素の) 値を得るための特別な関数があることを紹介しました。また、jQuery に新たに追加された data() 関数についても紹介しました。data() 関数はすべてのページ要素に対して一種の HashMap のように機能し、これによりプログラマーは必要に応じて任意の属性を作成することができます。そして最後に、ページをリロードせずにページ要素の CSS を変更する方法を説明しました。css() 関数は使いやすく簡単ですが、ページのスタイルと jQuery コードとを切り離しておくために、css() 関数を addClass()removeClass() 関数に置き換えた方がおそらく得策です。

この記事の最後の部分では、ここで紹介した3 つのモジュールを互いに結びつけ、サンプルの Web メール・アプリケーションがマウスによる対話動作をどう処理するかを説明しました。この対話動作はシングル・クリックとダブル・クリックの 2 種類に分かれています。シングル・クリックではクリックした行を強調表示します。ダブル・クリックでは、(新しいメッセージを読む場合は) メッセージを「既読」としてマーキングし、そのメッセージ固有のデータを要求するためにサーバーに対して Ajax 呼び出しを行い、その際にサーバーにメッセージ番号を渡します。

このシリーズの次回の記事では、jQuery の Ajax 機能について詳しく取り上げます。jQuery によって、Ajax を扱う際の複雑さが解決され、通常 JavaScript 関数を呼び出す場合と同じくらい容易に Ajax を扱えるようになります。さらに、jQuery のエフェクト・モジュールにも注目します。このモジュールはユーザーに対して一層の対話性と視覚的な手がかりを提供する上で有用であり、正直なところ、とてもいけてるのです。そして、次回の記事の最後では、皆さん自身の Web アプリケーションに jQuery ライブラリーを追加したほうがよいと確信してくれることを願いつつ、デモ用の Web メール・アプリケーションと jQuery のレッスンを総括します。


ダウンロード

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

参考文献

学ぶために

議論するために

コメント

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=348836
ArticleTitle=jQuery を扱う: 第 2 回 一歩進んだ Web アプリケーションを今すぐ作成する
publish-date=09232008