前回紹介したように,XML(eXtensible Markup Language)を利用することにより,検索エンジンの検索結果のようにサイト名,URL,サマリ文などの情報を含む複合的な情報(構造化データ)を容易に受け渡しできるようになります。しかし,ここまでに見てきた方法にはいくつかの問題があります。

(1)クロスブラウザ問題
 Ajax技術を構成する中核の要素がクライアントサイド・スクリプトである以上,避けて通れないのが「クロスブラウザ問題」です。クロスブラウザ問題とは,ブラウザ間の仕様差によって発生する挙動の違いのことを言います。連載第3回でも紹介したXMLHttpRequestオブジェクトの違いを代表として,クライアントサイドでコードを記述する場合には常にクロスブラウザ問題を意識してコーディングする必要があります。そのため,ときとしてトリッキーなコーディングを要求される場合もあり,クライアントサイドの開発生産性を低下する一因になっています。

(2)DOMによるコードは冗長になりやすい
 なるほど,DOM(Document Object Model)はXML文書処理のための強力なAPIです。しかし,連載第6回のyahoo.htmlを見てもわかるように,DOMによるコードは往々にして回りくどく,シンプルな処理を記述するにも冗長になりやすいという難点があります*1。また,出力レイアウトをスクリプト内で動的に生成していますので,複雑なレイアウトになればなるほどコードがわかりにくくなり,レイアウトの変更に即座に対応しにくい,という問題もあります。

Ajax対応ライブラリを利用しよう

 そこで本連載の最後のテーマとして,Ajax対応ライブラリについて取り上げます。Ajax対応ライブラリとは,その名の通り,Ajaxプログラミングを効率化するクラスライブラリやフレームワークのことです。標準の機能だけで一からAjaxアプリケーションを構築するのも良いかもしれませんが,これらライブラリを利用することで,より効率的にアプリケーションを構築できるようになります。

 Ajax対応ライブラリと一口に言っても様々な種類がありますが,以下に比較的目にすることの多いライブラリをプラットフォームごとに分類してみました(表1)。

表1●プラットフォーム別のAjax対応ライブラリ
分類 名称 概要
ASP .NET Atlas Framework Ajax機能をASP .NETに実装するためのJavaScriptライブラリとHTTPハンドラのセット
Ajax .NET ASP .NET上でAjaxによるサーバー・メソッド呼び出しを可能にするHTTPハンドラ
Java AjaxTags JSP(JavaServer Pages)上で利用可能なAjax対応タグライブラリ。特別なフレームワークに依存せず,サーバーサイドJava環境全般で利用可能
AjaxFaces JSF(JavaServer Faces)上で利用可能なAjax対応UIコンポーネント。JSFとの親和性に優れる(正式版の利用は有償)
DWR(Direct Web Remoting) JavaScriptとJavaの間を繋ぐRMI(Remote Method Invocation)。特定フレームワークに依存しないため,既存システムへの導入にも有利
JavaScript JKL.Hina+JKL.ParseXML XMLHttpRequestによる通信とJavaScriptテンプレート・エンジン機能を提供。ブラウザ間の差異を吸収するほか,XML解析/出力のコードを簡素化し,保守性を向上する
Prototype.js XMLHttpRequestのラッピングやJavaScriptによる開発全般のフレームワーク
Ajax Pages HTML埋め込み型の構文を提供するJavaScriptテンプレート・エンジン
PHP PEAR::HTML_AJAX PHP上でAjaxアプリケーションを動作させるためのシンプルなフレームワーク
AJSON JASON形式でクライアント-サーバー間のデータを交換する
Ruby Ruby On Rails Ruby上で動作するMVCデザインのアプリケーション・フレームワーク

 例えば,オートコンプリート,タブペイン,ツリービューといった特定の機能をAjaxで実現したいのであれば,AjaxTagsやAjaxFacesのような目的特化型のライブラリを利用すると良いでしょう。定型的な機能を実現するために,自らコードを記述する必要はありません。あらかじめ用意された部品を利用することで,そもそもAjaxをほとんど意識することなく,Ajax技術を導入できます。

 クロスブラウザ問題を解決したい,データ交換にかかわるコーディングを簡素化したい,など,先に挙げたようなAjax開発上の問題を解決したいのであれば,JKL.Hina+JKL.ParseXMLやAjaxPagesのようなJavaScriptライブラリを導入するのが良いでしょう。サーバーサイドのライブラリと異なり,導入の手間を最小限にして,問題を比較的手軽に解決できます。サーバーサイド技術に習熟しているのであれば,DWR,Atlas Framework,PEAR::HTML_AJAXのようなライブラリを導入することで,既存のプラットフォームに容易にAjax機能を追加することが可能です。

JKL.Hina+JKL.ParseXMLを使ってみよう

 本稿では,これらのライブラリの中でも,JavaScriptベースで作られており,導入が容易なJKL.Hina+JKL.ParseXMLライブラリを利用してみます。JKL.ParseXMLはクライアントとサーバーの間の通信手続きを簡素化し,サーバー側から受け取ったXML文書を手軽に処理するためのライブラリです。JKL.Hinaは与えられたデータとテンプレート(出力レイアウトの雛形)とを結びつけるためのテンプレート・エンジン(図1)です。

 これらのライブラリを利用することにより,

  • XMLHttpRequestオブジェクトによる通信を意識する必要がない
  • 複雑なXMLデータにもより直感的にアクセスできる
  • レイアウトをロジック部分から切り離せるのでデザインの保守性が向上する
などのメリットを享受できます。川崎有亮氏によって開発が進められており,日本語ドキュメントが充実しているのも初学者にはうれしいポイントでしょう。

 JKL.Hina+JKL.ParseXMLライブラリは,先の表で示したURLからダウンロードできます。導入はカンタン。ダウンロードしたjkl-hina.js,jkl-parsexml.jsをアプリケーションを配置したフォルダに配置するだけです。これでJKL.Hina+JKL.ParseXMLライブラリを利用できるようになります。

 さて,今回はここまでです。連載の最終回である次回は,JKL.Hina+JKL.ParseXMLライブラリを利用して,連載の第6回で作成したyahoo.htmlを書き換えてみます。


*1 このような問題を解決するために,昨今ではYAML(YAML Ain’t Markup Language)やJSON(JavaScript Object Notation)のようなテキストフォーマットを用いてデータ交換を行う方法も提供されています。Ajax(Asynchronous JavaScript And 「Xml」)だからといって,XMLにこだわる必要はありません。本稿ではこれらフォーマットについては省略しますが,これらフォーマットを利用することにより,コードをシンプルに記述できる場合があります。

山田祥寛(やまだ よしひろ)

Microsoft MVP for ASP/ASP .NET。執筆コミュニティ「WINGSプロジェクト」の代表でもある。主な近著に「XMLデータベース入門」「PEAR入門」「Smarty入門」「10日でおぼえる入門教室シリーズ(Jakarta・JSP/サーブレット・PHP・XML)」(以上,翔泳社),「今日からつかえるサンプル集シリーズ(JSP&サーブレット・PHP5・ASP・XML)」(以上,秀和システム),「書き込み式 SQLのドリル」(ソシム),「JSP/PHP/ASPサーバーサイドプログラミング徹底比較」(技術評論社)など。最近では,IT関連技術の取材,講演,監修まで広く手がける毎日。