こばやしたかはるblog: 6月 2018

テンプレートエンジンThymeleafのDialectを使ってのレイアウト表示をする。
画面構成はヘッダー、コンテンツ、フッターの3箇所をレイアウトにする。
ヘッダー、フッターは共通化して、コンテンツがページごとに変わる感じだ。
以前、仕事でしたことあるstrutsのtilesみたいなものだな。
(現在も使われているんかいな？)

さて、まず、build.gradleにthymeleafの設定をする。
compile('org.springframework.boot:spring-boot-starter-web') は削除する。
そして、代りに compile('org.springframework.boot:spring-boot-starter-thymeleaf') を設定する。
次のサイトを参考にしたけれど、`spring-boot-starter-web` に依存するため、`spring-boot-starter-web` を明記する必要はないみたいだ。

Spring Boot における Thymeleaf サンプルコード

それと、thymeleafとdialectのバージョンを設定する。
ext['thymeleaf.version'] と ext['thymeleaf-layout-dialect.version'] を設定する。
それぞれのバージョンは次のサイトを参考にすればいいみたいだ。

https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf-spring4
https://mvnrepository.com/artifact/nz.net.ultraq.thymeleaf/thymeleaf-layout-dialect

このバージョンについての情報は次のサイトを参考にした。

Spring Boot で Thymeleaf 使い方メモ

そして、build.gradleは次のとおりになる。

buildscript {
    ext {
        springBootVersion = '1.5.13.BUILD-SNAPSHOT'
    }
    repositories {
        mavenCentral()
        maven { url "https://repo.spring.io/snapshot" }
        maven { url "https://repo.spring.io/milestone" }
    }
    dependencies {
        classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
    }
}
 
apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'org.springframework.boot'
 
group = 'com.example'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = 1.8
 
repositories {
    mavenCentral()
    maven { url "https://repo.spring.io/snapshot" }
    maven { url "https://repo.spring.io/milestone" }
}
 
dependencies {
    compile('org.springframework.boot:spring-boot-starter-thymeleaf') {
        exclude group: 'org.springframework.boot', module: 'spring-boot-starter-logging'
    }
    compile('org.springframework.boot:spring-boot-starter-log4j2')
    testCompile('org.springframework.boot:spring-boot-starter-test')
}
 
ext['thymeleaf.version'] = '3.0.9.RELEASE'
ext['thymeleaf-layout-dialect.version'] = '2.3.0'

コントローラプログラムの　HogeController.java　は次のとおり
以前のSpringでlog4j2(Gradleでプロジェクト作成)は、"Hello World!" の文字列を表示していたけれど、今回は表示するテンプレート "index" を設定している。

package com.example.hoge;
 
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
 
@RestController
public class HogeController {
 
    private static final Logger logger = LoggerFactory.getLogger(HogeController.class);
 
    @RequestMapping("/")
    public ModelAndView index(ModelAndView mav) {
        logger.info("#index START");
        mav.setViewName("index");
        return mav;
    }
}

次にDialectのレイアウト全体のテンプレート "layout.html" を設定する。
ソースは次のとおり。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">My website</title>
  <meta charset="UTF-8" />
</head>
<body>
<header layout:replace="~{layout/header::header}"></header>
<article layout:fragment="content" style="background-color: lightpink;"></article>
<footer layout:replace="~{layout/footer::footer}"></footer>
</body>
</html>

次が "layout.html" でヘッダ部分を取り込む箇所 "<header layout:replace="~{layout/header::header}"></header>" で取り込まれる "header.html" を設定する。
ソースは次のとおり

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<body>
<header id="global-header" layout:fragment="header" style="background-color: beige;">
    <p class="text-center">This is header</p>
</header>
</body>
</html>

次が "layout.html" でフッタ部分を取り込む箇所 "<footer layout:replace="~{layout/footer::footer}"></footer>" で取り込まれる "footer.html" を設定する。
ソースは次のとおり

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<body>
<footer id="global-footer" layout:fragment="footer" style="background-color: aqua;">
    <p class="text-center">This is footer</p>
</footer>
</body>
</html>

レイアウトの定義は以上で、次に上記コントローラプログラムで設定した表示するテンプレート "index" のテンプレート "index.html" を設定する。
ソースは次のとおり

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/layout}">
<head>
  <title>INDEX PAGE</title>
</head>
<body>
<div layout:fragment="content" class="text-center">
<p style="height: 150px;">This is index page.</p>
</div>
</body>
</html>

これでThymelaefのDialectのレイアウトでの画面表示するプログラムは用意できた。
動かしてみる。
画面表示は次のようになる。

本画面のHTMLは次のように生成されている。
これで終わり。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>My website - INDEX PAGE</title>
  <meta charset="UTF-8" />
</head>
<body>
<header id="global-header" style="background-color: beige;">
    <p class="text-center">This is header</p>
</header>
<div style="background-color: lightpink;" class="text-center">
<p style="height: 150px;">This is index page.</p>
</div>
<footer id="global-footer" style="background-color: aqua;">
    <p class="text-center">This is footer</p>
</footer>
</body>
</html>

昨日、美容室でカットとカラー(白髪染め)をしてもらった。

その時に美容師から教えてもらったのだけど、白髪染めの薬に含まれているジアミンって成分が有害らしくて、白髪染め100回を目処にジアミンアレルギーが発生するらしい。
ジアミンアレルギーは頭皮が腫れたり、髪の毛が細くなったり曲がったりするのが加速するらしい。
なので、ジアミン対策のためにヘッドスパというのをしてもらった。
良くわからないけど、ヘッドスパをすることによって、ジアミンを取り除くことができるのかな？

あと、洗髪の後にトリートメントしてますか？みたいなお話があって、「してないです。」と言うと、トリートメントの使用を勧められたので、トリートメントの購入した。
その場でスマートフォンを使いAmazonでトリートメントを検索してみたけど、美容室で購入した方が安いので、その場で購入。
Amazonだと約3600円、美容室だと2600円。

ちなみに、トリートメントにポリッシュオイルというのとシアオイルというのがあるけれど、シアオイルの方が髪にいいんだって。
まぁ、価格はシアオイルの方が高い。
ボクが購入したのはシアオイル。
ちなみにポリッシュオイルはつけると脂ぎった感じになる。
シアオイルはサラサラな感じになる。

トリートメントの使い方は、洗髪後の髪を乾かす前に、トリートメントをワンプッシュして出てくる液体を髪に馴染ませればOKとのこと。
このシアオイルめちゃいい匂いがするんだけど。
そんで、髪がサラサラに。