前回の続き。
今回はとりあえず実装したじゃんけんの画面を実装してみる。

参考文献

今回は下記の書籍を参考にして画面を実装した。

あまりに単純すぎたか、現状では最初の数十ページしか参考にしていない。

WebGUIの実装に向けて

とりあえず、現時点ですべきことを列挙してみる。
今はデータベースは使っていないので、こんな感じだろう。

WebGUIの(現時点での)ToDoリスト

じゃんけんを行う画面の実装
- じゃんけん前の画面の実装
- 勝敗を表示する画面の実装

じゃんけんを行う画面の実装

書き忘れていたが、このプロジェクトはWindows上で、Eclipse IDEにSpling tools4をインストールした環境で開発している。
他の開発環境やOSであれば適宜読み替えてほしい。

なお、~~面倒だったから~~英語のトラブルシューティングにあたっても大丈夫なように日本語化はしていない。

プロジェクトの設定

まずは現時点で必要なspring bootの設定を列挙してみよう。

Spring web: webページを表示するために必要
Thymeleaf: じゃんけんの結果を表示するために、値をページに紐付ける必要がある

どうやらspring bootで一度プロジェクトを作ってしまえば後で設定を変えることができるみたいなので、
プロジェクトを右クリックしてから下記のスクリーンショットのように選択して、上記のライブラリを追加した。

HTMLの実装

まずはHTMLの実装……の前に、プロジェクト全体のエンコーディングをUTF-8に変更しておこう。
Thymeleafを使用し、HTMLを書き換えるのに使うエンコーディングはUTF-8のようなので、
動作確認の時点で慌ててエンコーディングを変更する羽目になる(なった)。

プロジェクトを右クリック、もしくはAlt+Enterでプロパティを表示し、テキストファイルのエンコーディングをUTF-8を指定しよう。

そしてsrc/main/resources/templatesの直下に次のようなHTMLを持つindex.htmlを作った。

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>練習用じゃんけんアプリケーション</title>
</head>
<body>

<h1>じゃんけんしましょう</h1>

下記の3つのボタンからどれか選んでね。

<hr>

<table><td>
<form method="post" action="/result">
<input type="hidden" name="hand" value="1">
<input type="submit" value="グーを出す">
</form></td><td>
<form method="post" action="/result">
<input type="hidden" name="hand" value="2">
<input type="submit" value="チョキを出す">
</form></td><td>
<form method="post" action="/result">
<input type="hidden" name="hand" value="3">
<input type="submit" value="パーを出す">
</form></td></table>

</body>
</html>

全部のボタンは同じコードを実行するけど、「hidden」を持つインプットフォームにじゃんけんの手のデータをもたせる事により、
プレイヤーの手を認識できるようにしてある。

このボタンを押した先のhtmlもstart/result.htmlに実装する。
参考文献をもとにページを作っているため、若干フォルダの切り方がおかしくなっている気もするが気にしないでおく。

result.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>練習用じゃんけんアプリケーション</title>
</head>
<body>
<h1>じゃんけんぽん</h1>
<hr>
あなたの手は<div th:text="${player}"></div>、コンピュータの手は<div th:text="${cpu}"></div>
<p>
結果は<div th:text="${result}"></div>です。
</p>
<hr>
<a href="./start">もう一回行う</a>
</body>
</html>

コントローラの実装

画面は実装できたから、それを制御するコードを実装する。
適当にクラス名はJankenControllerとしよう。

そして「依存性の注入」とやらでJankenModelを紐付け……する必要が無いなこれ。JankenModelのインスタンスを結果画面以外で使わないな。
勝敗履歴の表示や蓄積もページを跨いでインスタンスを持っておく必要がまったくないから、そのような機能は次の課題にしておくか。

ということで、各画面ごとの処理を実装したのがこちら。

JankenController.java

package personal.mickie.janken;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

import personal.mickie.janken.Model.JankenHands;
import personal.mickie.janken.Model.JankenModel;
import personal.mickie.janken.Model.JankenResult;

@Controller
public class JankenController {
	
@GetMapping(value="/start")
	public String startPage() {
		return "index";
	}

@PostMapping("/result")
	public String postHand(@RequestParam("hand") int hand_code, Model model) {
		JankenModel cpu = new JankenModel();
		JankenHands player = JankenHands.GetHandFromCode(hand_code);
		
		cpu.setCpuHand();
		
		JankenResult result = cpu.checkResult(player);
	
		model.addAttribute("cpu", cpu.getCpuHandName());
		model.addAttribute("player", player.getHandName());
		model.addAttribute("result", result.toString());
		
		return "start/result";
	}
	
}

参考文献を読んでいたら特にいうべきことも無いと思う。

動作確認

プロジェクトをビルド、実行して、
http://localhost:8080/startにアクセスすれば下記画面にアクセスできる。
ちょっと懐かしさを感じるシンプルさですね。

もちろんボタンをクリックすれば結果が出る。
無駄に改行されてしまっているのは20年前のHTMLの知識を使ってしまっているからだろう。ちょっと調べておきます。

ソースコードはここに保存してあります。

現状のToDoリストと次回の更新予定

今までの実装状況はこんな感じ。次はとりあえずデータベース周りをどうにかしようか。

じゃんけんのToDoリスト

じゃんけんを行う
- CPUの手をセットする
  - 数字を指定すれば対応する手になる
  - 数字を指定しなければランダムに出す
- プレイヤーの手をセットする
  - じゃんけんの3すくみを行う
  - あいこを実装する
~~ヘルプを表示する~~単純だからいらないかな？
3つの手があることをわかるようにする
過去の勝率を表示する
- 通算成績を表示する
- 最近10戦を表示する

WebGUIのToDoリスト

じゃんけんを行う画面の実装
- じゃんけん前の画面の実装
- 勝敗を表示する画面の実装
過去の勝率を表示する画面の実装
何らかの画面をまたぐ要素の実装を行う
- 次に出す手の予告機能とか？

新入社員研修用にWebアプリを作ろうとしているお話【Spring Bootでページを作る話】