htmlデザインを崩さないテンプレートエンジンの作り方

copyright(c) 2010 kuwata-lab.com all rights reserved.

HTMLデザインを崩さないテンプレートエンジンの作り方

makoto kuwatahttp://www.kuwata-lab.com/

RubyKaigi 2010

English ver: http://slidesha.re/a3s2ZZ

1

http://www.kuwata-lab.com

http://www.kuwata-lab.com

http://slidesha.re/a3s2ZZ

http://slidesha.re/a3s2ZZ


はじめに✤ テンプレートエンジン利用者に、正しい知識を理解してもらう

✤ テンプレートエンジン設計者に、あるべき姿を考えてもらう

✤ 間違った説明が蔓延しており是正したい✤ eRubyは決して理想解ではないことを知ってほしい

✤ テンプレートエンジンの利用者と設計者

目的

動機

対象者

2


お詫び

✤ 今日話したかったこと✤ テンプレートのデザインを崩さない方法について✤ テンプレートエンジンの高速化について✤ 既存のテンプレートエンジンが抱える問題点について✤ デザインを崩さず、高速で、どの言語でも比較的簡単に実装できるテンプレートエンジンの作り方について

✤ 30分しかないので最初の項目だけ✤ 野心的すぎました、ごめんなさい

3


参考文献

✤ Rubyist Magazine - テンプレートシステム入門✤ http://jp.rubyist.net/magazine/?0024-TemplateSystem✤ http://jp.rubyist.net/magazine/?0024-TemplateSystem2

4

http://jp.rubyist.net/magazine/?0024-TemplateSystem

http://jp.rubyist.net/magazine/?0024-TemplateSystem

http://jp.rubyist.net/magazine/?0024-TemplateSystem2

http://jp.rubyist.net/magazine/?0024-TemplateSystem2


アジェンダ

✤ 基礎知識編✤ ビジネス層とプレゼンテーション層✤ 現状の問題点とその原因✤ プレゼンテーションロジック

✤ Kwartz編✤ はじめてのKwartz入門✤ プレゼンテーションパターン

5


基礎知識編：ビジネス層とプレゼンテーション層

6


ビジネス層とプレゼンテーション層

✤ ビジネス層✤ 役割：「何を(what)表示するか？」を決定✤ 担当：メインプログラム

✤ プレゼンテーション層✤ 役割：「どのように(how)表示するか？」を決定✤ 担当：テンプレートファイルおよびエンジン

7


データとロジック

✤ ビジネス層とプレゼンテーション層の両方に、データとロジックが存在

ビジネス層(メインプログラム)

プレゼンテーション層(テンプレートエンジン)

データビジネスデータプレゼンテーションデータ

ロジックビジネスロジックプレゼンテーションロジック

テンプレートエンジンはここを分離

8


具体例

✤ 営業部員の売上成績から

✤ 上位 20 名を選出し、

✤ 奇数行と偶数行で背景色を変えて

✤ <table> タグで表示する

ビジネスデータ

ビジネスロジック

プレゼンテーションロジック

プレゼンテーションデータ

9


よくある間違い(1)

✤ テンプレートエンジンは、ロジックとプレゼンテーションを分離する

✤ テンプレートエンジンは、ビジネス層とプレゼンテーション層を分離する✤ プレゼンテーション層にもロジックがある

（誤）

（正）

自分も昔は間違ってました…

10



✤ プレゼンテーション層にはロジックを含めるべきではない

✤ プレゼンテーション層はプレゼンテーションロジックを含む✤ 「HTMLテンプレートにプレゼンテーションロジックを含めない」ことと、「ビジネス層とプレゼンテーション層を分離する」ことは、別の話

（誤）

（正）

11


ここまでのまとめ

✤ ビジネス層✤ 何を(What)表示するか？✤ メインプログラムが担当

✤ プレゼンテーション層✤ どう(How)表示するか？✤ テンプレートファイルが担当

✤ どちらにもデータとロジックが存在

12


基礎知識編：現状の問題点とその原因

13


デザイナ泣かせの現状

<table><% @arr.each { %> ....<% } %></table>

<table><forEach items=""> ....</forEach></table>

<table><?php foreach() { ?> ....<?php } ?></table>

ProjectA: Rails

ProjectB: JSP

ProjectC: PHP

プログラマの都合をデザイナに押し付けているのが現状

14


共同作業での問題

<table><% @arr.each { %> ....<% } %></table>

テンプレートファイル

デザイナプログラマ

HTMLを編集プレゼンテーションロジックを編集

衝突！

15


問題の原因

<table><% i = 0 %><% @arr.eachx do ¦x¦ %><% i += i %><% c = i.odd ? %><% 'odd':'even' %> <tr class="<%=c%>"> <td><%= x %></td> </tr><% end %></table>

テンプレートファイル

pure HTML テンプレートが望ましい

✤ テンプレート中にプレゼンテーションロジックを埋め込んでいることこそが、諸悪の根源

16


pure HTML テンプレートの利点✤ HTMLデザインが崩れない（表示確認できる）✤ テンプレート言語を学習しなくてよい✤ HTML Validator でチェックできる✤ 好きなエディタ (Dreamweaverなど) が使える

✤ 同時編集による衝突を避けやすい✤ 空白除去による圧縮（転送量削減）がしやすい✤ ケータイ用などに自動変換しやすい

forデザイナ

forプログラマ

17


Matzも悩んだ問題

✤ じゃあプレゼンテーションロジックはどこに書けばいいの？

（要約）ViewそのものにLogicが必要な場合、HTMLテンプレートでは記述できないし、どこに所属すべきだろうか？

Matz日記 (2004-08-24)http://www.rubyist.net/~matz/20040824.html#p01

18

http://www.rubyist.net/~matz/20040824.html#

http://www.rubyist.net/~matz/20040824.html#



✤ テンプレート中にプレゼンテーションロジックを埋め込むと、問題が多い

✤ pure HTMLテンプレートが望ましい✤ プレゼンテーションロジックはどこに？

19


基礎知識編：プレゼンテーションロジック

20


プレゼンテーションロジックをどこに？

プレゼンテーションロジック＋プレゼンテーションデータビジネスロジック＆データ

プレゼンテーションデータプレゼンテーションロジック＋ビジネスロジック＆データ

プレゼンテーションロジックビジネスロジック＆データ


A. テンプレートファイル中 (eRuby, JSP, Kid)

B. メインプログラム中 (Amrita2, XMLC, HTML::Template)

C. 独立した別ファイル中 (Kwartz, Tapestry, Mayaa)

テンプレートメインプログラム21


A. テンプレートファイル中に記述 (1)

<table><% odd = false %><% for item in @list %><% odd = ! odd<% cls = odd ? 'odd' : 'even' %> <tr class="<%= cls %>"> <td><%=h item %></td> </tr><% end %></table>

例: eRuby ファイル (Ruby)

•HTMLの中にHTMLでないものが混在→pure HTML でない

22



<table> <c:forEach var="item" items="${list}" varStatus="loop"> <c:set var="klass" value="${loop.count%2==0?'odd':'even'}" /> <tr class="${klass}"> <td><c:out value="${item}" /></td> </tr> </c:forEach></table>

例: JSP ファイル (Java)

•カスタムタグを使おうが、ロジックをテンプレートファイル中に埋め込んでいるという点ではeRubyと同じ

23



<table> <tr py:for="i, item in enumerate(items)" class="${i % 2 and 'even' or 'odd'}"> <td py:content="item">dummy</td> </tr></table>

例: Kid テンプレートファイル (Python)

•文書構造と属性を使うことで、HTMLデザインを崩さないよう配慮•ロジックをテンプレートファイル中に埋め込んでいるという点では同じ

24


A. テンプレートファイル中に記述 (4)✤ プレゼンテーション層（＝テンプレート）がビジネス層から分離されている

✤ 使い方がわかりやすく、実装も簡単

✤ pure HTML でない（ことが多い）✤ 同時編集による衝突が発生しやすい✤ デザイナがプレゼンテーションロジックを誤って変更する可能性がある

利点

欠点

25


B. メインプログラム中に記述 (1)

<table> <tr id="list" class="odd"> <td id="item">dummy</td> </tr></table>

例: Amrita2 テンプレートファイル (Ruby)

•書き換えたい場所に「目印」を書くだけ（Amrita2ならid属性をつけるだけ）•テンプレートが pure HTML （ロジックを埋め込まないため）

27


B. メインプログラム中に記述 (2)

## 表示したいビジネスデータ

list = [ 'A', 'B', 'C' ]## プレゼンテーションロジックlist2 = []; odd = falsefor x in list cls = (odd = !odd) ? 'odd' : 'even' item2 = a(:class=>cls) { {:item=>x} } list2 << item2endcontext = { :list=>list2 }## テンプレートを読み込んで表示

tmpl = Amrita2::TemplateFile.new('ex1.html')tmpl.expand(html='', context)print html

例: Amrita2 メインプログラム (Ruby)

•ビジネスデータをプレゼンテーションロジックで加工する必要がある

28


B. メインプログラム中に記述 (3)✤ テンプレートには目印を埋め込むだけ✤ pure HTML テンプレートを実現 (しやすい）✤ 同じファイルを編集しないので衝突しない✤ デザイナによるロジックの誤変更がない

✤ ビジネス層とプレゼンテーション層が分離できてない（*注）

✤ 使い方にクセがある（ロジックをデータで表現する必要があるため）

利点

欠点

(*注) 工夫次第で回避可能（該当箇所を別クラスにする等）29


C. 独立した別ファイル中に記述 (1)

<table> <tr id="mark:list" class="odd"> <td id="mark:item">dummy</td> </tr></table>

例: Kwartz プレゼンテーションデータファイル (Ruby)

•書き換えたい場所に「目印」を書くだけ（Kwartzならid属性をつけるだけ）

31


C. 独立した別ファイル中に記述 (2)

#item { ## id="mark:item" は value: x; ## x の値を表示する}#list { ## id="mark:list" は logic: { ## 要素全体をループする for x in @list _elem end }}

例: Kwartz プレゼンテーションロジックファイル (Ruby)

•あたかもCSSのようにプレゼンテーションロジックを記述する•プレゼンテーションロジックがメインプログラム中に現れない！

32


HTML(Document Structure)

CSS(Visual Design)

JavaScript(Client-side

Logic)

Kwartz(Presentation

Logic)

33


C. 独立した別ファイル中に記述 (3)✤ ビジネス層とプレゼンテーション層がきれいに分離

✤ プレゼンテーションデータ（HTML）とプレゼンテーションロジックもきれいに分離

✤ pure HTML テンプレートを実現✤ 編集するファイルが別なので衝突しない✤ デザイナによるロジックの誤変更がない

✤ ファイル数が増える

利点

欠点

34


大事なことと本当に大事なこと

✤ 大事なこと✤ テンプレートが pure HTML であること

✤ 本当に大事なこと✤ プレゼンテーションロジックを分離・独立させること✤ （pure HTML はその副産物にすぎない）

35



✤ テンプレートがpure HTMLなので、プレゼンテーション層を分離できています！

✤ pure HTMLであることと、各層が分離できることは、別個のお話✤ 恐らく、HTMLファイル中にロジックが現れないことを「プレゼンテーション層の分離」と勘違いしている

（誤）

（正）

36



✤ 生PHPだとデザイナが変なロジックを埋め込む可能性があるので、Smartyを導入しました！

✤ Smartyではデザイナによる誤変更は防止できない✤ デザイナがプレゼンテーションロジックにアクセスできる時点で間違い

✤ 根本的な解決法は、プレゼンテーションロジックを分離すること

（誤）

（正）

37



✤ プレゼンテーションロジックの記述場所✤ テンプレートファイル中（デザイン崩れ、競合が発生）✤ メインプログラム中（分離がいまいち）✤ 独立した別ファイル中（いちばん理想的）

✤ pure HTML テンプレートは重要✤ プレゼンテーションロジックの分離・独立はもっと重要

38


Kwartz編：はじめてのKwartz入門

39


Kwartz 概要

✤ Kwartzとは？✤ プレゼンテーションデータ(HTML)とプレゼンテーションロジックを分離できるテンプレートエンジン

✤ pure HTML テンプレート✤ Ruby実装とPHP実装を用意✤ http://www.kuwata-lab.com/kwartz/

40

http://www.kuwata-lab.com/kwartz/

http://www.kuwata-lab.com/kwartz/


サンプル: プレゼンテーションデータ

<table> <tr id="mark:list"> <td id="mark:item">Foo</td> </tr> <tr id="dummy:d1"> <td>Bar</td> </tr></table>

ex.html書き換えたい箇所に、目印となるid属性をつける

「id="dummy:xxx"」はダミー要素を表す

41


サンプル: プレゼンテーションロジック

#list { logic: { for x in @list _stag ## 開始タグ _cont ## 内容 _etag ## 終了タグ end }}#item { value: x;}

ex.plogic id属性ごとにプレゼンテーションロジックを記述

<tr>要素を繰り返し

<td>要素に値を出力

42


サンプル: コンパイル

<table><% for x in @list %> <tr> <td><%= x %></td> </tr><% end %></table>

•属性「id="mark:xxx"」はコンパイル時に削除される(id="xxx" なら削除されない)

•「id="dummy:xxx"」は要素そのものが削除される

$ kwartz -l eruby -p ex.plogic ex.html > ex.rhtml

eRubyファイルへコンパイル

ex.rhtml (コンパイル結果)

43


サンプル: メインプログラム

## 表示したいビジネスデータ

list = ['A', 'B', 'C']context = { :list => list }

## テンプレートを読み込んで表示

require 'erubis'eruby = Erubis::Eruby.load_file('ex.rhtml')html = eruby.evaluate(context)print html

ふつうにeRubyファイルとして実行するだけ

メインプログラム

44


特長と欠点✤ pure HTML テンプレートである✤ 実行速度が高速✤ eRuby, PHP, JSP 等もサポート✤ HTML以外でも利用可能

✤ コンパイルが面倒（自動化は可能）✤ 実行時エラーで報告される行番号がコンパイル後のものであり、コンパイル前の行番号ではない（言語のサポートが必要）

✤ 特長

✤ 欠点

45


応用例(1)

#list { logic: { for item in @list _stag # 開始タグ

_cont # 内容

_etag # 終了タグ

end }}

要素全体を繰り返す#list { logic: { _stag for item in @list _cont end _etag }}

内容だけを繰り返す

<dt>と<dd>を繰り返したいときに有用

46


応用例(2)

#list { logic: { if @list.size > 0 _stag _cont _etag end }}

条件を満たすときだけ出力#list { logic: { _stag if @name.blank? print('World') else _cont end _etag }}

デフォルト値を出力

47


応用例(3)

#list { logic: { #_stag _cont #_etag }}

ダミータグを削除

#list { logic: { _element(list2) }}

他の要素で置換

#list { logic: { }}

ダミー要素を削除

同じ要素を再利用できる

48


応用例(4)

#list { attrs: "class" cls; # 属性値を出力

logic: { odd = false for x in @list odd = !odd cls = odd ? 'odd' : 'even' _elem end }}

より複雑なプレゼンテーションロジック

プレゼンテーションロジックを変更してもHTMLは変更する必要がない

プレゼンテーションロジックがHTMLから分離されている

49



✤ Kwartzテンプレートエンジン✤ プレゼンテーションロジックをプレゼンテーションデータ(=HTML)から分離

✤ pure HTML テンプレートを実現✤ プレゼンテーションロジックを変更してもHTMLを変更する必要がない

50


Kwartz編：プレゼンテーションパターン

51


概要

✤ プレゼンテーションパターンとは？✤ プレゼンテーション層に関するデザインパターン、ベストプラクティス

✤ （オレオレ造語であり、一般的ではないことに注意）✤ 全然難しくないよ！✤ http://www.kuwata-lab.com/kwartz/kwartz3ruby-pattern-catalog.html

52


パターン一覧✤ Replacement

✤ Replace Element with Value Pattern

✤ Replace Content with Value Pattern

✤ Default Content Pattern ✤ Replace Element with Element/Content Pattern

✤ Replace Content with Element/Content Pattern

✤ Deletion ✤ Delete Element Pattern ✤ Delete Tag Pattern

✤ Iteration ✤ Iterate Element Pattern ✤ Iterate Content Pattern

✤ Selection ✤ Select Element/Content Pattern

✤ Pick-up Element/Content Pattern

✤ Extract Element/Content Pattern

今回はこちらを紹介

53


Select Element パターン

<div id="mark:message"> <div id="error"> ERROR! </div> <div id="warning"> Warning: </div> <div id="noerror"> No error. </dvi></div>

要素ごとに別のidを付加

✤ 要求: 表示するデータを条件によって変えたい

#message { logic: { if status == 'error' _element(error) elsif status == 'warn' _element(warning) else _element(noerror) end }}

条件によって該当する要素を選択

54


Pick-up Element パターン

<ol id="mark:list"> <li id="mark:item"> Item1 </li> <li>Item2</li> <li>Item3</li> <li>Item4</li> <li>Item5</li> <li>Item6</li></ol>

ダミーでない要素にid属性をつけるだけ

✤ 要求: たくさんのダミー要素を含めたい(デザイン確認のため)

#list { logic: { _stag _element(item) _etag }}

ダミーでない要素だけを取り出せば、ダミー要素はすべて削除される

55


Extract Element パターン

<html id="mark:whole"> <body> <form id="form"> <input ... /> <input ... /> <input ... /> </form> </body></html>

いちばん外側の要素である<html>タグにid属性をつける

✤ 要求: 文書全体からある特定の要素だけを取り出したい

#whole { logic: { _element(form) }}

#DOCUMENT { logic: { _element(form) }}

全体を特定の要素だけで置き換える

Kwartzではそのための特別なid名を提供

56



✤ プレゼンテーションパターン✤ プレゼンテーション層におけるベストプラクティス✤ Select Element パターン: 条件によって使う要素を変える

✤ Pick-up Element パターン: 必要な要素だけを使い、残りはダミーとして捨てる

✤ Extract Element パターン: 全体からある特定の要素だけを取り出す

57


まとめ

58


まとめ

✤ pure HTMLテンプレートが理想✤ そのためにはプレゼンテーションロジックだけを分離・独立させることが重要

✤ Kwartzはそれを実現してるよ！

59


謝辞

✤ RubyKaigi事務局の皆様✤ マイナー番組ご視聴の皆様

ありがとうございました

60


questions?

61


thank you

62

htmlデザインを崩さないテンプレートエンジンの作り方

Technology