概要
この記事では、JavalinとThymeleafを使用して簡単なWebアプリケーションを構築する方法について解説します。Javalinはシンプルで軽量なJava用Webフレームワークで、ThymeleafはJavaベースのテンプレートエンジンとして、HTMLファイル内で変数をレンダリングするのに役立ちます。
必要なファイルと設定
以下の4つのファイルを使用します:
-
pom.xml
: Mavenのプロジェクト設定ファイル -
App.java
: Javalinアプリケーションのエントリーポイント -
ThymeleafRenderer.java
: JavalinでThymeleafを設定するためのレンダラー -
index.html
: レンダリングするHTMLテンプレート
1. pom.xml
の設定
まず、プロジェクトの依存関係を定義するためにpom.xml
ファイルを設定します。Thymeleaf、Javalin、その他の必要なライブラリを追加します。
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>jp.livlog</groupId>
<artifactId>javalin-thymeleaf</artifactId>
<version>0.0.1-SNAPSHOT</version>
<dependencies>
<!-- Javalin -->
<dependency>
<groupId>io.javalin</groupId>
<artifactId>javalin</artifactId>
<version>6.3.0</version>
</dependency>
<!-- Thymeleaf -->
<dependency>
<groupId>io.javalin</groupId>
<artifactId>javalin-rendering</artifactId>
<version>6.3.0</version>
</dependency>
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.1.2.RELEASE</version>
</dependency>
<!-- Other -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.34</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>ch.qos.logback</groupId>
<artifactId>logback-classic</artifactId>
<version>1.4.5</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>2.0.7</version>
</dependency>
</dependencies>
<build>
<sourceDirectory>src/main/java</sourceDirectory>
<outputDirectory>target/classes</outputDirectory>
<resources>
<resource>
<directory>src/main/resources</directory>
</resource>
</resources>
<testSourceDirectory>src/test/java</testSourceDirectory>
<testOutputDirectory>target/test-classes</testOutputDirectory>
<testResources>
<testResource>
<directory>src/test/resources</directory>
</testResource>
</testResources>
<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.1</version>
<configuration>
<release>17</release>
</configuration>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>versions-maven-plugin</artifactId>
<version>2.17.1</version>
<executions>
<execution>
<phase>compile</phase>
<goals>
<goal>display-dependency-updates</goal>
<goal>display-plugin-updates</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
2. App.java
- Javalinアプリケーションのメインクラス
App.java
はJavalinアプリケーションのエントリーポイントで、ThymeleafRendererを設定し、ルートエンドポイントを設定しています。
package jp.livlog.javalin_thymeleaf;
import java.util.Map;
import io.javalin.Javalin;
public class App {
public static void main(final String[] args) {
final var app = Javalin.create(config -> {
config.fileRenderer(new ThymeleafRenderer()); // Thymeleafを使う
}).start(7000);
app.get("/", ctx -> {
ctx.render("/index.html", Map.of("message", "Hello, Thymeleaf!"));
});
}
}
3. ThymeleafRenderer.java
- カスタムThymeleafレンダラー
Thymeleafレンダラーは、JavalinでThymeleafを使用してテンプレートをレンダリングするために使用されます。このファイルは、ThymeleafのTemplateEngine
を設定し、テンプレートをJavalinのファイルレンダリングに適用します。
package jp.livlog.javalin_thymeleaf;
import java.util.Map;
import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.Context;
import org.thymeleaf.templateresolver.ClassLoaderTemplateResolver;
import io.javalin.rendering.FileRenderer;
public class ThymeleafRenderer implements FileRenderer {
private final TemplateEngine templateEngine;
public ThymeleafRenderer() {
this.templateEngine = new TemplateEngine();
final var resolver = new ClassLoaderTemplateResolver();
resolver.setPrefix("/templates/");
resolver.setSuffix(".html");
resolver.setTemplateMode("HTML");
this.templateEngine.setTemplateResolver(resolver);
}
@SuppressWarnings ("unchecked")
@Override
public String render(final String filePath, final Map <String, ? extends Object> model, final io.javalin.http.Context ctx) {
final var thymeleafContext = new Context();
thymeleafContext.setVariables((Map <String, Object>) model);
return this.templateEngine.process(filePath, thymeleafContext);
}
}
4. index.html
- テンプレートファイル
index.html
は、Thymeleafが処理するHTMLテンプレートファイルです。/templates
ディレクトリに配置します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Thymeleaf Example</title>
</head>
<body>
<h1 th:text="${message}">Default message</h1>
</body>
</html>
このテンプレートでは、${message}
の変数に渡されたデータが表示されます【163†source】。
実行方法
- 上記の設定が完了したら、Mavenプロジェクトをビルドし、
App
クラスを実行します。 - ブラウザで
http://localhost:7000/
にアクセスすると、Thymeleafによってレンダリングされた「Hello, Thymeleaf!」のメッセージが表示されます。
以上がJavalinとThymeleafを使ったWebアプリケーションの簡単な設定方法です。
最後に
さらに、JavalinとThymeleafの設定を学ぶための参考として、GitHub上にサンプルプロジェクトが公開されています。このリポジトリでは、上記の構成を元にした実装例が提供されており、Thymeleafのテンプレートエンジンを使ってJavalinアプリケーションでの動作確認ができる構成になっています。
サンプルリポジトリはこちら: javalin-sample
このサンプルには基本的なセットアップ、Thymeleafテンプレートの活用例、そしてカスタムファイルレンダラーの実装が含まれていますので、ぜひ参照してみてください。