目次


AjaxTags で Ajax 開発を容易にする

Ajax 機能を JSP に統合し、滑らかな動きの Web エクスペリエンスを実現する

Comments

はじめに

従来の Web ベースのユーザー・インターフェース (Web ページと Web アプリケーションの両方を含みます) では、ユーザーがリクエストを行うごとに強制的にページの更新を行う必要があり、そのためにかなりの時間と帯域幅を消費していました。繰り返しページを更新すると、提供されているブロードバンド接続で最も高速なものを利用しているユーザーの場合でさえ、Web エクスペリエンスは非常に遅く、ぎこちないものになります。

最近では、あらゆる開発者が、Web ベースのアプリケーションのパフォーマンスとユーザー・エクスペリエンスを大幅に改善する新しい技法や手法に群がっています。Ajax でコーディングされた Web アプリケーションは、データをバックグラウンドで非同期でサーバーに送信できると同時に、表示されている Web ページのさまざまな部分をページをリロードせずに更新することができます。Ajax はいくつかのオブジェクトと技術から構成されています。そして、Ajax という用語に X という頭文字が含まれているにもかかわらず、XML がまったく使われない場合もあります。ブラウザーに返送されるレスポンスのタイプやフォーマットはさまざまであり、プレーン・テキストや HTML、XML のこともありますが、それらに限られるわけではありません。

この記事では、コンパクトで便利な JSP タグ・ライブラリー、AjaxTags を紹介します。AjaxTags は外部の JavaScript を利用して、JSP ページで Ajax を容易に使えるようにしてくれます。

読み進むための準備

この記事で説明するサンプルを追跡し、実行するためには、いくつかのツールが必要です。ここで使用するアプリケーションはすべて無料で入手可能なオープンソースのアプリケーションです。

Apache Tomcat は、この記事で紹介するサンプルを実行するために使用する、リファレンス実装のサーブレット・コンテナーです。Apache Tomcat は、その Web サイトから無料でダウンロードすることができます (「参考文献」を参照)。この記事のサンプルは最新のバージョン (この記事の執筆時点で 6.0.13) を使っています。

また、SourceForge のサイトに行き、AjaxTags のサンプル・アプリケーションをダウンロードする必要があります (「参考文献」にリンクがあります)。この記事のサンプルでは、Ajax Tags Demo ダウンロードのバージョン 1.3 を使っています。これは標準的な WAR ファイルであり、Tomcat の webapps ディレクトリーにデプロイすることができます。ブラウズする URL を面倒なものにしたくなかったら、この WAR ファイルをデプロイする前にリネームします。リネームしない場合、http://localhost:8080/ajaxtags-1.3-beta-rc6-1/ という URL をブラウズすることになります。

では、始めることにしましょう。

Ajax は浴槽をきれいにするためのものではありません

ほんの数年前には、熱心な開発者でさえ、Ajax という名前から、Colgate-Palmolive という会社が開発して製造している一般的な洗剤を連想したものです。その頃はオンラインのエクスペリエンスを改善する Web 開発の手法が連想されることはありませんでした。今や Ajax の手法が一般的になりつつあるため、Ajax がどのように動作するのか、またどのような状況で Ajax を使用するのかに関して、あらゆる情報が欲しいと思う人が多いことでしょう。

Ajax はどのように動作するのか

Ajax アプリケーションの開発そしてコーディングを行う際には、フォアグラウンドで起こることとバックグラウンドで起こることの両方を理解する必要があります。アプリケーションの中での典型的なイベント・フローは次のようなものです。

  1. ユーザーが Web ページを要求する。
  2. ユーザーが Web ページの状態に変更を加える (例えばリンクをクリックする、選択ボックスから何かを選択する、ラジオ・ボタンまたはチェック・ボックスをクリックする、など)。
  3. 状態の変更によってイベントが起動され、JavaScript 関数が呼び出される。
  4. その JavaScript 関数が XmlHttpRequest オブジェクトをインスタンス化し、それによってバックグラウンドでサーバーへの HTTP リクエストが行われる (ページの更新が行われないことに注意してください)。
  5. サーバーが応答し、要求されたデータを JavaScript 関数に返す。
  6. JavaScript 関数は、表示されている現在のページを他の JavaScript や DHTML を使って更新し、また変更を行う。

現在表示されている Web ページの一部を更新する JavaScript は、どの HTML 要素を更新するのかを知る必要があります。対象となるページ内の特定要素を実際に動的に更新するためには (ページをリロードしないで読み取るには)、そうした HTML 要素に固有の ID を割り当てます。デモの中にある単純なサンプルをリスト 1 に示します。この詳細については、このすぐ後に説明します。

リスト 1. HTML 要素に ID を割り当てる単純なサンプル
<select id="model" disabled="disabled">
  <option value="">Select model</option>
</select>

リスト 1 は、この特定の選択ボックスにモデルの ID を割り当てます。この ID を使うと、選択された要素とその内容を、JavaScript を使って容易に発見して操作することができます。

嬉しいことに AjaxTags の API は、サード・パーティーによるオープンソースの非常に優れた JavaScript ライブラリーを使っており、それが面倒な作業をほとんどすべて処理してくれるのです。これらのライブラリーは豊富な機能を持ち、そして数多くのブラウザーで十分にテストされているという利点も持っています。そのため、確実に動作するものとして安心して使用することができます。AjaxTags が使用しているサード・パーティーのライブラリーは下記のとおりです。

  • Prototype (豊富なユーティリティー機能を持つ JavaScript ライブラリー)
  • Script.aculo.us (豊富な視覚効果を備えた JavaScript ライブラリー)
  • Overlibmws (DHTML のポップアップ・ライブラリー)

どういう場合に AjaxTags を使うのか

AjaxTags は、いくつかの典型的な状況で使用することができます。開発者としての作業を容易にするために AjaxTags を使用できるだけではなく、アプリケーションを使用するユーザーのエクスペリエンスを改善するためにも AjaxTags を使用することができます。そうした使い方の例を下記に挙げます。

  • 最初のドロップダウン・ボックスでの選択に基づいて 2 番目のドロップダウン・ボックスの内容を変更する。
  • クリックまたはマウスオーバー・イベントに基づいて、ユーザーに表示されているページを更新せずにサーバーからの追加情報を要求するリクエストを開始する。
  • ユーザーが入力したデータに基づいて、ページ全体をロードせずにサーバー上で計算を行う。

では、これらの機能をアプリケーションにどう統合するのか、実際の例をいくつか見ることにしましょう。

AjaxTags をアプリケーションに統合する

AjaxTags をアプリケーションに統合するためには、いくつかの前提条件があります。このセクションでは、そうした前提条件と依存ライブラリーについて説明します。

依存ライブラリー

AjaxTags をダウンロードし、使用する際には、JAR ファイルだけではなくバイナリー・ディストリビューション全体をダウンロードした方が確実です。そうすることで、必要な、同梱の依存ライブラリー (Prototype や Script.aculo.us、overlibmws などのライブラリー) をすべて入手することができます。

設定と構成

アプリケーションの中で AjaxTags を使うための設定と構成は非常に単純です。その手順は以下のとおりです。

  1. ajaxtags.jar ファイルを WEB-INF/lib ディレクトリーに置きます。
  2. 古い (Servlet 2.4 / JSP 2.0 以前の) サーブレット・コンテナーを使っている場合には、web.xml ファイルに taglib 定義を追加する必要があります。新しいコンテナーを使っている場合にはその必要はありません。
    リスト 2. 古いサーブレット・コンテナーのための、(web.xml に追加する) タグ・ライブラリー定義
    <taglib>
      <uri>http://ajaxtags.org/tags/ajax</uri>
      <location>/WEB-INF/ajaxtags.tld</location>
    </taglib>
  3. 依存ライブラリーの JavaScript ファイルを Web アプリケーションにコピーします。AjaxTags のドキュメンテーションによると、下記が必要です。
    • Prototype 1.4.0: prototype-1.4.0.js
    • Scriptaculous 1.5.1: scriptaculous.js と builder.js、controls.js、dragdrop.js、effects.js、そして slider.js
    • OverLIBMWS (オプション、ajax:callout 専用): overlibmws.js

これらの主なステップを完了すれば、アプリケーションの中で JSP タグ・ライブラリー AjaxTags を使えるはずです。開発側で必要な重要なものは、JSP ページ (ビュー) と、非同期呼び出しに対してクライアントに適切な内容を返せるサーバー・サイドのデータ・ハンドラー、という 2 つです。

AjaxTags はデフォルトで、XML と HTML、そしてプレーン・テキストによるコンテンツを処理します。これによってユーザー側で必要なものの大部分をカバーできるはずです。AjaxTags の API 自体は、ごくわずかのコード行で適切なレスポンスを作成できるヘルパー・クラスをいくつか持っています。

AjaxTags のデモとサンプル

SourceForge からダウンロードできる AjaxTags のデモ・アプリケーションには、現実的なサンプルが数多く含まれています。そのいくつかを見てみましょう。これらのサンプルを見ることで、どのようにすれば同様の機能をほとんど苦労なく容易にアプリケーションに統合できるか、その方法がわかるはずです。

注意: ここで紹介するサンプルでは、ハードコーディングされたデータ・ソースを使っています。現実の世界では、Java ファイルにハードコーディングされたデータではなく、データベースからデータを引き出すことになるでしょう。

選択ボックスの更新: ビューと HTML

クライアント・サイドから始めましょう。ここでは、フロントエンドからバックエンドまでのプロセス全体の動作を順次たどります。まず、いくつかのドロップダウン・ボックスを含む、デモ用の JSP のスニペットを見てみます。下記の図は、このページの関係する部分を示したものです (これを見つけるには、Tomcat インスタンスの中で実行する AjaxTag デモ・アプリケーションまでブラウズし、Select/Dropdown というサンプルの上で Run をクリックします)。このサンプルは JavaScript の前に処理を行う関数や JavaScript の後に処理を行う関数を利用している上、進捗表示も利用しているため、とても適切なサンプルです。このサンプルでは、適当な選択を行うと、その自動車メーカーのロゴも表示されます (図 1)。

図 1. ドロップダウンのサンプル・ページ
ドロップダウンのサンプル・ページ
ドロップダウンのサンプル・ページ

これを見るとわかるように、2 つのドロップダウン・ボックスがあります。これを実現するために使われている、関係する JSP コード (dropdown.jsp の中にあります) を見てみましょう (リスト 3)。

リスト 3. dropdown.jsp から引用した HTML での選択ボックス
<label for="make">Make:</label>
<select id="make">
  <option value="">Select make</option>
  <option value="Ford">Ford</option>
  <option value="Honda">Honda</option>
  <option value="Mazda">Mazda</option>
</select>
<span id="progressMsg" style="display:none;">
<img alt="Indicator" src="<%=request.getContextPath()%> 
/img/indicator.gif" /> Loading...</span>
<label for="model">Model:</label>
<select id="model" disabled="disabled">
  <option value="">Select model</option>
</select>

select 要素に与えられた ID に注意してください。また 2 番目のドロップダウンの中には車のモデルはなく、このドロップダウンが無効になっていることにも注意してください。

選択ボックスの更新、JSP タグの構文を詳しく見る

では、このアプリケーションの中身を見てみましょう。この中身が、すべてを処理してくれるのです。これは JSP タグ・ライブラリー AjaxTags の実際の使い方を示しています。リスト 4 は同じファイル (dropdown.jsp) から引用したものです。

リスト 4. JSP タグ・ライブラリー AjaxTags のサンプル: ajax:select タグ
<ajax:select
  baseUrl="${contextPath}/dropdown.view"
  source="make"
  target="model"
  parameters="make={make}"
  preFunction="initProgress"
  emptyOptionName="Select model"
  postFunction="resetProgress"
  errorFunction="reportError" />

リスト 4 のコードを調べる前に、${contextPath} というスニペットに注目してください。混乱を避けるために言うと、これは実際には EL (expression language: 式言語) を使った変数セットであり、header.jsp で定義されています (リスト 5)。

リスト 5. header.jsp での contextPath 変数の定義
<c:set var="contextPath" scope="request">
   ${pageContext.request.contextPath}</c:set>

この定義を示している理由は、これを見れば ${contextPath} 変数がどう解決されるかが明確にわかるからです。この変数の値は、Java コードで pageContext.getRequest().getContextPath() と書いたものと等価です。私の構成では、${contextPath} 変数は結局 http://localhost:8080/ajaxtags-1.3-beta-rc6-1 という値になります。

前に戻って リスト 4 を参照し、サーバーに非同期コールバックを行うためには、リクエストの送信対象の URL を知っている必要があることに注意してください。AjaxTags には、この baseUrl パラメーターが必要です。make という ID の選択ボックスで変更イベントが発生すると、この URL へ非同期にリクエストが送信されます。

${contextPath} の値はわかっているので、リクエストの送信対象の baseUrlhttp://localhost:8080/ajaxtags-1.3-beta-rc6-1/dropdown.view であることがわかります。

baseUrl に続いて、sourcetarget があります。これらのパラメーターは、対象となる HTML 要素の ID を表します。この場合は、車のメーカー (make) 用の選択ボックスとモデル (model) 用の選択ボックスという 2 つの選択ボックスに対して作業を行っています。車のメーカー用の選択ボックスが source であり、モデル用の選択ボックスが target です。

parameters パラメーター (リスト 6) は追加のパラメーターを示しています。リクエストの送信対象の URL に、このパラメーターも渡す必要があります。

リスト 6. parameters パラメーター
parameters="make={make}"

中括弧の構文が make={make} であることに注意してください。これは基本的に、非同期に要求される URL に車のメーカーのパラメーター・キーを付加するように指定しており、値としては、(ID から判断して) 対応する名前の HTML 要素の中にある値を渡すように指定しています。そのためこのサンプルでは、背後で動作するJavaScript が、make の ID を持つ HTML 要素を取得し、その要素の値を取得し、そしてその値を HTTP リクエストの一部として渡します。これは複雑に思えるかもしれませんが、実際はそんなことはありません。そこで、最初の選択ボックスで選択が行われたときに最終的にリクエストが送信される対象の URL を見てみましょう (リスト 7)。

リスト 7. ユーザーが最初の選択ボックスで「Mazda」を選択した時にリクエストが送信される対象の URL
http://localhost:8080/ajaxtags-1.3-beta-rc6-1/dropdown.view?make=Mazda

これを見ると、URL の最後にパラメーターが追加されていることがわかります。またパラメーター・キーが make であり、パラメーターの値が Mazda であることもわかります。

ajax:select のパラメーター、preFunctionpostFunction、そして errorFunction は単純に、皆さんが作成したカスタムの JavaScript 関数の名前です。これらの関数は、呼び出されるタイミングまたは条件になったときに適切に呼び出されます。この場合には、名前から明確に動作がわかります。preFunction は Ajax リクエストを行う前に実行され、postFunction は Ajax リクエストが完了してレスポンスが受信された後に実行されます。また errorFunction はエラーが発生した場合に実行されます (例えばリクエストが内部サーバー・エラー 500 を返したとき、あるいはリソースが存在しないというメッセージを返したときなど)。

最後のパラメーター emptyOptionName は、選択が行われていないことを示すオプションの値です。この場合にはデフォルトの状態が復元されます。

ブラウザーを使ってこの JSP ページを要求すると、ajax:select タグがリスト 8 の JavaScript のスニペットで置き換えられていることに気付くはずです。このスニペットはクライアントのページに埋め込まれており、Web ブラウザーでこのページのソースを表示すると取得されます。

リスト 8. ajax:select タグから生成された JavaScript
<script type="text/javascript">
new AjaxJspTag.Select(
"/ajaxtags-1.3-beta-rc6-1/dropdown.view", {
parameters: "make={make}",
postFunction: resetProgress,
target: "model",
preFunction: initProgress,
source: "make",
emptyOptionName: "Select model",
errorFunction: reportError
});
</script>

基本的に、このJavaScript のスニペットはブラウザーがこのスニペットを評価すると実行されます。JavaScript オブジェクト (AjaxJspTag.Select) はインスタンス化され、そして適切な要素に適切なリスナーが接続されます。

では実際のレスポンスを見てみましょう (リスト 9)。このレスポンスは、メーカーが Mazda である車を求めて URL にリクエストが送信された場合に、バックグラウンドでブラウザーに送信されます。(このレスポンスは、リスト 7 の URL にリクエストを送信した結果です。)

リスト 9. Ajax のレスポンス
<ajax-response>
  <response>
    <item>
      <name>Mazda 3</name>
      <value>Mazda 3</value>
      <value>false</value>
    </item>
    <item>
      <name>Mazda 6</name>
      <value>Mazda 6</value>
      <value>false</value>
    </item>
    <item>
      <name>RX-8</name>
      <value>RX-8</value>
      <value>false</value>
    </item>
  </response>
</ajax-response>

選択ボックスの更新: サーバー・サイドを調べる

このサンプルのサーバー・サイドのコードは驚くほど単純です。AjaxTag の API にはいくつかの HttpServlet サブクラスが組み込まれており、必要に応じて使用することができます。また、簡単な XML レスポンスを生成するユーティリティー・クラスも組み込まれています (リスト 10)。

リスト 10. DropdownServlet から抜粋したスニペット (Ajax リクエストに対して適切な XML レスポンスを作成する様子を示す)
public String getXmlContent(
  HttpServletRequest request, HttpServletResponse response)
  throws Exception {
  String make = request.getParameter("make");
  CarService service = new CarService();
  List<Car> list = service.getModelsByMake(make);
  AjaxXmlBuilder xml = new AjaxXmlBuilder();
  for (Car car:list) {
    xml.addItem(car.getModel(),true,car.getModel(),false);
  }
  return xml.toString();
}

リスト 10 のコードは、単純にするためにサンプル・コードから少し変更してあります。これを見るとわかるように、AjaxTags のクライアント・サイド JavaScript で処理される適切なレスポンスを作成するためには、ほとんどコードが必要ありません (しかも、さらにコードを削減することもできます)。

まとめ

ここで見てきたように、AjaxTags によって、新規の、あるいは既存の Java Web アプリケーションに強力な Ajax 機能を非常に容易に追加することができます。AjaxTags は JSP タグを完全に補完し、ドロップダウン・ボックスの変更やトグル動作、タブ・パネル、コールアウト、その他多数の機能をサポートできるため、高度な Ajax アプリケーションを手軽に、そして容易に作成するための素晴らしい選択肢となります。AjaxTags のような Ajax ライブラリーを使うことによって、Web アプリケーションのユーザビリティーとユーザー・エクスペリエンスを大幅に改善することができ、しかもサーバーの負荷と使用帯域幅を削減することができます。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, Java technology, XML, Open source
ArticleID=270182
ArticleTitle=AjaxTags で Ajax 開発を容易にする
publish-date=10232007