「Ajax？　知ってますよ」と言えますか

　新人配属や異動の季節になった。この4月，あなたがもし新しい職場に配属されて，上司から「君，Ajaxって知ってる？」と聞かれたとする。そのとき，堂々と「知ってますよ」と答えられるだろうか？

　このITproのサイトでは，Ajax，マッシュアップ，リッチ・クライアント，SaaSなどいわゆるWeb2.0関連の記事が一昨年ぐらいから毎日のように掲載されている。そもそもITproはこうした言葉を知っている読者を対象にしているので，ほとんどの読者は冒頭のような質問を受けても，「知ってますよ」と堂々と答えられるだろう。しかし，この春初めてITの世界に入る人の中には，「名前や概念的なことなら分かるのですが…」という人も多いのではないだろうか。

　そこで今回の記者の眼では，そういう新人君にお勧めな「Ajax学習法」を考えてみた。といっても，要するに，実際に自分でちょっとしたプログラムを作って試してみるだけである。Web技術は簡単に導入して試せる。実際に経験することで，雑誌等の記事や解説を見るよりも，手っ取り早く理解が深まることが多い。入門者が手軽に，すばやく，ほぼ費用ゼロで体験する方法を3つのステップ順に提案してみよう。

　まず，おさらいをしておこう。Ajax（asynchronous javascript ＋ XML）とは，JavaScriptを使ってWebサーバーからデータを取得し，受け取ったデータを動的にWebページ上に表示する技術である。マウスを“グリグリ”するだけでページ内容が変わったり，郵便番号を入力した瞬間に住所が補完されてしまうアレである。

　もともと厳密な定義は無いが，Ajaxの「x」が「XML」を意味することから，よく見かけるのは，「XMLHttpRequest」（以下，XHR）を使う仕組みを指す，という説明である。XHRは，Webブラウザに組み込まれているJavaScriptオブジェクトの一つ。マウスを動かしたりクリックしたりすると，XHRがサーバーからHTMLテキストやXMLデータなどを取得する。受信データは，XHRのプロパティに勝手に放り込まれるので，それをページ上に流し込んだりすることで簡単にダイナミックなページになる。なお，Internet Explorer（IE）の場合はXHRではなく，ActiveXObjectとなる。これ以降の説明ではブラウザとしてFirefoxを想定する。

手っ取り早くAjaxを学ぶ3つのステップ

　このAjaxを「手っ取り早く」「費用をかけずに」試してみるために記者が考えた方法は，以下の3ステップである。

ステップ1　XHRだけを使ってみる
ステップ2　Ajaxから直接Webサービスを呼び出してみる
ステップ3　JavaScriptまでダイナミックに呼び出す

ステップ1　XHRだけを使ってみる

　ただ単にXHRを使ってみるだけ。一切お金はいらない。どこでもよいので，どこか無料ホームページのスペースに，XHRを使ったスクリプトを記述したHTMLファイルと，XHRを使って取得するHTMLファイルを保存する。

　例えば，nikkei.htmlというHTMLファイルを適当に作って，それをXHRから呼び出す。XHRでnikkei.htmlファイルをサーバーに要求する処理は次の3行。このJavaScriptをHTMLファイルの<script>タグに書き込む。

a = new XMLHttpRequest(); a.open('GET','./nikkei.html'); a.send(null);

　これはリクエスト処理しかしていないが，応答データをページ上に貼り付ける処理も同じくらい簡単。これらのスクリプトを記述したファイルに，例えば「test.html」という名前を付けて，そこにブラウザからアクセスするだけ。エラー処理などは省略しているが，「Ajaxを使ってみました」という目的だけのプログラムなら，これだけでできる。

　ただ，あまりにも簡単に作れるので，つまらない。これだけでは上司に「Ajaxを知ってます」とは堂々と言えないかもしれない。「Google Mapsはどうやってるの？」と聞かれると，「う…」となってしまいそうだ。Google MapsはAjaxの代表例としてよく引き合いに出されるが，XHRを使っていないからだ。そこで，ステップ2に進む。

ステップ2　Ajaxから直接Webサービスを呼び出してみる

　ステップ2では，AjaxとWebサービス（Web API）を組み合わせる。AmazonやYahoo!，楽天に代表されるWebサービスは，キーワードをURLの後ろに付けてアクセスすることで，書籍や商品，価格などのデータを返答してくれる。Ajaxでダイナミックに取得する対象に，このWeb APIを使ってみる。

　出来上がるページのイメージは，例えば，ページ上の入力エリアに書籍名を入れて，マウスをグリグリするだけで，ページを更新することなく，価格や著者名などがずらずらと画面上に登場するといったものだ。

　普通に考えると，ステップ1で指定した接続先のURLとして，WebサービスのURLを指定すればよいように思える。だが，実はこれは不可能。セキュリティ上の理由から，XHRには「別のサイトに対してリクエストできない」という制限がかけられているからだ。いわゆるクロスサイト制限。無料ホームページに作った自分のサイトと，Webサービスのサイトは異なるサイトなので，XHRを使った方法では無理なのだ。

　ちなみに，どうやって制限をかけているかは，Firefoxのソース・コードを見て確認してほしい。ソース・ファイルをLinux上で展開してできる「mozilla」ディレクトリで，「mygrep XMLHttpRequest」と実行すれば，XHRを定義しているファイルや使用場所などがリストアップされる。その情報を手がかりに調べるとよいだろう。なお，このmygrepというコマンドはソースから文字列を探すツールで，日経Linuxの付録DVDなどにときどき収録している。

　さて，無理だからといって「AjaxではWebサービスを使えない」とは結論づけられない。実際，Google Mapsの地図情報やGoogle Ajax Search APIの検索バーを取得して，貼り付けているサイトは存在する。つまり，AjaxでWebサービスも利用できるはずである。

　AjaxとWebサービスを組み合わせる場合，普通は，自分のサイト上でプログラムをプロキシとしてかませるという方法がよく使われる。PerlやPHP，Rubyなどのサーバー側のスクリプトからWebサービスにアクセスして，得られたデータを自分のサイトにいったん保存する。そのデータに対してブラウザからXHRで読み込めばよいわけだ。これなら，「クロスサイト」にならない。

　しかし，これでは，ステップ2の題目である「Ajaxから直接Webサービスを呼び出す」とは言えない。Ajaxで呼び出しているのはあくまでも自分のサイト上のデータに過ぎないからだ。ではどうするか。ここでは費用ゼロで簡単に試せる方法として，二つの方法を紹介する。

　一つは，クロスサイト制限がないXHRを使う手法。Firefoxには，「Greasemonkey」という便利な拡張機能がある。Greasemonkeyをブラウザに組み込むと，Greasemonkey版のXHRといえる「GM_xmlhttpRequest」が使えるようになる。これにはクロスサイト制限がかけられていない。従って，XHRをGM_xmlhttpRequestに書き換えてやれば，とりあえず，ステップ2は実体験できる。Greasemonkeyのインストールは簡単なので，ぜひ体験してもらいたい。ただGreasemonkeyはセキュリティ上非常に恐ろしいことができるので，一度試すだけならまだしも，使い続ける場合は十分に注意してほしい。

　もう一つは，そもそもXHRを使わないというやり方だ。Ajaxだからと言って，XHRを使わなければならないというルールはない。とりあえずAjaxの「x」の文字は無視することにしよう。XHRと同じようなことができれば，それはAjaxと言ってよいことにする（実際，Google MapsはXHRを使っていない）。

　では，具体的にどうするのか。それは，HTMLのscriptタグをJavaScriptで動的に追加するという方法だ。マウスを動かすと，そのページに，<script src=xxx>タグがダイナミックに追加される。ブラウザは，<srcipt>タグのsrc=に書かれたスクリプト・ファイルを実行する仕組みになっている。幸いなことに，scriptタグのsrc属性には，クロスサイト制限がない。つまり，ここにWebサービスのURLを記載すれば，別のサイトであっても，ブラウザからWebサービスにダイレクトにAjaxでアクセスできる。Googleでも似た手法が使われている。

　ただし，詳しい解説は省くが，Webサービスからの返答はXML形式ではなく，JavaScriptとして解釈できる「JSONP形式」でないと使えない。最近は，JSONPに対応しているWebサービスは増えているし，将来性があるAjax手法といえるので，ぜひ実際に作って試してもらいたい。費用ゼロでできるわけだから。

　これでステップ2までが体験できた。記者ならばこのくらいのレベルでも「Ajaxは知ってますよ」と言ってしまうが，これでは実用的ではないので不十分，という慎重な人も多いだろう。そこで，もう1歩進める。

ステップ3　JavaScriptまでダイナミックに呼び出す

　ステップ3は，Ajaxの意味をさらに拡張する。ステップ2までは，Ajaxでダイナミックに操作している対象は，サーバーから取得したデータだったり，scriptタグだった。ステップ3では，JavaScriptのコードそのものをダイナミックに作成して，Ajaxで読み込むという手法を体験してみる。

　JavaScriptのソース・コードは，ブラウザが最初にすべてスタティックに読み込んでいた。<script>タグ中の記述や，<script src=xxx.js>に書かれたjsファイルもすべて，最初に読み込まれる。しかし，めったに使わない処理やライブラリもすべてスタティックに読み込まれるため，回線の帯域も無駄だし，ブラウザ側では読み込み時に無駄に負荷がかかる。しかも，これらのソースは丸見えなので，処理を隠したいときには使えない。JavaScriptをサーバー側で動的に作成して読み込めば，こうした問題の発生を抑えられる。

　これを簡単に体験するにはどうすればよいか。記者が提案するのは，Webアプリケーション・フレームワークである「Ruby on Rails」を用いるという方法だ（関連記事）。これが一番手っ取り早い。Ruby on Railsは，Web2.0のフレームワークとして呼び声が高いだけあって，Ajaxの機能が充実している。Ajaxのライブラリを標準で装備しているほか，Ajax機能をごく簡単なRubyの記述だけで利用できる仕組みになっている。

　このRuby on Railsには，「RJSテンプレート」というJavaScriptのコードを動的に作成してくれる機能がある。Rubyであらかじめテンプレートとなるコードを書いておき，ブラウザからAjaxでアクセスすると，自動的にJavaScriptが生成されて，ブラウザに送り込まれるというものだ。実際，この手法を使っているWebサイトも多い。

　ただ，問題はステップ2までで使った無料のホームページが使えないということである。無料ホームページは，Ruby on Railsに対応していないため，自分でWebサーバーを用意しなければならない。では具体的に何を用意すればよいのか。

　まずOS。Webサーバーを稼働させるOSとして記者がお勧めするのは，やはり定番のLinuxである。次に，マシン。Linuxを導入するマシンには，この春登場したばかりの，玄人志向の「玄箱PRO」という装置を推奨する。これを使えば，多少費用はかかるが，消費電力が少ないWebサーバーを構築できる。自宅などで常時稼働させる用途にもってこいだ。あとは，Ruby on RailsやRubyなど関連ソフトをインストールするだけで，ステップ3を体験できる環境が出来上がる。

　ステップ2に比べると，ステップ3では新たに学ばなければいけないことが多い。AjaxやRuby on Railsはおろか，Linuxサーバーすら立ち上げたことがないという人も多いかもしれない。Ruby on Railsというソフトが良さそうだと分かっても，市販の解説書などはどれもプログラマ向けに書かれているので，入門者にはなかなか読みこなせない。

　そこで，日経Linuxでは5月号から，プログラマではない人や，これまで全くLinuxに触れたことが無い人を対象とする新しい連載を開始した。Linuxサーバーを初めて立ち上げる人向けに「知識ゼロでも至極簡単　まるわかりサーバー構築」，プログラムの経験がほとんど無い人向けにRuby on Railsの使い方を解説する「初歩からのRuby on Rails入門」――である。今後RJSテンプレートの解説も予定している。さらに，6月号の特集では，前述した「玄箱PRO」をLinuxサーバーとして徹底活用する方法を紹介する予定である。

　これらの連載や記事を一通りお読みいただけば，どんな入門者でも「Ajax？　知ってますよ」と堂々と言えるようになるはずだ。