最近，Webエンジニアのまわりで注目されている技術に「Ajax」(エイジャックス)があります。従来のWebアプリケーションはインタラクティブな処理の際，ユーザーにページのリロード作業を強いることが多く，決して操作性が良いとは言えませんでした。しかしAjaxを利用すると，サーバーと非同期な通信ができるので，ページをリロードすることなくコンテンツを更新できます。このためデスクトップ・アプリケーションと同様な操作性を持つWebアプリケーションを作成できます。本連載では，実際にAjaxアプリケーションを開発しながら，Ajaxアプリケーションの動作の仕組みや，既存のWebアプリケーションとの違い，実装上の注意点などについて紹介していきます。
「枯れた技術」を組み合わせる
筆者にとってAjaxの第一印象は強烈でした。「Google Map」のスムーズな地図操作，「Google Suggest」のリアルタイムな補完候補表示，どれをとっても旧来のWebインタフェースと異なります。きっと特殊な技術が使われてるに違いない。そう思って調べたのですが，その正体はなんとDHTMLとJavaScriptでした。そうと分かると，「自分で何か作ってみよう」という気持ちになりました。JavaScriptは手の届きやすい「枯れている」技術だったからです。 現在までに，テキストのインクリメンタル検索機能や，かな漢字変換機能を提供するAjaxアプリケーション（図1[拡大表示]）などを制作しています。これらのアプリケーションについては後述します。米国のコンサルティング会社Adaptive Path社の創始者の1人であるJesse James Garrett氏が書いた「Ajax: A New Approach to Web Applications」というエッセイが，この「新しい技術」の注目度を一気に高めました。同氏によりAjaxと名付けれらた新技術は，Webアプリケーション開発者を中心に，またたくまに世界中に広がっていきました。 Google以外にもさまざまな企業が，Ajaxアプリケーションによるサービスを提供し始めています。
JavaScript自体は10年前から存在します。しかしそれを有効活用したサイトは私の知る限りほとんどありませんでした。無意味に文字が流れたり，広告がポップアップしたりと，私から見れば開発者の一方的な押し付けとしか思えない利用方法ばかりが目立ちました。
しかしAjaxでは，XmlHttpRequestという強力な技術を組み合わせることで，非同期通信，双方向インタラクションを実現する新たなツールとしてJavaScriptを利用しています。単なる一方通行のインタフェースでは実現できることは限られますが，サーバー通信を含むインタラクティブなものが実現できるとなると，その可能性はぐっと広がります。
Ajaxが支持される理由
最初に書いたように，Ajaxは既存技術の「新しい」組み合わせです。具体的には，DHTMLやXML，XMLHttpRequest，CSS，そしてそれらを組み合せるJavaScriptといった技術で構成されます。ただし，これらは単なる技術的な道具立てであり，Ajaxが支持されている理由ではありません。それでは何がAjaxを魅力的なものにしているのでしょうか。画面遷移が少なく，ユーザーの操作を妨げないインタフェースを実現できるというのが大きな理由の一つです。しかし，それだけでは不十分です。このようなユーザビリティを提供する手段は，なにもAjaxに限らないからです。例えば，FlashやJavaアプレットなどが利用できます。開発のしやすさを考えると，開発環境が整備されているFlashの方が良いかもしれません。
Ajaxが支持される理由は，ユーザーの立場から考えるとはっきりします。Ajaxには，FlashやJavaアプレットと違い，次の2つの大きな利点があります。
- HTMLフォームと共通のインタフェースを持つ
- 特別なソフトウエアを導入しなくて良い
FlashやJavaアプレットは，それぞれWebブラウザとは独立したコンポーネントとして動作します。このため，フォームの見た目や操作性が通常のHTMLフォームと異なることが多く，これが時にユーザーにとって負担となります。これに対しAjaxでは，テキスト・エリアやチェック・ボックスなどの部品の大部分は，Webブラウザが提供するものを利用します。操作性も慣れ親しんだHTMLフォームとほとんど変わりません。ユーザーにかかる負担は少ないのです。
特別なソフトウエアを導入しなくて良いというのもメリットの一つです。Flashのサイトを閲覧するには，Flashプレーヤを事前にインストールする必要があります。JavaアプレットならばJava実行環境をインストールしなければなりません。これに対してAjaxでは，一般的なWebブラウザさえ用意すれば良く，それ以外にユーザーに強いる作業はありません。
つまりAjaxが支持される理由は，画面遷移が少なく，操作性の良いインタラクティブなWebページを，これまでのWeb GUI延長線上で，ユーザー・フレンドリな形で提供できる点にあると言えます。 Ajaxは技術的な部分が注目されがちですが，ユーザー指向のWebアプリケーション作成という意味でも重要な役割を担っています。
Ajaxを使ったアプリケーション例
Ajaxの具体的な利用例として，私が手がけた実験的なアプリケーションをいくつか紹介します。
●インクリメンタル検索
Ajaxを使った代表的なインタフェースにインクリメンタル検索があります。筆者が公開する「Ajaxを使ったKWIC」のサイトには，「青空文庫」が公開している電子書籍をインクリメンタル検索するインタフェースを用意しています。インクリメンタル検索では，ユーザーが文字を入力した瞬間に検索結果が逐一出力されます。たとえば，「あ」と入力するだけで「あ」を含む文脈が表示されます。その後，「い」と入力すれば，「あい」を含む文脈が検索されます（図2[拡大表示]）。
通常のWeb検索では，キーワードをすべて入力したあと，検索ボタンをクリックすることでクエリー処理を実行していました。インクリメンタル検索では，ユーザーは検索ボタンすらクリックする必要がなく，直感的な操作で検索結果が得られます。
●かな漢字変換
「Ajaxを使った日本語Full IME」で公開しているのは，通常のIMEをほぼ再現したAjaxアプリケーションです。クライアント・サイド（JavaScript）でローマ字の文字列をひらがな文字列に変換し，ユーザーがスペース・キー押したタイミングで，バックエンドのサーバーにひらがな文字列を送信しています。バックエンド・サーバーは，ひらがな文字列から漢字の変換候補を最大30個生成し，クライアントに返します。サーバー・サイドのかな漢字変換エンジンには，形態素解析器「MeCab」を，かな漢字変換用に改良したプログラムを使っています。このAjaxアプリケーションを利用することで，ローカルのOS環境にIMEがインストールされていないPCでも日本語の入力が可能となります。実際，海外旅行中のネット・カフェや海外留学中のホスト・ファミリ宅からこのAjaxアプリケーションを利用するユーザーが増えているようです。
本アプリケーションと同様の仕組みで，郵便番号をキーにして住所を自動入力したり，人名をキーに自動でふりがな入力するようなWebアプリケーションも作成できるでしょう。通販サイトなどが採用すれば，ユーザーの利便性は大幅に向上するはずです。
●ローマ字インクリメンタル検索
日本語で検索を行う場合，通常，次の4つの作業が必要になります。- IMEを起動
- ローマ字でキーワードを入力
- 変換を候補から選択
- 検索ボタンをクリックして日本語キーワードを送信
ローマ字によるインクリメンタル検索は，かな漢字変換と通常のインクリメンタル検索を組み合わせることで実現できます。まず，ユーザーが入力したローマ字の文字列に対し，バックエンドでかな漢字変換を行って何個かの変換候補を得ます。そして，それらを検索キーワードとして先ほどのインクリメンタル検索を実施するのです。
●手書き文字認識
「Ajaxを使った手書き文字認識」で公開しているのは，マウスで描いた手書き文字を認識し，テキスト・エリアに文字を入力するアプリケーションです（図4[拡大表示]）。WindowsのIMEパッドのWeb版に当たります。このアプリケーションでは，JavaScriptとDHTMLを使ってキャンバスを作っています。ユーザーが手書き文字を1画描くたびに，これまで入力された図形の座標列をサーバーに非同期に送信しています。サーバー・サイドではこの座標列から文字認識を行い，もっともらしい結果を10個返します。サーバー・サイドでの認識エンジンには，機械学習の技術を使っています。また，オープンソースの手書き文字認識エンジン「Tomoe」の手書きデータを学習サンプルとして用いています。
本アプリケーションの技術は，漢字の教育用アプリケーション，オンライン漢和辞書などに応用できるのではないかと考えています。
ここまで，Ajaxの概要や利点，どのようなアプリケーションが作成できるのかなどについて見てきました。ただ今回は，具体的にどのようにAjaxアプリケーションを作成するのかについてまでは触れられませんでした。次回は，Ajaxを使ったインクリメンタル検索アプリケーションを実際に作成する手順を紹介します。アプリケーション作成を通じて，Ajaxについての理解を深めていただければと思います。
工藤 拓（くどう たく）1976年生まれ。奈良先端科学技術大学院大学 情報科学研究科 松本研究室にて自然言語処理学，機械学習を研究。在学中に，次世代形態素解析エンジン「MeCab」や，係り受け解析器「CaboCha」など多数のソフトウエアを開発する。平成14年には自然言語処理学会年次大会優秀発表賞を受賞。 |
