【JAVA】SPRING BOOTでWEBアプリを作成してみる　5日目　BootStrap　レイアウト

2021/9/4

こんにちは。今回は第３回で作成した一覧画面にBootStrapとレイアウトの導入を行い、ユーザの見やすい画面に変更してみましょう。

前準備

画面を整形する上で必要なものをMavenを使って取得しましょう。
今回はBootStrapによるCSSの利用をしたいと思います。

pom.xmlのdependenciesタグに以下を追加してください。この方法でBootStarpを導入する場合、BootStarpをダウンロードして/demo/src/main/resources/staticに格納する必要はありません。

/demo/pom.xml

    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>bootstrap</artifactId>
        <version>4.1.1</version>
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>jquery</artifactId>
        <version>3.3.1</version>
    </dependency>

一覧画面の整形

DBの初期化

/demo/src/main/resources/配下にschema.sqlとdata.sqlを格納すると、Spring Boot起動時にDBのデータを自動で格納させることができます。schema.sqlにはDDL（テーブル定義）、data.sqlにはDML（テーブルデータ）を記載します。

/demo/src/main/resources/schema.sql

--DDL
--usersテーブルが存在しなければ作成
CREATE TABLE IF NOT EXISTS web_schema.users (
  id serial PRIMARY KEY,
  name VARCHAR(30),
  email  VARCHAR(50),
  address VARCHAR(255),
  sex VARCHAR(1),
  remark VARCHAR(255)
);

/demo/src/main/resources/data.sql

--DML
--usersテーブルの削除
DELETE FROM web_schema.users;

--usersテーブルの挿入
INSERT INTO web_schema.users (name,email,address,sex,remark) VALUES ('おとくちゃん','otoku@xxxxx.co.jp','埼玉県','0','特になし');
INSERT INTO web_schema.users (name,email,address,sex,remark) VALUES ('織田信長','nobu@xxxxx.co.jp','尾張','1','天下布武');
INSERT INTO web_schema.users (name,email,address,sex,remark) VALUES ('豊臣秀吉','hide@xxxxx.co.jp','大阪','1','天下統一');
INSERT INTO web_schema.users (name,email,address,sex,remark) VALUES ('徳川家康','ie@xxxxx.co.jp','三河','1','江戸開幕');
INSERT INTO web_schema.users (name,email,address,sex,remark) VALUES ('NYN','nyn@xxxxx.co.jp','東京都','0','お菓子の材料屋さん');
INSERT INTO web_schema.users (name,email,address,sex,remark) VALUES ('ICG','icg@xxxxx.co.jp','北海道','0','お客さん');
INSERT INTO web_schema.users (name,email,address,sex,remark) VALUES ('MUR','mur@xxxxx.co.jp','下北沢','1','大先輩');
INSERT INTO web_schema.users (name,email,address,sex,remark) VALUES ('YJSP','yjsp@xxxxx.co.jp','下北沢','0','空手部');
INSERT INTO web_schema.users (name,email,address,sex,remark) VALUES ('KMR','kmr@xxxxx.co.jp','下北沢','1','空手部');

Spring Bootの設定ファイルapplication.propertiesでspring.datasource.initialization-mode=alwaysを設定すると、WEBシステムを起動するごとにDBの初期化SQL実行するようにできます。DBの初期化をしたくない場合にはspring.datasource.initialization-mode=neverを設定してください。

/demo/src/main/resources/application.properties

spring.datasource.driver-class-name=org.postgresql.Driver
spring.datasource.url=jdbc:postgresql://localhost:5432/web?web_schema
spring.datasource.username=dev
spring.datasource.password=xxxx

#開発プロファイルの読み込み
spring.profiles.active=dev

#起動するごとにDBを初期化する
spring.datasource.initialization-mode=always

画面の部品化とヘッダー、サイドバーの導入

WEBシステムを作る上で、ヘッダーやサイドバー、フッターといった良く使う共通部分は、画面作成時に毎回ひとつのhtmlに全てを書くのではなく、共通部品として外だししてメインの画面部分にくっつけると、品質が向上します。JspでのApache Tilesと同じようなことをthymeleafでもできます。
技術的にはサイドバーなど共通備品にしたいhtmlをth:fragmentにより部品化し、メインの画面でth:insertを使ってくっつけます。

今回は、ヘッダーはタイトルの表示を共通部品として外だし。サイドバー・メニューは"新規登録ボタン"を共通部品として外だしし、メインのhtmlに読み込ませます。

【共通部品ヘッダー】
/demo/src/main/resources/templates/layout/header.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>ヘッダー</title>
</head>
<body>

  <!--
    th:fragmentでhtmlを部品化
    th:removeの属性tagでdivタグを削除
  -->
  <div class="header-class" th:fragment="fra-header" th:remove="tag">
    <h1>Spring Boot 勉強用 ビュー</h1>
  </div>

</body>
</html>

ヘッダーとして"Spring Boot 勉強用ビュー"と表示させます。
１３行目でth:remove="tag"を指定してますが、こうすることで読み込むメインの画面には１３行目のdivタグは削除され、<h1>Spring Boot 勉強用ビュー</h1>のみが出力されるようになります。

【共通部品サイドバー】
/demo/src/main/resources/templates/layout/sidebar.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>サイドバー</title>
</head>
<body>

  <!--
    th:fragmentでhtmlを部品化
    th:removeの属性tagでdivタグを削除
  -->
  <div class="sidebar-class" th:fragment="fra-sidebar" th:remove="tag">
    <form id="sidebar-form" th:action="@{/users/new}" th:method="post">
      <input class="btn btn-primary btn-lg" type="submit" value="新規登録" />
    </form>
  </div>

</body>
</html>

サイドバーとして"新規登録"のボタンを表示させます。

【メイン】
/demo/src/main/resources/templates/users.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>ユーザ情報一覧画面</title>
<link rel="stylesheet"
  th:href="@{/webjars/bootstrap/4.1.1/css/bootstrap.min.css}" />
<script th:src="@{/webjars/jquery/3.3.1/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/4.1.1/js/bootstrap.min.js}"></script>
</head>
<body>

  <div class="container">

    <!--ヘッダー -->
    <header class="mt-5">
      <div id="header-container" th:insert="layout/header :: fra-header"></div>
    </header>

    <div class="row mt-5">

      <!--col-smで解像度がスマホ(～767px)以下の時、２列表示 -->

      <!--メニュー・サイドバー -->
      <nav class="col-sm-2">
        <div id="sidebar-container"
          th:insert="layout/sidebar :: fra-sidebar"></div>
      </nav>

      <!--メイン -->
      <section id="main-container" class="offset-sm-1 col-sm-9">
        <table class="table">

          <tr>
            <th>ID</th>
            <th>名前</th>
            <th>メール</th>
            <th>住所</th>
            <th>性別</th>
            <th>備考</th>
            <th></th>
            <th></th>
          </tr>

          <th:block th:with="userInfo=${users}">
            <tr th:each="user : ${userInfo}">
              <td th:text="${user.id}"></td>
              <td th:text="${user.name}"></td>
              <td th:text="${user.email}"></td>
              <td th:text="${user.address}"></td>
              <td th:text="${user.sex} ? #{sex.male} : #{sex.female}"></td>
              <td th:text="${user.remark}"></td>
              <td><a class="btn btn-success"
                th:href="@{/users/edit/{id}(id=${user.id})}">編集</a></td>
              <td><a class="btn btn-danger"
                th:href="@{/users/delete/{id}(id=${user.id})}">削除</a></td>
            </tr>
          </th:block>

        </table>
      </section>

    </div>

  </div>

</body>
</html>

１７行目のth:insertで、header.htmlを読み込み。２７行目でsidebar.htmlを読み込んでいます。また、BootStrapで画面をデザインしています。下記にて説明します。

BootStrapの導入

さて、すぐ上のusers.htmlですが、6行目からBootStrapを導入しています。
BootStrapはCSSのフレームワークで例えば、３２行目のclass="table"のように出来合いのクラスを指定してあげると、デザイナーが作るようなきれいなデザインが自然とできあがります。自分でCSSを作らなくてもいいので、設定の仕方さえわかっていれば開発のスピードがあがります。

また、グリッドシステムといって、containerクラス内に記載したrowクラスを１行の単位とし、１行をcolクラスで１２列までに分割することで、スマホ・タブレット・PCでもきれいに表示できるレスポンシブなデザインが可能です。
CSSで@media screen and (max-width: 768px)や@media screen and (max-width: 480px)を書いて、スマホやタブレットの場合の設定をpx単位で書かなくても良くなるのでプログラマーの負担が低下します。ここでは、２０行目のrowクラス内に、サイドバーcol-sm-2（２５行目）と、メインのcol-sm-10（３１行目）することだけでタブレットとPCの解像度（768px～）だと、画面の左側にサイドバーが表示されます。一方スマホの解像度（～767px）だと、サイドバーとメインが別々の行単位で表示されます。

レスポンシブ幅設定

sidebar : col-2 main : col-10	常に2列

sidebar : col-sm-2 main : col-sm-10	幅≧576pxは2列、未満は2行

sidebar : col-md-2 main : col-md-10	幅≧768pxは2列、未満は2行

sidebar : col-lg-2 main : col-lg-10	幅≧992pxは2列、未満は2行

sidebar : col-xl-2 main : col-xl-10	幅≧1200pxは2列、未満は2行

６行目から８行目までBootStrapの読み込みをしています。前準備でpom.xmlに書いて導入したため、BootStarpをダウンロードし/demo/src/main/resources/staticに格納する必要はありません。webjars配下に配置されますのでバージョンに気を付けて読み込んでください。

ここまでできたらプロジェクトを右クリックして、実行 -> Spring Boot アプリケーションを選択。
ブラウザのurlにhttp://localhost:8080/usersを入力して確認します。

下記のように、ヘッダーに"Spring Boot 勉強用ビュー"、サイドバーに新規登録ボタン、メイン画面にユーザ情報が表示されればOKです。
前よりも見やすい画面になったのではないでしょうか。