201311...
DESCRIPTION
TRANSCRIPT
Webデザイナーと Webエンジニアの チームワークを 加速させる テンプレートエンジン Mixer2
Devlove現場甲子園 2013-11-09 by @nabedge http://mixer2.org/
Mixer2
自己紹介
• わたなべ • SI屋の技術屋さん • @nabedge • http://nabedge.blogspot.jp
2
Mixer2
3
http://mixer2.org
JavaでWebアプリを作るための テンプレートエンジン
ごめんなさい
• コッテコテにJavaの話です – PHPerな方、Rubyistな方、ごめんなさい。
• コッテコテにサーバサイドの話です – 「いまどきのビューはクライアントサイドで
Backbone.jsでしょ プギャーm9(^Д^)」 とか．．．
• Webサービスのビューのテンプレートを100%pureなXHTMLとCSSで書きたい！ ってところは共感してもらえるかも？
4
ところで、Javaの世界で テンプレートエンジンと言えば？
5
テンプレートエンジン
6
JSP：一番身近なテンプレートエンジン
こんにちは <% if (name == null) { %> ゲストさん <% } else { %> <%= name %>さん <% } %>
通常のJava言語、EL式、カスタムタグで書く
テンプレートエンジン
7
Velocity：老舗
こんにちは #if (name == null) { ゲストさん #else ${name}さん #end
VTL = Velocity Template Languageで書く
要するに？
たいていのテンプレートエンジンは、何らかの テンプレート記述言語（っぽいもの） の文法、記法を覚えなければならない。
8
デザイナーとエンジニアの共通言語は？
1. Webデザイナは*.jspも書けるべき？ 2. Webデザイナは*.vmも書けるべき？ 3. Webデザイナは*.ftlも書けるべき？ 4. Webデザイナは*.erbも書けるべき？ 5. Webデザイナは*.phpも書けるべき？ 6. Webデザイナは*.mdも書けるべき？ すべて、エンジニアの都合をデザイナに 押しつけてるだけじゃん！
9
ビューにロジックが埋まってるのもNG
10
これをWebデザイナがメンテする？できる？
こんにちは <% if (name == null) { %> ゲストさん <% } else { %> <%= name %>さん <% } %>
Webエンジニアと Webデザイナの 共通言語は htmlとcssだけだと思う
11
Mixer2
12
こんにちは<span id=“name”>ゲスト</span>さん
Span span = html.getById(“name”, Span.class); span.unsetContent(); span.getContent.add(“ヤマダ”); // これで <span id=“name”>ヤマダ</span>さん // が出力される
Mixer2のテンプレートは純粋なXHTMLとCSS
値の埋め込みやロジックは普通のJava
13
大のメリット
htmlモックアップを JSPに書き変えずに そのまま使える
14
デモ
15
これでデザイナとプログラマが仲良く仕事できる！
プログラマとデザイナの 取り決め事項 1. 商品情報のdivタグは
id=“itemBox”にしよう。 2. 商品名はspanタグで
id=“itemName” 3. …..その他の情報も同様にclass属
性やid属性を決めておけばよい。
Mixer2の動作原理
16
Mixer2
<html> <head> … </head> <body> … </body> </html>
Html
Head Body
loadHtmlTemplate
saveToString
XHTML Javaオブジェクト
1. Mixer2はXHTMLパーサーである。 2. Mixer2はXHTMLジェネレーターである。 3. 要するに、Mixer2はObject/XHTMLマッパーである。
Mixer2の特徴（の一つ）
Mixer2では、htmlタグを Javaオブジェクトとして扱う ので、実質なんでもできる。
17
HTML5のタグやdata-*属性なども もちろんOK！
タグのスニペットだけを作ることも可能
18
Div div = TagCreator.div(); div.getContent().add(“Hello World!”); String str = m2Engine.saveToString(div);
1. 特定のタグ（ここではdiv）だけを文字列化
2. ほかのテンプレート形式に混ぜて出力可能
<%-- JSP --%> <html> <body> <%=str %> </body> </html>
<html> <body> <div>Hello World !</div> </body> </html>
JSPでは難しいビューのテストも楽々！
19
タグ型 オブジェクト
加工前
タグ型 オブジェクト
加工後 処理
span.unsetContent(); span.getContent().add(“Hello”);
assertThat( span.getContent().get(0).toString() ,is(“Hello”));
本体コード
テスト
Mixer2の三つの側面
• JSPやVelocityの代替としてのMixer2 – 例：さっきのデモ
• XHTMLパーサーとしてのMixer2 – 例：さっきのデモ – 例：モール型ECサイトやブログサービスのように
自由にデザインしたhtmlをそのまま使いたい場合
• XHTMLタグスニペット生成器としてのMixer2 – 例：JSPのtaglibに近い使い方
• Taglibを自作するよりは簡単です！ 20
ご静聴ありがとうございました
よろしくね！ mixer2.org
21