クールなAjaxウィジェット――サイトの対話性を手軽に高める手法：1分ショートレビュー

Google MapsやGmailを使ったことのある方なら、最初はそのリッチなインタフェースに驚いたにちがいない。その裏で、Ajaxが活躍していることはよく知られている。こうした斬新なインタフェースを実現してくれる、クールなAjaxウィジェットを紹介しよう。

[克元 亮，ITmedia]

ここで紹介する記事は、developerWorksの「AjaxとXML：5つのクールなAjaxウィジェット」です。

　Ajax（Asynchronous JavaScript＋XML）は、従来、エンジニアに敬遠されてきたJavaScriptがXMLと組み合わさることで復権した技術。ユーザーが画面を操作するバックグラウンドでサーバと非同期に通信するため、一画面ごとのリフレッシュが不要で、スムーズな操作性を実現している。ブラウザながらユーザーエクスペリエンスを大きく向上させ、Web2.0を支える技術として注目を浴びている。JavaScriptについては、以前、こちらの記事でも紹介している。

　Web 2.0の流行によってユーザーエクスペリエンスが新たな脚光を浴びる中、Ajaxを使用してサイトの対話性を強化するウィジェットが登場している。簡単にデプロイできるわりには、非常に斬新なインタフェースを提供してくれるものばかりだ。

　インターネット上でウィジェットを検索すれば、WYSIWYGエディタやプログレスバー、タブ付きダイアログボックス、時計、日付選択機能、RSSリーダーなどを数多く見つけることができる。独自にDHTMLやFlashコントロールを作成する前に、既存のものが利用できないかを調べることは絶対に必要だ。

　本記事では、サイトの対話性を強化する以下の5つのウィジェットをそのコードも交えて紹介している。

• SWF/Chartsウィジェット：Adobe Flashベースのコントロール。グラフ作成用のデータとスタイル設定オプションをサーバ上のXMLから設定できる
• SWF/Gauge ウィジェット：サーバ上のXMLを使用してゲージを表示するコントロール。このゲージは、飛行機や車の計器のようにカスタマイズできる
• インプレース編集：インプレース編集が可能なテキストボックスのコントロール。ユーザーに情報を直感的かつ対話式の手軽な方法で提供する
• DHTMLウインドウ：モードレスなフローティングウインドウをページコンテンツの上に重ねて配置するメカニズムを提供する
• カルーセルウィジェット：回転式の画像ビューアー。それぞれ小さなグラフィックで表現された項目のリストを、AppleのiTunesインタフェースのようにスクロールできる

　中でも特にお勧めしたいのは、カルーセルウィジェットだ。このウィジェットは、一定のスペースに複数の画像を表示でき、矢印を押すだけで左右に画像をシフトし狭い画面を有効に使うことができる。AppleのiTunesやオンライン写真アルバムサービスのFlickrでも多用され、ユーザーエクスペリエンスの向上に一役買っている。これを画像のコントロールに使えば、あなたのサイトを見違えるようにしてくれるにちがいない。

　この記事で紹介しているのは、商用やオープンソースのものを含め、インターネット上で入手可能なウィジェットとツールのほんの一部だ。あなたも、この記事を手がかりに、ウィジェットを探す旅に出てみてはいかがだろう。きっと掘り出しものがあるに違いないのだから。