SE_BOKUのまとめノート的ブログ

SE_BOKUが知ってること・勉強したこと・考えたことetc

thymeleaf2.1.xを使うなら、HTMLのタグの閉じ忘れは許されないから注意しよう。 

HTML5だとタグを閉じなくてもOKですが、Thymeleaf2.1.x(2.1系)では、それがエラーになります。

なお、STS3(3.9.6)+SpringBoot2.0+tymeleaf3.0迄動作確認しています。

f:id:arakan_no_boku:20190222012501j:plain

 

Tymeleaf3.0以降は問題なし

 

Thymeleafが3.0.0以降なら、HTML5の文法で問題なくいけます。

ただ、spring-boot-starter-parentが、1.5.xの場合、暗黙的にThymeleafは2.1.x系を使いますので、注意が必要です。

3.0.0以降にバージョンアップする方法はこちらを参照ください。 arakan-pgm-ai.hatenablog.com

 

Thymeleaf、2.1.2で確認した結果

 

HTML5の書き方でエラーになる!

 

HTML5で静的HTMLを書いて、それにthymeleafのタグを適用して画面に流用するケースです。 

thymeleafのドキュメント(Tutorial: Using Thymeleaf (ja)

を見ると、以下のように書いてあります。

Thymeleafは6種類のテンプレートを処理することができます。これをテンプレートモードと呼びます:

Legacy HTML5 以外は整形式XMLです。Legacy HTML5 モードでは閉じていないタグ・値がない属性・引用符で囲まれていない属性が許容されています・・

なので、HTML5の文法上OKだったら問題ないな・・と考えてると、ちょっとはまります。 

内蔵サーバーを起動して動かしたときに、例外が発生して画面が表示されずに、こんな画面がでます。

f:id:arakan_no_boku:20170318204450j:plain

thymeleafは、HTML5で許されている書き方を一部許さないみたいなんです。

 

HTML5の閉じタグ省略がダメ!

 

例えば、HTML5は閉じタグの省略ができます。 

例えば、</li>、</dt> 、</dd>、</p>、</option> <tbody>、</tbody>、</tr>、</td> 、</th>などですね。 

これは、thymeleafだと例外発生の原因になります。 

あと、空要素(もともと終了タグが不要なもの)の書き方も、HTML5では、<br>や<hr>のように、/>で終わらせない書き方が推奨されていたりもします。 

これも、thymeleafだと例外発生の原因になります。 

thymeleafは、すべてのタグが閉じタグで、閉じていないとだめですし、すべての空要素も /> で終わっていないと駄目です。必ず、閉じる・・を心がけないと、例外で画面がおちて修正する面倒にまきこまれると思った方がいいです。

 

HTMLモードに変更してもダメ!

 

 と・・、ここまで書くと、ドキュメントには「Legacy HTML5 モードでは閉じていないタグ・値がない属性・引用符で囲まれていない属性が許容されています」と書いてあるじゃないか?モードをそれにしていないから駄目なだけで、モードを変更すれば大丈夫なんじゃないかと思う人もいると思います。 

"BOKU"もそう思って、当然試しました。 

モードの変更自体は、application.propertiesに以下のように書くことでthymeleafの設定を変更できるので、LEGACYHTML5に変更することはできます。(デフォルトで使う分には、記述不要です)

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=LEGACYHTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html 

でも、残念ながら、LEGACYHTML5にすると、別の例外がでてうまく動きませんでした。 

どうも、LEGACYHTML5にテンプレートモードを設定する場合は「nekohtml」(http://nekohtml.sourceforge.net/)というHTMLパーサーも必要みたいなんですね。

じゃあ、組み込んでやってみるか?と思ったんですが、ドキュメントに「バリデーションはXMLXHTMLのみで使用可能なことに注意してください。」などど書いてあったりします。 

どうも、thymeleafにとっては、「LEGACYHTML5」は対応はしているが、ちょっと特殊な使い方にあたるようです。

 

タグは必ず閉じるように気をつける 

 

問題ないのかもしれませんが、過去の経験上、特殊な使い方をしていて、バージョンアップの時などに不必要な苦労をさせられることもあったので、メリット・デメリットを考慮してやめました。 

正直なところ、最初にルールとしてわかっていれば、タグを必ず閉じるとか、<br>と書けるようにするより、<br />と書くように気をつけるのは大した手間ではありません。 

今のところ、その考え方でやって、支障はでていません。個人的にはこちらのやり方がおすすめです。 


 STS + Spring Boot+thymeleaf 関連記事

 

入力画面に関連する記事

画像をSUBMITボタン代わりに使う

ラジオボタンとラジオボタングループを使う 

ラジオボタンとラジオボタングループを使う 

チェックボックスを使う。 

HTMLのタグの閉じ忘れで例外が発生する!

プルダウンリストとマルチセレクトボックスを使う。

今度はテキストエリアで複数行入力する。 

テキストボックスの入力と基本的なチェックを使う。

 

参照画面・画面遷移に関連する記事

参照画面:テーブルを使い、行毎に色分けした一覧表を表示する。 

参照画面:条件に一致した時のみHTML要素を出力する。

セッションを使って画面間で情報を受け渡す 

画面遷移:GET時のリクエストパラメータを受け取る 

日本語しか使わなくても、i18N対応はする意味がある。

 

入力チェックに関連する記事

入力チェック:未入力時に空文字が渡される仕様を回避する。 

入力チェック:@Patternと正規表現で独自チェックする。

入力チェック:アノテーション定義を自分で作る。(再利用版)

入力チェック用アノテーション定義を自分で作る。(独自実装版)

入力チェック:複数項目の相関チェックアノテーションの作り方

 

データアクセス・その他に関連する記事

データアクセス:Jprepositoryを使って簡単にCRUDする。 

データアクセス:ネイティブなSQL文を実行する 

クラスパス内の静的ファイルにアクセスする 

SpringBootだとログの書き出しも楽ちんです。 

SpringBootプロジェクトでJUNIT4を使った単体テストをする。