#10 画面メッセージの標準化[messages. properties]

複数箇所に使用されるメッセージは1つにまとめて管理しておくことで変更が楽になります。今回は固定メッセージをmessages.properties内で管理します。

前提条件

この記事はSpringの最低限の知識が必要になります。
また、なるべく分かりやすく書くつもりですが、この記事の目的は自分の勉強のアウトプットであるため、所々説明は省略します。

前回まで

前回は画面レイアウトを作成しました。

構築環境

各バージョン
Spring Boot ver 2.7.5
依存関係

成果物

ログイン画面

新規登録画面

今回行うこと

今回は以下の流れに沿って進めていきます。

messages.propertiesを作成
messages.properties内に文字を記入
messages.properties内に記入された文字を画面に反映

1. messages.propertiesを作成

messages.propertiesはsrc/main/resourcesフォルダの直下に配置します。

2. messages.properties内に文字を記入

ログイン、新規登録画面の両方で使用するメッセージにはcommon、新規画面のみで使用するメッセージにはuser.signupを先頭に付けました。

messages.properties

# 共通部分
common.Login = ログイン
common.UserId = ユーザーID
common.Password = パスワード

# 新規登録画面
user.signup.UsreRgistration = ユーザー登録
user.signup.PhoneNumber = 電話番号
user.signup.PostalCode = 郵便番号
user.signup.Address = 住所
user.signup.UserName = ユーザー名
user.signup.Birthday = 誕生日
user.signup.Age = 年齢
user.signup.AccountIcon = アイコン
user.signup.Gender = 性別

3. messages.properties内に記入された文字を画面に反映

画面に反映させる際の書き方は#{}を用います。
#{common.Login}のようにmessages.properties内に記述したメッセージを書き込みます。

login.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS読込 -->
<link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/css/login/login.css}">
<!-- JS読込 -->
<script th:src="@{/webjars/jquery/jquery.min.js}" defer></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}" defer></script>
<title th:text="#{common.Login}"></title>
</head>
<body class="bg-light bg-gradient">
	<div class="text-center">
		<form method="post" th:action="@{/login}" class="form-login">
			<h1 th:text="#{common.Login}"></h1>
			<!-- ユーザーID -->
			<div class="form-group mb-3">
				<label for="userId" class="visually-hidden">userId</label>
				<input type="text" class="form-control" th:placeholder="#{common.UserId}" name="userId">
			</div>
			<!-- パスワード -->
			<div class="form-group mb-3">
				<label for="password" class="visually-hidden">password</label>
				<input type="text" class="form-control" th:placeholder="#{common.Password}" name="password">
			</div>
			<input type="submit" th:value="#{common.Login}" class="btn btn-primary">
		</form>
		<a th:href="@{/user/signup}">新規登録はこちらから</a>
	</div>
</body>
</html>

placeholderやvalue属性に使用したいときはth:value=#{common.Login}のように先頭にth:を付ければ使用できます。

signup.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="wiewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS読込 -->
<link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/css/user/signup.css}">
<!-- JS読込 -->
<script th:src="@{/webjars/jquery/jquery.min.js}" defer></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap,min.js}" defer></script>
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<title  th:text="#{user.signup.UsreRgistration}"></title>
</head>
<body class="bg-light">
	<form id="signup-form" method="post" action="user/signup" class=form-signup>
		<h1 class="text-center" th:text="#{user.signup.UsreRgistration}"></h1>
		<!-- メールアドレス -->
		<div class="form-group">
			<label for="userId" th:text="#{common.UserId}"></label>
			<input type="text" class="form-control"> 
		</div>
		<!-- 電話番号 -->
		<div class="form-group">
			<label for="tel" th:text="#{user.signup.PhoneNumber}"></label>
			<input type="tel" class="form-control" name="郵便番号">
		</div>
		<!-- 郵便番号(住所自動入力) -->
		<div class="form-group">
			<label for="post" style="display:block" th:text="#{user.signup.PostalNumber}"></label>
			<input type="text" name="postal1" size="3">-<input type="text" name="postal2" size="4"
			onKeyUp="AjaxZip3.zip2addr('postal1', 'postal2', 'address', 'address');">
		</div>
		<!-- 住所 -->
		<div class="form-group">
			<label for="address" th:text="#{user.signup.Address}"></label>
			<input type="text" class="form-control" name="address">
		</div>
		<!-- ユーザー名 -->
		<div class=form-group>
			<label for="userName" th:text="#{user.signup.UserName}"></label>
			<input type="text" class="form-control">
		</div>
		<!-- パスワード -->
		<div class="form-group">
			<label for="password" th:text="#{common.Password}"></label>
			<input type="text" class="form-control">
		</div>
		<!-- 誕生日1(date,textのどちらが入力しやすいか検討中) -->
		<div class="form-group">
			<label for="birthday" th:text="#{user.signup.Birthday} + 1"></label>
			<input type="date" class="form-control">
		</div>
		<!-- 誕生日2(date,textのどちらが入力しやすいか検討中) -->
		<div class="form-group">
			<label for="birthday" th:text="#{user.signup.Birthday} + 2"></label>
			<input type="text" class="form-control">
		</div>
		<!-- 年齢(誕生日から自動算出) -->
		<div class="form-group">
			<label for="age" th:text="#{user.signup.Age}"></label>
			<input type="text" class="form-control">
		</div>
		<!-- アカウント画像 -->
		<div class="form-group">
			<label for="formFile" class="form-label" th:text="#{user.signup.AccountIcon}"></label>
  			<input  type="file" class="form-control" id="formFile">
		</div>
		<!-- 性別 -->
		<div class="form-group">
			<label for="gender" style="display:block" th:text="#{user.signup.Gender}"></label>
			<div th:each="item : ${genderMap}" class="form-check-inline">
				<input type="radio" class="form-check-input" th:value="${item.value}">
				<label class="form-check-label" th:text="${item.key}"></label>
			</div>
		</div>
		<!-- 登録ボタン -->
		<input type="button" th:value="#{user.signup.UsreRgistration}" class="btn btn-primary w-100 mt-3">
	</form>
</body>
</html>

今回新規登録画面のメッセージの共通部分であった#{user.signup}を参照(th:object)を用いてth:object=#{user.signup}とまとめようとしたのですが、以下のようなエラーが発生してしまいました。
おそらく参照(th:object)は${}を用いた書き方にしか利用できないのだと思います。

最後に

参照(th:object)でまとめることができなかったので、メッセージは短い方が良いと感じました。また、user.signupのような前に区別するための識別子を付ける必要もあまりないと感じました。

また、今回は性別の男性・女性のメッセージを作成しましたが今後の記事で使用します。