Yahoo UIライブラリを使った
|
前パートまでに解説したAjaxおよびJavaScriptの基本知識を踏まえて、本パートではAjaxとDBを組み合わせたWebアプリケーションを開発してみる。DBからのデータ取得には、サーバーサイドのJavaメソッドを簡単に呼び出せるJSON-RPC-Javaフレームワークを利用し、ユーザー画面の作成には今話題のYahoo UIライブラリを使う。最後にクロスブラウザやセキュリティ問題など、Ajaxでアプリケーションを開発する際の注意点も述べる。
Ajaxでソーシャルブックマークを作ろう
本パートでは、DBと情報をやり取りするAjaxアプリケーションを作成してみる。ただし、解説をAjax部分にフォーカスしたいため、サーバーサイドアプリケーションの作りはなるべくシンプルにすることとした。また、サーバーサイドアプリケーションはJavaで実装するが、DBアクセスにJDBCを直接使用しており、Hibernateなどの仕組みは利用していない。この点に関してはご了承いただきたい。サンプルアプリケーションは、複数のユーザーでWebページのブックマーク（お気に入りを共有する「ソーシャルブックマーク」とする。サーバーにブックマークを集めておき、どのユーザーも参照できる仕組みだ。ソーシャルブックマークと言うと大げさだが、ブックマークの登録機能と参照機能だけを備えた、ごく単純なものと考えてほしい。
サンプルアプリの機能概要
まずは、サンプルアプリケーションの機能概要について簡単に説明しておこう。ユーザーは、Webブラウザから自分の好きなWebページのブックマーク（URL）をDBに登録できる。登録されたブックマークは複数のユーザー間で共有され、だれもが自由に参照できるものとする。 このアプリケーションは、大きく分けて以下の2つの機能から構成される。
ブックマーク登録機能
自分の好きなWebページをブックマークするための機能。機能自体は、普通のJ2EEのシステムで簡単に作れる内容だが、本パートでは、この部分もあえてAjaxで実装してみる。
ブックマーク参照機能
DBに登録されているWebページを参照する機能。ページを表示している間は、Ajaxの仕組みを利用して定期的にサーバーに問い合わせ、最新の内容を常に表示するようにする。ページ全体のリロードではなく、Ajaxの仕組みで最新の情報を取得し続ける点がポイントである。
アプリケーションの実装方針
さて、Ajaxで先に挙げた2つの機能を持つアプリケーションを開発していくわけだが、Ajaxアプリケーションを作成するにあたり、大きく以下の2点をあらかじめ決定しておく必要がある。
サーバーとの通信手段をどうするか
Ajaxである以上、XMLHttpRequestオブジェクトを使用して通信を行なうのが通常であろう。ただしその場合には、サーバーとのやり取りを実現するプロトコル（メッセージのフォーマット）を決めておく必要がある。メッセージ自身にはXMLが使われることが多いとは思うが、アプリケーションの要件を満たすのであれば、プレーンテキストでも良いし、JSONでも良いわけである。また、XMLHttpRequestを直接扱わなくても、最近では通信のためのさまざまなフレームワークが存在している。そういったフレームワークを採用するかどうか、また採用するとしたらどのようなフレームワークにするのかを決定しておく必要があるだろう。
ユーザーインターフェイスの実装をどうするか
Ajaxアプリケーションの特徴の1つであるリッチなユーザーインターフェイスを実現するためには、それなりの量のコードを書かなければならない。当然、より使いやすいインターフェイスを提供しようと思うと、それに応じて記述するコード量も多くなっていく。システムの要件と照らし合わせ、どの程度のユーザーインターフェイスを実現し、それを実現するためにどのようなフレームワークを利用する（あるいは開発する）のかを決定しておく必要がある。
以上2点を勘案した結果、本パートでは最近注目されている（と筆者が考えている）2つのフレームワークを採用することにした。サーバーとの通信部分には「JSON-RPC-Java」を、クライアントのUI実装部分には「YahooUIライブラリ」をそれぞれ利用する。これらのライブラリの使い方は、アプリケーションの実装を行なう中で説明していく。
図1 JSON-RPC-Javaの概念図
開発／実行環境
概要説明の最後に、本パートで利用する実行環境やライブラリをまとめておく。
● Java 2 Standard Edition 5.0
● Tomcat 5.5.16
● MySQL 5.0
● JSON-RPC-Java
● Yahoo UIライブラリ
コラム：JSONとは
JSON（JavaScript Object Notation）は、構造化されたデータをテキストで表現するためのフォーマットである。名前からも分かるとおり、もともとJavaScriptで使用することを想定されていたが、基本的には言語から独立したデータフォーマットである。
例えば、JavaのHashMapのような、キーと値のペアを持つようなデータは、{"キー": "値"} という形式で表わすことができる。いくつか具体例を見てみよう。
● 例1： 配列を作る
まずは配列を作ってみよう。
var data = [1, 2, 3]
このように、配列の場合はカンマで区切って値を直接記述する。上記の例の場合、data［0］、data［1］、data［2］でそれぞれの値を参照できる。ちなみに、eval関数を使う場合は次のように記述する。
var dataStr = "[1, 2, 3]";
var data = eval(dataStr);
あとは、先と同様にdata［0］、data［1］、data［2］で値の参照が可能である。
● 例2：オブジェクトを作る 次にオブジェクトを作ってみよう。
var data = { "prop": "value" };
オブジェクトの場合は、上記のようにキー：値のペアで指定する。このように定義した場合、data.propという記述で値（この場合は“value”）を参照できる。また、data［"prop"］というように連想配列として扱うことも可能である。
複数のプロパティを持つオブジェクトを作る場合は、次のように記述する。
var data = {
"prop": "value",
"foo": "bar"
};
この場合、dataはpropとfooという2つのプロパティを持つことになる。
● 例3：複雑なオブジェクトを作る
それではもう少し複雑なオブジェクトを作ってみよう。
var data = [
{"prop": "value1"},
{"prop": "value2"},
{"prop": "value3"}
];
この例は、propというプロパティを持つオブジェクトを格納した配列を作っている。data［0］.prop、data［1］.prop、data［2］.prop でそれぞれの値“value1”、“value2”、“value3”を参照できる。
● 例4：JSON-RPC-Javaのデータをのぞいてみる
それでは最後に、JSON-RPC-Javaがどのようなデータをやりとりしているのかを見てみよう。本文のViewBookmark.jspの実行結果として載せているデータを、JSON形式のまま見るとLIST Aのようになる。
いかがだろうか。上記の内容とViewBookmark.jspのコードを合わせてご覧いただけば、なぜ変数listで配列を参照できるのか、なぜlist[0］.mapという記述でHashMapの値を参照できるのかが分かると思う。このようなJSON形式のデータを作るのは結構面倒な作業だと思う。しかし、JSON-RPC-Javaを使えば、Javaで表現されているListオブジェクトやHashMapオブジェクトを自動的にJSON形式に変換してくれるのである。
JSON自身は非常にシンプルだが、かなり複雑なデータ構造も表現できる強力な仕組みである。JSONに関する詳細はWebサイト（http://www.json.org/js.htmlやhttp://d.hatena.ne.jp/brazil/20050915/1126717649）をご覧いただきたい。
LIST A JSON形式のままデータを見る
{ list: [
{ javaClass: "java.util.HashMap",
map: { last_update: "2006-03-28 13:59:27", title: "Yahoo! JAPAN",
url: "http://www.yahoo.co.jp/", note: "あ", count: "3" } },
{ javaClass: "java.util.HashMap",
map: { last_update: "2006-03-25 16:23:36",
title: "MySQL 5.0 Reference Manual",
url: "http://dev.mysql.com/doc/refman/5.0/en/index.html",
note: "テスト2", count: "1" } } ],
javaClass: "java.util.ArrayList" }
フレームワークの概要
アプリケーション実装の説明に入る前に、今回利用するAjax用フレームワークの概要を説明しておこう。
JSON-RPC-Javaはその名のとおり、JavaScriptプログラムからサーバー側にあるJavaクラスのメソッド呼び出しを実現するためのフレームワークである。このフレームワークを使うことにより、開発者はXMLHttpReuqestオブジェクトを一切意識することなく、サーバー側にあるJavaクラスのメソッドを呼び出すことができる。
また、このフレームワークではサーバーとクライアント間のメッセージフォーマットにJSON（コラム「JSONとは」を参照）を使っているが、基本的に開発者がJSONを意識する必要はない。
図1の概念図をご覧いただきたい。クライアント側にあるJSONRPCClient、サーバー側にあるJSONRPCBridgeおよびJSONRPCServletがそれぞれJSON-RPC-Javaによって提供されているクラスである。Ajaxアプリケーション、Javaクラスとして表記している部分が、開発者がそれぞれのアプリケーションごとに記述する部分である。注目すべきは、サーバー側で普通のJavaクラスを書くだけで良い点である。それだけで、JavaScript側からメソッドを呼び出せるようになる。リモートから呼び出されることを特に意識するような部分はない。非常に強力なフレームワークである。
JSON-RPC-Javaが持つ具体的な機能などは、アプリケーションの実装と併せて後ほど解説する。
一方のYahoo UIライブラリであるが、こちらも名前が示すとおり、ユーザーインターフェイス（以下、UI）を実現するための各種クラスで構成されたフレームワークである。しかも、UIだけではなく、サーバーとの通信を行なうための機能も提供されている。ただし、本パートでは通信には先ほどのJSON-RPC-Javaを利用することとし、Yahoo UIライブラリはUI部分のみ利用することにする。詳細は、やはりアプリケーションの実装解説とともに紹介しよう。
テーブルの作成とフレームワークのインストール
本パートのサンプルアプリケーションを実行するにはいくつかの準備が必要だが、ここではブックマークを格納するDBテーブルの作成と、JSON-RPC-JavaおよびYahoo UIライブラリのインストール方法を簡単に説明しておく。
なお、TomcatやMySQLといったサーバー環境のインストールおよび設定については説明を割愛させていただくので、ご了承願いたい。
テーブルの作成
LIST1のSQL文を実行し、あらかじめテーブルを作成しておく。各レコードには、URL（url列）、タイトル（title列）、コメント（note列）、同一URLへのブックマーク数（count列）、更新日時（last_update列）が入る。url列に主キー制約を設定しており、URLごとにタイトルやコメントなどの情報が格納される設計である。
また、MySQL用のJDBCドライバもTomcatコンテキスト内のlibディレクトリに入れておく。筆者はmysql-connector-java-5.0.0-betabin.jarを使用したが、こちらは皆さんの環境（MySQLのバージョンなど）に合ったものを入れてほしい。
JSON-RPC-Javaのインストール
JSON-RPC-Javaを入手し（http://oss.metaparadigm.com/jsonrpc/download.htmlでダウンロード可能）、配布パッケージに含まれている「jsonrpc-1.0.jar」をコンテキスト内のlibディレクトリへ、「jsonrpc.js」をコンテキスト内のJSPページを置くディレクトリへそれぞれ配置してほしい。
なお、JSON-RPC-Javaではクライアントとの通信にServletを利用する。このSerlvletを登録するために、LIST2の記述をweb.xmlに追加する必要がある。
Yahoo UIライブラリのインストール
Yahoo UIライブラリを入手し（ http://developer.yahoo.com/yui/#downloadよりダウンロード可能）、配布パッケージyui.zipに含まれている以下のファイルを、コンテキスト内のJSPページを置くディレクトリに配置する。
● treeview\build\treeview.js（TreeView本体）
● treeview\build\YAHOO.js（Yahooのnamespaceを定義するためのファイル）
● event\build\event.js（イベント関連処理のためのファイル）
● animation\build\animation.js（アニメーション機能のためのファイル）
● dom\build\dom.js（DOM関連処理のためのファイル）
● treeview\examples\css\screen.css（Yahoo UIライブラリ全般の画面描画に使用するCSS）
● treeview\examples\css\menu\tree.css（TreeView専用のCSS）
● treeview\src\imgディレクトリの内容すべて
筆者の環境では、これらはすべてROOTコンテキストに配置したので、ディレクトリ構成は図2のようになっている。この図には、後述する本アプリケーションを構成するファイルも含まれている。
なお、本誌付録CD-ROMにJSON-RPCJavaとYahoo UIライブラリを収録しているので、こちらを利用していただいても良い。
図2 サンプルアプリケーションのディレクトリ構造（ファイルの配置）
LIST1 ブックマークを格納するためのテーブル定義
create table bookmark(
url varchar(500),
title varchar(500),
note varchar(1000) character set sjis,
count integer,
last_update timestamp,
primary key(url)
);
LIST2 web.xmlに追加する記述
<servlet>
<servlet-name>JSONRPCServlet</servlet-name>
<servlet-class>com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>JSONRPCServlet</servlet-name>
<url-pattern>/JSON-RPC</url-pattern>
</servlet-mapping>