Spring Bootの練習日記:5日目

前回は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の削除方法

ホットスワップにしていたので、自動的に削除されると思っていたら、ちゃんと設定しないとテンプレートのキャッシュも削除されないらしい。

http://docs.spring.io/spring-boot/docs/current/reference/html/howto-hotswapping.html#howto-reload-thymeleaf-content

静的ファイルは毎度読み込むのだが、テンプレートは静的ファイルではないので、キャッシュされるってことのようだ。
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>

文字が大きくなることが確認できた。


カテゴリー Java | タグ | パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です