見出し画像

MVCモデルによるWebアプリケーション開発（No.10スロットマシン）-EE8

office・M

JavaEE8（JSP・Servlet）の環境でWebアプリケーションの開発方法を学ぶ講座をシリーズで提供しています。今回はセッションパラメータで情報を受け渡す方法とgifのアニメーションを作成する方法を学びます。チーム開発での役割分担を想定しています。

2024年9月よりECLIPSEのバージョンを最新版（Version: 2024-06 (4.32.0)）に変更しました。


開発概要

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

題材としてスロットマシンを取り上げます。数字（絵文字）の組み合わせにより配当の点数が増減するゲームをWebアプリケーションで作成します。

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

今回、業務ロジックであるBeanを含むすべての処理と回転アニメーションを実装することにします。

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

開発方針

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

図1．開発環境 Eclipse2024

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

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

設計仕様

【スロットマシンの仕様】
以下の仕様を実現するWebアプリケーションの作成を行います。
（概要）
３つの乱数を発生させて当たりを判定するスロットマシンを作成します。
数字あるいは絵文字の画像の回転のアニメーションをつけます。
（仕様）
①メッセージ表示
・３つの乱数を発生させそれぞれインスタンス変数に格納する
・３組揃いでVerryGood、２組揃いでGood、のメッセージを表示する（ばら
　ばらでは表示なし）
②持ち点と配当
・掛け点、持ち点のインスタンス変数を用意する
・初期値で持ち点は10点、掛け点は１点とする
・3組揃いで掛け点の5倍を持ち点にプラスする
・2組揃いで掛け点の2倍を持ち点にプラスする
・ばらばらで掛け点を持ち点よりマイナスする
・回転結果、掛け点、持ち点、メッセージ　の順にヘッダー部に表示する

外部設計

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

Eclipseのメニューバーより
ファイル→新規→動的Webプロジェクト→「slotmachine」プロジェクトを作成する → 図2の内容で設定する

図2．動的Webプロジェクトの設定

※作成済みであればこの処理は必要ありません

urlにアクセスすると図３のような起動画面が表示されます。スタートボタンで数字（絵文字）の回転が始まり、図４のようにストップボタンが押された時点での数字（絵文字）の組み合わせにより配当が決まり持ち点が増減します。

図3．スロットマシン起動画面
図4．スロットマシン配当決定画面

内部設計

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

図5．MVCモデル図（クラス連携図）

配当を計算するロジック（SlotmachineBean）のクラス図は図６のようになります。

図6．SlotmachineBeanクラス図

実装準備

１．画像とアニメーションを準備します

imagesフォルダ内に０～９に対応した画像と回転アニメーションの画像を保存します。
フリー画像サイト → https://pixabay.com/illustrations/search/　
アニメーションの作り方（gimpのインストールが必要です） → https://slowlife.halfmoon.jp/pdf/GIF%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9.pdf

今回、特に数字に対応したイラストを以下のWebサービスから使用させていただきました。
https://loosedrawing.com/

図7．フリーイラストダウンロードサイト

作成した数字回転GIFアニメーションの例を提示します。今回は３桁の数字を10枚重ねたパラパラアニメーションを作成していますが1桁目、2桁目、3桁目を別々に作成した方が良いかもしれません。

図7.1 数字回転GIFアニメーションの例

imagesフォルダはwebapp下に配置します。以下の例は、回転アニメーションを桁ごとに作成しています。

図8．imagesフォルダの配置

実装手順

１．配当計算ロジック用JavaBeansクラスを作成します

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

・SlotmachineBean.java　
　　パッケージ：jp.ict.aso.model
　　名前：SlotmachineBean
　　ソースコード：図６を参照して考えましょう！

【ヒント】配点計算ロジックの構成：
public void slotRolling(){
　mes="";
　numA=new java.util.Random().nextInt(10)%10;
　numB=new java.util.Random().nextInt(10)%10;
　numC=new java.util.Random().nextInt(10)%10;
　if((numA==numB)&&(numB==numC)){
　　zanten=zanten+kaketen*matchi3;
　　mes="VerryGood ";
　}else if((numA==numB)||(numB==numC)||(numA==numC)){
　　zanten=zanten+kaketen*matchi2;
　　mes="Good ";
　}else{
　　zanten=zanten-kaketen;
　}
}

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

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

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

【ヒント】ソースコードの構成：
doGet
　//slotmachineView.jsp にフォワード
doPost	
　//session変数の宣言
　HttpSession session = request.getSession();
　//ローカル変数の宣言
　　□□□□□□□□□□□□□□□□□□□ ← 考えましょう
　//リクエストパラメータからactionの値を取得
　String action = request.getParameter("action")
　//actionパラメータの条件判断
　if(action==null) {
　　　//slotmachineView.jsp にフォワード
　}else if(action.equals("start")) {
　　　//slotmachineViewから送信されたリクエストパラメータを取得
　　　zanten=request.getParameter("zanten")
　　　kaketen=request.getParameter("kaketen")
　　　//セッションパラメータに保存
　　　session.setAttribute("zanten", zanten)
　　　session.setAttribute("kaketen", kaketen)
　　　//slotmachineStart.jsp にフォワード
　}else if(action.equals("result")) {
　　　//slotmachineStartから送信されたセッションパラメータを取得
　　　zanten=(String)session.getAttribute("zanten")
　　　kaketen=(String)session.getAttribute("kaketen")
　　　//配当計算ロジックの実体化とローリング設定実行
　　　SlotmachineBean sb=new SlotmachineBean()
　　　sb.setKaketen(Integer.parseInt(kaketen))
　　　sb.setZanten(Integer.parseInt(zanten))
　　　sb.slotRolling()
　　　//配点反映結果をセッションパラメータに保存
　　　session.setAttribute("zanten", sb.getZanten())
　　　session.setAttribute("kaketen", sb.getKaketen())
　　　//インスタンスをリクエストパラメータに保存
　　　request.setAttribute("rolling", sb)
　　　//slotmachineResult.jsp にフォワード
　}else if(action.equals("end")) {
　　　//セッション破棄
　　　session.invalidate();
　　　//slotmachineView.jspにフォワード
　}
}

３．初期状態の画面のJSPファイルを作成します

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

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

【ヒント】
<body background="images/back.png" >
<h1>スロットマシン</h1>
<form action="Slotm?action=start" method="post">
<input type="submit" value="スタート　"><font color=black size=+2>
　掛け点：<input type="number" name="kaketen" value="1">
　残点：<input type="number" name="zanten" value="10" >
　状態：</font>
</form>
<hr>
<p><table border=0><tr>
<td><img src=images/7.png width=200></td>
<td><img src=images/7.png width=200></td>
<td><img src=images/7.png width=200></td>
</tr></table>
</p>
</body>

４．回転開始状態のJSPファイルを作成します

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

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

【ヒント】
<body background="images/back.png" >
<h1>スロットマシン</h1>
<form action="Slotm?action=result" method="post">
<input type="submit" value="ストップ　"><font color=black size=+2>
　掛け点：<%=session.getAttribute("kaketen") %>
　残点：<%=session.getAttribute("zanten") %>
　状態：</font><br>
</form>
<hr>
<p><table border=0><tr>
<td><img src=images/number1.gif width=200></td>
<td><img src=images/number2.gif width=200></td>
<td><img src=images/number3.gif width=200></td>
</tr></table>
</p>
</body>

５．持ち点確定状態のJSPファイルを作成します

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

・slotmachineResult.jsp
　　保存場所：slotmachine/src/main/webapp/WEB-INF/jsp ← 注意！
　　ファイル名：slotmachineResult.jsp
　　ソースコード：考えましょう！リクエストスコープで転送されたbeanの
　　　　　　　　　インスタンスを取得するのを忘れないように！

【ヒント】
<body background="images/back.png" >
<h1>スロットマシン</h1>
<form action="Slotm?action=start" method="post">
<input type="hidden" name="kaketen" value='<%=session.getAttribute("kaketen") %>'  >
<input type="hidden" name="zanten" value='<%=session.getAttribute("zanten") %>' >
<input type="submit" value="再スタート"><font color=black size=+2>
　掛け点：<%=sb.getKaketen() %>
　残点：<%=sb.getZanten() %>
　状態：<%=sb.getMes() %></font>
</form>
<hr>
<p><table border=0><tr>
<td><img src=images/<%=sb.getNumA() %>.png width=200></td>
<td><img src=images/<%=sb.getNumB() %>.png width=200></td>
<td><img src=images/<%=sb.getNumC() %>.png width=200></td>
</tr></table>
</p>
<form action="Slotm?action=end" method="post">
<input type="submit" value="終了">
</form>
</body>

実行確認

サーブレットクラス（SlotmachineServlet.java）を実行します。初期状態の画像、回転状態の画像、持ち点の増減を確認します。

図8．スロットマシン実行画面

ソースコード例と画像例

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

また、プログラム中で使用するイメージ画像を次のセクションに置きますので、ダウンロードして使用してください。

ここから先は

401字 / 8画像

¥ 1,000

この記事が気に入ったらサポートをしてみませんか？