Pragmatic Ajax 概略

Pragmatic Ajaxのベータ版をざっと読んでみました。予想通りすごくいい本だと思いますので、内容をざっと紹介したいと思います。

まず、章立ては以下の通り

  1. Building Rich Internet Applications with Ajax
  2. Ajax In Action
  3. Ajax Explained
  4. Creating Google Maps
  5. Ajax Frameworks
  6. Ajax UI, Part I
  7. Ajax UI, Part II

この中で、3章と7章が「さすがPragmaticシリーズ」と思わせる内容で、単なる表面をなぞった技術解説ではない、読みごたえのある内容でした。

Building Rich Internet Applications with Ajax

ここは、Ajaxの概要と歴史について。さっぱりとしたわかりやすい説明です。

Ajaxについて断片的な情報を得てやや混乱気味の人が、頭を整理するにはちょうどいいでしょう。ただ簡潔すぎて、Ajaxをよく知らない人には不十分かもしれません。

Ajax In Action

実例による「Ajaxとは何か」の説明。

郵便番号を入力して対応する住所を引いて来るという例を使い、HTMLとJavaScriptのコードを基本から説明しています。

Ajax Explained

Ajaxプログラミングの重要事項(以下の三点)に関するポイント解説

  • 言語としてのJavaScriptについて
  • DOM
  • XMLHttpRequestObject

どれも最小限の説明ですが、特によいのは、言語としてのJavaScriptについて、普通でない所に的を絞って説明している所。型がないことや、関数がオブジェクトであること等、Javaのような普通の言語しか知らない人がビックリしてしまう所だけを解説しています。

たとえば、次のような例(クロージャ)ですね。

 var a = 10;

 var b = 12;

 var myFunction = function() {

   return a + b;

 }

 var result = myFunction(); // result is 22;

myFunctionもaもbも普通の変数です。普通の変数に関数を代入できるわけです。aに 10 を代入するのと同様に、myFunctionという変数に、動的に生成した関数を代入しています。しかも、その関数では、関数の外側にある変数を使っている。

こういう「あれっ」と思うような側面(であり、実際にAjaxのプログラミングで必要となる機能)を解説しています。

Creating Google Maps

ここは特に素晴しい。Google Mapsを自分で実際に実装してみようという章です。

無料の地図データを取って来て、そのシステム用に編集する所からはじまって、最低限ではありますが、動くGoogle Mapができるまでを、詳しく解説しています。非常に画期的なUIを持つGoogle Mapsですが、こうやって解説されてみると「なんだ、そんなことか」と思えてきます。

GUIのドラッギング等の処理をやったことがある人なら、JavaScriptやDOMについてよく知らなくても、容易に理解できると思います。

要するに、Google Mapsとは次のようなHTMLを動的に生成しているわけです。

 <div>

   <div>

     <img src="xxxxxx" />

     <img src="xxxxxx" />

     <img src="xxxxxx" />

     ....

   </div>

 </div>

外側の<div>は固定で、覗き窓になります。内側の<div>はマウスのドラッグによって移動する領域で、ここに<img>を貼りつけていきます。<img>は、現在表示している座標に合わせて、その位置から見える領域を計算して、それをイメージファイルのファイル名に変換して、対応する相対位置にイメージを置いていけばいいわけです。

これを、次のようなJavaScriptコードで実装します。

 function processMove(event) {

   if (!event) event = window.event; // for IE

   var innerDiv = document.getElementById("innerDiv");

   if (dragging) {

     innerDiv.style.top = parseFloat(top) + (event.clientY - dragStartTop);

     innerDiv.style.left = parseFloat(left) + (event.clientX - dragStartLeft);

   }

 }

これは内側の<div>をマウスのドラッグに合わせて動かす関数です。innerDiv.style.topは、DOMによるCSS属性へのアクセスで、これによって座標を設定しているわけです。

その移動につれて、見える地図のイメージを貼りつける必要があるわけですが、実は、ユーザコードで地図の断片を取って来る必要はありません。地図(のイメージデータ)を自分で持ってくる代わりに、<img>要素を動的に生成して適切な位置に置いておけば、あとは、それを解釈したブラウザが勝手に処理を進めてくれます。もし、エラーが発生したらそこに×を表示するという処理も含めて、<img>要素さえ置けば、あとはブラウザが勝手にやってくれるわけです。

イメージを分割してファイルにする時に、ファイル名を規則通りにつけておけば、その規則に合わせたファイル名をsrc=に設定すればいいわけです。

部分的にコードを示すと次のようになります。

       

       var tileName = "x" + tileArray[0] + "y" + tileArray[1] + "z0";

       var img = document.createElement("img");

       img.src = "resources/tiles/" + tileName + ".jpg";

       img.style.position = "absolute";

       img.style.left = (tileArray[0] * tileSize) + "px";

       img.style.top = (tileArray[1] * tileSize) + "px";

       img.setAttribute("id", tileName);

       innerDiv.appendChild(img);

この章では、こういうコードが、ステップごとに、ひとつづつ詳しく解説されています。

  1. Ajax Frameworks

ここは、Ajax用のJavaScriptライブラリ、具体的には、Prototypeと<%=kw 'Dojo: http://dojotoolkit.com', 'Dojo'%>を紹介する章です。

生のJavaScriptで書くと、冗長で繰り返しの多いコードだったのが、その手のライブラリを使うと、次のようなお洒落なコードになるそうです。

 function getZipData(zipCode) {

   dojo.io.bind({

     url: url + "?zip=" + zipCode,

     load: function(type, data, evt){ assignCityAndState(data); },

     error: function(type, error){ assignError(error); },

     mimetype: "text/plain"

   });        

 }

このハッシュの形式で渡すパラメータにいろいろな設定項目があって、これを使って、非同期的な処理を同期に変更するとか、いろいろな指定ができます。
  1. Ajax UI, Part I

この章は、上で紹介したライブラリを使って、Ajaxらしい派手っぽい画面を作る具体的なテクニックがたくさん紹介されています。

さすがに、動きのあるUIの説明なので、ここは読むだけではよくわかりませんでした。実際にコードを動かしながら読む必要があると思います。
  1. Ajax UI, Part II

ここまでは「Ajaxって凄いよ!あれもできるよ!これもできるよ!こんなに嬉しいよ」に終始していましたが、この章はうってかわって、Ajaxの暗黒面に焦点を合てています。

こういう所をきちっと書いてくれる所が、本当に "Pragmatic" の名に恥じないというか、ここも第二の読み所だと思います。

最初は、非同期処理をどのようにユーザにフィードバックしていくかという話です。

たとえば、フィールド単位のエラーチェックを行なう場合、普通のJavaScriptではクライアントの内部の閉じたチェック、数値の範囲とか文字数くらいしかチェックできません。もちろん、JavaScriptの機能を駆使すれば、サーバ側のDBと突き合わせるようなチェックを行なうこともできるわけですが、そうなると、カーソルが移動するタイミングでサーバとのやりとりが発生して、その間、ユーザが操作できない時間が発生します。つまり、マウスやキーボードに反応しなくなってしまいます。

そこで、AjaxのAつまり、Asynchronous(非同期)の出番となります。XMLHttpRequestObjectを使うことで、サーバからの返答が来る前にも操作を継続できるようにすることが、Ajaxの意味というか新しさです。サーバにチェックの要求を送信してその結果を待つ間もユーザは、キーボードとマウスの操作を継続できます。

それによって、「フィールド単位のエラーチェック」と「サーバサイドで行なうチェック」と「ユーザの操作が中断しない」という三つのことが全部OKになるのが、Ajaxのメリットです。

しかし、同時に、そのことからこれまで存在しなかった、特有の問題が発生してしまいます。それは「ユーザがエラーを見逃す可能性」です。「サーバサイドのチェック中も操作が可能である」ということは、極端に言えばスクロールでページを最後の方に送ってしまうことも可能になります。

そうなると、エラーが発生したフィールドを赤くするとかのフィードバックを与えても、そのフィールドがユーザの見えない位置にあって、ユーザが気がつかないで次へ行ってしまうという可能性もあります。

だから、AjaxなUIでは、「あなたは先に行ってもいいけど、私はこのフィールドでチェックをしてますよ」というフィードバックをユーザに与えて、それを意識させる必要があります。これまでの「チェック中です」はマウスが砂時計になってクリックに反応しないとか、キーボードが反応しなくなるとかの形で、ユーザの操作を不可能にする形で暗黙にユーザに与えられていたわけですが、それと全く違う種類のフィードバックが必要になるわけです。

この章の最初は、このフィードバックを与える為に、具体的なテクニックの紹介です。

結果だけ言えば、チェック中は、入力したフィールドのすぐ横で何か小さなマークが回転していて、エラーが無ければ、チェック完了後に、そのマークが消える、エラーがあれば、マークが消えると同時にそのすぐ横にエラーメッセージを表示するという、そういうUIを作る方法です。

そのコードは、特にビックリするような凄いコードではないのですが、そのコードが必要となる背景、このコードはAjaxならではの新しい種類の問題に対する対策ですよ、ということが、詳しく説明してあって、そこがなるほどと思わせました。

そして、その次の項目がまた素晴しいので、これは次のエントリーで解説します。