ジャンボモナカ

34歳のハゲデブがHTML5ハイブリッドアプリ開発プラットフォームmonacaを始めました。

thymeleafでscriptタグ内に変数を表示させたい時

f:id:maipontan:20200510170227p:plain

前回、thymeleafでテキストを表示する方法について書きました。

同じように、scriptタグ内でも変数を表示させたいのだが、同じやり方が通用しない。

そこで、どうするかというと、scriptタグにth:inline="javascript"属性を追加すれば表示することができそうだ。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
    <script th:inline="javascript">
    var hoge = [[${hoge}]];
    </script>
</body>
</html>

[[${hoge}]]で対応することが可能。

thymeleafでテンプレート内に他のテンプレートをインクルードさせたい

thymeleaf SpringBoot Java

f:id:maipontan:20200510170227p:plain

thymeleafを使ってテンプレート内に他のテンプレートをインクルードさせたい場合はどうすればいいのだろうか？

例えば、テンプレートのHTMLがある。

(仮に今回、hoge.htmlとする。)

<!-- hoge.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no,address=no,email=no">
</head>
<body>
    <div>Hello World</div>
</body>
</html>

他のhtmlを作る際にも、metaタグは、同じ内容で、かつ、毎回、各テンプレートにコピペをしてしまうと弊害が発生してしまう。

どんな弊害かと言えば、metaタグの一部を変更したいとなった場合、コピペしたファイルを全部修正することになり、時間と手間がかかってしまう。

そもそも、コピペもめんどくさいという問題もある。

そこで、テンプレートの一部分をパーツ(別のテンプレート)として分けて、テンプレートの中に、他のテンプレートをインクルードさせれば、めんどくさいことから開放される。

調べてみると、th:replaceを使えば実現できることがわかった。

今回の場合だと、まず、metaタグ関連を別のhtmlファイルに保存させる。

(仮にmeta.htmlとする)

<!-- meta.html -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no,address=no,email=no">

作成したパーツ(別のテンプレートであり、今回の場合は、meta.html)をインクルードしたいので、もとのhtml(今回の場合は、hoge.html)で、th:replaceを使ってインクルードを行う。

<!-- hoge.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta th:replace="meta" />
</head>
<body>
    <div>Hello World</div>
</body>
</html>

th:replaceを設定しているタグは、別のタグのdivやspanでも問題ないのだが、それだとなんとなく気持ち悪いし、あとから、ソースコードを見直した時に、どうして、他のタグにしたのか理由が思い出せなくなってしまうので、もともとのタグ(今回の場合は、metaタグ)を書いた。

共通処理をひとまとめにできるので、ものすごく便利。

thymeleafでテキストを表示

SpringBoot Java thymeleaf

f:id:maipontan:20200510170227p:plain

Spring Bootとthymeleafでサーバー側で設定した変数の値をHTML内にテキストとして表示させたい。

まず、Spring Boot側でModelを用意する。

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;


@SpringBootApplication
@Controller
public class HogeApplication {
    @GetMapping("/")
    public String top(Model model) {
        model.addAttribute("foo", "hello thymeleaf");
        return "top";
    }

}

html側

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<div th:text="${foo}"></div>
</body>
</html>

デバッグすると、確かに、「hello thymeleaf」と表示された。

もう一捻りして、helloの部分をhtml側のテキストとして持たせたい場合は、「+」演算子で連結することができる。

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;


@SpringBootApplication
@Controller
public class HogeApplication {
    @GetMapping("/")
    public String top(Model model) {
        model.addAttribute("foo", "thymeleaf");
        return "top";
    }

}

html側

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<div th:text="'hello' + ${foo}"></div>
</body>
</html>

Reactのrenderで改行を反映させたい

JavaScript React

renderメソッドで表示させる際に、htmlタグがエスケープされた状態で表示されてしまう。

class Hoge extends React.Component {
  constructor(props) {
    this.state = {
      hoge: '<div>ssssss</div>'
    }
  }
  render(){
    <div>{this.state.hoge}</div>
  }
}

通常であれば問題はないのだが改行されたデータをbrタグに変更して表示させたい場合、どうすればいいのだろうか？

独自処理でエスケープを行い改行データを最後にbrタグに変更することはできるが、これだとセキュリティー的によろしくない。 (ちなみにhtmlをそのまま描画するには、前回書いたdangerouslySetInnerHTMLプロパティーを使う方法がある。)

そこでCSSでwhite-spaceを設定することで改行をbrタグに変換することなく改行として表示させることができる。

div {
  white-space: pre-line;
}

div {
  white-space: pre-wrap;
}

Spring BootでURLのパスを受け取る

Java SpringBoot

Spring BootでURLのパスを受け取りたい場合は、どうすればいいのだろうか？

例えば、/hoge/123、/hoge/456というURLのパスがあった場合、123と456を受け取りたい。

調査してみると、@PathVariableを使えば取得することができます。

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.stereotype.Controller;

@SpringBootApplication
@Controller
public class HogeApplication {
    @GetMapping("/hoge/{path}")
    public String hoge(@PathVariable(name = "path") String path) {
        return "hoge";
    }
}

デフォルトでは、パラメータが必須になっているので、任意にしたい場合は、requiredパラメータをfalseにします。


import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.stereotype.Controller;

@SpringBootApplication
@Controller
public class HogeApplication {
    @GetMapping("/hoge/{path}")
    public String hoge(@PathVariable(name = "path", required = false) String path) {
        return "hoge";

    }
}