【SpringBoot入門】第５回「Thymeleafを使ってみよう！（その１）」

こんにちは。タグボード開発チームのワシヅカです。

明日から１２月です。今年もあっという間で特に頑張ったという記憶もなく…。残り１ヶ月を有意義に過ごして「終わりよければすべてよし」に持っていきたいです。明日から本気出す、です。

今日は、今まで使ってきたサンプルプロジェクトにもう少し手を加えて、Thymeleafというテンプレートエンジンを使ってHTMLにデータを出力したいと思います。早速やっていきましょう！

０．前提

１回目を参考に、STSのインストールを終えていること
２回目を参考にサンプルプロジェクトのインポートを終えていること
３回目、４回目を読んでいなくても、プロジェクトの実行は可能ですが、読んでおくとより理解が早いと思います。
Javaのバージョンは1.8を利用していること

１．pom.xmlを修正する

まずは、pom.xmlを修正して、Thymeleafのライブラリをインポートしましょう。

下の画像を参考に、<dependencies>～</dependencies>の間と、<properties>～</properties>に設定を追加しましょう。

<java.version>1.8</java.version>

はもともと定義されていると思いますので、消さないように注意しながら修正を加えてください。

		<!-- Thymeleaf -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		
		<!-- Thymeleaf 追加拡張-->
		<dependency>
			<groupId>org.thymeleaf.extras</groupId>
			<artifactId>thymeleaf-extras-java8time</artifactId>
			<version>3.0.1.RELEASE</version>
		</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

<groupId>org.thymeleaf.extras</groupId>

<artifactId>thymeleaf-extras-java8time</artifactId>

<version>3.0.1.RELEASE</version>

</dependency>

    <properties>
        <java.version>1.8</java.version>

		<!-- プロジェクトエンコーディング情報 -->
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>

		<!-- Thmeleaf バージョン情報 -->
		<thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>
		<!-- Thmeleaf レイアウト共通化エンジンのバージョン情報 -->
		<thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version>

    </properties>

<java.version>1.8</java.version>

<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>

<thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>

<thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version>

</properties>

修正後のイメージは下の画像のようになります。

pom.xmlに修正を加えて、ctrl+sキーで上書き保存すると、上で付け加えたライブラリがダンロードされ、再ビルドが実行されます。ダウンロードでエラーが出る、社内ネットワークなどで、proxy経由でインターネット接続されているような方は「Maven proxy」のようなキーワードでググってみると良いかもしれません

Mavenがリモートリポジトリからライブラリのダウンロードを完了すると、STSの「Maven依存関係」のリストに先ほどpom.xmlに追加したThymeleaf関連のライブラリが表示されますので、サクッと確認してください。

２．フォルダを追加する

Thymeleafはデフォルトで「resources」配下の「templates」というパスを参照するようになっていますので、そのパスを作ってあげます。パッケージ・エクスプローラーから「src/main/resources」を右クリックし、［新規］→［その他］を選択します。

ウィザードが表示されたら、下の画像の様に「フォルダ」と検索すると「一般＞フォルダー」が表示されますので選択して「次へ」ボタンをクリックします。

下の画面が表示されたら、フォルダの作成パスが合っていることを確認し、フォルダ名に「templates」と入力して「完了」ボタンをクリックしてください。

次に作成した「templates」フォルダの中にHTMLを作成します。

先ほど同じようにパッケージエクスプローラーから「templates」フォルダを右クリックし［新規］→［その他］を選択します。ウィザードが表示されたら「html」と入力して、表示された「HTMLファイル」を選択し、「次へ」ボタンをクリックします。

HTMLのファイル名を入力する画面が表示されるので、今回は「hello.html」と名前を付けておきます。

３．hello.htmlを編集する

hello.htmlは、すでに基本的なHTMLが記述された状態で生成されますので、下の画面を参考に１行追加してください。追加する内容は、

<p th:text="${message}"></p>

1	<p th:text="${message}"></p>

です。ポイントは「th:text=”${message}”」です。<p>は、ご存知、HTMLの<p>タグです。

また、今回は使いませんが、「resources」フォルダの下に「static」フォルダを作成し、更にその下に「js」、「css」、「images」フォルダを作っておくと良いかと思います。Javascriptファイルなどの格納場所として利用します。

フォルダ名	用途
js	JavaScript
css	スタイルシート
images	画像ファイル

４．MainController.javaを編集する

次に「MainController.java」を編集します。

処理を簡単に解説しますと…

まず、@GetMappingアノテーションで”/”のパスにマッピングします。

パラメータにModelAndView を渡すことで自動的にインスタンスが生成されるので、そのmavインスタンスにaddObjectメソッドで”message”というキー文字列でmessageStringを格納しています。

また、View名は先程作った”hello.html”に設定します。

そして、最後にreturnでmavを返却しています。

	/***
	 * ハローページを出力する
	 * 
	 * @return
	 */
	@GetMapping(path="/")
	public ModelAndView getHello(ModelAndView mav) {
		
		String messageString = "こんにちは！タグボートを使ってみてね！";

		mav.addObject("message", messageString);
		mav.setViewName("hello.html");
		
		return mav;
	}

/***

* ハローページを出力する

* @return

@GetMapping(path="/")

public ModelAndView getHello(ModelAndView mav) {

String messageString = "こんにちは！タグボートを使ってみてね！";

mav.addObject("message", messageString);

mav.setViewName("hello.html");

return mav;

}

５．デバッグモードで実行する

さて、デバッグモードで実行して、ブラウザでアクセスしてみましょう。

URLはhttp://localhost:8080/demo/

となります。

※なぜ/demo/が付くのかは第３回目の「５．URLとのマッピングを確認する」をご覧頂けると理解が早いかと思いますが、クラス自体にマッピングが行われているためです。

ブラウザで上記のURLへアクセスすると、事前に仕掛けておいたブレイクポイントで止まりました。mavインスタンスのmodelにKeyとValueで値が格納されたことが分かります。またviewにもしっかり”hello.html”が格納されていますね。F8キーを押して処理を続行しましょう。

６．HTMLの出力結果を確認する

見事にHTMLが出力されました(^^)

表示されたソースを確認すると

<p th:text="${message}"></p>

1	<p th:text="${message}"></p>

の部分が置き換わっていることがわかります。

modelに格納された”message”とhello.htmlで記述した${message}が一致し、変換処理が行われていることが分かります。

うまくいきましたでしょうか？！

いよいよHTMLを出力できるところまでやってきました。次回は今までの技術を駆使してDBのデータをHTMLで出力してみましょう！