本文とサイドメニューへジャンプするためのナビゲーションスキップです。

スタートアップガイド

J-Net21 中小企業ビジネス支援サイト

  • J-Net21とは
  • スタートアップガイド
中小機構
  • メルマガ登録
  • RSS一覧
  • お問い合わせ

HOME > 製品・技術を開発する > デジ・ステーション

デジ・ステーション


5分でわかる最新キーワード解説
Ajaxってなんだ?!

日々進歩するIT技術は、ともすると取り残されてしまいそうな勢いで進化の速度を早めています。そこでキーマンズネット編集部がお届けするのが「5分でわかる最新キーワード解説」。このコーナーを読めば、最新IT事情がスラスラ読み解けるようになることうけあい。忙しいアナタもサラっと読めてタメになる、そんなコーナーを目指します。
 今回のテーマは「Ajax(エイジャックス)」。画像を掴んでスクロールさせたり、株価やニュースのような刻々と変化していく情報を更新するなど、使い勝手の悪かったWebサイトでスムーズな操作性を実現する開発手法。その利用範囲は操作性の向上にとどまらず、Webサイトの未来像を見据えています。

Ajaxとは

Ajaxとは、Webブラウザに操作性の高いプログラムを組み込み、サーバーと連携して動作させることで、体感的、視覚的なインタラクションを与えるWebサイト開発手法である。例えば、ユーザーが次に行う操作や動きに合わせた処理を自動的に先に行っておくことで、ユーザーを待たせるような操作感を抱かせないようにするといった具合だ。

Ajaxは『Asynchronous(エイシンクロナス) JavaScript + XML』の略で、スクリプト言語のJavaScriptやWeb記述言語のXMLといったオープンな技術を組み合わせて開発する手法を指す。つまり、実際にはAjaxという技術があるのではなく、動的にWebの表示を変化させるDynamic HTML(JavaScript + CSS)と、表示内容を適宜サーバーから通信を介して取得するXMLHttpRequestという、従来からある標準的な技術を組み合わせて、より効果的な利用方法を提唱したものを指している。この技術に対し、米国のJesse James Garrett氏が2005年2月に「Ajax: A New Approach to Web Applications」というコラム内で、「Ajax」という分かりやすい名前を付けたことで、この言葉が世界中に広がった。

Ajaxならではの表現

それではAjaxと名付けられたこの技術を使うと、どの様にWebアプリケーションが変わるのか見ていこう。これまでWebブラウザで地図を見ると、表示位置を少しずらすたびに全ての画像を読み込みに行くため、表示に時間が掛かった。またドラッグしてスクロールすることも出来なかったため、表示位置の調整に手間取ることもあった。しかしAjaxを使うと、地図の表示位置を変更しても画像を流れるように切り替えることができ、冒頭にも書いた通り地図を掴んでスクロールできる。
 この快適な操作性は、下図のようにAjaxを利用することでユーザーのマウス操作を検知し、次のアクションに備えたデータを先に読み込んでおくことができるようになったためだ。

Ajaxはこの様な画像の操作性だけでなく、テキスト文言の予測をも可能にする。例えば検索エンジンのGoogle Suggestは、検索語句の一部を入力するごとに、その語句を推測して候補をリスト表示する。文字が入力されるたびにサーバーへ通信を行い、その結果をリアルタイムで画面上に表示しユーザーを補助している。

Ajaxを用いて構築されたWebサイトを見てみよう

Ajaxを実現するための技術

上述した操作性を実現するために、Ajaxには以下の4つの機能が備わっている。

  1. 表示   XHTMLとCSS、DOMを用いた、Web標準による動的な表示
  2. データ  XMLとXSLTによるデータ形式
  3. 通信   XMLHttpRequestによるデータの非同期的な取得
  4. 制御   全体をJavaScriptによるコントロール

4つの技術の中でも、3番目の非同期(ajax)通信は言葉の由来にもなっている。これまでのWebサイトはユーザーがアクションを行う度にWebサーバーにアクセスし処理の結果をその都度画面に表示していた。しかしAjaxであれば必ずしもユーザーアクションとWebサーバーにアクセスするタイミングが一致しない非同期通信(Asynchronous)でユーザーのアクションに応じた画像表示が行なえる。

上図のようにAjaxの要素にはXMLも含まれているが、必ずしもXMLを利用しなくとも良い。XMLを利用することで、操作性が低下する際はテキストレベルで対応することも賢明な選択だ。必要な時に非同期で情報を取得できる非同期通信機能が技術的な肝となる。

Ajaxで使われているいずれの技術もWebで標準化されており、個別のプラグインを使用しない。こうしたAjaxの開発手法は、理屈では以前から実装可能であった。しかし実際には、JavaScriptの標準化の曖昧さやブラウザのシェア争いからくるブラウザ実装のバグ等の問題が絡み合い、広く利用されることはなかった。

ブラウザの開発競争も沈静化し実用に耐えうるレベルに品質が安定してきたことと、JavaScriptを代表とする標準化も進み、今回のAjaxという動きにつながってきた。実際には「クロスブラウザ」「クロスサイトスクリプティング」などの課題は残るものの、ライブラリ化を行うことやJavaScript自体の開発技術で補うことは十分可能だ。

Ajaxとリッチクライアント
これまでAjaxの紹介をしてきたが、Web上で同様の表現を行える手段としてJavaアプレットやFlashなどのリッチクライアントがある。これらはブラウザにプラグインを追加する必要はあるものの、表現力の豊かさから現在も広く利用されている。表現力という点で比較すると、現時点ではデザイン性の高い制作を行えるソフトがあるFlashは優位だ。Ajaxのメリットは、プラグインが不要であることはもちろん、Google Mapsのように掲載されている地図に目印を付けて、自分用にカスタマイズすることができる点だ。今後は他の人が作った機能を活用することも可能となり、一方的な情報配信ではなくユーザーを巻き込んだサイト構築が可能となってくる。

Webサイトの将来像

Ajaxは既存の技術を、新たな言葉を提唱することで、これまで困難と思われていた動的なサイトを構築することが「比較的に簡単にできるのではないか?」という、気づきを啓蒙し、固定概念を覆したインパクトはとても大きい。

今後、Google Maps以外にも、Ajaxに対応したサイトが増えてくることで、ユーザーがいくつもの機能を自分で組み合わせて活用することが促進される。こうした動向はブログが一気に普及したように、多くの人が簡単に利用できるような状況が整ってくる。現在は、Ajaxに対応したWebサイトを構築するためには、技術的な知識が必要となってしまうが、今回取材をしたHOWS(ハウズ)では、既に専門的な知識がなくてもAjaxを利用できる、AjaxBuilderのリリースを発表しているなど、今後Ajaxはさらに利用しやすい状況になるだろう。

取材協力 :株式会社HOWS(ハウズ)

掲載日:2009年3月 4日

キーマンズネット

出典元:株式会社リクルート キーマンズネット 2006年1月4日掲載分

検索

このページの先頭へ