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

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


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

　PhtoAlbumを完成させよう
- PR -

　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ライブラリの動向を補足しておきたい。前回も本連載で使用しているライブラリ（Prototype、script.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アプリケーション バックナンバー



AjaxとPHPでリッチクライアント

Ajaxを扱うためのサーバーサイドのPHPライブラリを紹介する。リリースされたライブラリ、AjaxACを活用して好みの検索窓に改造してみよう

最終更新 2006/4/29


Ajax うきうき Watch

Ajaxという流行技術の定義を明確にしながら、Ajaxの動向からうきうきするような面白いもの、確実に押さえておきたいものを厳選してお届けしていく

最終更新 2008/5/26


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

TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事
  • NFCやLTE対応予定のiPhoneと、先行するAndroid （2012/2/9）
    iPhoneとAndroid、そしてWindows Phoneという3つのOSの今後を占う。それぞれの通信規格とコンセプトは？
  • 家電のUIになるブラウザ （2012/2/3）
    未来の家電はインターネットに接続でき、ブラウザが内蔵されてくる。家電にブラウザが載ったらどうなるか？ 未来のホームネットワークを想像しよう
  • 「汎用のUI技術」として広がるHTML5 （2012/2/2）
    すさまじい勢いで成長しているHTML5を中心としたオープンなWebプラットフォーム。HTML5やAPI、Webブラウザのアップデート情報をお伝えする
  • ビヨンド・クールジャパン!? （2012/1/27）
    コンテンツという文化力と、ものづくりという技術力を掛け合わせる。両方を国内に持ち合わせている国は多くない。チャンスなのだ

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

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH