SlideShare a Scribd company logo
1 of 8
Thymeleaf でハマったこと
@eiryu
自己紹介
• Twitter   @eiryu
• アプリケーションエンジニア
• Java 、 JavaScript 、 PostgreSQL 、 Oper
a
• 最近作ったもの
– TwFavView
利用した Version
• 2.0.17
– thymeleaf
– thymeleaf-spring3
日本語表示の設定( Spring 連携
時)
<bean id="templateResolver"
class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
<property name="prefix" value="/WEB-INF/templates/" />
<property name="suffix" value=".html" />
<property name="templateMode" value="HTML5" />
<property name="cacheable" value="false" />
<property name="characterEncoding" value="utf-8" />
</bean>
<bean id="templateEngine"
class="org.thymeleaf.spring3.SpringTemplateEngine">
<property name="templateResolver" ref="templateResolver" />
</bean>
<bean class="org.thymeleaf.spring3.view.ThymeleafViewResolver">
<property name="templateEngine" ref="templateEngine" />
<property name="characterEncoding" value="utf-8" />
</bean>
単純なループ
<select name="foo">
<option th:each="i : ${#numbers.sequence(1, 10)}"
th:value="${i}" th:text="${i}+ ' 個 '">1 個 </option>
</select>
Form
• getter/setter 必須
• public フィールドにしてもうまくいって
たときがあった
– しかし、 Form の中に Form がある場合
は、 setter がないとエラーが出ていた
改行コードの br タグへの
replace
• そもそも <br /> でエラー(テンプレート
モードが LEGACYHTML5 の場合は OK 。
しかし、置換出来たとしてもエスケープ
されて表示)
• Spring と連携していると n が  と n
の 2 文字として渡されているため、置換
できない( SpringEL のせいっぽい)
• 結局、ロジック側でコレクションにして
渡して <br /> 挟みながら th:each で出力
<p th:text=“
${#strings.replace(it, 'n', ‘<br />')}">def</p>
ご静聴ありがとうございました
。

More Related Content

What's hot

Amazon Cognito使って認証したい?それならSpring Security使いましょう!
Amazon Cognito使って認証したい?それならSpring Security使いましょう!Amazon Cognito使って認証したい?それならSpring Security使いましょう!
Amazon Cognito使って認証したい?それならSpring Security使いましょう!
Ryosuke Uchitate
 
送信ドメイン認証最新動向と ENMA の導入・活用・展望
送信ドメイン認証最新動向と ENMA の導入・活用・展望送信ドメイン認証最新動向と ENMA の導入・活用・展望
送信ドメイン認証最新動向と ENMA の導入・活用・展望
Takahiko Suzuki
 
Limited Gradient Schemes in OpenFOAM
Limited Gradient Schemes in OpenFOAMLimited Gradient Schemes in OpenFOAM
Limited Gradient Schemes in OpenFOAM
Fumiya Nozaki
 

What's hot (20)

エラー・バジェットによるリスク管理 Managing risk with error budgets
エラー・バジェットによるリスク管理 Managing risk with error budgetsエラー・バジェットによるリスク管理 Managing risk with error budgets
エラー・バジェットによるリスク管理 Managing risk with error budgets
 
Lineamientos Globales de Q.A
Lineamientos Globales de Q.ALineamientos Globales de Q.A
Lineamientos Globales de Q.A
 
PHP-FPM の子プロセス制御方法と設定をおさらいしよう
PHP-FPM の子プロセス制御方法と設定をおさらいしようPHP-FPM の子プロセス制御方法と設定をおさらいしよう
PHP-FPM の子プロセス制御方法と設定をおさらいしよう
 
Diplomová práca - Zmluva o budúcej zmluve v súkromnom práve
Diplomová práca - Zmluva o budúcej zmluve v súkromnom práveDiplomová práca - Zmluva o budúcej zmluve v súkromnom práve
Diplomová práca - Zmluva o budúcej zmluve v súkromnom práve
 
Amazon Cognito使って認証したい?それならSpring Security使いましょう!
Amazon Cognito使って認証したい?それならSpring Security使いましょう!Amazon Cognito使って認証したい?それならSpring Security使いましょう!
Amazon Cognito使って認証したい?それならSpring Security使いましょう!
 
Performance Test WCF/WPF app - Selecting right Tool
Performance Test WCF/WPF app - Selecting right ToolPerformance Test WCF/WPF app - Selecting right Tool
Performance Test WCF/WPF app - Selecting right Tool
 
Project Documentation Format.docx
Project Documentation Format.docxProject Documentation Format.docx
Project Documentation Format.docx
 
TypeScript & 関数型講座 第2回 TypeScript という言語
TypeScript & 関数型講座 第2回 TypeScript という言語TypeScript & 関数型講座 第2回 TypeScript という言語
TypeScript & 関数型講座 第2回 TypeScript という言語
 
これで怖くない!?コードリーディングで学ぶSpring Security #中央線Meetup
これで怖くない!?コードリーディングで学ぶSpring Security #中央線Meetupこれで怖くない!?コードリーディングで学ぶSpring Security #中央線Meetup
これで怖くない!?コードリーディングで学ぶSpring Security #中央線Meetup
 
最適化計算/パラメータスタディーとFreeCADの連携についての調査
最適化計算/パラメータスタディーとFreeCADの連携についての調査最適化計算/パラメータスタディーとFreeCADの連携についての調査
最適化計算/パラメータスタディーとFreeCADの連携についての調査
 
Esquenta TDC - Como DDD e principalmente Domain Model contribuem na construçã...
Esquenta TDC - Como DDD e principalmente Domain Model contribuem na construçã...Esquenta TDC - Como DDD e principalmente Domain Model contribuem na construçã...
Esquenta TDC - Como DDD e principalmente Domain Model contribuem na construçã...
 
A practical intro to BabylonJS
A practical intro to BabylonJSA practical intro to BabylonJS
A practical intro to BabylonJS
 
Turbulence Models in OpenFOAM
Turbulence Models in OpenFOAMTurbulence Models in OpenFOAM
Turbulence Models in OpenFOAM
 
所属しているグループをすべて取得する
所属しているグループをすべて取得する所属しているグループをすべて取得する
所属しているグループをすべて取得する
 
MongoDB Oplog入門
MongoDB Oplog入門MongoDB Oplog入門
MongoDB Oplog入門
 
送信ドメイン認証最新動向と ENMA の導入・活用・展望
送信ドメイン認証最新動向と ENMA の導入・活用・展望送信ドメイン認証最新動向と ENMA の導入・活用・展望
送信ドメイン認証最新動向と ENMA の導入・活用・展望
 
Limited Gradient Schemes in OpenFOAM
Limited Gradient Schemes in OpenFOAMLimited Gradient Schemes in OpenFOAM
Limited Gradient Schemes in OpenFOAM
 
Hyper-VでLinuxを稼働させることの利点と制限
Hyper-VでLinuxを稼働させることの利点と制限Hyper-VでLinuxを稼働させることの利点と制限
Hyper-VでLinuxを稼働させることの利点と制限
 
[DO07] マイクロサービスに必要な技術要素はすべて Spring Cloud にある
[DO07] マイクロサービスに必要な技術要素はすべて Spring Cloud にある[DO07] マイクロサービスに必要な技術要素はすべて Spring Cloud にある
[DO07] マイクロサービスに必要な技術要素はすべて Spring Cloud にある
 
Of tutorials v1806
Of tutorials v1806Of tutorials v1806
Of tutorials v1806
 

Viewers also liked

テンプレートエンジンの話 #jjug
テンプレートエンジンの話 #jjugテンプレートエンジンの話 #jjug
テンプレートエンジンの話 #jjug
Yusuke Yamamoto
 
Webサービスの国際化にあたり LINE Creators Market 開発がどのように行われたか
Webサービスの国際化にあたり LINE Creators Market 開発がどのように行われたかWebサービスの国際化にあたり LINE Creators Market 開発がどのように行われたか
Webサービスの国際化にあたり LINE Creators Market 開発がどのように行われたか
LINE Corporation
 
Akka ActorとAMQPでLINEのメッセージングパイプラインをリプレースした話
Akka ActorとAMQPでLINEのメッセージングパイプラインをリプレースした話Akka ActorとAMQPでLINEのメッセージングパイプラインをリプレースした話
Akka ActorとAMQPでLINEのメッセージングパイプラインをリプレースした話
LINE Corporation
 
HBaseとRedisを使った100億超/日メッセージを処理するLINEのストレージ
HBaseとRedisを使った100億超/日メッセージを処理するLINEのストレージHBaseとRedisを使った100億超/日メッセージを処理するLINEのストレージ
HBaseとRedisを使った100億超/日メッセージを処理するLINEのストレージ
LINE Corporation
 
Swift による開発チームの変化
Swift による開発チームの変化Swift による開発チームの変化
Swift による開発チームの変化
LINE Corporation
 
ベイズ推定とDeep Learningを使用したレコメンドエンジン開発
ベイズ推定とDeep Learningを使用したレコメンドエンジン開発ベイズ推定とDeep Learningを使用したレコメンドエンジン開発
ベイズ推定とDeep Learningを使用したレコメンドエンジン開発
LINE Corporation
 
ストリートアカデミー_ローンチ前企画書
ストリートアカデミー_ローンチ前企画書ストリートアカデミー_ローンチ前企画書
ストリートアカデミー_ローンチ前企画書
Find Job Startup
 

Viewers also liked (17)

Thymeleafのすすめ
ThymeleafのすすめThymeleafのすすめ
Thymeleafのすすめ
 
Spring I/O 2012: Natural Templating in Spring MVC with Thymeleaf
Spring I/O 2012: Natural Templating in Spring MVC with ThymeleafSpring I/O 2012: Natural Templating in Spring MVC with Thymeleaf
Spring I/O 2012: Natural Templating in Spring MVC with Thymeleaf
 
テンプレート・エンジンVelocity
テンプレート・エンジンVelocityテンプレート・エンジンVelocity
テンプレート・エンジンVelocity
 
Mustache入門
Mustache入門Mustache入門
Mustache入門
 
テンプレートエンジンの話 #jjug
テンプレートエンジンの話 #jjugテンプレートエンジンの話 #jjug
テンプレートエンジンの話 #jjug
 
Introducing thymeleaf
Introducing thymeleafIntroducing thymeleaf
Introducing thymeleaf
 
Webサービスの国際化にあたり LINE Creators Market 開発がどのように行われたか
Webサービスの国際化にあたり LINE Creators Market 開発がどのように行われたかWebサービスの国際化にあたり LINE Creators Market 開発がどのように行われたか
Webサービスの国際化にあたり LINE Creators Market 開発がどのように行われたか
 
LINE for Apple Watch
LINE for Apple WatchLINE for Apple Watch
LINE for Apple Watch
 
Spring bootでweb セキュリティ(ログイン認証)編
Spring bootでweb セキュリティ(ログイン認証)編Spring bootでweb セキュリティ(ログイン認証)編
Spring bootでweb セキュリティ(ログイン認証)編
 
Akka ActorとAMQPでLINEのメッセージングパイプラインをリプレースした話
Akka ActorとAMQPでLINEのメッセージングパイプラインをリプレースした話Akka ActorとAMQPでLINEのメッセージングパイプラインをリプレースした話
Akka ActorとAMQPでLINEのメッセージングパイプラインをリプレースした話
 
LINE Platform Development Chronicle
LINE Platform Development ChronicleLINE Platform Development Chronicle
LINE Platform Development Chronicle
 
HBaseとRedisを使った100億超/日メッセージを処理するLINEのストレージ
HBaseとRedisを使った100億超/日メッセージを処理するLINEのストレージHBaseとRedisを使った100億超/日メッセージを処理するLINEのストレージ
HBaseとRedisを使った100億超/日メッセージを処理するLINEのストレージ
 
Swift による開発チームの変化
Swift による開発チームの変化Swift による開発チームの変化
Swift による開発チームの変化
 
AWSからのメール送信
AWSからのメール送信AWSからのメール送信
AWSからのメール送信
 
Java EEハンズオン資料 JJUG CCC 2015 Fall
Java EEハンズオン資料 JJUG CCC 2015 FallJava EEハンズオン資料 JJUG CCC 2015 Fall
Java EEハンズオン資料 JJUG CCC 2015 Fall
 
ベイズ推定とDeep Learningを使用したレコメンドエンジン開発
ベイズ推定とDeep Learningを使用したレコメンドエンジン開発ベイズ推定とDeep Learningを使用したレコメンドエンジン開発
ベイズ推定とDeep Learningを使用したレコメンドエンジン開発
 
ストリートアカデミー_ローンチ前企画書
ストリートアカデミー_ローンチ前企画書ストリートアカデミー_ローンチ前企画書
ストリートアカデミー_ローンチ前企画書
 

Similar to Thymeleafでハマったこと

Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframeworkSpring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Toshiaki Maki
 
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3editionRails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3edition
Satomi Tsujita
 
Mojoliciousをウェブ制作現場で使ってみてる
Mojoliciousをウェブ制作現場で使ってみてるMojoliciousをウェブ制作現場で使ってみてる
Mojoliciousをウェブ制作現場で使ってみてる
jamadam
 

Similar to Thymeleafでハマったこと (14)

thymeleafさいしょの一歩
thymeleafさいしょの一歩thymeleafさいしょの一歩
thymeleafさいしょの一歩
 
イマドキの現場で使えるJavaライブラリ事情
イマドキの現場で使えるJavaライブラリ事情イマドキの現場で使えるJavaライブラリ事情
イマドキの現場で使えるJavaライブラリ事情
 
Haikara
HaikaraHaikara
Haikara
 
分散ストリーム処理フレームワーク Apache S4
分散ストリーム処理フレームワーク Apache S4分散ストリーム処理フレームワーク Apache S4
分散ストリーム処理フレームワーク Apache S4
 
3時間濃縮CakePHP2.1 in PHPカンファレンス北海道2012
3時間濃縮CakePHP2.1 in PHPカンファレンス北海道20123時間濃縮CakePHP2.1 in PHPカンファレンス北海道2012
3時間濃縮CakePHP2.1 in PHPカンファレンス北海道2012
 
Java ee6 with scala
Java ee6 with scalaJava ee6 with scala
Java ee6 with scala
 
Play framework 2.0のちょっとした紹介
Play framework 2.0のちょっとした紹介Play framework 2.0のちょっとした紹介
Play framework 2.0のちょっとした紹介
 
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみようAlfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
 
3 tips of Laravel
3 tips of Laravel3 tips of Laravel
3 tips of Laravel
 
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframeworkSpring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
 
最適化計算エンジンを備えた Ruby on Rails アプリケーションのアーキテクチャーと進化
最適化計算エンジンを備えた Ruby on Rails アプリケーションのアーキテクチャーと進化最適化計算エンジンを備えた Ruby on Rails アプリケーションのアーキテクチャーと進化
最適化計算エンジンを備えた Ruby on Rails アプリケーションのアーキテクチャーと進化
 
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3editionRails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3edition
 
Mojoliciousをウェブ制作現場で使ってみてる
Mojoliciousをウェブ制作現場で使ってみてるMojoliciousをウェブ制作現場で使ってみてる
Mojoliciousをウェブ制作現場で使ってみてる
 
第4回Magento Cafe Plus〜Rewriteと独自テーブル
第4回Magento Cafe Plus〜Rewriteと独自テーブル第4回Magento Cafe Plus〜Rewriteと独自テーブル
第4回Magento Cafe Plus〜Rewriteと独自テーブル
 

More from eiryu (6)

Javaでのバリデーション 〜Bean Validation篇〜
Javaでのバリデーション 〜Bean Validation篇〜Javaでのバリデーション 〜Bean Validation篇〜
Javaでのバリデーション 〜Bean Validation篇〜
 
Ninja framework使ってみた
Ninja framework使ってみたNinja framework使ってみた
Ninja framework使ってみた
 
JMeter小話
JMeter小話JMeter小話
JMeter小話
 
最近のJavaでの開発について
最近のJavaでの開発について最近のJavaでの開発について
最近のJavaでの開発について
 
TwFavView
TwFavViewTwFavView
TwFavView
 
Spring小話
Spring小話Spring小話
Spring小話
 

Recently uploaded

Recently uploaded (11)

新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 

Thymeleafでハマったこと

  • 2. 自己紹介 • Twitter   @eiryu • アプリケーションエンジニア • Java 、 JavaScript 、 PostgreSQL 、 Oper a • 最近作ったもの – TwFavView
  • 3. 利用した Version • 2.0.17 – thymeleaf – thymeleaf-spring3
  • 4. 日本語表示の設定( Spring 連携 時) <bean id="templateResolver" class="org.thymeleaf.templateresolver.ServletContextTemplateResolver"> <property name="prefix" value="/WEB-INF/templates/" /> <property name="suffix" value=".html" /> <property name="templateMode" value="HTML5" /> <property name="cacheable" value="false" /> <property name="characterEncoding" value="utf-8" /> </bean> <bean id="templateEngine" class="org.thymeleaf.spring3.SpringTemplateEngine"> <property name="templateResolver" ref="templateResolver" /> </bean> <bean class="org.thymeleaf.spring3.view.ThymeleafViewResolver"> <property name="templateEngine" ref="templateEngine" /> <property name="characterEncoding" value="utf-8" /> </bean>
  • 5. 単純なループ <select name="foo"> <option th:each="i : ${#numbers.sequence(1, 10)}" th:value="${i}" th:text="${i}+ ' 個 '">1 個 </option> </select>
  • 6. Form • getter/setter 必須 • public フィールドにしてもうまくいって たときがあった – しかし、 Form の中に Form がある場合 は、 setter がないとエラーが出ていた
  • 7. 改行コードの br タグへの replace • そもそも <br /> でエラー(テンプレート モードが LEGACYHTML5 の場合は OK 。 しかし、置換出来たとしてもエスケープ されて表示) • Spring と連携していると n が と n の 2 文字として渡されているため、置換 できない( SpringEL のせいっぽい) • 結局、ロジック側でコレクションにして 渡して <br /> 挟みながら th:each で出力 <p th:text=“ ${#strings.replace(it, 'n', ‘<br />')}">def</p>