Hachirog

都内で働いているWebエンジニアのブログです

Thymeleafのテンプレート部品化

前回に引き続きThymeleaf関連のエントリです。今回はテンプレートの共通部分を部品化して使い回す方法について書きました。

ページ断片を取り込む

Webページの共通部分(ヘッダーやフッターなど)を表示させたいとき、JSPではincludeやc:importの機能を利用すれば、作成したページ断片を取り込むことができます。

<%@ include file="header.jspf" %>

一方、Thymeleafではth:includeやth:replaceを利用すれば同様のことが可能です。

th:includeの使い方

まずはメインとなるページのテンプレートを準備します。

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <div th:include="/common.html::header"></div>
        <h3>th:includeの使い方</h3>
        <p>手順<br/>
            <ol>
                <li>メインのテンプレートを作成</li>
                <li>ページ断片を作成</li>
                <li>Thymeleafで描画</li>
            </ol>
        </p>
      </body>
</html>

つぎに、ページの断片部分を作成します。

common.html

<head>
   <meta charset="utf-8"/>
</head>
<body>
    <div style="background:darkseagreen" th:fragment="header">
        共通ヘッダー部分
    </div>
</body>

th:includeの値はcommon.html内のth:fragment="header"を利用するよ、という意味になります。なので、common.htmlにはフッターや他の断片をまとめて記述することが可能です。

ファイルが揃ったのでThymleafでページを生成してみます。

f:id:hachir0:20131222055025p:plain

ヘッダー部分が取り込まれました!

th:replaceの使い方

しかし、さきほどの画面ではheaderのスタイルが反映されていません。直接タグにスタイルを指定したにも関わらず。
これはth:includeが指定された断片のタグ内の要素だけを取り込む挙動のためです。属性もまとめてタグ自体を置き換えるにはth:replaceを使います。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <div th:replace="/common.html::header"></div>
        <h3>th:replaceの使い方</h3>
        <p>手順<br/>
            <ol>
                <li>メインのテンプレートを作成</li>
                <li>ページ断片を作成</li>
                <li>Thymeleafで描画</li>
            </ol>
        </p>
    </body>
</html>

th:replaceを利用してThymleafでページを生成してみると

f:id:hachir0:20131222061015p:plain

header部分のスタイルが適用されました!

なおThymeleafがver1.1の頃はth:replaceという属性名ではなく、th:substitutebyという名称でした。現在最新のver2.1ではth:replaceでもth:substitutebyでも同じ機能として利用可能ですが、ver3.0ではth:substitutebyは非推奨(または削除)となる予定だそうです。

ブラウザで直接ページ確認したい

Thymeleafでページの断片を取り込むことができました。しかし、Thymeleafの強みはテンプレートが静的ページとして扱えて直接ブラウザで確認できる点です。th:includeを利用した場合、テンプレートをブラウザで確認すると当然ながらページ断片が表示されません。

こちらに対する解決策が公式サイトに紹介されていました。有志の方がThymolというjavascriptライブラリを開発しているようです。

次回、Thymolの利用方法を調べてみたいと思います。