過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<p>本稿は<strong>Thymeleafの導入方法と基本動作</strong>について説明します。</p>

<p>&nbsp;</p>

<h2>Mavenへの記述</h2>

<p>pom.xmlに以下の記述をしてインストールします。</p>

<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
	<tbody>
		<tr>
			<td style="background-color:#000000">
			<p><span style="color:#ffffff"><dependency></span></p>

			<p style="margin-left:40px"><span style="color:#ffffff"><groupId></span><span style="color:#f1c40f">org.springframework.boot</span><span style="color:#ffffff"></groupId></span></p>

			<p style="margin-left:40px"><span style="color:#ffffff"><artifactId></span><span style="color:#f1c40f">spring-boot-starter-thymeleaf</span><span style="color:#ffffff"></artifactId></span></p>

			<p><span style="color:#ffffff"></dependency></span></p>
			</td>
		</tr>
	</tbody>
</table>

<p>&nbsp;</p>

<h2>テンプレートファイルの設置</h2>

<p>以下のディレクトリにテンプレートファイルを作成します。</p>

<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
	<tbody>
		<tr>
			<td style="background-color:#000000">
			<p><span style="color:#f1c40f">/src/main/resources/templates/</span><span style="color:#ffffff">test/index.html</span></p>
			</td>
		</tr>
	</tbody>
</table>

<p>&nbsp;</p>

<p>index.htmlの内容は以下の通りです。</p>

<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
	<tbody>
		<tr>
			<td style="background-color:#000000">
			<p><span style="color:#ffffff"><!DOCTYPE html></span></p>

			<p><span style="color:#ffffff"><html </span><span style="color:#f1c40f">xmlns:th="http://www.thymeleaf.org"</span><span style="color:#ffffff">></span></p>

			<p style="margin-left:40px"><span style="color:#ffffff"><head></span></p>

			<p style="margin-left:80px"><span style="color:#ffffff"><meta charset="UTF-8"></span></p>

			<p style="margin-left:80px"><span style="color:#ffffff"><title>Thymeleaf Page</title></span></p>

			<p style="margin-left:40px"><span style="color:#ffffff"></head></span></p>

			<p style="margin-left:40px"><span style="color:#ffffff"><body></span></p>

			<p style="margin-left:80px"><span style="color:#ffffff"><h1>Thymeleaf Page</h1></span></p>

			<p style="margin-left:80px"><span style="color:#ffffff"><p </span><span style="color:#f1c40f">th:text="${message}"</span><span style="color:#ffffff">></p></span></p>

			<p style="margin-left:40px"><span style="color:#ffffff"></body></span></p>

			<p><span style="color:#ffffff"></html></span></p>
			</td>
		</tr>
	</tbody>
</table>

<p>&nbsp;</p>

<h2>コントローラーの作成</h2>

<p>以下を参考にコントローラーを作成します。</p>

<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
	<tbody>
		<tr>
			<td style="background-color:#000000">
			<p><span style="color:#ffffff">@Controller</span></p>

			<p><span style="color:#ffffff">public class TestController {</span></p>

			<p>&nbsp;</p>

			<p style="margin-left:40px"><span style="color:#ffffff">@RequestMapping("/")</span></p>

			<p style="margin-left:40px"><span style="color:#ffffff">public String index(</span><span style="color:#f1c40f">Model model</span><span style="color:#ffffff">) {</span></p>

			<p style="margin-left:80px"><span style="color:#ffffff">String message = "Hello!?";</span></p>

			<p style="margin-left:80px"><span style="color:#f1c40f">model.addAttribute("message", message);</span></p>

			<p style="margin-left:80px"><span style="color:#f1c40f">return "/test/index";</span></p>

			<p style="margin-left:40px"><span style="color:#ffffff">}</span></p>

			<p><span style="color:#ffffff">}</span></p>
			</td>
		</tr>
	</tbody>
</table>

<p>&nbsp;</p>

<h2>出力結果</h2>

<p><img alt="" src="/uploadImage/20180727181313_8142891.png" /></p>