Springboot + Thymeleafでテキストリンクを実装する

10548 ワード
Java Thymeleaf Java テキストリンク

Springboot + Thymeleafでテキストリンクを実装する

初めまして。ドアベルと申します。今回はタイトルの通りの実装を行います。

自己紹介

都内のSES専門会社で、現在某Java案件に参画中です。今年8月にテンショクカツドウ！をして人間を取り戻しました。
アイカツは良いぞ。

今回の環境

  • Win10
  • javac 9.0.1
  • Thymeleaf 2.1.3

実装の概要

  • テキストリンクを押下すると硝子ドールのMVページに飛ぶ

硝子ドールはアイカツ！シリーズにおける藤堂ユリカというキャラクターの持ち曲なのですが、
とにかくカッコ良すぎて、初めて見たときにかなり衝撃を受けました。今回はそんな楽曲のMVリンク
に遷移できるような実装をしてまいります。

アイカツとは

『アイカツ!』は、バンダイが発売するトレーディングカードアーケードゲーム筐体・データカードダス（DCD）を使用した日本の女児向けアーケードゲーム。ゲームは2012年10月25日に稼動を開始した。キャッチコピーは「国民的アイドルオーディションゲーム」。
アイカツ! - Wikipedia

上記ゲームに加え、現在はテレビ東京系列のアニメ『アイカツオンパレード！』が放送されております。

ソースコード

ソースコード一覧

  • pom.xml : プロジェクトに関する情報を持つ重要なファイル
  • HelloWorldController.java : メインとなるクラス
  • index.html : テンプレート HTML

├── src
│   └── main
│      ├── java
│      │      └── com
│      │              └── example
│      │                      └── demo
│      │                           └── controller
│      │                                 　└── HelloWorldController.java
│      └── resources
│               └── templates
│                      └── index.html
└── pom.xml

pom.xml

プロジェクトに関する情報を持つ重要なファイル
Thymeleaf 2.1.3 を指定。

<?xml version="1.0" encoding="UTF-8"?>
<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>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.3.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

HelloWorldController.java

メインとなるクラス。
Thymeleaf を利用して、オブジェクトの値を HTML テンプレートに埋め込んで出力する。

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class HelloWorldController {
    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String helloWorld(Model model) {
        model.addAttribute("message", "しもべへの入り口"); //表示するテキストを設定
        model.addAttribute("url", "https://www.youtube.com/watch?v=EbxoEIh3aHc"); //硝子ドールのMVへのリンクを設定
        return "index";
    }
}

index.html

テンプレート HTML ファイル。
基本的なテンプレート機能を記述。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<head>
<title>ごきげんよう</title>
<meta charset="utf-8" />
<script>
function mes(event){
  event.returnValue = "血を吸うわよ！";
}
 window.onbeforeunload = mes;
</script>
<!--リンクを押すと硝子ドールのMVページに飛ぶ -->
</head>
<body>
    <a th:href="@{${url}}"><span th:text="${message}">sss</span></a>
</body>
</html>

リンク押下時にユリカ様の決め台詞が表示される実装を入れていますが、本当は外部ファイルからJSを呼びたかったので今回の反省ですね。

実行方法

1.プロジェクトを右クリックし、「実行」タブから「Spring Boot アプリケーション」を選択

2.http://localhost:8080
上記URLへのアクセスが成功すると、以下の画面が表示されます。

3.テキストリンクを押下するとメッセージが表示されますので、「このページを離れる」を押下します

4.画面が遷移して、「硝子ドール」のMVが再生されればオケオケオッケー

th: 属性の説明

th:text

  • th:text 属性に指定した値は要素の中のテキストを置き換える

今回、index.html上でsssと入力していますが、属性に指定した値に要素内のテキストが入れ替わっているのが分かります。
Javaファイル内では、以下の部分がそれに該当します。

  • HelloWorldController.java

        model.addAttribute("message", "しもべへの入り口"); //表示するテキストを設定

Tutorial: Using Thymeleaf (ja)

この\${today}式は単純で「todayという名前の変数を取得する」という意味ですが、もっと複雑なこともできます（例えば\${user.name}は「user変数を取得してそのgetName()メソッドを呼び出す」という意味になります）。

th:href

リンク式

URLを設定する際にリンク式「@{…}」を使用します。
Thymeleafの属性である「th:href属性」とセットで使用します。
変数を使ってURLを生成する場合は、この構文を使うことになります。

Javaファイル内では、以下の部分がそれに該当します。

  • HelloWorldController.java

        model.addAttribute("url", "https://www.youtube.com/watch?v=EbxoEIh3aHc"); //硝子ドールのMVへのリンクを設定

実装を通じて

今回の実装を通して、改善したい点や次に挑戦したい内容をまとめました。

  • URLや文字列をプロパティファイルに記述してそれを呼び出す
  • DB連携

終わりに

現場ではJSPを用いているため、Thymeleafの書き方の復習を兼ねてアウトプットをしてみたのですが、何とか形にできたかなという気持ちです。うんうん、それもまたアイカツだね。

話は変わり、数か月前職場でどうしても実装できない箇所があって、苦労しながら実装できたということがあったのですが、その時に美月さんの言っていた、『出来なくて悔しいと思う気持ち。それがあれば前に進める。』の言葉を思い出し深く刺さったものです。

この記事を読んで、アイカツに興味を持っていただけましたら嬉しいです。
アイカツ！ALL SEASON Blu-ray まつり！！