はじめに
JavaScriptと非同期XML通信を使用することで、Webブラウザ上でリッチなUIを実現することができる、Ajax（Asynchronous Javascript And Xml）が最近流行です。しかし、実際にリッチなUIを構築するためには、サーバサイドもさることながら、JavaScriptを使ったクライアントサイドの複雑なコーディングを行う必要があります。
今回ご紹介するAjaxTags・AjaxFacesは、Ajaxを使った高機能なUIコンポーネントです。どちらもクライアントサイドのJavaScriptコーディングを行うことなく、JSPタグを記述するだけで使用することができます。AjaxTagsはJavaServer Pages（以下、JSPと表記）上で、AjaxFacesはJavaServer Faces（以下、JSFと表記）上で動作します。
AjaxTagsの動作原理は非常にシンプルなものです。最終的にブラウザに生成されるのは（当然ながら）通常のHTML+JavaScriptコードであり、そこからAjaxでサーバにアクセスする際にも、任意のURLへアクセスしているに過ぎません。また、そこで扱われるXMLの形式も比較的アバウトなものです。形式にこだわるよりも、むしろAjaxを使ったアプリケーションをすぐに使えるようにする、というのがAjaxTagsのコンセプトと言えるでしょう。
一方AjaxFacesは、より高機能なコンポーネントを提供します。JSFを使う関係でAjaxTagsよりやや多くの設定が必要ですが、サーバサイドハンドラとの連携がスムーズに行えるようになっています。
では実際に、この2つのコンポーネントを使用してみましょう。
対象読者
Servlet/JSPプログラミングを行ったことがある方を対象としています。
AjaxTagsサンプルに必要な環境
AjaxTagsは、以下の環境で動作します。
- J2SE Development Kit 1.4以上
- Servlets 2.3以上
- JSP 1.0以上のサーブレットコンテナ上
また本記事のサンプルは、次の環境で動作確認をしています。
- J2SE Development Kit 5.0 Update 2
- Tomcat 5.0
- AjaxTags 1.0.1
JavaやTomcatについての詳細や設定方法については、「サーバサイド技術の学び舎 - WINGS」にある「サーバサイド環境構築設定」を参照して下さい。
AjaxTagsの概要
AjaxTagsは、JSP環境でAjax（Asynchronous Javascript And Xml）を使用してリッチなUIを実現するためのタグライブラリです。現在、SourceForge.net上で開発が続けられており、以下のUIコンポーネントが提供されています。
Autocomplete | 入力された文字（列）で始まる候補文字列をリスト表示し、リストからカーソルキーと［Enter］キーを使用して選択することで、入力を補完することができるコンポーネントです。Google Suggestと類似の機能を、比較的簡単なサーバサイドコーディングのみで実現することができます。補完対象は、入力対象となる値部と、その値にひもづけられたID部の2つのテキストボックスになります。 |
Callout | 任意のHTMLエレメントについて、onclickイベント時にそのエレメント付近にサーバサイドから取得したメッセージをポップアップするコンポーネントです。たとえば、文章中の特定のキーワードについてポップアップで解説を加えることができます。この方法は、リンクで次のページに遷移させたり、ブラウザウィンドウを新たにポップアップさせたりする方法よりも、情報をユーザに簡潔で見やすく提示することができます。 |
Select/Dropdown | 2つのドロップダウンを関連づけ、1つめのドロップダウンが選択された場合に、その選択項目に応じた2つめのドロップダウンの内容をサーバから取得して、2つめのドロップダウンの内容を書き換えることのできるコンポーネントです。 |
Toggle | 特定のHTMLエレメントのクリックによってTrue/Falseを切り替え、それに応じて画像やタグの内容を書き換えることのできるコンポーネントです。 |
Update Field | 一つのフィールドの更新時に、複数のフィールドの内容をサーバから取得して更新することのできるコンポーネントです。 |
AjaxTagsのセットアップ方法
ライブラリのダウンロード
AjaxTags公式サイトにアクセスし、左側にあるリンクの［Binaries］をクリックすると表示されるページから、「ajaxtags-1.0.1.zip」をダウンロードしてください。
Webアプリケーションの作成
ご使用のサーブレットコンテナの利用方法に従い、Webアプリケーションを作成してください。本記事では、Tomcat 5.0上に「ajaxtags-sample」というWebアプリケーションを作成したものとして説明します。
ライブラリのインストール
ダウンロードした「ajaxtags-1.0.1.zip」を解凍し、「ajaxtags.jar」をWebアプリケーションの「WEB-INF/lib」ディレクトリにコピーします。
TLDリファレンスの追加（JSP 1.x環境のみ）
JSP 1.x環境では、解凍した「ajaxtags.tld」ファイルをWebアプリケーションの「WEB-INF」ディレクトリにコピーし、以下の内容を「web.xml」ファイルに追加します。
<taglib> <uri>http://ajaxtags.org/tags/ajax</uri> <location>/WEB-INF/ajaxtags.tld</location> </taglib>
各JSPファイルへのAjaxTagsタグ宣言の追加
AjaxTagsを使用する各ページで、AjaxTagsタグを使用することを宣言します。以下の内容をJSPファイルに追加してください。
<%@ taglib uri="http://ajaxtags.org/tags/ajax" prefix="ajax" %>
以降の説明では、AjaxTagsタグライブラリの接頭辞として「ajax」を指定したものとします。
AjaxTagsのJavaScriptファイルのインクルード
AjaxTagsを使用する各ページで、AjaxTagsが使用するJavaScriptファイル「ajaxcore.js」をインクルードします。以下の内容をJSPファイルに追加してください。
<script type="text/javascript" src="ajaxcore.js"></script>
CSSスタイルの設定（Autocompleteタグ・Calloutタグのみ）
Autocompleteタグ・Calloutタグは、自動補完リストとポップアップウィンドウ表示のためにCSSを使用します。CSSスタイルのサンプルについては後述します。
以上で、AjaxTagsのセットアップは終了です。以降に、それぞれのタグの使用方法について説明します。
AjaxTagsの使用方法
使用方法の流れ
AjaxTagsの使用方法は、以下のような流れとなります。
- AjaxTagsを使ったJSPファイルの作成
- AjaxTagsから呼び出すサーバサイドハンドラの作成
ではAjaxTagsのコンポーネントをどのように使用すればよいのか、実際のコードを見ていきましょう。ここではAutocompleteタグの使用法について説明します。
Autocompleteタグの使い方
Autocompleteタグの使用法として、都道府県名とそのIDを自動補完するサンプルを作成します。
JSPページの作成
Webアプリケーション上にJSPページ「autocomplete.jsp」を新規作成し、formエレメントおよび「都道府県名」/「都道府県ID」テキストボックスを記述します。ここでは「都道府県名」テキストボックスのidをpref、「都道府県ID」テキストボックスのidをpref-idとしています。その後にAjaxTagsのautocompleteタグを記述します。
<form> Pref Name: <input id="pref" name="pref" type="text" autocomplete="off" size="20" /> Pref ID: <input id="pref-id" name="pref-id" type="text" size="30" /> </form> <ajax:autocomplete fieldId="pref" popupId="pref-popup" targetId="pref-id" baseUrl="${pageContext.request.contextPath}/autocomplete.view" paramName="pref" className="autocomplete"/>
Autocompleteタグの使用方法は以下の通りです。
| 属性名 | 説明 |
fieldId | 入力対象の値テキストボックスのID このテキストボックスに値が補完される。 |
popupId | 補完候補リストを生成するDIVエレメントのID。 |
targetId | ID補完先テキストボックス このテキストボックスにIDが補完される。 |
baseUrl | 値テキストボックスの内容が変更された場合に呼び出されるURL このURLでサーバサイドハンドラは補完候補を返す。 |
paramName | baseUrlを呼び出す際のGETクエリ変数名。 |
className | 補完候補リストのCSSクラス名 後述のCSS定義で使用する。 |
前述のソースコードで説明しましょう。このAutocompleteタグは、fieldIdで指定されたprefテキストボックスの変更時にbaseUrlで指定されたURLにアクセスして、補完候補リストを取得します。その際、prefテキストボックスに入力された内容をprefというGETクエリ変数でサーバサイドに渡します。したがって、実際にアクセスされるURLは以下のようになります。
{ページコンテキストURL}/autocomplete.view?pref={prefテキストボックスの内容}
サーバサイドハンドラ呼び出しが完了すると、popupIdで指定されたpref-popupという名前のDIVエレメントが生成され、補完候補リストが表示されます。補完候補リストの各項目のクラスはclassNameで指定されたautocompleteになっています。補完候補リストからカーソルキーと［Enter］キーで項目が選択されると、fieldIdで指定されたprefテキストボックスにその値が、targetId属性で指定されたpref-idテキストボックスにそのIDが補完されます。
サーバサイドハンドラの作成
次に、サーバサイドハンドラを作成します。先ほどのURLで指定された「autocomplete.view」というサーブレットを作成しましょう。
Autocompleteタグの動作説明からもわかるとおり、クライアントとサーバを繋げているのは、ただのURLでしかありません。ですから、その先がPerlで動いていようとも、はたまたASPやASP.NETで動いていようとも、出力がXML形式でありさえすればよいのです。まず、「web.xml」にサーブレット定義を記します。
<servlet> <servlet-name>autocomplete</servlet-name> <servlet-class>AutocompleteServlet</servlet-class> <load-on-startup>2</load-on-startup> </servlet> <servlet-mapping> <servlet-name>autocomplete</servlet-name> <url-pattern>/autocomplete.view</url-pattern> </servlet-mapping>
「WEB-INF/src」に「AutocompleteServlet.java」を作成し、サーバサイドハンドラを実装します。このサーブレットは通常通りHttpServletを継承したクラスで、前項で説明したようにクライアントからGETリクエストが行われた時に、クエリ変数を取得して補完候補リストXMLを返します。詳細は「AutocompleteServlet.java」を参照していただくとして、ポイントとなる部分だけ解説します。
public String getXmlContent(HttpServletRequest request) { //クエリ変数を取得 String pref = request.getParameter("pref"); StringBuffer xml = new StringBuffer(); xml.append("<?xml version=\"1.0\" encoding=\"shift-jis\"?>"); //都道府県リストクラス生成 PrefList preflist = new PrefList(); //都道府県リストから、 //指定された名前で始まる都道府県リストをXML形式で取得 xml.append(preflist.getPrefListXmlByName(pref)); xml.append("</list>"); return xml.toString(); //結果XMLを返す }
PrefList.getPrefListXmlByName関数は、都道府県リストの中から、指定されたアルファベット文字列で始まる都道府県名/IDを抜き出し、それをXML形式で返します。詳細はソースコード「AutocompleteServlet.java」をご覧ください。今回は単純に配列で実装していますが、実際のアプリケーションではデータベースなどと連携して補完候補リストを作成することになると思います。なお、返すXMLに日本語を使用するので、Content-Typeを「text/xml;charset=Windows-31J」と設定しました。詳細はソースコードをご覧ください。このサーバサイドハンドラからクライアントに返されるXMLは以下のような内容となります。
<list> <item value="1">青森</item> <item value="2">秋田</item> </list>
AjaxTagsのクライアントサイドスクリプトは、このXML構造を読み取り、補完候補リストを表示します。この際、XML構造で重要なのは以下の3条件です。
- 任意のルート要素以下に結果の要素が並ぶこと（名前は任意）
- 結果の要素に
valueという名前の属性があり、IDが格納されていること - 結果の要素の内容が値であること
従って、ルート要素や結果要素の要素名は、特に意味を持っていません。
CSSスタイルの設定
補完候補リストは、クライアントサイドスクリプトでul、li要素に変換されて表示されます。このul、li要素を補完候補リストらしく見せるための設定が必要です。ページで使用するCSSに、AutocompleteタグのclassName属性で指定されたクラス名（この例ではautocomplete）でスタイル定義をする必要があります。詳細はスタイルシート「autocomplete.css」をご覧ください。これは、AjaxTagsのサンプルに付属しているCSS（AjaxTagsを解凍したディレクトリの「css/ajaxtags-sample.css」）をアレンジしたものです。いきなりスタイルを一から作るのは大変ですので、まずはこのサンプルを動作させながら、自分なりのアレンジを加えていくことをお薦めします。
動作確認
以上で、Autocompleteタグを使ったページを作成することができました。以下のURLへアクセスしてみましょう。
http://{サーバ名}:{ポート番号}/ajaxtags-sample/autocomplete.jsp
「都道府県名」テキストボックスの内容を変更するたびにAjaxでサーバサイドへアクセスし、補完候補リストを取得してリスト表示している様子が分かると思います。補完候補リストの日本語も文字化けすることなく表示されています。
リストから項目を選択すると、都道府県名は「都道府県名」テキストボックスに、都道府県IDは「都道府県ID」テキストボックスに補完されます。
