前回はEclipseの拡張機能であるWTP (Web Tools Platform) の概要、WTPを組み込んだ開発環境の構築、および構築した環境からPowerGres Plusのデータを参照、更新する方法をご紹介しました。これによりPowerGres PlusとEclipseがシームレスに連携できることを確認しました。

今回は、引き続きこの環境を使って、Webアプリケーションを作成していきます。

WTPには、さまざまな機能がありますが、ポイントはJ2EEプラットフォーム上で動作するWebアプリケーションの開発機能の強化に置かれています。J2EEプラットフォーム上で動作するWebアプリケーションの主流はサーブレットとJSPです。 そこで今回は、これらを使ったWebアプリケーションを作成していきます。

サーブレットとJSPは、ともにWebサーバー上でJavaを動作させるための仕組みで、機能面の違いはありません。Javaのテクノロジをベースとしているため、Windows、UNIX、Linux など複数のOSで動作します。

サーブレットの動作の仕組みは次のようになります。 クライアントからWebサーバーにリクエストを行います。Webサーバーはリクエストを受け、サーブレットからHTMLを動的に生成し、その結果をクライアントに返却します。2回目以降の呼び出しでは、Webサーバーはメモリに常駐したオブジェクトを参照します。これにより、処理の高速化を実現します。

JSPもサーブレットと同様にWebサーバー上で動作しますが、最初にJSPファイルに対する要求があったときにコンパイルされ、サーブレットのオブジェクトが生成されます。それ以降の動作はサーブレットと同様です。

なお、サーブレットはJavaだけで記述するため、画面表示用のHTMLタグの記述に、out.printlnというメソッドを繰り返し使用します。このため、冗長なプログラムコードになる傾向があります。 一方JSPは、HTMLタグの中にJavaのコードを埋め込むため、画面デザインとプログラムロジックを分けて作成することができます。

Webアプリケーションを作成する前に、WTPを利用するメリットをご紹介します。

WTPが提供されるまでは、Webサーバーをはじめ、アプリケーション開発に欠かせない複数のプラグインを用意する必要がありました。 WTPを利用すればこれだけで必要な環境が構築できます。 特に、中規模以上のシステムを開発する場合、サーブレットとJSPを組み合わせて使うことが多いため、この環境を一括して作成できるというメリットがあります。

WTPには、コードアシストや検証機能がついたJSP、HTML、JavaScriptなどの専用エディタが含まれています。 また、ウィザードを利用して、サーブレットやJSPのひな型を簡単に作成することができます。 今までサーブレットの開発では、「web.xml」というプロジェクト構成ファイルを自分で修正しなければなりませんでした。WTPのウィザードでサーブレットのプロジェクトを作成すると、このプロジェクト構成ファイルが自動的に編集されます。

最初にJavaで記述するサーブレットをご紹介します。 今回、ご紹介するサンプルは、「Eclipseを使ったアプリケーション開発 (前編)」で作ったテーブルbooksの内容をブラウザに表示するものです。

WTPにはWebアプリケーション用のプロジェクトを作成する機能があります。これを利用すると、簡単にプロジェクトを作成できます。 また、今までサーブレットの開発で不可欠だった「web.xml」の編集が、自動的に行われるようになります。

ツールバーから、「ファイル」→「新規」→「プロジェクト」を選択し、プロジェクト一覧から「動的Webプロジェクト」を選択します。 「新規動的Webプロジェクト」というダイアログが表示されるので、プロジェクト名に「DbSample2」と入力し、「終了」ボタンをクリックします。 プロジェクトの作成に成功すると、プロジェクト・エクスプローラーに「DbSample2」が登録されます。

図 1: プロジェクトの作成画面

プロジェクトにJDBCを登録し、アプリケーションがJDBCのインタフェースを使ってデータベースにアクセスできるようにします。

プロジェクト・エクスプローラーから「DbSample2」を開き、「WebContent」→「WEB-INF」を選択します。 「WEB-INF」の「lib」を右クリックし、ポップアップメニューから「インポート」を選択します。 「インポート」のダイアログが表示されるので、「一般」の「ファイル・システム」を選択し、「次へ」ボタンをクリックします。

図 2: インポートのダイアログ

以下のダイアログが表示されるので、「参照」ボタンをクリックし、JDBCの格納ディレクトリ「C:\Program Files\PowerGres Plus\share\java\jdbc3」を選択します。 ダイアログに選択したディレクトリが表示されるので、「jdbc3」のチェックボックスをオンにして、「終了」ボタンをクリックします。

図 3: JDBCの登録画面

今回のサンプルでは、データベースにアスセスする処理を1つのクラスとして定義します。

プロジェクト・エクスプローラーから「DbSample2」を右クリックし、ポップアップメニューから「新規」→「クラス」を選択します。 「新規 Javaクラス」というダイアログが表示されるので、パッケージ名に「Sample」、名前に「DbAccess」と入力し、「終了」ボタンをクリックします。

図 4: データベースアクセスクラスの登録画面

WTPには、サーブレットを作成するウィザードが含まれています。これを使いサーブレットのひな型をプロジェクトに登録します。

プロジェクト・エクスプローラーから「DbSample2」を右クリックし、ポップアップメニューから「新規」→「サーブレット」を選択します。「サーブレットの作成」ダイアログが表示されるので、以下の項目を設定し「終了」ボタンをクリックします。

図 5: サーブレットの作成画面

以上でプロジェクトの枠組みは完了しました。

さきほど作成したデータベースアクセスクラスのひな型を修正します。

プロジェクト・エクスプローラーから「DbSample2」を開き、「DbAccess.java」を選択します。

図 6: DbAccess.javaの編集画面

以下のように「DbAccess.java」を修正します。太字が変更箇所です。

通常、Eclipseではコンパイルのための特別な操作は必要ありません。自動的にビルドする設定になっていれば、ソースファイルの修正後、直ちにコンパイルが行われます。ビルドの設定は、ツールバーの「プロジェクト」を選択し、プルダウンメニューの「自動的にビルド」のチェックを確認してください。

package sample;

import java.sql.*;

public class DbAccess {ldelim}

    private Connection connect;
    private Statement state;
    private String driver, connectURL, id, pass;

    public DbAccess() {ldelim}
        connectURL = "jdbc:postgresql:dbsample";
        driver = "org.postgresql.Driver";
        id = "id";
        pass = "pass";
    {rdelim}

    public synchronized void ConnectOpen() throws Exception {ldelim}
        Class.forName(driver);
        connect = DriverManager.getConnection(connectURL, id ,pass);
        state = connect.createStatement();
    {rdelim}

    public ResultSet ExeQuery(String s) throws Exception {ldelim}
      return state.executeQuery(s);
    {rdelim}

    public synchronized void ConnectClose() throws Exception {ldelim}
        if (state != null)
            state.close();

        if (connect != null)
          connect.close();
    {rdelim}
{rdelim}

DbAccessはデータベースへのアクセスを行うクラスです。このクラスのコンストラクタでJDBCの接続情報を設定します。接続情報の詳細については、「Eclipseを使ったアプリケーション開発 (前編)」で説明しているので、そちらを参照してください。 ConnectOpenはドライバクラスのロード、およびデータベースへの接続を行います。 ExeQueryは検索用クエリを実行します。ConnectCloseはデータベースとの接続を終了します。

次にサーブレットのひな型を修正します。

プロジェクト・エクスプローラーから「DbSample2」を開き「SampleSarvlet.java」を選択します。

図 7: SampleSarvlet.javaの編集画面

以下のように「SampleSarvlet.java」を修正します。

package sample;

import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;

// 追加 ここから
import java.io.PrintWriter;
import java.sql.*;
// ここまで


/**
 * Servlet implementation class for Servlet: GoodsDisplayServlet2
 *
 */

public class SampleSarvlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {ldelim}

    /* (non-Java-doc)
     * @see javax.servlet.http.HttpServlet#HttpServlet()
     */
    public SampleSarvlet() {ldelim}
        super();
    {rdelim}

    /* (non-Java-doc)
     * @see javax.servlet.http.HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {ldelim}
        // TODO Auto-generated method stub

        // 追加 ここから
        response.setContentType("text/html; charset=Windows-31J");
        PrintWriter pw = response.getWriter();

        pw.println("<HTML><BODY><TABLE border=1>");
        pw.println("<TR>");
        pw.println("<TH>ISBN</TH>");
        pw.println("<TH>TITLE</TH>");
        pw.println("<TH>AUTHOR</TH>");
        pw.println("<TH>PRICE</TH>");
        pw.println("</TR>");

        DbAccess db = new DbAccess();

        try {rdelim}
          db.ConnectOpen();
          ResultSet res = db.ExeQuery("SELECT * FROM books ORDER BY price");

            while (res.next()){ldelim}
                pw.println("<TR>");
                pw.println("<TD>" + res.getString(1)+ "</TD>");
                pw.println("<TD>" + res.getString(2)+ "</TD>");
                pw.println("<TD>" + res.getString(3)+ "</TD>");
                pw.println("<TD>" + res.getString(4)+ "</TD>");
                pw.println("<TR>");
            {rdelim}

        {rdelim} catch (Exception e) {ldelim}
            e.printStackTrace();

      {rdelim} finally {ldelim}
            try {ldelim}
              db.ConnectClose();
          {rdelim} catch (Exception e) {ldelim}
              e.printStackTrace();
          {rdelim}
      {rdelim}


        pw.println("</TABLE>");
        pw.println("</BODY>");
        pw.println("</HTML>");
        // ここまで
    {rdelim}

    /* (non-Java-doc)
     * @see javax.servlet.http.HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {ldelim}
        // TODO Auto-generated method stub
    {rdelim}
{rdelim}

サーブレットの基本クラス javax.servlet.http.HttpServletを継承したSampleSarvletクラスがひな型として作成されます。 今回はブラウザでサーブレットのURLを指定した場合に呼び出されるdoGetメソッドに処理を記述します。 最初にデータベースアクセスクラスDbAccessを作成し、db.ConnectOpenで接続を確立します。その後、db.ExeQueryでテーブルを取得し、resに結果を格納します。 最後にgetStringを使って、取得したテーブルを画面に出力します。

以上でソースコードの修正は完了です。続いて、アプリケーションを実行してみます。

プロジェクト・エクスプローラーから「DbSample2」を開き「SampleSarvlet.java」を右クリックします。 表示されるポップアップメニューの「実行」から「1 サーバーで実行」を選択します。 サーバーの起動ダイアログが表示されるので、そのまま「終了」ボタンをクリックします。

図 8: サーバーの選択画面

簡易ブラウザが起動し、以下のような一覧が表示されます。

図 9: サーブレットの実行画面

ここで作成するアプリケーションは、サーブレットと同様に、テーブルbooksの内容をブラウザに表示するものです。

サーブレットと同様に、Webアプリケーションのプロジェクトを作成します。

ツールバーから、「ファイル」→「新規」→「プロジェクト」を選択し、プロジェクト一覧から「動的Webプロジェクト」を選択します。 「新規動的Webプロジェクト」というダイアログが表示されるので、プロジェクト名に「DbSample3」と入力し、「終了」ボタンをクリックします。

図 10: プロジェクトの作成画面

サーブレットと同様の手順でプロジェクトにJDBCを登録します。

このアプリケーションでもデータベースアクセスクラス「DbAccess」を使用します。サーブレットと同様の手順で「DbAccess.java」をプロジェクトに登録します。

JSPのひな型をプロジェクトに登録します。

プロジェクト・エクスプローラーから「DbSample3」を右クリックし、ポップアップメニューから「新規」→「JSP」を選択します。 「新規 JavaServer Page」ダイアログが表示されるので、ファイル名に「SampleJSP.jsp」と入力し、「終了」ボタンをクリックします。

図 11: JSPの登録画面

作成したJSPのひな型を修正します。

プロジェクト・エクスプローラーから「DbSample3」の「SampleJSP.jsp」を開きます。 図12のように、WTPのJSP専用エディタが起動します。

図 12: SampleJSP.jspの編集画面

以下のように「SampleJSP.jsp」を修正します。

<%@ page language="java" contentType="text/html; charset=windows-31j" pageEncoding="SHIFT-JIS"%>

<%@ page import="java.sql.*" %>
<sp:useBean id="data" class="sample.DbAccess" />


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
<title>Sample JSP</title>
</head>
<body>

<table border="1">
<tr><th>ISBN</th><th>TITLE</th><th>AUTHOR</th><th>PRICE</th></tr>

<%
try {ldelim}
    data.ConnectOpen();
    ResultSet res = data.ExeQuery("SELECT * FROM books ORDER BY price");

    while (res.next()){ldelim}
%>
        <tr>&td;><%= res.getString(1) %<>/td<
        <td><%= res.getString(2) %></td>
        <td><%= res.getString(3) %></td>
        <td><%= res.getString(4) %></td></tr>
<%
    {rdelim}
{rdelim} catch (Exception e) {ldelim}
    e.printStackTrace();

{rdelim} finally {ldelim}
    try {ldelim}
        data.ConnectClose();
    {rdelim} catch (Exception e) {ldelim}
        e.printStackTrace();
    {rdelim}
{rdelim}
%>
</table>

</body>
</html>

HTMLタグを使用して、画面表示を行います。プログラムコードは<% %>で囲って、埋め込みます。以下の宣言では、データベースアクセスクラス DbAccess のオブジェクト作成と参照先を指定しています。

<jsp:useBean id=”db” class=”sample.DbAccess” />

以上でソースコードの修正は完了です。続いて、アプリケーションを実行してみます。

プロジェクト・エクスプローラーから「DbSample3」の「SampleJSP.jsp」を右クリックします。 表示されるポップアップメニューの「実行」から「1 サーバーで実行」を選択します。 以下のようなダイアログが表示されるので、そのまま「終了」ボタンをクリックします。

図 13: サーバーの選択画面

簡易ブラウザが起動し、以下のような一覧が表示されます。

図 14: JSPの実行画面

前回から2回にわたってWTPをメインにEclipseとPowerGres Plusの連携についてご紹介しました。

EclipseはJavaの開発環境として広く浸透していますが、Webアプリケーションの開発には、環境構築のためのプラグインの用意など、いくつかの手順やノウハウが必要でした。しかし、これらの課題は、WTPによってクリアされました。

WTPには、ウィザードによるプロジェクト作成機能、コードアシスト機能がついたJSP、HTMLの専用エディタ、簡易ブラウザ、Webサーバーの制御機能などがあり、Webアプリケーションの開発に必要な機能を一括して提供しています。

WTPの開発は現在も活発に進行しています。ロードマップでは、今年の第3四半期には、Eclipse 4.0に対応したWTP 2.0がリリースされる予定です。今後もEclipseとWTPの動向に注目していきたいと思います。