連載
» 2007年04月10日 00時00分 公開

MyEclipseでAjax+Javaをやさしく開発(3):O/Rマッピングで郵便番号検索Ajaxアプリ作成! (1/4)

[水島和憲,エクリプス]

MyEclipseはJava EE開発を効率化するプラグインの集大成でかつ統合開発環境だ。併せてAjaxの開発を容易にする機能も持ち合わせている。本連載では、サーバサイドにJava EEを、クライアントサイドにAjaxを用いたWebアプリケーションをMyEclipseを使って容易に開発する手法を紹介していく。また、AjaxとJava EEの連携にはAjax開発用のJavaフレームワーク「DWR」を活用する。(編集部)


 連載第1回では、MyEclipseによるWebプロジェクトの作成 、Tomcatを起動/停止する方法およびデプロイする方法、 Ajaxアプリケーションのデバッグ方法について紹介しました。そして、連載第2回では、DWRによるAjaxアプリケーションの開発方法、DWRのインストール、web.xml/dwr.xmlの設定、JavaScriptからサーバ側のPOJOを呼び出す方法について説明しました。

 今回は、MyEclipseを使用して、Eclipse上からDBを操作する方法、Hibernateフレームワークを用いた開発方法、サーバ側とクライアント側の間でJavaオブジェクトを受け渡す方法、DWRが提供するユーティリティについて説明します。

Ajaxを使った郵便番号検索アプリケーション

 今回作成するのは、定番の郵便番号検索です。日本郵政公社が無償で配布している郵便番号データを用いて、郵便番号から住所を、住所から郵便番号を、相互に検索できます。検索した結果は、最大50件表示されます。

 郵便番号のデータはサーバ側のDBに格納し、Ajaxの機能を用いてブラウザから非同期にサーバ側のDBを検索します。DBとJavaオブジェクトのO/Rマッピングには、Hibernateを使用します。

図1 DWRの概要 図1 郵便番号検索(「富士見」と名の付く東京都の郵便番号を検索した例)(クリックすると、画面が拡大します)

事前準備

 日立製作所よりMyEclipseの日本語トライアルバージョンが入手できるようになりました。今回はその日本語版を使用することにします。日本語版MyEclipseのインストール方法はダウンロードサイトのREADMEを参照してください。

 前回前々回を参照して、Tomcatの設定、Webプロジェクトの作成、DWRライブラリの追加も実施しておいてください。なお、プロジェクト名は「post」としました。

郵便番号データベースの作成

 最初に、郵便番号のデータベースを作成します。今回は、DBとしてHSQLDBを使用しました。HSQLDBはpure JavaのDBです。非常にコンパクトであることが最大の特徴であり、hsqldb.jarファイルは600kbytes程度しかありません。軽量でコンパクトであるため、Javaアプリケーションの開発でサンプル用のDBに適しています。

HSQLDBのインストールと起動は、かなりお手軽

 まず、HSQLDBのサイトからダウンロードリンクをたどり、ZIPでアーカイブされたファイルをダウンロードします。2007年3月現在の最新バージョンのファイルは、hsqldb_1_8_0_7.zipです。次に、ダウンロードしたZIPファイルを解凍します。解凍すると、「hsqldb」というフォルダができるはずです。以上で、基本的なインストール作業は終了です。

 次に、HSQLDBを動かしてみましょう。HSQLDBの動作モードには、インメモリモードスタンドアロンモードサーバモードがありますが、今回はサーバモードで起動することにします。解凍したhsqldbフォルダの下に「mydb」というフォルダを作成してください。次に、作成した mydb フォルダの下に移動して、コマンドプロンプトから次のコマンドを実行してください。

@java -classpath ../lib/hsqldb.jar org.hsqldb.Server -database mydb

 実行結果は以下のようになります。

図2 HSQLDBの実行 図2 HSQLDBの実行

 以上で、HSQLDBのインストールと実行が完了しました。あまりにも簡単ですが、この手軽さがHSQLDBの魅力です。

[データベース・エクスプローラー]でドライバを設定

 郵便番号データ用テーブルを作成しましょう。テーブルの作成はMyEclipse上から行いたいと思います。MyEclipseには、[データベース・エクスプローラー]という機能があり、大概のDB操作が行えるようになっています。HSQLDBにも対応しています。

 DB操作を行うためには、ドライバを設定しなければなりません。ドライバを設定するには、メニューから[ウィンドウ]→[設定]として設定ウィンドウを開き、[MyEclipse]→[データベース・エクスプローラー]→[ドライバー]とツリーを展開します。

 右側のペインの[新規]ボタンをクリックしてドライバを追加します。次図のウィンドウが表示されたら、[ドライバー・テンプレート]のプルダウンメニューから[HSQLDB Server]を選択します。[JARの追加]ボタンをクリックし、解凍したHSQLDBのlibフォルダ下のhsqldb.jarファイルを指定します。[OK]をクリックして完了です

図3 新規ドライバーの追加 図3 新規ドライバーの追加

[DBブラウザー]でHSQLDBに接続

 では、MyEclipseからHSQLDBに接続しましょう。パースペクティブを[データベース・エクスプローラー]に切り替えてください。メニューの[ウィンドウ]→[パースペクティブを開く]→[MyEclipse データベース・エクスプローラー]を選択してください。

 左側に[DBブラウザー]というビューが表示されますので、下図のようにビューのツールバーから[新規]のアイコンをクリックします。

図4 新規データベース・プロファイル作成 図4 新規データベース・プロファイル作成

 [データベース・プロファイル]のダイアログが表示されたら、プロファイル名に「mydb」、ドライバには、先ほど設定した「HSQLDB Server」、URLは「jdbc:hsqldb:hsql://localhost」、ユーザー名には、「sa」を指定します。パスワードには、何も指定しません。ここまで入力したら、[終了]ボタンをクリックします。

図5 新規データベース接続プロファイルの設定 図5 新規データベース接続プロファイルの設定

 [DBブラウザー]ビューに追加された「mydb」を選択して、ビューのツールバーの[接続を開く]アイコン(左端のPlayアイコン)をクリックして、次のダイアログを表示します。「OK」をクリックすれば、HSQLDBと接続されます。

図6 データベースと接続 図6 データベースと接続

[SQLエディター]でテーブルの作成

 MyEclipseの[SQLエディター]を使用してテーブルの作成および郵便番号データの登録を行います。なお、GUIを使用してテーブルを作成することもできます。これらのSQL文postaldata.zipファイルに入っているので、ダウンロードして解凍しておいてください。

CreatePostalTable.sql
create table "POSTALDATA"(
    "ID" IDENTITY,
    "ZIPCODE" VARCHAR(7) not null,
    "PREF" VARCHAR(16) not null,
    "CITY" VARCHAR(128) not null,
    "TOWN" VARCHAR(128)
);

 [SQLエディター]の起動は、次図のように、[DBブラウザー]上で「mydb[SA]に接続済み」というノードを右クリックし、[新規SQLエディター]を開きます。

図7 SQLエディターを開く 図7 SQLエディターを開く

 エディタ領域に、上記のcreate table文を挿入するか、「開く」アイコンから、CreatePostalTable.sqlファイルを読み込んでください。

 SQL文の実行は緑色をした三角形のアイコンをクリックするだけです。[DBブラウザー]ビューのTABLEノードを右クリックし「更新」を実行すると、確かにテーブルが作成されていることを確認できます。

[SQLエディター]で郵便番号データの登録

 次に、郵便番号データを登録します。今回は東京都のデータだけを用意しました。ほかの道府県のデータを登録する場合は、日本郵政公社からCSV形式のデータをダウンロードし、エディタなどで加工して作成してください。テーブルの作成と同様の操作で、13tokyo.sqlと名付けられたファイルを[SQLエディター]上に読み込み、実行します。

 正しく登録されたかどうかは、[DBブラウザー]からPOSTALDATAテーブルを右クリックし、[生成]→[SELECTステートメント]を実行します。新たな[SQLエディター]が表示され、POSTALDATAを参照するSELECT文が自動生成されるはずなので、これを実行してみてください。下部の[SQL結果]ビューに検索結果が表示されます。

       1|2|3|4 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。