槻ノ木隆の「BBっとWORDS」

バックナンバー

■	その116「DLNAの仕組み」 [2007/03/26]
■	その115「ドメインとActive Directory」 [2007/03/19]
■	その114「ワークグループができること」 [2007/03/12]
■	その113「WPSの仕組み」 [2007/03/05]
■	その112「Gopherの生い立ちと現在」 [2007/02/26]
■	その111「Wikiの使われ方」 [2007/02/19]
■	その110「文字コードとは」 [2007/02/05]
■	その109「IISの生い立ち」 [2007/01/29]
■	その108「NASの登場と一般への普及」 [2007/01/22]
■	その107「HomePNAのいろいろ」 [2007/01/15]
■	その106「Ogg Vorbisの成り立ち」 [2006/12/25]
■	その105「MIDIの原理とSMFの構造」 [2006/12/18]
■	その104「AIFFの構造」 [2006/12/11]
■	その103「WAVの構造と現状」 [2006/12/04]
■	その102「WMAの歴史」 [2006/11/27]
■	その101「AACの特徴」 [2006/11/20]
■	その100「MP3/MPEG Audioの仕組み」 [2006/11/13]
■	その99「HSDPAの仕組み」 [2006/11/06]
■	その98「H.264・MPEG-4 AVCの特徴」 [2006/10/30]
■	その97「IEEE 802.16e（モバイルWiMAX）の特徴」 [2006/10/23]
■	その96「TIFFの特徴」 [2006/10/16]
■	その95「PNGの現状と今後」 [2006/10/02]
■	その94「GIFの構造」 [2006/09/25]
■	その93「10GBASEの種類（2）」 [2006/09/11]
■	その92「10GBASEの種類」 [2006/09/04]
■	その91「GbEのいろいろ」 [2006/08/28]
■	その90「JPEGの特徴」 [2006/08/21]
■	その89「DivXの広がり」 [2006/08/07]
■	その88「MPEGの仕組み」 [2006/07/31]
■	その87「WMVのこれまで」 [2006/07/24]
■	その86「AVIの生い立ちとそのコーデック」 [2006/07/10]
■	その85「QuickTimeの変遷」 [2006/07/03]
■	その84「Realのこれまでと今後」 [2006/06/26]
■	その83「ShareとWinny」 [2006/06/19]
■	その82「DOCSISの仕組み」 [2006/06/12]
■	その81「SQLインジェクションの流れ」 [2006/06/05]
■	その80「RSSの動作」 [2006/05/29]
■	その79「Skypeの仕組み」 [2006/05/22]
■	その78「BitTorrentの特徴と今後」 [2006/05/15]
■	その77「Winnyの仕組みと現状」 [2006/05/08]
■	その76「WinMXの特徴」 [2006/04/24]
■	その75「Gnutellaの歴史と構造」 [2006/04/17]
■	その74「Napsterの歴史」 [2006/04/10]
■	その73「P2Pのいろいろ」 [2006/04/03]
■	その72「IEEE 802.11nの動向」 [2006/03/27]
■	その71「ActiveX Scriptingの動作」 [2006/03/20]
■	その70「Ajaxの仕組み」 [2006/03/13]
■	その69「DHTMLの動作」 [2006/03/06]
■	その68「Scriptの定義」 [2006/02/27]
■	その67「JavaScriptの仕組み」 [2006/02/20]
■	その66「Javaの動作」 [2006/02/13]
■	その65「RFCのプロセス」 [2006/02/06]
■	その64「ActiveX DocumentとActiveX Controlの違いと共通点」 [2006/01/30]
■	その63「ActiveX Controlの機能」 [2006/01/23]
■	その62「ActiveXを構成するもの」 [2006/01/16]
■	その61「Cookieの仕組みと用途」 [2005/12/26]
■	その60「malwareとその分類」 [2005/12/19]
■	その59「rootkitの動作」 [2005/12/12]
■	その58「CSSの役割」 [2005/12/05]
■	その57「HTMLの変遷」 [2005/11/28]
■	その56「PONとその種類」 [2005/11/21]
■	その55「FWAの仕組み」 [2005/11/14]
■	その54「DoSとDDoS」 [2005/11/07]
■	その53「SNMPとMIBの動作」 [2005/10/03]
■	その52「Jumbo Frameとフレームサイズ」 [2005/09/12]
■	その51「WPA2の仕組み」 [2005/09/05]
■	その50「WPAとWPA-PSKの違い」 [2005/08/29]
■	その49「WPAの仕組み」 [2005/08/22]
■	その48「WebDAVの動作」 [2005/08/08]
■	その47「OFDMAの仕組みとOFDMとの違い」 [2005/08/01]
■	その46「OFDMの仕組み」 [2005/07/25]
■	その45「WiMAXの特徴」 [2005/07/11]
■	その44「Wi-Fiの役割」 [2005/07/04]
■	その43「FTPの目的と動作」 [2005/06/27]
■	その42「UPnPの動作」 [2005/06/20]
■	その41「ネットマスクの仕組み」 [2005/06/13]
■	その40「ARPの機能」 [2005/06/06]
■	その39「DNSの原理」 [2005/05/30]
■	その38「デフォルトゲートウェイの役割」 [2005/05/23]
■	その37「MACアドレスの仕組み」 [2005/05/16]
■	その36「スイッチとその進化」 [2005/05/09]
■	その35「ルータによるメリット」 [2005/04/25]
■	その34「ブリッジの原理」 [2005/04/18]
■	その33「リピータの機能」 [2005/04/11]
■	その32「IPアドレスのクラス」 [2005/04/04]
■	その31「ブロードキャスト/マルチキャスト/ユニキャスト」 [2005/03/28]
■	その30「SMTP AUTHと認証の種類」 [2005/03/14]
■	その29「Submissionポートとスパムメール対策」 [2005/03/07]
■	その28「Outbound Port25 Blockingとは」 [2005/02/28]
■	その27「PGPの仕組み」 [2005/02/21]
■	その26「PKIと認証局」 [2005/02/14]
■	その25「公開鍵暗号方式とは」 [2005/02/07]
■	その24「共通鍵暗号とは」 [2005/01/31]
■	その23「SSHの仕組みと応用」 [2005/01/24]
■	その22「SSLの役割」 [2005/01/17]
■	その21「POP3とIMAP4の違い」 [2004/12/27]
■	その20「POP3の役割と機能」 [2004/12/20]
■	その19「SMTPの機能と問題点」 [2004/12/13]
■	その18「SPIとパケットフィルタリング」 [2004/12/06]
■	その17「LANの概念とその広がり」 [2004/11/29]
■	その16「SIPの役割」 [2004/11/15]
■	その15「プロキシの利用」 [2004/11/08]
■	その14「VoIPの仕組み」 [2004/11/01]
■	その13「イーサネットとは」 [2004/10/25]
■	その12「IP/TCP/UDP/ICMPとは」 [2004/10/18]
■	その11「DHCPの役割」 [2004/10/04]
■	その10「MIMOとは」 [2004/09/27]
■	その9「DMZとその効果」 [2004/09/13]
■	その8「ファイアウォールとは」 [2004/09/06]
■	その7「NATとNAPTの違いとIPマスカレード」 [2004/08/30]
■	その6「VPNとVPNパススルーの仕組み」 [2004/08/23]
■	その5「無線LANの問題とWEP」 [2004/08/09]
■	その4「IEEE 802.11a/b/gって何を意味しているの？」 [2004/08/02]
■	その3「ダイナミックDNSって？」 [2004/07/26]
■	その2「グローバルIPアドレスとプライベートIPアドレス」 [2004/07/12]
■	その1「PPPoEって何だろう？」 [2004/07/05]

その70「Ajaxの仕組み」

■ Ajaxって何？

　お約束通り今回はAjaxです。元の言葉は前回にも触れた通り、「Asynchronous JavaScript ＋ XML」で、これをAjaxと短縮します。ちなみに発音は「エージャックス」となります。Ajaxは、完全互換というわけではありませんがDHTMLとも互換性があります。もっと言えば、DHTMLをベースに、非同期処理を付け加えたものと考えても良いかもしれません。

図1：従来の方法

　DHTMLは簡単に言えば、サーバーとの通信を減らし、ブラウザで処理をさせるというポリシーのものです。もちろん、完全になくすことは不可能ですが、細かい処理をなるべくWebブラウザ側で行なわせることで、サーバーの負荷や通信のオーバーヘッドを減らすことに成功しました。

　同種のものには、Macromedia（現Adobe）のFlashやShockwaveがあります。これらも複雑な動きや処理が可能ですが、Webブラウザ側にファイルをいったん落としたあとは、Webブラウザ側（WebブラウザからさらにFlash Player/Shockwave PlayerをPluginとして呼び出す形）で単独で処理ができるようになります。

　そして、Ajaxではサーバーとの通信が避けられない処理を、いかにユーザーを待たせないように処理させるかに注目した技術です。図1は（DHTMLを含む）従来のWebブラウザでの処理の仕組みです。Webサーバーとの通信も、画面入出力も、すべて1つの処理ロジックで行なう仕組みになっていました。当然、ロジックが1つですから、通信をやっている間は入出力できませんし、入出力をやっている間は通信ができないというわけです。

　これに対しAjaxでは、Webブラウザ内部に2つのロジックが同時に実行されます（図2）。1つはJavaScriptの非同期通信インターフェイスを用いてサーバーと通信を行なうためのロジック、もう1つは従来同様の、画面入出力を行なうためのロジックです。この2つが同時に動くことにより、サーバーからの返答を待たずに次の処理ができるようになりました。

図2：Ajaxの方法

　これを別の観点から見てみましょう。図3は、図1における処理の流れを時系列で見たものです。操作入力をもらってから、3回サーバーにリクエストを出し、その結果を表示して終了するという流れを示しています。非同期の仕組みを持っていないと、素直にリクエストを出し、受けたら解釈して表示し、また次のリクエストを出すという処理を3回繰り返すわけです。

　ここにAjaxの仕組みを取り入れるとどうなるかを図にしたのが、図4です。ここではリクエストを出す処理と、受信した結果を表示する処理を素直に分けてみました。それでも一部の処理を並行で実施できる分、早く処理を終わらせてユーザーに制御を返せるようになります。


図3：従来の方法	図4：Ajaxの場合その1

図5：Ajaxの場合その2

　これをもっと極端に進めたのが図5のケースです。ユーザー入力を受けてリクエストをまとめて出した段階で、まず画面自体はユーザーに返して自由に操作できるようにしてしまいます。その一方でサーバーからレスポンスが返って来たら、これを非同期で受けてその時点で画面反映を行なうという仕組みです。

　図3～5はいずれもサーバーから見ればほとんど処理に差はないわけですが、ユーザーから見ると「いつWebブラウザの処理が終るか」が大きく変わることになります。この非同期の仕組みを利用したことで高速化を図れる、というのがAjaxの大きな特徴と言えます。

　ちなみにAjaxの後半のXMLについてですが、実はこれはAjaxには必須の機能ではありません。そもそも、なぜXMLが付いたかというと、JavaScriptの中の非同期通信を行なうクラスがXMLHttpRequestという、XMLのクラスを使っていることがこの名称が付いた理由のようで、もちろんXMLデータの解釈を行なうこともありますが、それは必須ではないようです。

■ Ajaxの普及

　Ajaxの要であるXMLHttpRequestは、かなり以前から存在していました。もともとはInternet Explorer 5.0で搭載された独自拡張機能ですが、他のWebブラウザがすぐに追従したことで、現在ではほぼ標準的な機能として認知されています。もっとも当初は単にリロードをしないでも画面更新が可能、という程度の認識だったようです。

　この非同期処理部に目をつけて実装を行なった最も有名な例が、Google Mapsや、Google Suggestです。この2つがXMLHttpRequestを生かしたインプリメントになっていることを発見し、そこにAjaxという名前を付けたのが、Adaptive Pathの記事で、以後Ajaxという名称は爆発的に普及するようになりました。

　例えばGoogle Mapsの場合、マウスの動きから地図の移動先を判断し、該当するエリアの地図情報を先読みしたりする部分にAjaxが利用されています。これにより、Webブラウザベースとしては驚くほどレスポンスの良い地図閲覧ができるようになったというわけです。この命名以降、Ajaxは急速に普及するようになってきました。

　とはいえ、Ajaxという名前が世の中に登場してからまだ1年と少々ですので、普及したといってもまだまだ大きな勢力になっているわけではありません。しかし、これからはAjaxもシステム構築の欠かせない要素となっていくと予測されています。

　ところでAjaxにも依然として非互換性はつきまとっています。例えば、XMLHttpRequestにしても、IE以外の場合は素直にXMLHttpRequest（）を呼び出せばすむのですが、IEの場合にはMicrosoft.XMLHTTPというActiveX Objectを呼び出すようにしなければなりません。また、AjaxではDHTMLやその他のJavaScriptを使うわけで、これらに関しては前回も説明した通り、どうしても制約が存在します。このため、やはり内部ではIE用とその他用で処理を分けるなど、環境依存部分をサブルーチン化してまとめるといった配慮が必要になります。

　しかしながら、あまりこれが問題になっていないのは、そもそもAjaxが成立した時にはそうした非互換環境が当たり前になっており、しかも非互換回避のノウハウがある程度蓄積していたために、さしたる混乱が生じていないと言うことでしょう。ただ、こうしたノウハウがそのまま非互換性温存の温床ともなるわけで、改めてDHTMLの非互換性が恨めしくなるところです。

2006/03/13 11:04

槻ノ木隆
　国内某メーカーのネットワーク関係「エンジニア」から「元エンジニア」に限りなく近いところに流れてきてしまった。ここ２年ほどは、企画とか教育、営業に近いことばかりやっており、まもなく肩書きは「退役エンジニア」になると思われる。（イラスト：Mikebow）

Broadband Watch ホームページ