前回はhtmlを書くために、Thymeleafを使ったところだった。今度はJSを使ってみたいので、Application development with Spring Boot + JSをやってみようとした。ところが、これはgroovyでのサンプル？のようで、よくわからなかったので、githubのコードを確認したら、readmeにSpring Boot + webjarsへのリンクがあったので、こっちを確認することに。
Spring BootでJSライブラリを扱う(Webjars)
JS開発者はnpmやbowerを使ってライブラリを管理するが、Javaの開発者はMavenを使って管理できるようにWebjarsを使うといい、と書いてあったと思う。Webjarsを使うと、特別な設定なしに、JSライブラリを扱うことができるようだ。
webjars.orgを使って、JSライブラリをインストールするのが、Java系の標準なんだろうか？
以下を、build.gradleのdependenciesブロックに追加した。
dependencies {
// compile("org.springframework.boot:spring-boot-starter-web:1.2.1.RELEASE")
// compile("org.springframework.boot:spring-boot-starter-actuator:1.2.1.RELEASE")
compile("org.springframework.boot:spring-boot-starter-thymeleaf:1.2.1.RELEASE")
compile("org.webjars:jquery:2.1.3")
testCompile("org.springframework.boot:spring-boot-starter-test:1.2.1.RELEASE")
}
そして、thymeleafで作ったテンプレート側を以下のように修正。
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Getting Started: Serving Web Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="webjars/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('p').animate({
fontSize: '48px'
}, "slow");
});
</script>
</head>
<body>
<p th:text="'Hello, ' + ${name} + '!'" />
</body>
</html>
webjars/jqueryの行でJSライブラリを読み込み、その後、ページの読み込みが終わったらフォントが大きくなるアニメーションを追加している。動かしてみたら、うまくいった。
ThymeleafのCacheの削除方法
ホットスワップにしていたので、自動的に削除されると思っていたら、ちゃんと設定しないとテンプレートのキャッシュも削除されないらしい。
静的ファイルは毎度読み込むのだが、テンプレートは静的ファイルではないので、キャッシュされるってことのようだ。
application.propertiesに以下のように書く。
spring.thymeleaf.cache = false
静的ファイルはどこに置くのか？
Serving Static Web Content with Spring Bootを読んだ。
静的ファイル置き場は、プロジェクト直下にpublicディレクトリやstaticディレクトリなどを作ると自動的にSpring Bootが認識してくれるらしい。なので、先ほどの文字を大きくするアニメーションのJSを、外部ファイル化してみた。
$(document).ready(function() {
$('p').animate({
fontSize: '48px'
}, "slow");
});
そして、htmlで外部ファイル化したJSを読み込むように修正。
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Getting Started: Serving Web Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="webjars/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/application.js"></script>
</head>
<body>
<p th:text="'Hello, ' + ${name} + '!'" />
</body>
</html>
文字が大きくなることが確認できた。
