2013年12月3日火曜日

[Spring Advent Calendar 2013 3日目] Thymesheetを使ってみる #spadc13

Spring Advent Calendar 2013 3日目です。
http://www.adventar.org/calendars/153

Thymesheetとは


Thymeleafのテンプレートからth属性を取り除いてCSSみたいに外だししようというものです。
https://github.com/connect-group/thymesheet


Thymeleafのおさらい


ThymesheetのREADMEに書いてあるので、おさらいがてら適当訳してみました。

Thymeleafは、Javaのライブラリーです。XHTML/HTML5を提供するWebはもちろんWebでない環境でもっともいい感じの、XML / XHTML / HTML5(他のフォーマットも拡張可能)のテンプレートエンジンです。
Spring MVCに組み込むためのモジュールが提供されており、Spring MVCのJSPテンプレートエンジンに対する、HTML5での完全な代替として使うことが出来ます。
Thymeleafのゴールは、エレガントでちゃんとした形式でのパワフルで自然なテンプレート、つまり静的なプロトタイプとして動作しブラウザで正しく表示できるテンプレートを作る方法を提供することです。

詳しくはこちらをご覧下さい。


Thymesheetの使い方


とっかかりレベルではREADMEみればOKって感じですが、一応サンプル作ってみました。
去年のAdvent Calendarで書いたものから修正しています。
https://bitbucket.org/twopack/spring-thymeleaf/branch/thymesheet
というわけで、さくさくと説明です。

Mavenの設定


pom.xmlに以下を追加します。
Thymesheetは、Thymeleafは2.1.0以降をサポートですのでdependencyのバージョンもチェック。
<dependency>
        <groupId>com.connect-group</groupId>
        <artifactId>thymesheet-spring3</artifactId>
        <version>2.1.0</version>
</dependency>

Spring Configration

コンテキストファイルでテンプレートエンジンの指定をThymesheetのものにします。
<beans:bean id="templateEngine" class="com.connect_group.thymesheet.spring3.SpringThymesheetTemplateEngine">
    <beans:property name="templateResolver" ref="templateResolver" />
</beans:bean>

テンプレート


今回のサンプルだとThymesheetを使う前はこんなです。
<P th:text="${serverTimeMessage}">  The time on the server is 2012/12/05 10:01:10 JST. </P>

これが、Thymesheetを使うとこんなになります。th属性はなくなりました。
<P>  The time on the server is 2012/12/05 10:01:10 JST. </P>

ただし、CSSのようにTSSファイル(Thymesheet Style Sheetかな?)をリンクします。
th属性で指定していた埋め込みの情報は、home.tssに追い出しています。
<link rel="thymesheet" href="resources/ts/home.tss"/>

TSSファイル


で、TSSファイルは以下です。とっかかり過ぎですねw
pタグは以下のth属性入れてね、ということです。
p { 
    th-text: "${serverTimeMessage}"
}

th:textがth-textになったぐらいです。わかりやすいですね。
CSSのようなイメージで以下のような表現が出来ます。READMEより拝借。
table > tbody > tr {
    th-each:"prod : ${allProducts}";
}


まとめ


Thymeleafのコンセプトを更に進めた感じのものだなと思います。
さらにHTMLとの分離が進んで、デザイナーさんとの分解点がはっきりすると思います。
ただ、実用するにはとっかかりだけじゃ不十分ですね、完全に。。。。
Standard Dialectとの対応など、いろいろ確認してみないとダメかな、という感じです。また来年w


明日はToshiaki Makiさんです!

2013年12月2日月曜日

テスト設計コンテスト’14 東京予選を見学してきた

11/30にテスト設計コンテスト’14 東京予選を見学してきました。
テスト設計コンテストは、NPO法人ASTERが行っているコンテストです。
翌日にシステムテスト自動化カンファレンス2013へ出るため東京へ前日入りの予定だったため、少し早めに行けば見れる!と早起きしました。(ついでではないw)

今年からテストベースがポットから自動販売機になりました。ポット時代もテスト設計コンテスト自体を生でみたことはなかったので、どんな感じなのかなと楽しみにしていきました。
とりあえず、会場についてAグループ、Bグループがあり、好きな方を見学できる、ということでBグループをみました。チーム名だけの情報だったので、理由は特にないですw

まだコンテスト中なので、ああだったこうだったは書けませんということになりますw(じゃあ、後で書くのかというと(ry)
Bグループは6チームでしたが、違いもあれば共通点もあり、アプローチもいろいろでした。
また、プレゼン資料だけでなく実際の成果物を見るのは初めてで、これも各チームいろいろで面白かったです。
Aグループは掲示と資料を眺めたぐらいでしたが、プレゼンも聞きたかったなあ、と思いました。

いろいろと見たり聞いたりしても、すぐに忘れる鳥頭で辛いですが、頭と心があったかい内に刷り込んでおかないとな、ということが多い半日でした。

あと地区予選の見学は、あと関西が残っていますね。お近くの方はぜひ!(まだ空いてるのかしら
http://aster.or.jp/business/contest/visitor.html