Ajax とは
Ajax(アジャックス、エイジャックス)は、ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称。XMLHttpRequest(HTTP通信を行うためのJavaScript組み込みクラス)による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。
AjaxはAsynchronous (アシンクロナス/エイシンクロナス、非同期) '''Ja'''vaScript + '''X'''ML の略で、2005年2月18日にJesse James Garrettにより名付けられた。
概要
従来のWebアプリケーションでは、サーバにリクエストを送信後、レスポンスを新たにWebページとして受け取り画面遷移が発生していたが、Ajaxにより画面遷移を伴わない動的なWebアプリケーションの製作が実現可能になる。例えばWeb検索に応用することで、従来は入力確定後に行っていた検索を、ユーザがキー入力をする間にバックグラウンドで行うことによってリアルタイムに検索結果を表示していくといったことが可能になる。
Webブラウザのみで動作する(別途プラグインを要求しない)、既存の技術の組み合わせであることが特徴。技術自体はこの用語が発生する前から存在していたが、Ajaxという名前が付けられたこと、GoogleがGoogle マップやGoogle サジェストにこの技術を利用したことで有名になり、Webアプリケーションの可能性を広げるものとして注目され始めた。さらに、Googleでは、デスクトップアプリケーションと遜色のないメーラーであるGmailやGoogle Calendarでも積極的にAjaxを採用し、Ajaxの実用性がGoogleのWebアプリケーションを通じて世間に認知されはじめている。
AjaxによるWebプログラミング(Webアプリケーション製作)が注目されだした背景には、この従来のページ遷移のみに頼ったWebの使い勝手の悪さに対する不満や、XML、DOMなどのWeb関連技術の標準化(ウェブ標準)、および高い機能を持ったWebブラウザの普及などが挙げられる。
また、ダウンロード型アプリケーションは、マニア層から先に広がりにくい、競合がOSメーカーとなったときに競争に負けてしまう、といった問題を抱えているため、ダウンロード型アプリケーションからWebアプリケーションに切り替える技術として、Ajaxが利用されている。
DHTMLが登場した当時は、単にお遊び要素に過ぎないと考えられていた動的ページだが、JavaScriptをより効果的に使うことで、業務や実用に耐える優秀なインターフェースを備えたアプリケーションをHTMLで作ることが可能であったという事実を世の中に知らしめたという意義をもつ技術である。
問題点
従来の技術の組み合わせであるため、それぞれの持つ問題をそのまま内包する。例えば、各種Webブラウザ間のDHTMLの実装の違いをコードで吸収する必要がある。
実際、Ajaxを実現する技術はブラウザ間で実装に違いがあり、基幹技術であるXMLHTTPRequest実装の元となったInternet Explorerの実装の解説ではXMLHTTPRequestという用語は見あたらず、ActiveXでMSXML機能を呼び出して実行する。MSXMLの実装ではバイト配列を取り出せるなど機能的な違いもある。言語としてVBScriptが使える点も異なる。
また、Ajaxアプリケーションでは動的にページの一部が書き換えられる為、デザインとコードが以前のように単純に分離できないという開発上の問題点がある(Model View Controllerも参照)。このため、現在では通常のWeb開発に比べ開発により時間がかかると言われている。
2005年現在、数多くのAjax用アプリケーションフレームワークが開発・公開され部分的に可能になってきているが、完全ではない。現時点では成熟しつつあったWeb開発のデザインとコードの分離技術や開発体制は、Ajaxの登場によって一石が投じられている。
このような状況ではあったが、2006年現在、prototype.jsなどのAjaxフレームワークを利用することで、デザインとコードを完全に分離することが可能になっている。すなわち、デザイナーとデベロッパーの分業はAjaxを採用することで決して妨げられるわけではなく、むしろ、より完全に分業体制を行うことも可能になってきている。具体的には、HTMLタグ中の「onXXXXX」属性(XXXXXはイベント名)などに書かれるJavaScriptコードを、prototype.jsというフレームワークではタグオブジェクトに対するイベントリスナの組み込みという形で行える。すなわち、Event.observe()メソッドでイベントに対するメソッドを記述することができる。HTMLまたはXHTMLタグ内に含まれていたイベントハンドリング属性とその処理メソッドの記述(onClick="xxxmethod(xxx);"等の記述)も追い出すことができるわけである。
また、prototype.jsによって、ブラウザの互換性に関するコード(クロスブラウザ)を書くことからある程度開放されるという意義もある。また、prototype.jsは高生産性Webアプリケーションフレームワークとして認知されつつあるRuby on Railsでも採用され、Ajaxのデファクトスタンダードとして多くの開発者から認知されている。
このことは、適切なAjaxフレームワークの採用で開発の高生産性を確保しつつ、リッチインターネットアプリケーション(リッチなWebクライアント)の実現という両方の要求を満たす可能性があることを示唆する。
“Ajax”のカナ表記
Ajaxの登場当時から日本語カナ読みについては「アジャックス」「エイジャックス」の二つがあり、しばしば議論されることがあるが、前者はカナ訳語を元にした表記、後者は英語発音を元にした表記と言われている。いずれでも間違いではない。日本国内の辞書は反意接頭語A付き単語のカナ表記を「ア」で統一しており「エイ」と表記している辞書はない(例:シンクロ⇔アシンクロ、シンメトリー⇔アシンメトリー)ので、一般カナ語教養としては「ア」と表記するのが一般的であろう。しかし、反意接頭語A付き単語のA部分の発音記号は「ei」とされており、これは本来「エとアの中間音につづけてイを発音する」指示であるが、日本語には中間音が存在しないため「エイ」とカナ表記するものだとの主張もある。結論として国際共通の発音に近いのはこちらということになる。
例として、英語圏で「アジャックス」をいくら英語風に発音しても通じないが、「エイジャックス」を英語風に発音すれば通じることが多い。後者の読みを覚えておけば海外の大学や国際会議などで混乱することがない。
接頭字の短縮表記であるAjaxはAjaxと表記すべきであって、わざわざカナ表記を行うこと自体が適切ではなく、読み方については単に発音と表記のニュアンスの違い以上のものはないといえよう。
尚、エージャックス/AJAXの単語自体は、コルゲートパーモリブカンパニーによって商標登録されており、特定の商品・サービスの名称として利用する場合は、注意が必要である。
補足
非同期の頭文字Aが名前の最初に来て強調されているために、非同期メソッドはAjax独自のものなのかと勘違いしやすいが、HTML DOMにはXMLHTTPRequest以外に以下のような非同期メソッドが存在する。- Image#src, HTMLImageElement#src
- Window#location (HTMLIFrameElement, HTMLFrameElement)
- HTMLScriptElement#src
- DHTML Behavior (#default#download)
現在はAjax関連技術としてXMLHTTPRequestを全く使わないプログラムまでが取り上げられるようになっており、JavaScriptを効果的に使用して動的なWebサイトを作る手法全般をAjax関連と広く捉える傾向も巷に存在する。
関連項目
- Web 2.0
- XML
- JavaScript
- ダイナミックHTML
- Document Object Model
- AHAH
- Model View Controller
- ECMAScript
- XML-RPC
- WDDX
- Adobe Integrated Runtime
- Silverlight
- オープン標準
- Comet
- C10K問題
外部リンク
- OpenAjax - Ajax推進団体
- Google マップ(Google ローカル)
- Google Suggest - 日本語 Google サジェスト
- JavaScript auto-complete(LGPL) - 日本語 Google サジェストのように入力しようとする色名または国名を予測する
- adaptive path » ajax: a new approach to web applications
- Ajax: Web アプリケーション開発の新しいアプローチ - 上記の日本語訳。
- ObjectGraph 英和辞書
- Ajax Impact
- Ajax Tutorial Get, post, text, XML.
Toolkits
- Ajax Toolkits, AJAX toolkits.
- Ajax.NET Professional, first .NET framework.
- Atlas, Microsoft's AJAX toolkit.
- Dojo Toolkit, AJAX/DHTML toolkit.
- DWR
- Ext JS
- Prototype, open-source framework.
- Yahoo! UI Library, Yahoo! User Interface Library.
- Sajax, Simple AJAX toolkit
- Rialto, Rich Internet AppLication TOolkit.
- ZK, Ajax but no Javascript. Demo
- Google Web Toolkit, Build AJAX apps in the Java language.
- jsLINB, OOP ajax toolkit.
- jQuery, jQuery.
「Ajax」関連ページ一覧
-
Ajax入門 - suffix @ ウィキ
PHP入門JavaScript編JavaScript入門PHP-JavaScript通信Ajax駄文メモAjaxテンプレート(書き始めのきっかけ用)2009年10月23日 14:51:17
-
Ajax編 - suffix @ ウィキ
PHP編JavaScript編PHP-JavaScript通信Ajax駄文メモAjaxテンプレート(書き始めのきっかけ用)2009年10月24日 21:36:18
-
メモ/AJAX - asato @Wiki
記事論文言語テスティングjMaki記事HTML 5 Web Sockets vs. Comet and Ajax第30回 Ajaxはじめて物語、そしてサーバでも動くJavaScriptJavaScriptを書かずにAjaxを実現するjMaki論文Crawling AJAX by Inferring User Interface State Changes , ICWE 2008言語Flapjax A Programming Language for Ajax Applications, OOPSLA 2009テスティングPerformance Testing of Data Delivery Techniques for Ajax Applications, JWE 2009Invariant-Based Automatic Testing of Ajax User Interfaces, TR 2009 (ICSE 2009)2009年12月5日 20:46:06
-
ScriptManager - CooliteToolkit @ ウィキ
ScriptManagerExtJs FrameworkをASP.Netページに追加するコントロールASP.Net AjaxとAjaxControlToolkitのScriptManagerの共存は出来ない2009年12月8日 21:05:29
-
A - ニュー速VIPコテまとめwiki
※読み昇順Aqua-Alta ◆6dLoliNpn.Ajax ◆Ajax/1czSMAA厨 ◆U/V/AA/V/UAぷりる ◆/4/lymafw.ALIAS◆ALIAS3.qveAqua-Alta ◆6dLoliNpn.(読み:アクアアルタ)Be登録日2008-08-25【Be】http//be.2ch.net/test/p.php?i=685254645Ajax ◆Ajax/1czSM(読み:アジャクス?アヤクス?)Be登録日2007-04-15【Be】http//be.2ch.net/test/p.php?i=589551438AA厨 ◆U/V/AA/V/U(読み:エイエイチュウ)Aぷりる ◆/4/lymafw.(読み:エイプリル)所在:愛知ALIAS◆ALIAS3.qve(読み:ありあす、えいりあす)【Be】http//be.2ch.net/test/p.php?i=1686773186モンスターブログ(笑) http//alias538.blog79.fc2.com/2010年01月5日 22:30:59
Ajaxのリンク元
- http://atpedia.jp/m/word/Ajax
- [[辞書]] AjaX
- [[biglobe]] ajaxx63
- [[Yahoo]] Ajaxの利点 学校のサイト
- [[Yahoo]] アヤックス ワッペン
- [[Yahoo]] アヤックス ワッペン
- [[Yahoo]] ヤワラチ
- [[Yahoo]] C21キングラピーLG
- [[Yahoo]] Aジャックス 非同期通信
- [[Yahoo]] AJAX 本拠地スタジアム
- [[Yahoo]] Ajaxの利点
- [[Yahoo]] ajax化とは
- [[Yahoo]] Ajax資格
- [[Yahoo]] ajax とは
- [[Yahoo]] Ajax とは
