201311 webデザイナとエンジニアのチームワークを加速させるテンプレートエンジンmixer2 devlove現場甲子園
- 2. 自己紹介 • わたなべ • SI屋の技術屋さん • @nabedge • http://nabedge.blogspot.jp 2
- 4. ごめんなさい • コッテコテにJavaの話です – PHPerな方、Rubyistな方、ごめんなさい。 • コッテコテにサーバサイドの話です – 「いまどきのビューはクライアントサイドで Backbone.jsでしょ プギャーm9(^Д^)」 とか．．． • Webサービスのビューのテンプレートを 100%pureなXHTMLとCSSで書きたい！ ってところは共感してもらえるかも？ 4
- 6. テンプレートエンジン JSP：一番身近なテンプレートエンジン こんにちは <% if (name == null) { %> ゲストさん <% } else { %> <%= name %>さん <% } %> 通常のJava言語、EL式、カスタムタグで書く 6
- 7. テンプレートエンジン Velocity：老舗 こんにちは #if (name == null) { ゲストさん #else ${name}さん #end VTL = Velocity Template Languageで書く 7
- 9. デザイナーとエンジニアの共通言語は？ 1. Webデザイナは*.jspも書けるべき？ 2. Webデザイナは*.vmも書けるべき？ 3. Webデザイナは*.ftlも書けるべき？ 4. Webデザイナは*.erbも書けるべき？ 5. Webデザイナは*.phpも書けるべき？ 6. Webデザイナは*.mdも書けるべき？ すべて、エンジニアの都合をデザイナに 押しつけてるだけじゃん！ 9
- 10. ビューにロジックが埋まってるのもNG これをWebデザイナがメンテする？できる？ こんにちは <% if (name == null) { %> ゲストさん <% } else { %> <%= name %>さん <% } %> 10
- 12. Mixer2 Mixer2のテンプレートは純粋なXHTMLとCSS こんにちは<span id=“name”>ゲスト</span>さん 値の埋め込みやロジックは普通のJava Span span = html.getById(“name”, Span.class); span.unsetContent(); span.getContent.add(“ヤマダ”); // これで <span id=“name”>ヤマダ</span>さん // が出力される 12
- 14. デモ 14
- 16. Mixer2の動作原理 1. Mixer2はXHTMLパーサーである。 2. Mixer2はXHTMLジェネレーターである。 3. 要するに、Mixer2はObject/XHTMLマッパーである。 XHTML <html> <head> … </head> <body> … </body> </html> Javaオブジェクト loadHtmlTemplate Html Mixer2 Head Body saveToString 16
- 18. タグのスニペットだけを作ることも可能 1. 特定のタグ（ここではdiv）だけを文字列化 Div div = TagCreator.div(); div.getContent().add(“Hello World!”); String str = m2Engine.saveToString(div); 2. ほかのテンプレート形式に混ぜて出力可能 <%-- JSP --%> <html> <body> <%=str %> </body> </html> <html> <body> <div>Hello World !</div> </body> </html> 18
- 20. Mixer2の三つの側面 • JSPやVelocityの代替としてのMixer2 – 例：さっきのデモ • XHTMLパーサーとしてのMixer2 – 例：さっきのデモ – 例：モール型ECサイトやブログサービスのように 自由にデザインしたhtmlをそのまま使いたい場合 • XHTMLタグスニペット生成器としてのMixer2 – 例：JSPのtaglibに近い使い方 • Taglibを自作するよりは簡単です！ 20