Java SpringBoot + Thymeleaf 画面を作成する ~ControllerからHTMLまで~

イントロダクション

前回はSpringBootでの開発セットアップを行いました。

前回の状態では、エラーページしか確認できませんでした。

これは、サーバーが起動していることを確認するという意味で、必要な確認なのですが。。。動かないのでは面白くありません。

SpringBoot + Thymeleafで画面を作る

毎度おなじみ、「ハローワールド」をやってみようと思います。

作成するもの

  1. Javaファイル(コントローラークラス)
  2. HTMLファイル(Thymeleaf使用)

コントローラークラスを作る

まずは、作成して動かすことに注力します。
プロジェクトを作成したら初めに「SampleWebAppApplication」というクラスが作成されていると思います。

このクラスがアプリケーションを起動するクラスです。しかし、このクラスはいじる必要がありません

Controllerがアプリを動かすために

自動生成された「SampleWebAppApplication」はアプリケーションを起動するためのクラスなので、本当にアプリを起動するだけなのです。

起動確認するときに、エラーページしか出ないのは表示するものが何もないからです。

それでは、早速コントローラークラスを作成します。まずは、ルールがあるのでそれに注意します。
先ほど自動生成されたクラス「SampleWebAppApplication」はパッケージ「com.example.demo」というパッケージに作成されています。

パッケージはウィンドウズでいうところの「フォルダ」に相当します。上に貼り付けているものは、パッケージを表示していいます。

一番上にある「src/main/java .... 」の部分はフォルダ構成上下のようになっています。

  1. プロジェクトのフォルダがあります。
  2. その中に、srcというフォルダがあります。
  3. 同様にmainというフォルダ
  4. javaというフォルダ
  5. そして、ここからが「パッケージ」と呼ばれるフォルダになります。「com」フォルダ
  6. 「example」フォルダ
  7. 「demo」フォルダ

このようにフォルダ構成が出来上がってるのですが、これを「パッケージ」と呼び下のように表現することで、どのファイルのクラスを参照するかわかるようにしています。
Javaのプログラムでいうと「インポート文」がそれにあたります。

import con.example.demo.*;

上のインポート文は「con.example.demo」パッケージにあるクラスを全てインポートするという意味です。

Controllerのみで動かす

パッケージに関して意味が分かったところで、上記で記載した「ルール」に関してお話ししたいと思います。
自動生成されたクラス「SampleWebAppApplication」よりも下のパッケージ内にコントローラーなどの読み込むクラスを作成するというルールがあります。

なので、今回作成するコントローラークラスはパッケージ「com.example.demo.controller」に作成することにします。
パッケージの作成方法は下のように行います。

  1. 作成するパッケージの親になるパッケージを右クリック※com.example.demoパッケージを右クリックしました。
  2. そして、「パッケージ」という文言が見つかればよいのですが、残念ながら表示されていませんので「その他」をクリックします。すると下のようなウィンドウが開きます。
  3. そこでパッケージを選択してやれば作成できるというところです。

さらに、ここからクラスも作成します。手順は上と同じですが、選択するものが「クラス」になります。

そして、ここでは「HelloController」というクラスを作成します。

package com.example.demo.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

@RestController
public class HelloController {

    @RequestMapping("/")
    public String index(ModelAndView mav) {
        return "Hello World";
    }
}

<表示結果>

ここでは、HTMLの作成は必要がありません。

実は、上記の「@RequestMapping」アノテーションを付けたメソッドは返却文字列を指定した場合はHTMLになります。なので下のようにコードを変更してやると。。。

@RequestMapping("/")
public String index(ModelAndView mav) {
    return "<html>"
            + "<title>Hello World</title>"
            + "<body><h1>こんにちは</h1>"
            + "<p>~PGボックスより~</p>"
            + "</body>"
            + "</html>";
}

<表示結果>

このように表示できます。しかし、「もっとオシャレに!」「もっと機能的に!」ということを考えるとHTMLファイルを使用して動かした方が効率的です。

もちろん、ウェブデザイナーさんの協力を頂き、その実力を発揮してもらうならナチュラルなHTMLがベストです。JSPなどは専門外のはず。。。

HTMLを作成する

そこで「Thymeleaf」というフレームワークを使用します。これはコントローラーとHTMLを橋渡しするためのフレームワークです。
具体的に見ていきましょう。まずはHTMLをみてみましょう。

<!DOCTYPE html>
<html>
<head lang="ja" xmlns="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title>Sample Index Page</title>
</head>
<body>
    <h1>Recommended index</h1>
    <p>おススメの漫画・アニメを検索できます。</p>

</body>
</html>

上のようなHTMLを作成します。この状態ではコントローラーとのやり取りがない状態です。
しかし、まずはこの状態で動かしてみます。作成したHTMLファイルは「src/main/resources/templates」フォルダの下に作成しましょう。

そして、コントローラーも書き換えます。

@RequestMapping("/")
public ModelAndView index(ModelAndView mav) {
    mav.setViewName("book");
    return mav;
}

<実行結果>

このように動いたところで、コントローラーから値を渡すことを考えます。

コントローラーからHTMLへ。。。

今回のJavaプログラムはサーバーサイド・プログラムなので(※クライアントでも動かすことができます。)サーバー側での処理を行うことができますが、クライアント(ブラウザ上)でのプログラムはJSとかHTMLに任せることになります。

なので、サーバーでの処理結果をクライアントに渡すにはちょっとテクニックが必要になります。
具体的には、以下の通りです。

  1. リクエストパラメータを使用する
  2. レスポンスに処理結果を埋め込む(渡す)

こんなことを言われても「???」となってしまう人は正常です。ご安心ください。

具体的に下のようなコードで処理の結果を渡します。プログラムは微妙に修正しています。
<Java>

@RequestMapping("/")
public ModelAndView index(ModelAndView mav) {
    mav.setViewName("book");
    mav.addObject("key", 12);
    return mav;
}

<HTML>

<!DOCTYPE html>
<html>
<head lang="ja" xmlns="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title>Sample Index Page</title>
</head>
<body>
    <h1>Recommended index</h1>
    <p>おススメの漫画・アニメを検索できます。</p>
    <p th:text="${key}">ここに値が入ります。</p>

</body>
</html>

<実行結果>

赤枠で囲った部分がJava側からHTMLへ渡した値です。

とりあえずは、ここまでに致します。

でわでわ。。。

<<< 前回

Java SpringBoot セットアップ ~Eclipse All in Oneでやると早い~

SpringBootの開発 セットアップ

SpringBootのセットアップを行うのに、いろいろな手順があり、混乱するので(自分の行った中で)もっとも簡単な方法を記載します。

使用するIDE(開発ツール)はEclipseのAll in Oneです。

大まかな手順

  1. プロジェクトを作成するときにSpringBootのスタータープロジェクトを作成する
  2. プロジェクト作成時に、ThymeleafとDB(H2DB)とSpringWebを追加する
  3. プロジェクト作成後にPOMファイルを「Maven install」で実行する
  4. Mavenプロジェクトの更新

プロジェクトの作成

Eclipseを起動してから、下のようにプロジェクトを右クリックし「新規」をクリック以下の手順に従います。

  1. Springスタータープロジェクトを選択し、「次へ」をクリック

  2. プロジェクトの名前などを入力する。使用するJDKによって「Javaバージョン」の値を変更する
     ※JDK1.8であれば「8」を選択する

  3. 使用するDBやフレームワーク(ツール)を選択する、今回はDBに「H2DB」、画面の作成に「Thymleaf」を使用するのでそれぞれのチェックボックスにチェックを入れる
    そして、Spring Webにチェックを入れる

  4. 最後に完了を押下する

※画像には「MySampleWebbApp」とあったが、「SampleWebApp」プロジェクトを作成した形で手順を進めます。

作成したプロジェクトは下のような形でEclipseのプロジェクトエクスプローラー、もしくは、パッケージエクスプローラーに表示されるはずです。
作成後のプロジェクト名が「MySampleWebbApp」になっていますが、「SampleWebbApp」での作成も確認しています。

プロジェクトを作成したばかりの状態では、バックグラウンド処理で何かしらのインストールが走っているので、ちょっと待ちます。

最後にプロジェクトを右クリック、実行、Spring Bootアプリケーションをクリック
これだけで、セットアップは完了です。

そして、ブラウザを開き、http://localhost:8080 にアクセスします。
ここでは、エラーページしか出ませんが、Tomcat(Webサーバー)が動いていることを確認するのが目的なのでこれでよいのです。