Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5勉強会ライトニングトーク201309

Yu Watanabe
September 09, 2013

 HTML5勉強会ライトニングトーク201309

Yu Watanabe

September 09, 2013
Tweet

More Decks by Yu Watanabe

Other Decks in Technology

Transcript

  1. テンプレートエンジンは
    Mixer2に
    決定しました
    Web✕Java - HTML5で
    進化したWeb標準を、
    Java技術でどう扱うの
    か? -
    #html5biz 業務システムエンジニアのた
    めのHTML5勉強会#04
    LT by @nabedge http://mixer2.org/

    View full-size slide

  2. 自己紹介
    • わたなべ
    • SI屋の技術屋さん
    • @nabedge
    • http://nabedge.blogspot.jp
    2

    View full-size slide

  3. Mixer2
    3
    mixer2.org
    JavaでWebアプリを作るための
    テンプレートエンジン

    View full-size slide

  4. そもそもテンプレートエンジンと言えば?
    4

    View full-size slide

  5. テンプレートエンジン
    5
    JSP:一番身近なテンプレートエンジン
    こんにちは
    <% if (name == null) { %>
    ゲストさん
    <% } else { %>
    <%= name %>さん
    <% } %>
    通常のJava言語、EL式、カスタムタグで書く

    View full-size slide

  6. テンプレートエンジン
    6
    Velocity:老舗
    こんにちは
    #if (name == null) {
    ゲストさん
    #else
    ${name}さん
    #end
    VTL = Velocity Template
    Languageで書く

    View full-size slide

  7. 要するに?
    たいていのテンプレートエンジンは、
    何らかの
    テンプレート記述言語(っぽいもの)
    を覚えなければならない
    7

    View full-size slide

  8. Mixer2
    8
    こんにちは
    ゲストさん
    Span span = html.getById(“name”, Span.class);
    span.getContent.clear();
    span.getContent.add(“ヤマダ”);
    // これで ヤマダさん
    // が出力
    Mixer2のテンプレートは純粋なXHTMLとCSS
    値の埋め込みやロジックは普通のJava

    View full-size slide

  9. 「タグ」とJava
    9

    View full-size slide

  10. Mixer2の特徴(の一つ)
    Mixer2では、htmlタグを
    Javaオブジェクトとして扱う
    ので、実質なんでもできる。
    ex. さきほどデモした
    ダイナミックCSS Sprite
    10
    HTML5のタグや
    data-*属性なども
    もちろんOK!

    View full-size slide

  11. 実際どうやって動いてるの?
    さっきのデモのアーキテクチャは?
    ...LTでは説明しきれません。
    11

    View full-size slide

  12. もっと詳しくお話しする場があります
    Javaに関することなら何でもありのゆるふわイベント
    第3回 #渋谷Java
    - Webな人だってエンプラな人だって
    モヒカンだって -
    2013/09/28(Sat) 14:00 to 17:00
    http://atnd.org/events/42501
    12

    View full-size slide

  13. ご静聴ありがとうございました
    よろしくね!
    mixer2.org
    13

    View full-size slide