はじめに
- 某所でお題として与えられ、楽勝!って思ったら完遂できなかったので、ハマった所を解消し、再挑戦した際のメモです。*1
- 最良、最適な方法ではないと思いますので、参考にする場合には自己責任でお願いします。*2
- コードは一部しか記載しませんので、全てを確認したい場合には参考用コミットとしてGitHubへのリンクを記載してますので、こちらを確認してください。
要件とか
- 下記の要件でWebアプリケーションを作成する。
- 少しでも早く作成する。
- 指定されていない事は想定する必要はない。
環境
- まっさらなWindows
- 開発環境。
- 実際はWindows10だったのですが、用意できないので7で再挑戦。*3
- Linux
- この環境でポート80でアクセスできるWebアプリケーションを動作させる。
- 実際はAWSでIPと秘密鍵は用意されてました。(SSHでログインは可能。)
- 用意できないので、別マシン上にDockerで用意。
アプリケーションの要件
- 問い合わせフォームを作る
- 「 http://xxx.xxx.xxx.xxx 」でアクセスすると問い合わせフォーム画面が表示される。
- 問い合わせフォーム画面は、「名前」、「Eメール」、「問い合わせ内容」の3つの入力が可能。
- それぞれの入力にそれなりにValidationをかける。
- 送信ボタンを押下すると完了画面が表示される。
- 送信ボタン押下時にDBに入力内容を保存する。
プロジェクト作成
- プロジェクトエクスプローラ上で右クリック → 新規 → プロジェクト
- Spring → Springスタータープロジェクト
- Spring Boot Version : 1.5.3
- Dependencies
- DevTools
- Web
- Thymeleaf
- H2
- JPA
完了
参考用コミット
問い合わせ画面を作成
- Controllerを追加
- com.example.demo.DemoApplication.java
- クラス分ける時間が惜しいので、アプリケーションを起動するクラスに追加してしまいます。
@RequestMapping("/")
public String index(Model model) {
return "index";
}
- 画面を作成
- src/main/resources/templates/index.html
- 特に特筆すべき事はないのでコードは割愛。
- アプリケーション起動
- プロジェクト右クリック → 実行 → Spring Boot アプリケーション
ブラウザで確認
参考用コミット
完了画面を作成
- 問い合わせ画面でボタン押下したら完了画面が表示されるようにします。
- 完了画面のマッピングを追加
- com.example.demo.DemoApplication.java
@RequestMapping("result")
public String result(Model model) {
TODO
TODO
return "result";
}
- 完了画面に遷移するように問い合わせ画面を変更
- src/main/resources/templates/index.html
- <form role="form" action="#">
+ <form role="form" th:action="@{/result}" method="post">
- 画面を作成
- src/main/resources/templates/result.html
- 特に特筆すべき事はないのでコードは割愛。
ブラウザで確認
参考用コミット
入力チェックを追加
- 問い合わせ画面でボタン押下時に入力チェックが行われるように設定。
- formを作成
- src/main/java/com/example/demo/InputForm.java
public class InputForm {
@NotEmpty
@Size(min = 1, max = 50)
private String name;
@Size(max = 50)
private String email;
@NotEmpty
@Size(max = 100)
private String message;
}
- 入力チェックでエラーとなった場合には問い合わせ画面に戻す処理を追加。
- com.example.demo.DemoApplication.java
- public String result(Model model) {
- TODO
+ public String result(@ModelAttribute("inputForm") @Valid InputForm form, BindingResult bindingResult, Model model) {
+ if (bindingResult.hasErrors()) {
+ return index(form, model);
+ }
- エラーメッセージを表示するように修正。
- src/main/resources/templates/index.html
- <p>名前 : <input type="text" name="name" /></p>
+ <p>名前 : <input type="text" th:value="*{name}" name="name" /></p>
+ <p><span
+ th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></span>
+ </p>
DBに保存する
- DB(H2)に入力情報を保存する。
- ブラウザで確認
- ドメインを作成
- src/main/java/com/example/demo/domain/Message.java
@Entity
@Table(name="message")
public class Message {
public Message(InputForm form) {
this.message = form.getMessage();
this.email = form.getEmail();
this.name = form.getName();
}
@Id
@GeneratedValue
private int id;
@Column
private String name;
@Column
private String email;
@Column
private String message;
}
- リポジトリ作成
- src/main/java/com/example/demo/repository/MessageRepository.java
public interface MessageRepository extends JpaRepository<Message, Integer> {
}
public class DemoApplication {
+ @Autowired MessageRepository repository;
- TODO
+ repository.save(new Message(form));
プロパティファイルは好きじゃないのでYAMLに変更
DBに保存されている事を確認するためh2コンソールの表示設定を追加
- src/main/resources/application.yml
spring:
h2:
console:
enabled: true
datasource:
url: jdbc:h2:mem:test
起動するポート番号を変更
- src/main/resources/application.yml
+server:
+ port: 80
jarで出力する
- プロジェクト右クリック → 実行 → Maven install
- target配下にjarが出力されていることを確認。
jar単体で起動
- コマンドプロンプト起動。
java -jar demo-0.0.1-SNAPSHOT.jar
- ブラウザで確認
動作環境の整備
- Linuxにログイン
- Javaのインストール
sudo yum install java-1.8.0-openjdk.x86_64
- ↑で作成したjarをLinuxに移動
- ファイアーウォールを止める
sudo service iptables stop
- 起動
java -jar demo-0.0.1-SNAPSHOT.jar
- ブラウザで確認
まとめ
- ハマった部分が解消されたら、特になんてこともなくこなすことができ、凹んでいた気分が少し回復したので良しとする。
- ハマった部分に関しても、落ち着いて挑めば解決できたと思うので、焦ってエラーメッセージや事象を検索するのではなく、外の空気でも吸いに行けばよかったと思った。
- 色々突っ込みどころはあると自分でも思うが、お題がお題なのでこんなものではないだろうか。
- いいお題だと思ったので、今後新しいフレームワークを学ぶ際にはこのお題をこなそうと決めた。