連載：Ajaxで作るインタラクティブWebアプリケーション （3）

JSONによるデータ通信でAjaxアルバムを完成させる

田中 孝太郎
dotimpac.to
2006/3/17

PrototypeのAjaxオブジェクト

　続いて、JavaScript側の通信処理を見ていこう。今回はphotoalbum.jsの一部のみを変更しており、大部分は前回のスクリプトと同様である。

if(item) { 　　　　this.openPhoto(item); 　　} else { 　　　　// PhtoAlbumデータを非同期通信で取得 　　　　 // リクエスト用のパラメータ 　　　　var options = { 　　　　　method : 'get', 　　　　　parameters : 'dir=' + fname, 　　　　　onFailure: function() { alert("通信に失敗しました"); }, 　　　　　onComplete: function(res) { 　　　　　　　　　　// 応答されたJSONをオブジェクトに変換して表示 　　　　　　　　　　var items = eval( '(' + res.responseText + ')' ); 　　　　　　　　　　this.openPhoto(items); 　　　　　　　　}.bind(this) 　　　　　}; 　　　　　 // リクエスト 　　　　　new Ajax.Request(LOCATION, options); 　　}

　XMLHTTPの通信処理のための機能は、PrototypeでAjaxオブジェクトとして用意されている。XMLHTTPRequestはブラウザによって実装が異なり、処理を切り替えなければならないのだが、Prototypeの機能を使えば、互換性を意識せずに簡単に非同期通信を行うことができる。今回は通常のリクエストである「Ajax.Request」を使用するが、データを部分更新するような場合には、更新要素のidを指定すれば通信後自動的にデータを更新してくれる「Ajax.Updater」を使用すると便利だ。

• Ajax.Requestリファレンス
• Ajax.updaterリファレンス

　Ajax.Requestに、urlとオプションを渡してやることで通信を行う。オプションにリクエストのパラメータ、成功時、エラー時などの処理を関数オブジェクトで渡すことで、取得したデータの処理やエラー処理をすることができる。この辺りの書式は、これまでのscript.aculo.usのエフェクトなどでの処理とほぼ同じである。

　「onComplete」がリクエスト成功時の処理だ。引数にXMLHTTPのリクエストオブジェクトが格納されている。「responseText」プロパティに応答内容のJSONが含まれているため、この文字列をオブジェクトに変換し、配列に格納している。evalには式を渡す必要があるため、リテラルであるJSONをカッコでくくって

var items = eval( '(' + response.responseText + ')' );

とし、JSONをオブジェクトに変換している（ちなみに、JSONのプロパティの末尾などに余計なカンマが入っていると、このevalでIEにのみエラーが発生する。このバグはよく発生する割に見付けにくいので注意しよう）。

　cgiで出力するJSONは、前回まででJavaScriptで用意していたダミーデータと同じ形式にしておいたので、JSONをオブジェクトにしてからの処理は前回までとまったく同様である。このように、Prototypeのようなライブラリを使えば、Ajaxの非同期通信自体はまったくなんの苦労もなく実現できることが分かるだろう。

AjaxPhtoAlbumの完成

　前回までのように、今回のサンプルの動作デモも、通信もふくめてここでご覧いただければよかったのだが、諸事情でそれができなかった。Rubyのサーバ環境があればサンプルをアップロードして実行してみてほしい。前回までと違い、アルバム名をクリックすると通信中のスピナーが表示され、データを取得してからアルバム画像が表示されるのが分かるはずだ。データディレクトリに画像ファイルの入ったディレクトリを追加すればアルバムを追加することができるので、ここまで来れば十分実用的なWebアプリケーションといえるのではないだろうか。

　サンプルでは扱わなかったが、筆者の開発しているPhtoAlbumアプリpiccyでは、タグウィンドウへのドラッグ＆ドロップ機能、タイトルやコメントの編集機能なども盛り込まれている。これらの機能もPrototypeやscript.aculo.usを利用して実装されている。JavaScriptライブラリを使用して処理を追加し、Ajax.requestなどの通信処理も追加した上でサーバ側でのデータ格納処理を書けば、サンプルと同様に機能追加できるはずだ。もし実現してみたい機能やデザインがあれば、これをベースに改良してみてほしい。

• Draggable（特定idの要素をドラッグ可能にするエフェクト）リファレンス
• InPlaceEditor（クリックするとテキストエリアが表示され編集可能になる要素を作るエフェクト）リファレンス

最後に

　AjaxPhtoAlbumが完成したところで、本連載は終了となる。基本的に本連載では「有用なJavaScriptライブラリを使えば、Ajaxはさほど大変ではない」ということをいいたいと思っていたが、JavaScript自体になじみがないと難しかったかもしれない。しかし、現在のAjaxの流行は、JavaScriptの言語としての生産性の高さも証明しているのではないだろうか。個人的には、去年まで誰もが忘れていたというのが信じられないほど、便利な言語だと思っている。

　JavaScriptの勉強として、ライブラリを使ってAjaxに手を付けてみるというのは、かなり良い選択肢のはずだ。興味があればぜひチャレンジしてみてほしい。

前のページへ

3/3

ご愛読ありがとうございました

INDEX
Ajaxフォトアルバムのフェードイン画像フレームを作ろう
	Page1＜PhtoAlbumを完成させよう＞ Ajaxの「非同期」とは非同期通信ではない／JavaScriptライブラリの最新状況
	Page2＜通信機能を搭載したPhtoAlbumサンプル＞ JSONによるデータ通信／指定要素の位置まで画面をスクロールするエフェクト
	Page3＜PrototypeのAjaxオブジェクト＞

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