#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をデザイン化する
- login.htmlの作成
- 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>
最後に
住所の自動入力に関しては、情報が載っているサイトが多かったので問題なく探せる