Ajax: Webアプリケーション開発の新しいアプローチ

本文書は、Jesse James Garrett 氏による “ajax: a new approach to web applications” を、Creative Commons の Attribution ライセンスに基づき、訳出したものです。

本文書の訳には、誤っている箇所が多々あると思います。また、日本語的にうまく訳せない、あるいはわかりにくいところは、激しく意訳しています。しかし、話のおおよその流れについては外してはいないと思いますので、細かいことは気にしないでください。

ちなみに「覚え書き@kazuhi.to: DESIGN IT! 1日目」によると、 Ajax は「エイジャックス」と発音するとのことです。

This work is licensed under a Creative Commons License.

Ajax: Webアプリケーション開発の新しいアプローチ

現在のインタラクション・デザインにおいて「グラマラス」であると評されうるのは、どちらかといえば、Web アプリケーションを創造することであろう。つまるところ、あなたが、Web 上にないインタラクション・デザインについて誰かがあれこれいうのを聞いたのはいつのことだっただろうか(あぁ、iPod を除くとしての話しだが)。全てのクールで革新的なプロジェクトは、オンラインにある。

にも関わらず、Web におけるインタラクションをデザインする者たちは、それを手助けすることはできず、デスクトップソフトウェアを作っている我々の仲間たちに対して少しばかりの羨望を感じるだけだった。デスクトップアプリケーションは、Web には手の届かない豊かさ・応答性を持っているかのように思われている。Web が急速に拡大することができた要因となった単純さは、我々がもたらすことのできる体験と、デスクトップアプリケーションのユーザが得られる体験との間にズレをももたらすことになった。

しかし、両者の溝もやがて埋まりつつある。Google Suggest を見よ。キーをタイプするのにあわせてほとんど即座に候補が提示されるその様を、じっくりと観察するがいい。今度は Google Maps を見てみよう。地図をズームインする。カーソルでつかみ、地図をあちこちに少しずつスクロールしてみよう。再び、ページがリロードされるのを待つことなく、全てはほとんど即座に起こる。

Google Suggest と Google Maps は、我々がこのサイト Adaptive Path で Ajax と呼んでいる、Web アプリケーション開発における新しいアプローチの実例を示している。Ajax とは “Asynchronous JavaScript + XML” の略称であり、Web において可能であることの本質的な変化を表している。

Ajax の定義

Ajax は技術そのものではない。それは、それぞれに繁栄している様々な技術を、新しいやり方で強力に組み合わせることなのだ。Ajax は次の技術の組み合わせである。

旧来の Web アプリケーションの動作モデルは以下の通りである。たいていにおいて、インタフェイスに対するユーザの操作により、Web サーバへのリクエストが発生する。Web サーバは、データを取得・解析し、旧式の様々なシステムとやりとりするといった処理を行い、それからクライアントに対して HTML ページを返す。それは、ハイパーテキストを媒介するという Web の元々の用途に適合するモデルではあるが、”The Elements of User Experience” のファンたちが知っているように、ハイパーテキストにとって都合がいいからといってそれが必ずしもソフトウェア・アプリケーションにとってもいいものであるというわけではない。

図 1: 伝統的な Web アプリケーションモデル(左)と、Ajax モデル(右)との比較

旧来のアプローチは多くの技術的な意義を生み出してきたが、しかし、優れたユーザ体験を生み出してきたわけではなかった。サーバが何か処理を行っている間、ユーザは何をしているのか? そう、ただ待っているだけだ。そして、タスクのあらゆる段階において、ユーザは何かを待っているだけなのだ。

はっきりしていることは、もし我々がアプリケーションデザインのために Web を一から作り直すとしたら、ユーザをただぶらぶらと待たせるようなことはしなかっただろうということだ。いったんインタフェイスがロードされたら、アプリケーションがサーバとのやりとりを必要とするたびに毎回、ユーザとのやりとりが止まってしまう必要があるだろうか。それどころか、アプリケーションがサーバとやりとりするのを、なぜユーザがいちいち見ていなければならないのか。

Ajax はどのように違うのか

Ajax アプリケーションは、Web アプリケーションが本来持つ「開始 - 終了 - 開始 - 終了」というやりとりを、ユーザとサーバとの仲介者 - Ajax エンジン - を導入することにより、取り除く。それは、反応を鈍くする要因となるアプリケーションにもうひとつのレイヤーを加えることのように見えるかもしれないが、事実はその逆である。

セッション開始時に、ブラウザは Web ページを読み込むかわりに、JavaScript で記述され、通常は隠されたフレームに埋め込まれた Ajax エンジンを読み込む。そのエンジンは、ユーザが目にするインタフェイスをレンダリングすることと、ユーザの利益のためにサーバとコミュニケートすることとの両方を担う。Ajax エンジンにより、サーバとのコミュニケーションから独立して、ユーザとアプリケーションとが非同期にやりとりすることが可能となる。その結果、ユーザは、サーバが何かをしているのを待ちながら空のウィンドウや砂時計のアイコンを散りばめることは決してないだろう。

図 2: 伝統的な Web アプリケーションにおける同期型のやりとり(上)と、Ajax アプリケーションにおける非同期型のやりとり(下)

通常であれば HTTP リクエストを発行するユーザによるアクションは、代わりに Ajax エンジンを呼び出す JavaScript のフォームを受け取る。ユーザのアクションに対するレスポンスの中でも、簡単なヴァリデーション、メモリ上でのデータの編集、ナヴィゲーションといった、サーバへ処理を返す必要のないものについては、エンジン自らが処理を行う。ユーザへ応答するために、サブミットされたデータを処理したり、インタフェイスを生成するコードが追加で必要になったり、新たにデータを取得したりするためになにかをサーバに任せる必要があったりした場合に、ユーザとアプリケーションとのやりとりを失速させることなく、エンジンは、通常は XML を用いて、非同期にリクエストを発行する。

Ajax を用いているアプリケーション

Google は Ajax のアプローチに対して、莫大な投資を行っている。昨年来導入された Google のプロダクト(OrkutGmail、最新のベータバージョンとしては、Google GroupsGoogle SuggestGoogle Maps)は Ajax アプリケーションである(それら Ajax 実装の根幹を知るには、”Gmail Agent API - Mail Notifier - Address Book Importer * Johnvey.com” (Gmail)、”Chris Justus - Server Side Guy: Google Suggest Dissected…” (Google Suggest)、”as simple as possible, but no simpler: Mapping Google” (Google Maps) といった優れた分析にあたるように)。他には次のようなものがある。人々に好まれる様々な特色を持つ Flickr は Ajax に多くを依っているし、Amazon の A9.com の検索エンジンは、同様のテクニックを応用している。

これらのプロジェクトは、Ajax が単に技術的な意味を持つのみならず、現実のアプリケーションにとって実践的であることを示している。それは、研究室でのみ動作するようなもうひとつの技術などではないのだ。Ajax アプリケーションは、Google Suggest のようなたったひとつの機能を持つ単純なものから、複雑で洗練された Google Maps のようなものまで、どんな規模のものにも適合しうる。

Adaptive Path においてここ数ヶ月、我々は Ajax を用いた制作を行ってきたが、Ajax アプリケーションがもたらし得る豊かな相互作用、応答性の表面をなでているに過ぎないということに気づいた。Ajax は Web アプリケーションにとって重要な開発手法であり、その重要性はますます大きくなっている。これらの技術をどのように利用すればいいかを知っている開発者はたくさんいるのだから、Ajax のもたらす競争力によって優位に立っている Google に続く組織がもっとたくさん現れることを、我々は期待している。

前進せよ

Ajax アプリケーションを創造することにおけるもっとも大きな挑戦は、技術的なものではない。Ajax の核となる技術は成熟・安定しているし、よく知られたものだ。むしろ、そのチャレンジはそれらアプリケーションのデザイナにとってのものである。Web の限界について我々が知っていると思っていることを忘れ去ること。そして、もっと広く、豊かな可能性に思いを馳せること。

それはきっと楽しいことだろう。

著者について

Jesse James Garrett は Adaptive Path の設立者。2005 年、彼は “The Elements of User Experience” に関するセミナーを Boulder や Seattle、そして地球上の様々な場所で行うだろう。

訳者による補足 - Ajax が切り開く Web アプリケーションの進化

上記に訳出した文書に対する補足、あるいは本文書を訳出した後の Web 上での Ajax に対する反響等を見て考えたことを以下に述べます。

新しいものに目がない誰もが、Google の各プロダクトや Flickr, A9.com 等が提示する新しい Web インタフェイスに触れ、殊更な興奮に満ちた書きぶりでエントリを起こすことはないまでも「これはなんかすごい! かっこいい!」とその動向を密やかに探っていたのは、それらのアプローチが Ajax と名付けられた途端、それまで間歇的にしか口にされることのなかったその技術が、Ajax という名のものとしてみるみる間に人口に膾炙したことからも明らかです。

訳者の Blog である antipop においても、Ajax というか、昨年来の Google がリリースした各プロダクトにより喚起された JavaScript の新たな面白さに発奮させられ、ほんの些細な実験等を行ってきました。主に海外のリソースにあたり、その周辺技術を調べていた最中、ma.la と名乗る方による日本語のリソース群を発見するにいたります。

Google 等が垣間見せた Web インタフェイスの新たな姿、パラフレーズすれば Web アプリケーションのプレゼンテーション層は今後大きく変貌することになります。その中の一部のアプローチが先日 Ajax と名付けられ、広まりつつあるわけです。今後、たくさんのひとが具体的な実装、またフレームワークという形での統合を進めていくでしょう。その過程において、上にリンクした Blog, Wiki は、その author である ma.la 氏が(何年も前から)提示してきた実装・アイディア・ヴィジョンの卓抜ゆえに、必読リソースとして扱われるべきものであると思います。以下に述べる考察は、ma.la 氏のリソース、あるいは IRC 上での対話から得られた知見を、訳者が理解し得た範囲でまとめたものです(記述・考え方に間違いがあるとすれば、それはもちろん訳者の理解不足によるものです)。また、ma.la 氏は、第 4 回 Wiki ばなのプレゼンタとして、「とんがった機能を持つ、Wikiの未来を見せるアプリ群について、そのとんがり部分について存分に見せ」る予定であるとのことです。

訳者 Blog で行った タイトル全文インクリメンタル検索は、それはそれで全く面白くないわけではない、それなりに好意的な反応を得られたものでした。しかし、そんなものは ma.la 氏が数年前から実践していることの、劣化コピーに過ぎません。エントリのタイトル「Movable Type な Blog の全エントリを JavaScript with XMLHttpRequest でインクリメンタル検索する」が示すとおり、実際には、これは Ajax というようなものではありません(Asynchronous ではないので)。また、この程度の実装であれば、わざわざ対応ブラウザの限られる XMLHttpRequest を使うことなく、サーバ側で JavaScript の配列をコードとして書き出し、それをクライアント側にロードさせてやる方が、アクセス性という観点からは優れています。

しかし、それをなぜ JavaScript with XMLHttpRequest という形で実装したのか。それは、Ajax と呼ばれもするアプローチが示す可能性の一部である、検索やナヴィゲーションにおけるパラダイムの変化の兆しを自分でも実際にサンプルを作ってみることにより、実感するためです。その変化とはつまり、ナヴィゲーションの解釈や検索を実行する主体のサーバサイドからクライアントサイドへの移行ということです。具体的に考えてみましょう。

まずはナヴィゲーションについて。たとえば Google で検索を行う場合、一画面におさまり切らない検索結果は、ページ下部にて数字や「前へ / 次へ」といったナヴィゲーションにより、次以降が存在することを知らされます。そして、次ページへ移る際には、「次へ」あるいは数字によるリンクをクリックし、サーバがなにか処理しレスポンスを返すのを待ちます。これは、上に訳出した本文書で述べられている、典型的な旧来型の Web アプリケーションの動作です。ここで、考え方を変えてみます。Ajax の発想によれば、「なぜそこで待たなければならないのか」ということになります。次ページ・前ぺージの結果などというものは、クライアントに先読みしてしまえばいいわけです。これまでサーバ側で行っていた処理を、いまや通信回線も処理能力も飛躍的に高まってきているクライアントへ委譲すること。先読みとはいっても、必要とするデータはたかが画像一枚程度のものです。

検索について。これはこの Blog で行ったタイトル全文インクリメンタル検索の例が示す通り、1,000 件あるいは数千件程度の小さなレコードの固まりを検索するのに、クライアントからのリクエストがあるたびにサーバサイドでいちいち処理をしてやる必要はないのです。そのとき、サーバはあらかじめ作成しておいたデータの固まりをぽんっとクライアントにわたしてやるだけでよい。検索を実行するのは、クライアント上で動く Ajax エンジンです。そして、「サブミットされたデータを処理したり、インタフェイスを生成するコードが追加で必要になったり、新たにデータを取得したりするためになにかをサーバに任せる必要があったりした場合に、ユーザとアプリケーションとのやりとりを失速させることなく、エンジンは、通常は XML を用いて、非同期にリクエストを発行す」ればいいのです。

この、検索とナヴィゲーションにおけるパラダイムシフトは、しかしまだ一般化されているわけではありません。そもそも実装するにも、多大な困難が立ちふさがるであろうことは目に見えています。しかし、Google のインタフェイスがこのようになったとしたら……と考えてみると、触っていてとても気持ちのいい、使いやすいものになることが容易に予想しうるのではないかと思います。「Web の限界について我々が知っていると思っていることを忘れ去ること。そして、もっと広く、豊かな可能性に思いを馳せること」。ここで述べたのは(また、僕が理解し得ることは)ほんの触り程度のことですが、しかし、Web はこれから間違いなくもっと、ずっと楽しくなります。

参考リソース

本文書は概略であり、具体的な技術的詳細には触れていません。本文中に述べられている Ajax の中心となる JavaScript による XMLHttpRequest の詳細・実際の Ajax アプリケーションの様々な実例については、下記リンク集からたどることのできる諸リソースを参照してください。