第1回 Webアプリのユーザビリティを改善しまくるAjax

株式会社ピーデー
川俣 晶
2005/11/2

Ajax うきうき Watchでは、Ajaxを使ったWebアプリケーションやサービス提供者、ベンダの動向から「うきうきするような」面白いもの、確実に押さえておきたいものを厳選してお届けしていきます。

本記事は2005年に執筆されたものです。Ajax全般の最新情報は「リッチクライアント & 帳票フォーラム」総合目次のカテゴリ「実践Ajax」や「Ajax技術解説」をご参照ください。

前口上

　Ajax、それはWebアプリケーションのユーザビリティを改善する切り札である。古い技術を組み合わせ、魔術のごとく生まれ変わった新しいファッションである。

　今回より、なるべく密に、Ajaxの動向をウォッチングしていきたいと思う。

　基本的には、新しい話題を中心に、厳選した面白い話題を提供していきたいと思うが、今回だけは初回でもあり、これまでのAjaxに関する話題から面白いもの、確実に押さえておきたいものをピックアップしてみたい。

　なお、ここでは主に日本語で読める情報について取り上げていく。ただし、特に重要なものについては、英語の情報を扱う場合がある。

Ajaxとは何かは「古くて新しいAjaxの真実を見極める」をご参照ください。

ハイライト1・必読の原典

• Ajax: Web アプリケーション開発の新しいアプローチ（kentaro / けんたろ氏による日本語訳）
• Ajax: A New Approach to Web Applications （英語原文）

　流行技術に典型的に見られるのは、それが何であるかを定義する明確な規定がない、あるいは規定があっても見過ごされている状況である。その結果、その名前を言ってみると、何となくムードでそれが通じるという状況が発生する。

　しかし、ムードだけでは済まされない状況も世の中にはある。技術者があいまいな言葉を使ってコミュニケーションしていては、システムが動作しない可能性があり得る。また、業者と顧客も、提供できるものが何か、欲しいものが何であるかを明確な言葉で語ることができねばトラブルのもとである。そのようなトラブルを回避するには、そもそもその技術を規定する文書をきちんと読んでおくのが大切といえる。筆者がかかわったXMLの世界では、特にこのような問題によって無用のトラブルが頻発していたので、Ajaxが同じ問題を抱え込まないためにも、特に強調して筆頭に書き記しておきたい。Ajaxではこの文書こそがそのために読むべき文書に当たる。“Ajax”（エイジャックスと読む）という言葉を誰かに向かって語ってみたい人は、目を通しておくとよいだろう。

　規定する文書、などというと難しそうに感じられるかもしれないが、そうではない。誰もAjaxを知らない状況でAjaxを説明するために書かれた文書なので、当然のことではあるが、読むためにAjaxの専門的な予備知識は要求されない。長さもさほどではないので、ぜひ目を通してみよう。

　とはいえ、現状ではこの定義に当てはまらないAjaxの使い方もあるので、書かれた言葉を絶対視しないよう、注意する必要がある。

ハイライト2・Ajaxでどこまでできるの？ 本格アプリケーションZimbra

• Zimbra
• Zimbraの自分で操作できるデモ
• ZimbraのFlashによるデモ

　Ajaxでどこまでできるの？ という懐疑論者にはこれがお勧め。

　Ajaxによるいま話題の本格アプリケーションソフトである。次世代のエンタープライズメッセージングとコラボレーションのツールである。つまり、電子メールの読み書き、スケジュールやアドレス帳の管理や検索などを行うことができる。英語での提供となるが、上記の2種類のデモを見ると、思わずWebブラウザ上で動作していることを忘れそうになるような高度なアプリケーションソフトが実現されていることが分かるだろう。

　2つのデモのうち、特に自分で操作できるデモに注目しよう。Ajaxは何の変哲もないWebブラウザをプラットフォームとして実行するので、単にリンクをクリックして進むだけで、応用ソフトを使い始めることができるのである。

　しかし、Webブラウザだけで機能が完結していないことも確認しておこう。データを蓄積し、検索などの機能を実行しているのはサーバ側である。多くの場合、Ajaxアプリケーションはサーバとクライアントの双方をフル活用して動作する。その点で、サーバだけ、クライアントだけで構成される従来のWebアプリケーションとは一線を画している。

ハイライト3・Google

• Googleサジェスト
• Googleローカル
• Gmail
• ……etc

　Ajaxというブームの出所をたどると、Googleにたどり着く。GoogleはAjaxという名前の提唱者ではないが、現在Ajaxと呼ばれるスタイルを本格的に使い始めたのは、おそらくGoogleだろう。特に、Googleサジェストや、Googleマップ（現在はGoogleローカル）がもたらしたインパクトは大きい。かくいう筆者も、Googleマップでサテライト画像を見るのが大好きで、東京中のあちこちをいく度も見て回った。例えば、通勤通学の車窓から何回となく見た東京都水道局和田堀給水所が、空から見るとこのような幾何学模様に見えるというのは、用もないのにふらふらとこのサービスを見ていて発見したものである。

　しかし、ここでは特にGoogleサジェストをAjaxを語るうえで重要なサービスだと主張してみよう。Gmailのようにアカウントを取得せずとも使え、同時に非同期通信を手軽に実感できるためだ。このサービスは、検索キーワードを入力中に、その先を推測して候補を表示するものである。しかし、候補が出るまで待つ必要はなく、勝手に利用者のペースで文字を打ち込んでも良い。タイピングと候補の表示のタイミングを合わせる必要がないというのは、Ajaxの重要な特徴の1つである非同期通信を体感するための好例といえる。

その他のみどころ

　今回は初回ということで、新旧にかかわらずAjaxを実感するのに役立ついくつかのページを紹介します。

みんながあっという手書き文字認識

• Ajax を使った手書き文字認識

　筆者が作成したAjax関連リンク集の中で、特に高人気なのがこれ。Ajaxでここまでできるとは！ という驚きの声がしばしば聞こえてくる。ここで公開されているのは、純粋に手書き文字を認識するだけのシステムである。マウスで文字を描くと、その文字を認識する。誤認識した場合に学習させる機能も持っている。

保存という概念がないメモツール

• Ajaxで紙copiライクなツール、めもー

　基本的には文字を入力するメモツールだが、保存というメニューが存在しない。入力すると自動的にサーバに保存される。せっかく書いた文章が、誤ってWebブラウザを閉じてしまったために永遠に失われてしまった。……というような悲劇を防ぐことができる。入力されたURLをダブルクリックするとそれが開く機能も持つが、短いコードでこれだけの機能を実現しているのは興味深いところではないだろうか？

XMLとは異なる別解

• Introducing JSON

　Ajaxでは、非同期にデータの転送を行う。そこで使われるのは、一般のテキストファイルと、XML文書だと原典に書かれているが、現在は別のものも多数使われている。これがJSON（JavaScript Object Notation）である。JSONを一言で要約すれば、JavaScriptの文法で書かれたオブジェクトのソースコードを交換形式にしてしまえ、ということである。JSONで書かれたデータは、JavaScriptのeval関数でコンパイルしてプログラム中から参照できる。XMLを使うよりも、より手軽なのが特徴である。

　JSONを扱うためのライブラリはさまざまなプログラム言語用にすでに用意されていて、上記のページよりたどってそれらを調べることができる。

そのままでは動かない事例

• 「JKL.ParseXML＋ECS 4.0なページ」で遊んでみる

　AmazonのECS（E-Commerce Service）4.0より取得したXML文書を、JKL.ParseXMLというライブラリで上記のJSON形式に変換し、扱いやすくしてから処理している事例である。しかし、ここで紹介する理由は、JSONの利用例ではなく、このサンプルソースは「そのままでは動かない」という事実をかみしめるためである。コードのコメントに「url はセキュリティの関係でリレーする仕組みが必要でしょう」と書いてあるが、Ajaxで使用するXMLHttpRequestオブジェクトは、自分自身が置かれたドメインと同じドメインに対してしか通信を行うことができない。つまり、（Amazonのドメイン下にコンテンツを置くのでもない限り）、Amazon ECSにアクセスすることはできない。通信するためには、通信可能なドメイン内に通信をリレーするためのソフトが必要となる。

　ちなみに、常にWebブラウザのアドレス欄を現在表示している情報と同期させているため、いつBookmarkしても同じ内容が再現できる点も注目である。

変更個所の背景を黄色く変えて知らせる

• Web Interface Design Tip: The Yellow Fade Technique

　英語のページなのだが、Yellow Fade Techniqueについて述べている。これは、変更個所の背景を黄色に切り替え、それを徐々に背景色に戻していく（フェードしていく）というテクニックである。ページ切り替えを伴わず動的にページ内容が変化するAjaxでは、どこが変化したのかが分かりにくいことがあり、このようなテクニックを使って変化した個所を印象付けることが必要とされる。ほかに、ローディング中を示すインジケーターアイコンを表示したりするテクニックなども使われる。

仲間を捜せ！　コミュニティ

• Ajaxメーリングリスト

　日本語で運営される最も主要なAjax関連コミュニティである。入会登録時に送ったメールは、メンバーに配送されてしまうことに注意が必要である。このメールには、本文に自己紹介を書くように指示されているが、それが全員に送られてしまうということである。ぜひ、アピール度の高い自己紹介を考えて良好なコミュニケーションの切っ掛けとしよう。

---

古くて新しいAjaxの真実を見極める 「Webインターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう 最終更新 2005/8/2

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）