|
|
こんにちは，結城浩です。
この連載では，Web技術を具体的でシンプルなサンプル・プログラムを通して紹介します。進歩と変化の激しいWeb技術は，手際よく本質をつかんでいきたいものですね。小さいけれどもわかりやすいサンプルを実際に動かして「なるほど，こういうものだったのか」と思っていただければありがたいです。
題材は，新しいものから基本的なものまで幅広く取り扱っていく予定です。第1回のテーマは「Ajax」です。サンプル・プログラムは三つあります。
動的で応答性のよいWebアプリを作る技術
Ajax（エイジャックス）は，一言でいえば「JavaScriptを使って動的なWebアプリケーションを作るための技術の総称」です。特に，背後で「非同期的な通信を伴う」もののことを指します。「非同期的な」というのは難しそうな言葉ですね。Ajaxの場合には「サーバーと通信している最中でも，ユーザーは通信完了を待たずに操作を続けられる」という意味だと理解しておけばイメージがつかめるでしょう。
Ajaxの特徴は，ブラウザに表示されている画面を変化させる際に「クリックしてページを遷移する」というアクションを伴わないことです。通常のWebページでは，画面を変化させるときに，リンクをたどったりボタンを押したりして，ページを遷移させる必要があります。ちょうど紙芝居のようにページを移っていくことで動作が進むのです。でもこれでは，ページ遷移が完了するまでユーザーは次のアクションを行うことができません。毎回ページ全体を通信することになるので，流れるデータ量もばかにはなりません。ですから，ユーザーの待ち時間が長く，応答性が悪くなる危険性があります。
Ajaxを用いたページでは，基本的に同じURLの，同じページのままで画面が変化します。また，データは必要になるたびに，バックグラウンドでサーバーから取得します。したがって，動的で応答性のよいWebアプリケーションを作ることができます。
JavaScriptを利用して，ページ遷移を伴わない動的なWebアプリケーションを作るという手法は「ダイナミックHTML」という呼称でずっと以前からありました。Ajaxは概念としてダイナミックHTMLも含んでいて，さらに非同期的な通信も加えたものと考えてください。
JavaScriptが中心的な役割を果たす
「通常のWebページ」と「Ajaxを用いたページ」の動作を，概念的なシーケンス図（図1と図2）を使って比較しました。図1では，ユーザーがアクションするごとにページが遷移します。
 |
| 図1●通常のWebページのシーケンス図 |
図2では，ユーザーがアクションを行ってもページは遷移しません。
 |
| 図2●Ajaxを用いたWebページのシーケンス図 |
図2を見ると，WebブラウザとWebサーバーの間にJavaScriptがあるのがわかるでしょう。JavaScriptは，ユーザーのアクションをいったん関数コールとして受け取り，通信と，表示の更新処理を行います。
具体的なプログラムを見ないとピンと来ないかもしれませんが， AjaxではJavaScriptが中心的な役割を果たしている様子をつかんでください。
なお，「Ajax」という単語は「Asynchronous JavaScript+XML」の略です。Jesse James Garrettという人が，「Ajax: A New Approach to Web Applications」というWebページ＊1で命名しました。もともとは，クライアント側のプログラミング言語としてJavaScriptを用い，通信のデータ形式としてXML＊2を用いて，非同期的（asynchronous）に通信を行うものを指していました。最近では特にXMLを用いなくてもAjaxと呼ばれているようです。今回作成したサンプル・プログラムでも，通信のデータ形式としてXMLは用いませんでした。
三つのサンプル・プログラムを作成する
この記事では，以下の3個のサンプル・プログラムを作成します。(1)チューリング賞＊3の受賞者を表示する「turing」，(2)複数の画像を動的に表示する「gallery」，(3)Google Mapsもどきの「maps」――です。ここではすべてのプログラムは掲載できませんが，日経ソフトウエアのWebサイト＊4からサンプル・プログラムのソースコードを入手できます。
まずサンプル・プログラムを動作させる準備をしましょう。必要なのは，JavaScriptが動作するWebブラウザと，Perlで書かれたCGIが動作するWebサーバーです。筆者は，WebブラウザもWebサーバーも1台のWindows XPマシンで動かしています。これはネットワークから離れているときでも手軽に動作が試せるので便利な方法です。なお，筆者が動作を確認した環境は，WebブラウザがMozilla Firefox 1.5，WebサーバーがApache HTTP Server 2.0，Perlの処理系がActive Perl v5.8.8――です。これらのソフトウエアは，インターネットで入手できます＊5
