J2EE（JSP・Servlet）の環境でWebアプリケーションの開発方法を学ぶ講座をシリーズで提供しています。２回目はリクエストパラメータを利用して画面を遷移する題材（おみくじ）をMVCモデルで実装してみます。

開発概要

J2EEアプリケーション・サーバ（Tomcat）を利用して開発を行うということを前提に実装を進めていきます。開発ツールには統合開発環境のEclipseを用いることにします。

題材としてサーバでおみくじをひくWebアプリケーションを作成します。画面は起動画面、おみくじスタート画面、占い結果画面の３段階に遷移します。画面遷移の判断にはリクエストパラメータを利用します。

J2EE環境ですので使用言語は当然Java（JSP・Servlet）となり、設計技法にはMVCモデルを使います。MVCモデルとはWebアプリケーションの構成をModel（業務ロジック）ーView（表示）ーController（制御）に分割して設計する技法です。３つのモデルに役割分担することで部品化が促され、ひいてはチーム開発に貢献します。

実装していく過程でEclipseの利用方法が不明な場合は、別途メール等でお知らせください。この講座では、作成済みの仕様と設計書から「J2EE環境でのMVCモデルの実装の仕組みを学ぶ」ことを目的とします。

開発方針

Webアプリケーションの開発環境には図１のようにEclipse2023を用います。

Spring等のフレームワークは使用しません。これは、MVCモデルにおけるhttpプロトコルの処理の実装を直に学んでいただきたいためです。

開発に必要な仕様と最小限の設計ドキュメントは提示します。この情報をもとに、まずは、自分で試行錯誤しながら実装してみてください。

設計仕様

【おみくじの仕様】
以下の条件を具現化するWebアプリケーションの作成を行います。
（条件）
・urlを指定してサイトにアクセスするとおみくじ開始の画像と「スタートボタン」を表示します
・スタートボタンをクリック後おみくじを回しているアニメーションと「おみくじを引くボタン」を表示します
・おみくじを引くボタンをクリック後に占いの結果を表示します
・占いの結果は４種類で以下の確率で出現するようにします
　　大吉　10%
　　中吉　40%
　　小吉　40%
　　大凶　10%

【Model（処理ロジック）の設計方針】
以下の仕様で実装します。
（仕様）
・０から９までの乱数を発生させる
（Javaの例：int ran=new java.util.Random().nextInt(10);）
・乱数値が０ならば占い結果は「大凶」とします
・乱数値が１ならば占い結果は「大吉」とします
・乱数値が２or３or４or５ならば占い結果は「中吉」とします
・上記以外は「小吉」とします
（実装）
・JavaBeansの仕様に基づきOmikujiBean.javaを作成します
・package名は jp.ict.aso.model とします
・作成するクラスはSerializableインターフェースを実装します
・変数はprivate宣言します
・引数なしのコンストラクタを実装します
・コンストラクタ内に処理ロジックを実装します、このとき処理結果はインスタンス変数に格納します
・setterメソッドを実装します　
・getterメソッドを実装します　　

外部設計

接続urlはhttp://localhost:8080/libcon/Omikujiとします。よってEclipseの動的Webプロジェクトの名前はlibconとなり、サーブレットのurlパターンはOmikujiとなります。

Eclipseのメニューバーより
ファイル→新規→動的Webプロジェクト→「libcon」プロジェクトを作成する
※作成済みであればこの処理は必要ありません

urlにアクセスすると図２のような、起動画面が表示されます。「スタートボタン」をクリックすると図３と図３-１のような、神社にお参りするアニメーションが表示されたおみくじスタート画面へ遷移します。ここで「おみくじを引く」ボタンをクリックすると図４のような、占いの結果画面に遷移します。

※GIFアニメーションの作り方はこのページの最後の方で説明しています。

内部設計

クラス連携図は図５のようになります。

おみくじロジックのクラス図は以下のようになります。
-------------------------------------- //クラス名
OmikujiBean
-------------------------------------- //フィールド（プロパティ）
- unsei:String
-------------------------------------- //メソッド
+ OmikujiBean() 　　　　　　　　//コンストラクタ,ロジック
+ getUnsei():String 　　　　　　　//ゲッター
--------------------------------------
- private
+ public

実装手順

１．おみくじロジック用JavaBeansクラスを作成します

Eclipseパッケージ・エクスプローラより
libconプロジェクトを右クリック→新規→クラス
→以下の内容で作成

・OmikujiBean.java　
　　パッケージ：jp.ict.aso.model
　　名前：OmikujiBean
　　ソースコード：考えましょう！

２．リクエストコントロール用Servletクラスを作成します

Eclipseパッケージ・エクスプローラより
libconプロジェクトを右クリック→新規→その他→Web→サーブレット
→以下の内容で作成する

・OmikujiServlet.java　
　　パッケージ：jp.ict.aso.controller
　　クラス名：OmikujiServlet
　　ソースコード：考えましょう！　※アノテーションは/Omikuji

３．起動画面を表示するJSPファイルを作成します

Eclipseパッケージ・エクスプローラより
libconプロジェクトを右クリック→新規→その他→Web→JSPファイル
→以下の内容で作成する

・omikujiView.jsp
　　保存場所：libcon/src/main/webapp/WEB-INF/jsp
　　ファイル名：omikujiView.jsp
　　ソースコード：考えましょう！

４．おみくじスタート画面を表示するJSPファイルを作成します

Eclipseパッケージ・エクスプローラより
libconプロジェクトを右クリック→新規→その他→Web→JSPファイル
→以下の内容で作成する

・omikujiStart.jsp
　　保存場所：libcon/src/main/webapp/WEB-INF/jsp
　　ファイル名：omikujiStart.jsp
　　ソースコード：考えましょう！

５．占い結果を表示するJSPファイルを作成します

Eclipseパッケージ・エクスプローラより
libconプロジェクトを右クリック→新規→その他→Web→JSPファイル
→以下の内容で作成する

・omikujiResult.jsp
　　保存場所：libcon/src/main/webapp/WEB-INF/jsp
　　ファイル名：omikujiResult.jsp
　　ソースコード：考えましょう！

実行確認

サーブレットクラス（OmikujiServlet.java）を実行します！！

Eclipseパッケージ・エクスプローラより
OmikujiServlet.javaを右クリック→実行→サーバーで実行
→図６のように実行される

ソースコード例

以下に各プログラムのソースコードの例（本文内では「考えましょう！」になっている部分）を示しますので、実装の参考にしてください。