Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

AjaxTags・AjaxFacesを利用したサーバーサイドプログラミング

J2EEでJavaScriptのコーディングを行わずにAjaxを利用する方法

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2005/10/12 12:00

Ajaxを利用してリッチなUIを構築するためには、サーバサイドもさることながら、JavaScriptを使ったクライアントサイドの複雑なコーディングを行う必要があります。本稿で紹介するAjaxTags・AjaxFacesを利用すると、JSPタグを記述するだけで、JavaScriptのコーディングを行わずにAjaxを使用することができます。

目次

はじめに

 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は、以下の環境で動作します。

 また本記事のサンプルは、次の環境で動作確認をしています。

 JavaやTomcatについての詳細や設定方法については、「サーバサイド技術の学び舎 - WINGS」にある「サーバサイド環境構築設定」を参照して下さい。

AjaxTagsの概要

 AjaxTagsは、JSP環境でAjax(Asynchronous Javascript And Xml)を使用してリッチなUIを実現するためのタグライブラリです。現在、SourceForge.net上で開発が続けられており、以下のUIコンポーネントが提供されています。

AjaxTags UIコンポーネント一覧
Autocomplete入力された文字(列)で始まる候補文字列をリスト表示し、リストからカーソルキーと[Enter]キーを使用して選択することで、入力を補完することができるコンポーネントです。Google Suggestと類似の機能を、比較的簡単なサーバサイドコーディングのみで実現することができます。補完対象は、入力対象となる値部と、その値にひもづけられたID部の2つのテキストボックスになります。
Callout任意のHTMLエレメントについて、onclickイベント時にそのエレメント付近にサーバサイドから取得したメッセージをポップアップするコンポーネントです。たとえば、文章中の特定のキーワードについてポップアップで解説を加えることができます。この方法は、リンクで次のページに遷移させたり、ブラウザウィンドウを新たにポップアップさせたりする方法よりも、情報をユーザに簡潔で見やすく提示することができます。
Select/Dropdown2つのドロップダウンを関連づけ、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」ファイルに追加します。

「web.xml」のソース一部
<taglib>
  <uri>http://ajaxtags.org/tags/ajax</uri>
  <location>/WEB-INF/ajaxtags.tld</location>
</taglib>

各JSPファイルへのAjaxTagsタグ宣言の追加

 AjaxTagsを使用する各ページで、AjaxTagsタグを使用することを宣言します。以下の内容をJSPファイルに追加してください。

JSPファイルに追加する内容
<%@ taglib uri="http://ajaxtags.org/tags/ajax" prefix="ajax" %>

 以降の説明では、AjaxTagsタグライブラリの接頭辞として「ajax」を指定したものとします。

AjaxTagsのJavaScriptファイルのインクルード

 AjaxTagsを使用する各ページで、AjaxTagsが使用するJavaScriptファイル「ajaxcore.js」をインクルードします。以下の内容をJSPファイルに追加してください。

JSPファイルに追加する内容
<script type="text/javascript" src="ajaxcore.js"></script>

CSSスタイルの設定(Autocompleteタグ・Calloutタグのみ)

 Autocompleteタグ・Calloutタグは、自動補完リストとポップアップウィンドウ表示のためにCSSを使用します。CSSスタイルのサンプルについては後述します。

 以上で、AjaxTagsのセットアップは終了です。以降に、それぞれのタグの使用方法について説明します。

AjaxTagsの使用方法

使用方法の流れ

 AjaxTagsの使用方法は、以下のような流れとなります。

  1. AjaxTagsを使ったJSPファイルの作成
  2. AjaxTagsから呼び出すサーバサイドハンドラの作成

 ではAjaxTagsのコンポーネントをどのように使用すればよいのか、実際のコードを見ていきましょう。ここではAutocompleteタグの使用法について説明します。

Autocompleteタグの使い方

 Autocompleteタグの使用法として、都道府県名とそのIDを自動補完するサンプルを作成します。

JSPページの作成

 Webアプリケーション上にJSPページ「autocomplete.jsp」を新規作成し、formエレメントおよび「都道府県名」/「都道府県ID」テキストボックスを記述します。ここでは「都道府県名」テキストボックスのidをpref、「都道府県ID」テキストボックスのidをpref-idとしています。その後にAjaxTagsのautocompleteタグを記述します。

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タグの使用方法は以下の通りです。

Autocompleteタグ属性一覧
属性名説明
fieldId入力対象の値テキストボックスのID このテキストボックスに値が補完される。
popupId補完候補リストを生成するDIVエレメントのID。
targetIdID補完先テキストボックス このテキストボックスにIDが補完される。
baseUrl値テキストボックスの内容が変更された場合に呼び出されるURL このURLでサーバサイドハンドラは補完候補を返す。
paramNamebaseUrlを呼び出す際の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」というサーブレットを作成しましょう。

サーバサイドハンドラの実装言語
 実はサーバサイドハンドラは、J2EEで記述しなければならないわけではありません。前項のAutocompleteタグの動作説明からもわかるとおり、クライアントとサーバを繋げているのは、ただのURLでしかありません。ですから、その先がPerlで動いていようとも、はたまたASPやASP.NETで動いていようとも、出力がXML形式でありさえすればよいのです。

 まず、「web.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」を参照していただくとして、ポイントとなる部分だけ解説します。

サーバサイドハンドラコードの抜粋 XMLをStringとして返す
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は以下のような内容となります。

aが入力された時にServletが返すXMLの例
<list>
    <item value="1">青森</item>
    <item value="2">秋田</item>
</list>

 AjaxTagsのクライアントサイドスクリプトは、このXML構造を読み取り、補完候補リストを表示します。この際、XML構造で重要なのは以下の3条件です。

  • 任意のルート要素以下に結果の要素が並ぶこと(名前は任意)
  • 結果の要素にvalueという名前の属性があり、IDが格納されていること
  • 結果の要素の内容が値であること

 従って、ルート要素や結果要素の要素名は、特に意味を持っていません。

CSSスタイルの設定

 補完候補リストは、クライアントサイドスクリプトでulli要素に変換されて表示されます。このulli要素を補完候補リストらしく見せるための設定が必要です。ページで使用するCSSに、AutocompleteタグのclassName属性で指定されたクラス名(この例ではautocomplete)でスタイル定義をする必要があります。詳細はスタイルシート「autocomplete.css」をご覧ください。これは、AjaxTagsのサンプルに付属しているCSS(AjaxTagsを解凍したディレクトリの「css/ajaxtags-sample.css」)をアレンジしたものです。いきなりスタイルを一から作るのは大変ですので、まずはこのサンプルを動作させながら、自分なりのアレンジを加えていくことをお薦めします。

動作確認

 以上で、Autocompleteタグを使ったページを作成することができました。以下のURLへアクセスしてみましょう。

http://{サーバ名}:{ポート番号}/ajaxtags-sample/autocomplete.jsp

 「都道府県名」テキストボックスの内容を変更するたびにAjaxでサーバサイドへアクセスし、補完候補リストを取得してリスト表示している様子が分かると思います。補完候補リストの日本語も文字化けすることなく表示されています。

補完リスト表示中
補完リスト表示中

 リストから項目を選択すると、都道府県名は「都道府県名」テキストボックスに、都道府県IDは「都道府県ID」テキストボックスに補完されます。

項目を選択すると、都道府県名/IDが補完される
項目を選択すると、都道府県名/IDが補完される

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 土井 毅(ドイ ツヨシ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5