#7 Bootstrapを利用して画面の作成[1. 環境設定]

この記事ではBootstrapを利用した画面デザインの作成をしていきます。
画面デザインはアプリケーション作成で重要視され、画面デザインではBootstrapというフレームワークがよく使われます。
また、スマートフォンにも対応した画面を作ることもできます。

前回まで

前回はOracleデータベースとの接続を行いました。今回の記事では前回使用したプロジェクトを継続して用います。

構築環境

各バージョン

Spring Boot ver 2.7.5
jquery ver 3.5.1
bootstrap ver 4.5.3
webjars-locator ver 0.40

依存関係

今回行うこと

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

pom.xmlにwebjarを使用するためのコードを追加
login.htmlにwebjarsでダウンロードしたライブラリを使用するためのコードを追加

1. pom.xmlにwebjarを使用するためのコードを追加

webjarsとはBootstarpを使うためのライブラリです。webjarsを使用するとライブラのダウンロードや読込などを簡単に行うことができます。

pom.xml

	<dependencies>
		<!-- jquery -->
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>jquery</artifactId>
			<version>3.5.1</version>
		</dependency>
		<!-- bootstrap -->
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>bootstrap</artifactId>
			<version>4.5.3</version>
		</dependency>
		<!-- webjars-locator -->
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>webjars-locator</artifactId>
			<version>0.40</version>
		</dependency>
        <!-- 省略 -->
	<dependencies>

webjars-locator：webjarsで使用するライブラリのバージョンを意識せずコードを書けるようになる
jquery：Bootstrapを使用するためにはjqueryというJavaScriptのライブラリが必要

2. login.htmlにwebjarsでダウンロードしたライブラリを使用するためのコードを追加

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}">
<!-- 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>

webjarsでダウンロードしたライブラリは@{/webjars/･･･}という形で呼び出すことができます。「Maven依存関係」フォルダー内にMavenでダウンロードしたライブラリのjarファイルが入っています。
defer：JavaScriptを読み込む際にdefer属性を付けることで画面表示の性能が改善される。また、defer属性を付けることでHTML、JavaScriptの読込を平行で実施してくれます。これにより処理が速くなります。

下記画像のMETA-INF/resourcesより下のパスを@{/webjars/･･･}に指定します。
本来はバージョン番号を含めたパスを記載しなければいけないですが、webjars-locationを入れることでバージョン番号を省略することができます。下記画像はjqueryのjarファイルですが、bootstrapのjarファイルでも同様です。

最後に

Bootstarpの設定は以上になります。
次回はHTMLに内容を記載し、Bootstrapを用いてデザインを作成します。