動的Webサイト構築とAjax
January 30, 2009 – 12:49 pm最新号の情報処理学会誌に「Web2.0アプリケーションにおける代表的な攻撃手法とその対策」（吉濱佐知子、石田愛、浦本直彦：情報処理,Vol.50,No.1 pp.44-55(Jan.2009）)という解説記事がでていた。この記事、実によくまとまっている。特に、私のようなWebプログラミング初心者にとって、Ajaxとかマッシュアップとか云われるWeb2.0技術のなんたるかを知る上でとても良い解説と感じた。ということで、この解説記事をもとにメモを作っておいた。
Web2.0の技術的特徴： Web2.0というのは何を指すのか、従来技術と何が違うのかというあたりは議論のあるところと感じている。情報処理の解説記事では、その特徴について次のように記述している：
Web2.0と従来型のWebの技術的な違いの１つは、Ajaxと呼ばれるプログラミングモデルで特徴づけられる。AjaxとはAsynchronous Java ScriptとXMLを組み合わせた造語であり、ブラウザ上で動作するクライアント側Webアプリケーションにおいて、JavaScriptというスクリプト言語を用いて動的に処理を行う点に特徴がある。
･････
Web2.0の技術的特徴の２つ目は、既存のサービスやコンテンツを組み合わせて新しいサービスを作り出す「マッシュアップ」と呼ばれる技術である。
Web2.0技術をAjaxとマッシュアップの二つで特徴づけるというものだ。Web2.0というと、その技術的特徴というより、Web技術の利用形態、ビジネスモデルを含めて議論されることが多い(「Web 2.0：次世代ソフトウェアのデザインパターンとビジネスモデル」)。それはそれとして、技術的特徴を、Ajaxとマッシュアップに収斂させると議論しやすい。私のように、自宅に設置したサーバからの情報発信をしようとするものにとっては、これで十分だ。
従来型WebとAjaxの比較： 昨年の9月に「Ajaxが株屋さんの世界にも」という記事を書いた。このなかで、Ajaxがシステム開発のパラダイムシフトだという記事について触れたことがある。Ajaxを用いると何がうれしいのか？前述の情報処理学会誌の解説記事にのっている比較図をみるとよくわかる（下図）。
まず、従来型Webでは、簡単にいってしまうとWebサーバの役割はユーザ（ブラウザ）からのリクエストに応じてHTML文書をロードするということにつきる。フォームのサブミットボタンを押すなどのユーザ（ブラウザ）側からのリクエストが発生すると、Webサーバはこのリクエストを受信し、これに付随したデータに基づき何らかの計算処理は行うが、処理結果は新しいHTML文書に組み込まれ、「動的に」出力されることになる。ブラウザ側にとっては、受け取ったHTML文書をその都度、そのまま新しいページとして表示することになるわけだ。我がブログで「動的Webサイトの構築」と言ってきた「動的」という言葉はこの程度の意味だ。
これに対し、Web2.0技術の一つであるAjaxを使用することにより、ユーザ、ブラウザ、Webサーバの三者が「動的」にインタラクトすることができる。解説記事の図に示されているように、WebサーバはメーンのHTMLがロードされた後は、新たなHTML文書を出力する必要はなく、ブラウザと非同期のデータ通信を行いデータのみを処理することになる。また、ブラウザの提供するDOM APIを用いることによりHTMLを再ロードすることなく「動的に」画面表示を更新することができる。このあたりの事情について、「情報処理」の解説では次のように説明している。以下、引用：
典型的なAjaxアプリケーションでは、いったんメインのHTMLがダウンロードされた後はXMLHttpRequestなどのブラウザ組み込みAPIを用いて、XMLやJSONなどの形式で必要なデータのみをダウンロードする。現行のWebブラウザの多くは、表示しているWebページのHTML文書を木構造で表現したDOM（Document Object Model）という内部データモデルで保持している。ブラウザの提供するAPIを使用してJavaScriptからDOMを書き換えることで、ブラウザ上に表示されているデータを更新することができる。また、ブラウザ上で発生するキーボードやマウスイベントは、DOMの提供するイベント機構により、クライアント側JavaScriptが処理する。これらの仕組みによって、ユーザ＝Webブラウザのインタラクションとブラウザ＝サーバ間の通信を非同期で行うことができ、従来のデスクトップアプリケーションと遜色ない使用感をWebアプリケーション上で実現することが可能となる。
実に、すごいではないか！Ajaxを学ばねばという気分になる。ここで、引用した「情報処理」の解説記事、本来はその表題にもあるように、Ajax技術の使用により発生するセキュリティ上の問題とその対策について書かれたものだ。こうしたすごい仕組みを使用しようとするからには、新たなセキュリティ問題があるということだろう。
役にたちそうな解説記事： いろいろ検討してみると、「動的Webサイト構築」というからには、Ajaxを学ぶことが、かなり重要だ。このあたりの話、解説記事がかなりでているようだ。今までに気づいたAjaxの関連記事で覗いたことがあるリストを以下に示す。さあ、勉強、勉強。
DOMから始めるJavaScriptモダン・スクリプティング