WWW完全制覇 第4回

進化するWebページの中身はどうなっている？

HTMLからXMLへ！Webを彩るコンテンツを知ろう

Web 2.0～Ajaxの登場～

　Webアプリケーションが当り前のように利用されるようになってからしばらくして、Web 2.0という言葉が登場し、Webの新たなビジネスの可能性に多くの人々が注目するようになった。このWeb 2.0を支える技術として注目されたのがAjax（エイジャックス）だ。

　Ajaxとは「Asynchronous JavaScript + XML」の略で、スクリプト言語のJavaScriptとWeb記述言語のXMLというオープンな技術を組み合わせて開発する手法を指した言葉である。実際にはAjaxというまったく新しい技術があるのではなく、従来からある標準的な技術を組み合わせて、より効果的な利用方法を提唱したものである。

　ではAjaxが持つ、3つの特徴について説明しよう。まず第1の特徴としては、AjaxはHTMLとCSS、DOMといったWeb標準の技術により動的な表示ができるという点が挙げられる。たとえば、マウスのカーソルを合わせるとテキストの色が変化したり、ドラッグ操作で地図を動かすといった表現がある。

　このようなマウスのアクションによって動的にHTML文書がコントロールされる仕組みは「Dynamic HTML」と呼ばれていた。その後W3Cによって標準化されDOM（Document Object Model）と呼ばれる仕様になる。これにより、HTMLの文書やタグで記述された構造、CSSに記述する修飾にいたるまで、スクリプトから追加・変更・削除が可能となる。また、プラットフォームに依存しないため、どのブラウザからでも動的なコンテンツが利用できる。

画面1　Ajaxを用いている典型的なサービス「Google Map」

　DOMではHTMLおよびCSS文書に記述される要素を「オブジェクト」と捉えている。具体的には、そのオブジェクトに対しマウスでクリックされたというイベントが発生したらオブジェクトをどのように更新するか、ということをJavaScriptで記述している。この仕組みがあるおかげで、Webアプリケーションのユーザーインターフェイスとして、ブラウザを効果的に使うことができるのである。

　第2の特徴は、Ajaxの名前の由来ともなっている非同期通信（Asynchronous：エイシンクロナス）という仕組みである。これまでのWebサイトでは、ユーザーが何らかのアクションを行なうたびにそれをWebサーバに送って処理し、結果をその都度画面に表示していた。つまり、クライアントのブラウザはWebサーバにHTTPリクエストを送り、HTTPレスポンスが返ってくるまで何もせず応答を待つという仕組みだった。

　しかしAjaxでは、ブラウザに追加された非同期通信機能を使って、サーバからの応答を待たずに次の処理が行なえる。その非同期という特徴を具体的に表わしている仕組みが「XMLHttpRequest」（図3）である。非同期通信によるデータ転送のインターフェイスは、JavaScript上ではXMLHttpRequestオブジェクトとして提供されている。このオブジェクトはマイクロソフトのInternet Explorerに実装されたあと、ほかのブラウザが追随したものである。

図3　AjaxによるWebアプリケーション

　そして3つ目の特徴が、XML形式の応答ということである。XML形式の応答は修飾を取り払ったデータだけが記述されているので、受信したデータの扱い方はHTMLに比べて自由度が高い。また、XSLTでHTMLに変換する際、XMLデータから変換するデータの取捨選択を行なうことも可能だ。変換したあとの文章の修飾はCSSファイルに記述しておけばよいので、Webページの統一感を損なうことのない表示ができる。また、XMLデータでサーバの処理結果を受け取ったほうが、非同期通信でかつ動的にブラウザの表示を変更するのに都合がよいこともある。たとえば、広告などのように一定のタイミングでコンテンツが動的に変わるWebページなどでは、その広告を表示する以外の部分は変更する必要がない。つまり、非同期通信で必要な情報だけを、その都度受け取れればよいということだ。

　さらに、非同期通信はサーバ側にとってもメリットがある。サーバ側では、応答した情報がどのように表示されるかということをまったく考えなくてよい。サーバ側のプログラムをシンプルにし、かつ処理負荷を軽減させることが期待できるのである。