MVCモデルによるWebアプリケーション開発（No2.おみくじ）-EE8
JavaEE8（JSP・Servlet）の環境でWebアプリケーションの開発方法を学ぶ講座をシリーズで提供しています。２回目はリクエストパラメータを利用して画面を遷移する題材（おみくじ）をMVCモデルで実装してみます。
2024年9月よりECLIPSEのバージョンを最新版（Version: 2024-06 (4.32.0)）に変更しました。合わせて文中のソースコード（"考えましょう！"になっている部分のファイル）とおみくじの画像ファイルなどを9月限定のタイムセールで 50％ off で提供いたします。
開発概要
JavaEE8アプリケーション・サーバ（Tomcat）を利用して開発を行うということを前提に実装を進めていきます。開発ツールには統合開発環境のEclipseを用いることにします。
題材としてサーバでおみくじをひくWebアプリケーションを作成します。画面は起動画面、おみくじスタート画面、占い結果画面の３段階に遷移します。画面遷移の判断にはリクエストパラメータを利用します。
JavaEE8環境ですので使用言語は当然Java（JSP・Servlet）となり、設計技法にはMVCモデルを使います。MVCモデルとはWebアプリケーションの構成をModel（業務ロジック）ーView（表示）ーController（制御）に分割して設計する技法です。３つのモデルに役割分担することで部品化が促され、ひいてはチーム開発に貢献します。
実装していく過程でEclipseの利用方法が不明な場合は、別途メール等でお知らせください。この講座では、作成済みの仕様と設計書から「JavaEE8環境でのMVCモデルの実装の仕組みを学ぶ」ことを目的とします。
開発方針
Webアプリケーションの開発環境には図１のようにEclipse2024を用います。
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」プロジェクトを作成する
→図1.1の内容で設定する
※作成済みであればこの処理は必要ありません
urlにアクセスすると図２のような、起動画面が表示されます。「スタートボタン」をクリックすると図３と図３.１のような、神社にお参りするアニメーションが表示されたおみくじスタート画面へ遷移します。ここで「おみくじを引く」ボタンをクリックすると図４のような、占いの結果画面に遷移します。
※GIFアニメーションの作り方はこのページの最後の方で説明しています。
内部設計
クラス連携図は図５のようになります。
おみくじロジックのクラス図は以下のようになります。
実装手順
１．おみくじロジック用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
ソースコード：考えましょう！
６．画像ファイルを配置します
Eclipseパッケージ・エクスプローラより
libconプロジェクト配下の src/main/webapp 右クリック→新規→フォルダ→imagesフォルダを作成
→図６のような画像を作成して各画像をimagesフォルダへコピーする
※画像ファイルは適切なものを用意してください。
実行確認
サーブレットクラス（OmikujiServlet.java）を実行します！！
Eclipseパッケージ・エクスプローラより
OmikujiServlet.javaを右クリック→実行→サーバーで実行
→図７のように実行される
ソースコード例
以下に各プログラムのソースコードの例（本文内では「考えましょう！」になっている部分）を示しますので、実装の参考にしてください。
また、おみくじ関連の画像ファイルをアーカイブしたZIPファイルを次のセクションに置きますので、ダウンロードして使用してください。
ここから先は
¥ 1,000
Amazonギフトカード5,000円分が当たる
この記事が気に入ったらチップで応援してみませんか？