連載：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ライブラリの動向を補足しておきたい。前回も本連載で使用しているライブラリ（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インターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう 最終更新 2005/8/2
|
|
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
 |
|
|
|
|
