連載:Ajaxで作るインタラクティブWebアプリケーション (3)

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


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

Ajaxライブラリでフォトアルバム開発の最終回。第1回「Ajaxフォトアルバムのフェードイン画像フレームを作ろう」と第2回「ズーミングできるWebフォトアルバムウィンドウを作ろう」で作ったアルバムに非同期通信機能を実装する。CGIのJSON出力処理と、出力されるJSONを見ておこう(編集部)

 PhtoAlbumを完成させよう

 AjaxPhtoAlbumの開発を解説してきたこの連載も今回が最終回となる。前回までは、ダミーのデータを使用してアルバムの表示機能を完成させてきたが、今回はようやくAjaxのキモである非同期通信について解説したい。通信機能を追加すれば、一通りの機能がそろいAjaxアプリケーションとして完成する。

 Ajaxの「非同期」とは非同期通信ではない

 本連載はAjaxについての連載ながら、非同期通信についてあえて解説を後に回している。説明するまでもなく、AjaxのAは非同期(Asynchronous)を意味しており、従来のWebアプリケーションのインターフェイスとの最も大きな違いもこの部分にあるわけだが、Ajaxのいう「非同期」は、いわゆるXMLHTTPRequestによる「非同期通信」とは同じことではないことを強調しておきたいと考えたので、このような構成を取ってみた。

 Ajaxと呼ばれるアプローチが実現しているのは、ユーザーの操作とその処理との「非同期」である。もちろんそれを実現するには、非同期的な通信技術が必要不可欠ではあるのだが、非同期通信はあくまでユーザーに自然な操作性を提供するための手段であって、非同期通信を行っていればAjaxが実現できるわけではない。ユーザーへのインタラクションが適切でなければ、通信が非同期であってもユーザーのストレスは解消されない。

 逆にいえば、ユーザーに十分な操作が提供できていれば、同期的な通信が妥当な場合もある。Googleサジェストでは、いわゆるAjax的な非同期通信が行われるのはキー入力時のサジェスト機能だけで、検索ワードを決定した後は通常の通信が行われる。検索の通信自体も非同期に行い、検索結果を差し替えることだってできるだろうが、検索ワードが決定した時点でユーザーの操作は完結しており、ここで非同期通信を行うことはさほどユーザービリティの向上にならないのではないだろうか。むしろ通常のGoogleの動作と同じであった方が、余計な混乱を招かないともいえる。

  なお、現在googleは検索画面のAjax化を実験中のようだが、これは複数ページの検索結果の次ページを先読みすることでページ表示を高速化するという手法をとっており、検索結果画面のインターフェイスは変更しない(挙動自体は従来どおりの同期的ページ遷移)という方針のようだ(参考:責任転嫁 Web2.0 - Google検索がAjax対応)。

 重要なのは同期か非同期かではなく、ユーザーの操作性のために何ができるかである。WebサイトやWebアプリケーションの機能を、従来のサーバリクエストではなく「ユーザーの操作」という単位で切り分け、JavaScriptや非同期通信といった技術でその機能を実現すること。これがAjaxの思想ではないだろうか。

 JavaScriptライブラリの最新状況

 今回も本題に入る前に、前回記事公開以降のJavaScriptライブラリの動向を補足しておきたい。前回も本連載で使用しているライブラリ(Prototypescript.aculo.us)のバージョンアップをお知らせしたが、script.aculo.usはさらに1.5.3が公開されており、バグの修正や機能追加が行われている。本当にAjaxの世界は変化が激しい。

 また、米Yahoo!からも、同社で開発されたJavascript UIライブラリ「Yahoo UI Library」が公開された。通信機能やDOM操作、アニメーションエフェクト、ドラッグ&ドロップなどはもちろん、ツリービューやカレンダーによる日付指定なども用意された高機能なライブラリだ。JavaScriptライブラリの有力な選択肢が増えたといえるだろう。各機能はコンポーネント化されており、部分的にYahoo UIを利用することもできる。

1/3

 INDEX

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







古くて新しいAjaxの真実を見極める
「Webインターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう
最終更新 2005/8/2


HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間