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

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

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

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

**環境設定**

https://qiita.com/Jackoguro/items/69153e445a0015ab1e12

**Bootstrapの一部機能まとめ**

https://qiita.com/Jackoguro/items/d539196ffe57205d06bb

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

https://qiita.com/nakanishi03/items/c80a16b9b9796c25f890

# 構築環境
1. 各バージョン
Spring Boot ver 2.7.5
jquery ver 3.6.1
bootstrap ver 5.2.2
webjars-locator ver 0.46

2. 依存関係
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/299f6a6d-8e15-dbdb-76aa-8870454bed95.png)

# 成果物
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/fa797ec9-9183-3138-9161-65675af74fec.png)
ログイン画面

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/d1435b7b-b1ca-f2e9-7ab2-ed78d654c106.png)
新規登録画面

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

## 1. Bootstarpを用いてHTMLをデザイン化する
### 1. login.htmlの作成
```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の作成
```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. 郵便番号から住所を自動入力
参考にした際とは以下になります。

https://onoredekaiketsu.com/js-to-auto-enter-address-from-zip-code/#toc5

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

https://to-benefit7.com/how-to-ajaxzip3/

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

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

```html
        <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>
```

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