2.2.3 開発手順

以下に、実際にアプリケーションを開発する手順を説明します。

1) Webアプリケーション用のプロジェクトの作成

メニューバーから[ファイル] > [新規] > [プロジェクト]を選択すると、[新規プロジェクト]ウィザードが表示されます。

[新規プロジェクト]ウィザードから[Web] > [動的Webプロジェクト]を選択して、[次へ]をクリックします。

以下の設定項目を確認、入力してください。情報を設定後、[次へ]をクリックします。

設定項目	設定内容
プロジェクト名	WebSample7
ターゲット・ランタイム	Interstage Application Server V12.0 (Java EE 7)
動的 Web モジュールバージョン	3.1
構成	Interstage Application Server V12.0 (Java EE 7) デフォルト構成
EARにプロジェクトを追加	チェックしない

[Java]ページが表示されますので、情報を確認後、[次へ]をクリックします。

設定項目	設定内容
ビルド・パス上のソース・フォルダー	src
デフォルト出力フォルダー	build\classes

[Webモジュール]ページが表示されます。

以下の設定項目を確認、入力後、[完了]をクリックします。

設定項目	設定内容
コンテキスト・ルート	WebSample7
コンテンツ・ディレクトリー	WebContent
web.xmlデプロイメント記述子の生成	チェックする

2) Javaクラスの作成

2-1) データクラスの作成

国名と総人口の情報を保持し、そこから情報を取得するデータクラスを作成します。データクラスの作成は、作成したプロジェクトを選択して、右クリックでコンテキストメニューから[新規] > [クラス]を選択します。[新規Javaクラス]ウィザードが表示されます。

以下の設定項目を確認、入力してください。以下の情報を設定後、[完了]をクリックします。

設定項目	設定内容
ソース・フォルダー	WebSample7/src
パッケージ	sample7
名前	CountryData

以下のソースファイルが生成されます。

ソースファイル	説明
CountryData.java	データクラス

国名と総人口を保持する処理を実装します。以下の赤字の箇所をソースに追加してください。

データクラスの実装(CountryData.java)

package sample7;

public class CountryData {

    private String countryName;
    private int totalPopulation;

    public CountryData(String name, int total) {
        setCountryName(name);
        setTotalPopulation(total);
    }
   
    public String getCountryName() {
        return countryName;
    }
    
    public void setCountryName(String countryName) {
        this.countryName = countryName;
    }
    
    public int getTotalPopulation() {
        return totalPopulation;
    }
    
    public void setTotalPopulation(int totalPopulation) {
        this.totalPopulation = totalPopulation;
    }

}

ポイント

フィールドを追加した後にクラスを選択している状態で、メニューから[ソース] > [getter および setter の生成]を選択することで、getter/setterの追加を行うことができます。

2-2) ロジッククラスの作成

ロジッククラスの作成は、作成したプロジェクトを選択して、右クリックでコンテキストメニューから[新規] > [クラス]を選択します。[新規Javaクラス]ウィザードが表示されます。

以下の設定項目を確認、入力してください。以下の情報を設定後、[完了]をクリックします。

設定項目	設定内容
ソース・フォルダー	WebSample7/src
パッケージ	sample7
名前	PopulationRanking

以下のソースファイルが生成されます。

ソースファイル	説明
PopulationRanking.java	ロジッククラス

順位を入力して国名と総人口を返す処理を実装します。以下の赤字の箇所をソースに追加してください。

ロジッククラスの実装(PopulationRanking.java)

package sample7;

public class PopulationRanking {
    
    private CountryData[] countries;
    
    public PopulationRanking(){
        
        countries = new CountryData[]{
            new CountryData("中国",1373490000),
            new CountryData("インド",1292710000),
            new CountryData("アメリカ",321600000),
            new CountryData("インドネシア",255460000),
            new CountryData("ブラジル",204460000),
            new CountryData("パキスタン",189870000),
            new CountryData("ナイジェリア",178720000),
            new CountryData("バングラデシュ",159860000),
            new CountryData("ロシア",143460000),
            new CountryData("日本",126980000)
        };
        
    }
    
    public CountryData getCountryData(int rank) {
        --rank;
        if (rank < 0 || rank >= countries.length) {
            return null;
        }
        
        return countries[rank];
    }
    
}

3) サーブレットクラスの作成

3-1) サーブレットクラスのひな形の作成

サーブレットクラスのひな形の作成は、作成したプロジェクトを選択して、右クリックでコンテキストメニューから[新規] > [サーブレット]を選択します。[サーブレット作成]ウィザードが表示されます。

以下の設定項目を確認、入力してください。以下の情報を設定後、[次へ]をクリックします。

設定項目	設定内容
プロジェクト	WebSample7
ソース・フォルダー	/WebSample7/src
Java パッケージ	sample7
クラス名	ServletController
スーパークラス	javax.servlet.http.HttpServlet

以下の設定項目を確認、何も変更せずに、[次へ]をクリックします。

設定項目	設定内容
名前	ServletController
URL マッピング	/ServletController

以下の設定項目を確認、入力してください。以下の情報を設定後、[完了]をクリックします。

設定項目	設定内容
修飾子	public
どのメソッド・スタブを作成しますか?	スーパークラスからのコンストラクター継承された抽象メソッド doPost（doGetのチェックを外す）

以下のソースファイルが生成されます。

ソースファイル	説明
ServletController.java	サーブレットクラス

ポイント

ウィザードで指定した内容でweb.xmlにサーブレットマッピングの定義も追加されています。このアプリケーションでは必要ありませんが、web.xmlの編集については、"2.3.8 web.xmlを編集する"を参照してください。

3-2) サーブレットクラスの実装

作成されたサーブレットクラスの赤字の箇所をソースに追加してください。

サーブレットクラス(ServletController.java)

package sample7;

import java.io.IOException;

import javax.servlet.RequestDispatcher;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ServletController
 */
@WebServlet("/ServletController")
public class ServletController extends HttpServlet {
    private static final long serialVersionUID = 1L;
     
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ServletController() {
        super();
        // TODO Auto-generated constructor stub
    }
    
    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        request.setCharacterEncoding("UTF-8");
        ServletContext sc = getServletContext();
        
        // 呼び出すファイル種別取得
        String mode = request.getParameter("mode");
        if (mode != null && mode.equals("top")) {
            // 入力画面のHTMLファイル呼出し
            RequestDispatcher inRd = getServletContext().getRequestDispatcher("/default.jsp");
            inRd.forward(request, response);
            return;
        }
        
        int rank;
        
        // 入力チェック
        try {
            rank = Integer.parseInt(request.getParameter("rank"));
        } catch (NumberFormatException e){
            RequestDispatcher errRd = sc.getRequestDispatcher("/error.jsp");
            errRd.forward(request, response);
            return;
        }
        
        PopulationRanking pop = new PopulationRanking();
        CountryData country = pop.getCountryData(rank);
        
        // 取得した値の確認
        if(country == null){
            RequestDispatcher errRd = sc.getRequestDispatcher("/error.jsp");
            errRd.forward(request, response);
            return;
        }
        
        sc.setAttribute("ranking", country);
        
        RequestDispatcher outRd = sc.getRequestDispatcher("/result.jsp");
        outRd.forward(request, response);
        
    }
}

ポイント

必要な実装をコーディングした後にJavaエディタ上で右クリックし、コンテキストメニューから[ソース] > [インポートの編成]を行うと、プロジェクトに設定されたクラスパスに従った適切なimport文が挿入できます。

4) 入出力画面の作成

4-1) 入力画面のひな形の作成

入力画面となるJSPファイルのひな形を作成します。JSPの作成は、作成したプロジェクトを選択して、右クリックでコンテキストメニューから[新規] > [JSP ファイル]を選択します。[新規 JSP ファイル]ウィザードが表示されます。

以下の設定項目を確認、入力してください。以下の情報を設定後、[次へ]をクリックします。

設定項目	設定内容
親フォルダーを入力または選択	WebSample7/WebContent
ファイル名	default.jsp

以下の設定項目を確認、入力してください。以下の情報を設定後、[完了]をクリックします。JSPが表示されます。

設定項目	設定内容
JSP テンプレートの使用	チェックする
名前	新規 JSP ファイル (html)

4-2) 入力画面の編集

作成されたJSPファイルの赤字の部分を修正します。JSPファイルの編集については、"2.3.4.2 JSPファイルの編集"を参照してください。

入力画面(default.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>世界総人口ランキング</title>
</head>
<body>
<h1>入力画面</h1>
<p>1～10の間で順位を入力してください。</p>
<p></p>
<form action="ServletController" method="post">
    順位：<br>
    <input name="rank" type="text" size="10">位<br>
    <p></p>
    <input type="submit" value="OK">
    <input type="reset" value="クリア">
</form>

</body>
</html>

ポイント

JSPファイルはデフォルトでは、JSPエディタに対応付けられていますが、JSPファイルを選択し、コンテキストメニューから[次で開く] > [Web ページ・エディター]を選択することで、デザインやレイアウトを確認しながら編集できるWebページエディタを使用することもできます。Webページエディタでの編集については、"2.3.5 HTML/JSPファイルをグラフィカルに編集する"を参照してください。

4-3) 出力画面のひな形の作成

入力画面と同様に、ウィザードでJSPファイルを作成します。

以下の値を入力し、[完了]をクリックします。表にない項目は初期値のままでかまいません。

設定項目	設定内容
親フォルダーを入力または選択	WebSample7/WebContent
ファイル名	result.jsp

4-4) 出力画面の編集

作成されたJSPファイルの赤字の部分を修正します。

出力画面(result.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>世界総人口ランキング</title>
</head>
<body>
<h1>出力画面</h1>
総人口ランキング${param.rank}位は「${applicationScope.ranking.countryName}」です。<br>
総人口は${applicationScope.ranking.totalPopulation}人です。
<br>
<hr>
<form action="ServletController" method="post">
    <input type="submit" value="入り口に戻る">
    <input type="hidden" name="mode" value="top">
</form>

</body>
</html>

4-5) エラー画面のひな形の作成

入力画面と同様に、ウィザードでJSPファイルを作成します。
以下の値を入力し、[完了]をクリックします。表にない項目は初期値のままでかまいません。

設定項目	設定内容
親フォルダーを入力または選択	WebSample7/WebContent
ファイル名	error.jsp

4-6) エラー画面の編集

作成されたJSPファイルの赤字の部分を修正します。

エラー画面(error.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>世界総人口ランキング</title>
</head>
<body>

<h1>エラー画面</h1>
指定された範囲内の順位が入力されていないか、またはサーバエラーです。<br>
<br>
<hr>
<form action="ServletController" method="post">
    <input type="submit" value="入り口に戻る">
    <input type="hidden" name="mode" value="top">
</form>

</body>
</html>

5) アプリケーションの動作確認

5-1) プロジェクトとサーバの関連付け

サーバビューでサーバを選択し、コンテキストメニューから[追加および除去]を選択します。
使用可能から作成したプロジェクトを選択し、[追加]をクリックします。

以下の設定項目を確認後、[完了]をクリックします。

設定項目	設定内容
構成済み	WebSample7
サーバーが始動されている場合は変更を即時公開	チェックする

ポイント

サーバビューに配備先となるサーバが登録されていない場合は、サーバを追加する必要があります。サーバを追加する方法については、"6.2.7 アプリケーションの動作確認"を参照してください。

5-2) ブレークポイントの設定

サーブレットクラス(ServletController.java)のdoPost()メソッドの先頭行にブレークポイントを設定します。ブレークポイントは、エディタの左側のルーラー部分をダブルクリックして、設定または解除します。

ポイント

JSPファイルについても同様にJSPエディタでブレークポイントを設定することができます。ただし、ブレークポイントは、JSPタグが記載されている行にしか設定できません。(HTMLタグなどで記載されている部分にブレークポイントを設定することはできません。)

注意

JSPファイルにブレークポイントを設定した場合、異なるフォルダにある同名のJSPファイルでも実行が中断します。

5-3) サーバの起動

サーバビューでサーバを選択し、コンテキストメニューから[デバッグで再始動]を選択します。

サーバビューで以下の情報を確認してください。

確認項目	確認内容
サーバの状態	デバッグ
サーバの状況	同期済み
WARファイル（WebSample7）の状況	同期済み

5-4) アプリケーションの実行

サーバビューで、配備されているプロジェクトを選択して、コンテキストメニューから[Webブラウザ]を選択します。Webブラウザが起動されて、入力画面が開きます。

設定項目	設定内容(例)
入力画面のURL	https://localhost:28585/WebSample7/

[順位:]の入力フィールドに人口ランキングの順位を入力して、[OK]をクリックします。

注意

入力画面のURLに指定されるポート番号については、"6.2.7 アプリケーションの動作確認"のHTTPポート番号を参照してください。

ポイント

プロジェクトを選択し、コンテキストメニューから[実行] > [サーバーで実行]または[デバッグ] > [サーバーでデバッグ]を選択することで、サーバの追加、プロジェクトの追加、サーバの起動、クライアントの起動をまとめて行うことができます。
また、クライアントとして使用するWebブラウザは、メニュー [ウィンドウ] > [Web ブラウザー] から変更することができます。

5-5) アプリケーションのデバッグ

アプリケーションが動作し、ブレークポイントで中断されます。変数ビューで変数の値を確認します。メニューから[実行] > [ステップ・オーバー]を選択し、変数ビューでプログラムの状況を確認します。デバッグについては、"6.2.7.1 デバッグする"を参照してください。

ポイント

変数ビューでは値の確認だけでなく、変更も行うことができます。

デバッガで中断している処理は、メニューから[実行] > [再開]を選択することで再開され、サーバ側での処理が終了し、Webブラウザに出力画面が表示されます。入力した順位の国名と総人口が表示されることを確認してください。

6) 運用環境へのアプリケーションの配布

このアプリケーションを運用環境に配布するには、WARファイルを作成する必要があります。作成したWARファイルは、サーバの配備機能を利用して、サーバに配備します。

6-1) アプリケーションのエクスポート

WARファイルの作成は、エクスポートウィザードから行います。エクスポートウィザードを起動するには、[ファイル] > [エクスポート]を選択します。[エクスポート]ウィザードから[Web] ＞ [WARファイル]を選択し、[次へ]をクリックします。

[WARエクスポート]ページが表示されます。

以下の設定項目を確認、入力してください。以下の情報を設定後、[完了]をクリックします。

設定項目	設定内容
Web プロジェクト	動的Webプロジェクトを指定します。
宛先	WARファイルの作成先を指定します。

"Interstage Application Server V12.0 (Java EE 7)"の場合、[エクスポート]ウィザードの[特定のサーバー・ランタイムに最適化]の指定は、エクスポート結果に影響しません。

6-2) 運用環境への配布

運用環境のInterstage Java EE 7管理コンソールにログインし、ローカルにあるWARファイルを指定することにより、リモート環境から運用環境に配備を行うことができます。