Spring Bootでヘッダ・フッタの共通化する方法 ホームページ制作 | 墨田区

Spring Bootでヘッダ・フッタの共通化する方法

LINEで送る
Pocket

Spring Bootでヘッダ・フッタの共通化する方法のご紹介です。
Spring Bootでヘッダ・フッタの共通化する方法
ページ毎にヘッダやフッタを書くのは、何度も同じことを書くことになるので、とても効率が悪いですね。また保守性も悪く、いいことがないので共通部品として定義しちゃいましょう。

Spring Boot と 相性の良い Thymeleaf には、include 機能があります。

今回は Spring Boot + Thymeleaf でのビューの共通部分を別ファイル定義する方法 をご紹介します。




【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・


環境

Spring Boot 1.4.1
Thymeleaf 3.0.2
Windows7
Java8
Eclipse 4.6 Neon

こちらのページを参考にサンプルアプリを作ってください。既に何がしかのアプリがある場合は、読み飛ばして結構です。
Spring Bootを使ってWebアプリを作る方法

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>
って、狙った通りの結果なります^^;

詳しくは 本家サイト を参照ください。
tutorial Using Thymeleaf (ja)

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>

結果はこうなります。
th:fragmentで共通部品の一部を読み込む
ふむふむ、いい感じでヘッダ部とフッタ部が共通化できました^^

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 では、テンプレート上のコメントは、
"<!--/* ここにコメント */-->"
と記述して、ソース表示時に見えないようにしましょう。

まとめ

今回は Thymeleaf でのヘッダ・フッタの共通化、変数の表示なんかを確認しました。

Thymeleaf は、シンプルで実用的な設計になっている印象ですね。今のところ、必要な機能は問題なく揃っているように感じました。

さて、次はもう少し Thymeleaf を深堀りして実務で使えるレベルまで検証してみましょうかね。

おすすめ書籍 – 私はこの書籍1冊で Spring Boot を習得できました^^

SpringBootプログラミング入門

新品価格
¥3,024から



おつかれさまでした。

LINEで送る
Pocket

この記事がお役に立ちましたら シェア をお願いいたします。

Javaの勉強が思うように進まないときは!

Javaの勉強が思うように進まないのであれば、プロに直接質問ができる プログラミングスクール を検討してみてはいかがでしょうか?プログラミングスクールに申し込めば、短期間で一定のスキルを身に着けることができます!

Javaコースあり!オンライン完結型 テックアカデミー TechAcademy [テックアカデミー]

どこかに通う必要なく、自宅でプログラミングやアプリ開発を学ぶことができるのが特徴のスクールです。未経験からプロになるまで最短4週間という、超短期集中型の学習ができます。年齢層は10代〜40代の男女が中心で、学引があり多くの学生が受講しているそうですよ。オンラインで受講ができるスクールですので、全国どこからでも学習ができますね。

更にさらに、パーソナルメンターにチャット質問できちゃうんです!!

これは素晴らしいことですよ!ハマったり困ったことが起こるのがプログラミングの世界。知っている誰かに聞けば数分で解決することが、自分だけだと何時間もかかったりしますから!いや、これホントですよ。

しかし、便利な世の中になりましたよねー。一昔前ではオンラインで学習できるなんて、思いもよりませんでしたから。講師もバリバリのエンジニアですので、現場で使えるスキルを教えてもらえます。なんとも素晴らしいスクールがあったものですね。学割を使えば社会人より半額以下で受講できますから、学生さんには超おすすめです。

これから Java プログラミングを勉強して、将来はプログラマーとして活躍したいと思っている方には、就職保証付きJavaエンジニアコース というのがおすすめです。就職先まで保証してくれるとなれば、もう安心して学習に専念できますね。夢への第一歩はここから始まるのかも。あ、将来はライバルですね^^

オンラインスクールですから営業エリアは全国です。
気になる方は一度チェックしてみてください。無料の動画説明会も常時開催していますよ。


Javaコースあり!未経験者にウケてる KENスクール パソコンスクール・パソコン教室 【KENスクール】個別指導のWeb-DTP・OA・IT PCスクール

理解度や学習ペースに合わせて、一人ひとりが納得して前進できる授業を提供してくれるのが特徴です。特に課題製作は現場さながらで、実務に即したものとなっていますので短期でのスキルアップが望めます。自宅学習のサポートも充実していて、授業内容をいつでもビデオで振り返ることができるのもうれしいですね。好きな時間に好きな場所で、無理なくスケジューリングできるので、仕事の忙しい方でも柔軟に学ぶことができますよ。

更にさらに、なんと 就職サポート をしてくれるというのですから驚きです!!

履歴書の書き方から面接指導、求人の紹介など、具体的な就職先まで提案してくれるんです!私も「もっと早く出会いたかったなぁー、こんなスクール」・・・って思っちゃいました^^

東京・神奈川・愛知・大阪を営業エリアとされています。
まずは気軽に 無料体験予約 に申し込んでみるのもアリですよ。


コメントを残す

コメント(必須)

お名前 (必須)
メールアドレス
(アドレスは公開されません)

Trackback URL