Spring Bootでヘッダ・フッタの共通化する方法
Spring Bootでヘッダ・フッタの共通化する方法です。
ページ毎にヘッダやフッタを書くのは、何度も同じことを書くことになるので、とても効率が悪いですね。また保守性も悪く、いいことがないので共通部品として定義しちゃいましょう。
Spring Boot と 相性の良い Thymeleaf には、include 機能があります。
今回は Spring Boot + Thymeleaf でのビューの共通部分を別ファイル定義する方法 を紹介します。
Sponsored Links
環境
今回のサンプルアプリの構築環境です。
- Spring Boot 1.4.1
- Thymeleaf 3.0.2
- Windows7
- Java8
- Eclipse 4.6 Neon
こちらのページを参考にサンプルアプリを作ってください。既にSpring Boot Webアプリがある場合は、読み飛ばして結構です。
Sponsored Links
th:replaceを使ってヘッダ・フッタを分離する
Thymeleaf では部品の共通化のために 2 つの方法が提供されています。
- th:include:ホストタグの中にフラグメントの中身をインクルードする
- th:replace:ホストタグをフラグメントで置換する
th:include を使うと、フラグメントの中身を include されてしまいます。
仮に footer.html を別ファイルにして
<footer>ここはフッタです</footer>
とし、メインの html に
<div th:include="footer"></div>
て書くと、
<div><footer>ここはフッタです</footer></div>
って、div タグ残っちゃって困った結果なります^^;
なので th:replace を使ってヘッダ・フッタを分離しましょう。
<footer>ここはフッタです</footer>
とし、メインの html に
<div th:replace="footer"></div>
て書くと、
<footer>ここはフッタです</footer>
って、狙った通りの結果なります^^;
詳しくは 本家サイト を参照ください。
th:fragmentが一番実務に合っているかも
th:fragment を使うと共通部品の一部を読み込むことができます。個人的には、これが実務に一番合っているんじゃないかと思っています。
下記のように html を作ります。
・layout.html
<html xmlns:th="http://www.thymeleaf.org"> <!--引数の title, links は fragment expressions */--> <head th:fragment="base_header(title,links)"> <!--/* 各ビュータイトル */--> <title th:text="${title==null}? 'Spring boot de Hello world!' : ${title}+' | Spring boot de Hello world!'">Spring boot de Hello world!</title> <!--/* 必ず読み込むファイル */--> <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/style.css}"> <link rel="shortcut icon" th:href="@{/images/favicon.ico}"> <script type="text/javascript" th:src="@{/js/ie10-viewport-bug-workaround.js}"></script> <!--/* 固有で読み込むリンク */--> <th:block th:replace="${links}" /> </head> <header th:fragment="header"> <p>ここはヘッダーです</p> </header> <footer th:fragment="footer"> <p>ここはフッターです</p> </footer> </html>
・index.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head th:replace="layout :: base_header('Main',~{::link})"> <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"> <link rel="stylesheet" th:href="@{/js/app.js}"> </head> <body> <div th:replace="layout :: header"></div> <span th:text="${message}">Hello world</span> <form action="/" method="POST"> <input name="name" type="text" /><br/> <input type="submit" /> </form> <div th:replace="layout :: footer"></div> </body> </html>
結果はこうなります。
ふむふむ、いい感じでヘッダ部とフッタ部が共通化できました^^
title タグは、th:text を使って、変数でページタイトルを渡しています。ページタイトルがあれば、Web サイトのタイトルと "|"(パイプ文字) で結合し、null を渡せば Web サイトのタイトルだけが表示される仕組みです。link タグは、th:replace を使ってタグ置換をおこなっています。
結果 html はこんな感じ。
<!DOCTYPE html> <html> <head> <title>Main | Spring boot de Hello world!</title> <link rel="stylesheet" type="text/css" media="all" href="/css/style.css"> <link rel="shortcut icon" href="/images/favicon.ico"> <script type="text/javascript" src="/js/ie10-viewport-bug-workaround.js"></script> <link rel="stylesheet" href="/css/bootstrap.min.css"><link rel="stylesheet" href="/js/app.js"> </head> <body> <header> <p>ここはヘッダーです</p> </header> <span>こんにちは世界</span> <form action="/" method="POST"> <input name="name" type="text" /><br/> <input type="submit" /> </form> <footer> <p>ここはフッターです</p> </footer> </body> </html>
ちなみに Thymeleaf では、テンプレート上のコメントは、
"<!--/* ここにコメント */-->"
と記述して、ソース表示時に見えないようにしましょう。
Sponsored Links
まとめ
Spring Boot + Thymeleaf でのビューの共通部分を別ファイル定義する方法を紹介しました。
今回は Thymeleaf でのヘッダ・フッタの共通化、変数の表示なんかを確認しました。
Thymeleaf は、シンプルで実用的な設計になっている印象ですね。今のところ、必要な機能は問題なく揃っているように感じました。
さて、次はもう少し Thymeleaf を深堀りして実務で使えるレベルまで検証してみましょうかね。
おつかれさまでした。
Sponsored Links