#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を用いてデザインを作成します。