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

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

新規登録して質問してみよう
ただいま回答率
86.02%
Spring MVC

Spring MVCとは、Javaを用いてWebアプリケーションを開発できるフレームワーク。アーキテクチャにMVCを採用しており、画面遷移と入出力パラメータの受け渡しの基本的な機能の他、ユーザーの送信したパラメータに対する入力チェックなどさまざまな機能を持ちます。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Thymeleaf

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Spring Boot

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

Q&A

解決済

th:href内に変数を設置し、ページごとに動的なリンクを作成したい。

pepe0730
pepe0730

総合スコア8

Spring MVC

Spring MVCとは、Javaを用いてWebアプリケーションを開発できるフレームワーク。アーキテクチャにMVCを採用しており、画面遷移と入出力パラメータの受け渡しの基本的な機能の他、ユーザーの送信したパラメータに対する入力チェックなどさまざまな機能を持ちます。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Thymeleaf

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Spring Boot

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

1回答

0グッド

0クリップ

8382閲覧

投稿2021/03/26 10:56

##環境

spring 2.4
java11
mac OS

##実現したいこと
index.htmlとshow.htmlで変数を生成し、その変数をfooter.htmlで使用。
その変数をaタグのhref値に組み込みページ毎にリンク先が変わるものを作りたいと考えていました。

しかし、th:hrefは機能せずリンクが生成されない状況となってしまいました。

##やってみたこと

footer.htmlのth:hrefでローカル変数を参照するとき、
リテラル置換で記述してみました。

しかし、値はnullになりました。

<footer th:fragment="footer1"> <div class="icon-wrapper d-flex"> <a href="#" th:href="@{| ${top} |}" class="d-block"><i class="fas fa-search"></i></a> <a href="#" th:href="@{| ${liked} |}" class="d-block"><i class="fas fa-thumbs-up"></i></a> <a href="#" th:href="@{| ${message} |}" class="d-block"><i class="fas fa-comment-dots"></i></a> <a href="#" th:href="@{| ${show} |}" class="d-block"><i class="far fa-user-circle"></i></a> </div> </footer>

##ソースコード
footer.html(フラグメント)

<!DOCTYPE html> <html lang="ja" xmlns:th="http://www.thymeleaf.org"> <footer th:fragment="footer1"> <div class="icon-wrapper d-flex"> <a href="#" th:href="@{${top}}" class="d-block"><i class="fas fa-search"></i></a> <a href="#" th:href="@{${liked}}" class="d-block"><i class="fas fa-thumbs-up"></i></a> <a href="#" th:href="@{${message}}" class="d-block"><i class="fas fa-comment-dots"></i></a> <a href="#" th:href="@{${show}}" class="d-block"><i class="far fa-user-circle"></i></a> </div> </footer> </html>

index.html(呼び出し元①)

<!DOCTYPE html> <html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"> <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"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link th:href="@{/css/style.css}" rel="stylesheet"> <script src="https://kit.fontawesome.com/b24292ab52.js" crossorigin="anonymous"></script> <title>Document</title> </head> <body> <main> <div class="container"> <div class="search-wrapper"> <h2>さがす</h2> <form method="get"> <input type="text"> <button><i class="fas fa-search"></i></button> </form> </div> <table> <tr th:each="user: ${users}"> <td class="red" th:text="${user.name}"></td> <td th:text="${user.profile}"></td> </tr> </table> </div> </main> <th:block th:with="top=${'/users'}, liked=${'/users/liked'}, message=${'/users/message'}, show=${'/uesrs/show'}"> </th:block> <div th:replace="/commons/footer::footer1"></div> </body> </html>

show.html(呼び出し元②)

<!DOCTYPE html> <html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" xmlns:sec="http://www.thymeleaf.org/extras/spring-security"> <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"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link th:href="@{/css/style.css}" rel="stylesheet"> <script src="https://kit.fontawesome.com/b24292ab52.js" crossorigin="anonymous"></script> <title>Document</title> </head> <body> <main> <div class="container"> <p sec:authentication="principal.user.name"></p> <p sec:authentication="principal.user.email"></p> <p sec:authentication="principal.user.image"></p> <p sec:authentication="principal.user.profile"></p> <p sec:authentication="principal.user.age"></p> <p sec:authentication="principal.user"></p> formです。 <form th:action="@{edit}" action="#" method="get"> <input type="hidden" name="key" th:value="${key}"> <button type="submit">edit</button> </form> </div> </main> <th:block th:with="top=${'/users'}, liked=${'/users/liked'}, message=${'/users/message'}, show=${'show'}"> <div th:replace="/commons/footer::footer1"></div> </body> </html>

アドバイスいただきたいです。
宜しくお願いします。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

m.ts10806

2021/03/26 22:58

結局変数はコントローラから渡されるので、コントローラも必要なのでは。 @{}の中で変数を使うのは幾らでも出来そうな気がしますが、どういう値を元にどういう情報を出力したいのかを具体的に記載してください。

回答1

0

ベストアンサー

footer1フラグメントの方はth:href="@{${top}}"のような書き方で問題ないと思います。
ちなみに、th:href="@{/hoge/fuga/{id}/view(id=${userId})}"のような記法も知っておくと便利ですよ({id}の部分が、変数userIdの値で置き換わる)。

本題ですが、
おそらく問題は、呼び出し元の方にあります(裏付けはとってないので違ってたらすみません)。

html

1<th:block th:with="top=${'/users'}, ..."> 2</th:block> 3<div th:replace="/commons/footer::footer1"></div>

th:withでセットした変数のスコープは「その要素の内部のみ」だと思います。なので、th:replaceth:blockの内側に入れてみてください。

html

1<th:block th:with="top=${'/users'}, ..."> 2 <div th:replace="/commons/footer::footer1"></div> 3</th:block>

あるいは、わざわざth:blockを使わなくても、外側の要素(この例の場合body)にth:withを付けても良いと思います。

html

1<body th:with="top=${'/users'}, ..."> 2 ... 3 ... 4 <div th:replace="/commons/footer::footer1"></div> 5</body>

ひょっとすると、↓これだけで良いかも?

html

1<div th:with="top=${'/users'}, ..." 2 th:replace="/commons/footer::footer1"></div>

あと蛇足ですが、top=${'/users'}は、top='/users'と書くのと変わらない気がします。

投稿2021/03/26 23:56

gpsoft

総合スコア1323

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

pepe0730

2021/03/27 03:21

うまくフラグメント部分にも値を共有することができました。 ありがとうございます。 th:withで生成した変数もスコープを意識しないといけないということですね。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Spring MVC

Spring MVCとは、Javaを用いてWebアプリケーションを開発できるフレームワーク。アーキテクチャにMVCを採用しており、画面遷移と入出力パラメータの受け渡しの基本的な機能の他、ユーザーの送信したパラメータに対する入力チェックなどさまざまな機能を持ちます。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Thymeleaf

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Spring Boot

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