質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

Q&A

解決済

2回答

1122閲覧

[Spring Boot+thymleaf] 初期表示後について

tohmey

総合スコア10

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

0グッド

0クリップ

投稿2019/11/01 00:25

編集2019/11/01 05:40

知りたいこと

htmlソースの頭に

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

と記述しています。
これにより、画面の初期表示時にはth:replaceなどの機能が使えています。

しかし、表示後の画面を開発者ツールで確認すると、

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> 

と、xmlns:th="http://www.thymeleaf.org"がまるっと消えてしまっています。
これは、普通のことなのでしょうか。

ちなみに、うちのプロジェクトで作っている画面はすべて上記のようになっています。
これが、thymeleafを使った画面すべてで起こることであるかを知りたいのです。

お手数ですが、
同じような環境でWEB画面を作っていらっしゃる方に、画面表示後の上記部分がじっさいどうなっているかを教えていただけたらありがたく思います。

よろしくお願いいたします。

試したこと

POMをいじったりはしました。が、あまり大胆にはいじれません。
(環境導入は他の者がやっており、その者はすでに現場を離れております)
環境設定に問題があると判明した場合に、設定の見直しにじっくり取り組みたいと思っています。

ほんとうにやりたいこと↓
https://teratail.com/questions/220456
がうまくいかない原因がどこなのかの切り分けができていません。
コードの書き方なのか、環境設定にミスがあるのか。
私は、htmlタグからxmlns:th="http://www.thymeleaf.org"が消えてしまうことが原因なのでは、
(初期設定のどこかが足りない?)
と考えています。そのため、
他の方の画面ではどうなっているのかを知りたいと思って、この質問をしています。

ちょっとだけ、ご自分のhtml(表示後)のタグを確認し、お知らせいただけないでしょうか。
現状を教えてくださるだけで、大変助かります。
どうかよろしくお願いいたします。

補足情報(FW/ツールのバージョンなど)

thymeleaf 3.0.11.RELEASE

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

コントローラのアノテーション、@Controllerと@RestControllerの違いが原因でした。
タイムリーフ用のコントローラを切り出し、アノテーションを@Controllerにしたら、
返却文字列をタイムリーフが受け取ってくれました!

投稿2019/11/01 07:35

tohmey

総合スコア10

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rubytomato

2019/11/01 07:40

ご質問の意味を取り違えていたら申し訳ありません。 > と、xmlns:th="http://www.thymeleaf.org"がまるっと消えてしまっています。 > これは、普通のことなのでしょうか。 > ちなみに、うちのプロジェクトで作っている画面はすべて上記のようになっています。 > これが、thymeleafを使った画面すべてで起こることであるかを知りたいのです。 これが知りたいことだと理解して回答したのですが、下記の回答では不十分でしたでしょうか? > コンパイルによりth属性の部分が処理され、コンパイル結果のhtmlからは消えるので、下記の疑問点の答> えは”普通のこと”ということなります。
tohmey

2019/11/12 04:16

ありがとうございました。 タグのth要素が画面表示後消えてしまうのは、あちこち検索して読んで知っていたのですが…。 ヘッダ部分も消えてしまっては、あとからタイムリーフを利用するのは不可能なのでは? ほんとうに、他の人の画面でも、ヘッダ部分のxmlns:th="http://www.thymeleaf.org"が消えているのかしら。 他の人の画面はどうなっているのか見たい!!! というのが、質問を書いた当時の気持ちでした。 thだから消えてしまう。それは普通のこと。そうなのかもしれませんが、 「自分のページもそうなってるよ!」 っていう素朴な報告が、あの時、いちばん欲しかったのでした。 そして、その画面に対してタイムリーフを使った差し替えなどができるのであれば、 私のほうの問題(本題)は、ヘッダから"http://www.thymeleaf.org"が消えていることとは関係ない、と、 可能性を一つ消すことができたわけです。 (実際、本題の原因は別のところにありました) 理論ではなく、実際が知りたい。 というのも、私はわりと、頭だけでコードを完成させてから動かすタイプではなく、 ある程度作ったら動かして、実際どうなるのか見ながら変更していく。というタイプなものですから。 ともあれ、こちらの回答も不十分だったようで、大変失礼いたしました。
guest

0

テンプレートエンジン

Thymeleafはテンプレートエンジンです。

下記に、Tutorial: Using Thymeleaf (ja)の『1.1 Thymeleafって何?』という箇所から引用します。

Thymeleafは、ウェブとスタンドアローンどちらの環境でも利用できる、モダンなサーバーサイドJavaテンプレートエンジンです。HTML、XML、JavaScript、CSS、さらにプレーンテキストも処理することができます。

この引用文中の ”サーバーサイドJavaテンプレートエンジン”の通り、Thymeleafはサーバーサイドで動作する機能です。なのでブラウザ上に表示されたHTMLページに対してThymeleafのth属性を使って操作しても意味はありません。
つまりブラウザ上でHTMLページが表示された時点でThymeleafの役割は終了しているということになります。

テンプレートファイル

Spring Boot + Thymeleafでアプリケーション開発している場合、Javaのソースコードとともに*.htmlというファイルも作成していると思います。この*.htmlファイルは素のhtmlファイルではなく、Thymeleafのテンプレートファイルという位置付けになります。
このhtmlファイルがそのままブラウザに表示されるのではなく、Thymeleafテンプレートエンジンによってコンパイルされ、その結果のhtmlがブラウザに表示されます。

コンパイルによりth属性の部分が処理され、コンパイル結果のhtmlからは消えるので、下記の疑問点の答えは”普通のこと”ということなります。

と、xmlns:th="http://www.thymeleaf.org"がまるっと消えてしまっています。
これは、普通のことなのでしょうか。

たとえば、テンプレートファイルに下記の要素があり、hoge変数に"fuga"という値が与えられていた場合

<p class="primary" th:text="${hoge}">hoge</p>

これがコンパイルされると、ブラウザ上では

<p class="primary">fuga</p>

となります。

投稿2019/11/01 06:47

rubytomato

総合スコア1752

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tohmey

2019/11/01 07:27

ご教示ありがとうございます。 ほんとうに見た感じ、初期表示が終わった段階で、タイムリーフの役割は終わっているように見えますよね。
tohmey

2019/11/12 07:23

追記しますと、 今回行っているタイムリーフによる部品差し替えは、 ※html全体を再読み込みせずに! プルダウンだけ差替える。 というものですが、 html全体を再読み込みしないのに、表示されているhtmlにはタイムリーフ要素が残っていないのに、 なぜ、表示後の画面に対して、タイムリーフによる差し替えが行えるのか。 という疑問は残ります。もちろん、どこかにタイムリーフが隠れているのでしょうけれども。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問