#9 Bootstrapを利用して画面の作成[2. デザイン作成][郵便番号から住所を自動入力]

前提条件

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

前回まで

前回はBootstrapを利用するために環境設定を行いました。
今回は実際にBootstrapを利用してデザインを作成したいと思います。

環境設定

Bootstrapの一部機能まとめ

他の方がまとめてくれた記事

構築環境

各バージョン
Spring Boot ver 2.7.5
jquery ver 3.6.1
bootstrap ver 5.2.2
webjars-locator ver 0.46
依存関係

成果物

ログイン画面

新規登録画面

今回行うこと

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

Bootstarpを用いてHTMLをデザイン化する
1. login.htmlの作成
2. signup.htmlの作成
郵便番号から住所を自動入力
コントロール、サービスも作成していますが、今回は本題と逸れるため載せません。

1. Bootstarpを用いてHTMLをデザイン化する

1. login.htmlの作成

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>ログイン</title>
</head>
<body class="bg-light bg-gradient">
	<div class="text-center">
		<form method="post" th:action="@{/login}" class="form-login">
			<h1>ログイン</h1>
			<!-- ユーザーID -->
			<div class="form-group mb-3">
				<label for="userId" class="visually-hidden">userId</label>
				<input type="text" class="form-control" placeholder="ユーザーID" name="userId">
			</div>
			<!-- パスワード -->
			<div class="form-group mb-3">
				<label for="password" class="visually-hidden">password</label>
				<input type="text" class="form-control" placeholder="パスワード" name="password">
			</div>
			<input type="submit" value="ログイン" class="btn btn-primary">
		</form>
		<a th:href="@{/user/signup}">新規登録はこちらから</a>
	</div>
</body>
</html>

2. signup.htmlの作成

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>ユーザー登録</title>
</head>
<body class="bg-light">
	<form id="signup-form" method="post" action="user/signup" class=form-signup>
		<h1 class="text-center">ユーザー登録</h1>
		<!-- メールアドレス -->
		<div class="form-group">
			<label for="userId">ユーザーID</label>
			<input type="text" class="form-control"> 
		</div>
		<!-- 電話番号 -->
		<div class="form-group">
			<label for="tel">電話番号</label>
			<input type="tel" class="form-control" name="郵便番号">
		</div>
		<!-- 郵便番号(住所自動入力) -->
    	<div class="form-group">
			<label for="post" style="display:block">郵便番号</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">住所</label>
			<input type="text" class="form-control" name="address">
		</div>
		<!-- ユーザー名 -->
		<div class=form-group>
			<label for="userName">ユーザー名</label>
			<input type="text" class="form-control">
		</div>
		<!-- パスワード -->
		<div class="form-group">
			<label for="password">パスワード</label>
			<input type="text" class="form-control">
		</div>
		<!-- 誕生日1(date,textのどちらが入力しやすいか検討中) -->
		<div class="form-group">
			<label for="birthday">誕生日1</label>
			<input type="date" class="form-control">
		</div>
		<!-- 誕生日2(date,textのどちらが入力しやすいか検討中) -->
		<div class="form-group">
			<label for="birthday">誕生日2</label>
			<input type="text" class="form-control">
		</div>
		<!-- 年齢(誕生日から自動算出) -->
		<div class="form-group">
			<label for="age">年齢</label>
			<input type="text" class="form-control">
		</div>
		<!-- アカウント画像 -->
		<div class="form-group">
			<label for="formFile" class="form-label">アカウントアイコン(任意)</label>
  			<input  type="file" class="form-control" id="formFile">
		</div>
		<!-- 性別 -->
		<div class="form-group">
			<label for="gender" style="display:block">性別</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" value="ユーザー登録" class="btn btn-primary w-100 mt-3">
	</form>
</body>
</html>

2. 郵便番号から住所を自動入力

参考にした際とは以下になります。

このサイトでは3通りの方法を紹介していましたが、ダウンロードがいらないzip2addrを用いて行いました。
zip2addrの更に詳しい方法が載っていたサイトは以下になります。

該当箇所を抜き出したのが以下になります。今回は郵便番号を3,4桁にそれぞれ分けました。

ポイント

inputタグのnameがzip2addrに紐付く
都道府県と市町村を1つにまとめる場合はzipaddrの引数の最後の2つを一緒にする

        <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
		<!-- 郵便番号(住所自動入力) -->
		<div class="form-group">
			<label for="post" style="display:block">郵便番号</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">住所</label>
			<input type="text" class="form-control" name="address">
		</div>

最後に

住所の自動入力に関しては、情報が載っているサイトが多かったので問題なく探せる