tiltでテンプレートエンジンを気楽に使う

世の中にはhtmlをerbやhamlで書いて幸せになったり、cssをsassで書いてみたり、javascriptをcoffeeしてみたり、そもそもwikiのようなMarkdown/Markupでページをちょちょいと作れたり、いろいろな幸福があります。

いろいろなテンプレートエンジンを使う例

greeting.erb

<h1>ERBで書いた文章だよ</h1>
<ul>
  <li><%= name %> さん、こんにちは！</li>
  <li>今日は、<%= state %>ですね</li>
</ul>

greeting.haml

%h1 Hamlで書いた文章だよ
%ul
  %li #{name} さん、こんにちは！
  %li 今日は、#{state}ですね

greeting.md

# Redcarpetで書いた文章だよ
* #{name} さん、こんにちは！
* 今日は、#{state}ですね

style.sass

h1
  color: blue
  li
    margin: 10px
    color: #{doc_color}

ま、例えばこんな感じでファイルを用意しておいて適したテンプレートエンジンを用いることで、それっぽいhtmlやらcssを出力してくれます。

では各ファイルをレンダリングするスクリプトを書いてみましょう。

template_engings.rb

name = 'ほげ夫'
state = 'ごきげん'

# ERB
template1 = File.read('greeting.erb')
erb_engin = ERB.new(template1)
puts erb_engin.result

# Haml
template2 = File.read('greeting.haml')
haml_engin = Haml::Engine.new(template2)
puts haml_engin.render(Object.new, name: name, state: state)

# Markdown
template3 = File.read('greeting.markdown')
mkdown = Redcarpet::Markdown.new(Redcarpet::Render::HTML)
mkdown_page = mkdown.render(template3)
puts mkdown_page

# おまけでcssもつくる
doc_color = '#161'
style_template = File.read('style.sass')
sass_engin = Sass::Engine.new(style_template)
puts sass_engin.render

似たようなことをするのに、使い方が微妙に違う……しかたないけどさ……
と思いながら、ググりながら、どうにかして上のようなスクリプトを作りました。

実行してみましょう。

$ ruby template_engings.rb
<h1>ERBで書いた文章だよ</h1>
<ul>
  <li>ほげ夫 さん、こんにちは！</li>
  <li>今日は、ごきげんですね</li>
</ul>
**************************************************
<h1>Hamlで書いた文章だよ</h1>
<ul>
  <li>ほげ夫 さん、こんにちは！</li>
  <li>今日は、 ごきげん ですね</li>
</ul>
**************************************************
<h1>Redcarpetで書いた文章だよ</h1>

<ul>
<li>#{name} さん、こんにちは！</li>
<li>今日は、#{state}ですね</li>
</ul>
**************************************************
h1 {
  color: blue; }
  h1 li {
    margin: 10px;
    color: doc_color; }

似たようなHTMLやらが出来ました。
しかしよく見ると、変数で文字列が置換されていない……うぁあああああ！！　ってなりますね。

楽したいし、働きたくないからtiltを使う

tiltは、レンダリングエンジン毎の仕様差を極力意識せず使えるようにするためのラッパーです。

greeting_tilt.rb

name = 'ほげ夫'
state = 'ごきげん'

# ERB
template1 = Tilt.new('greeting.erb')
puts template1.render(Object.new, name: name, state: state)

puts '*'*50

# Haml
template2 = Tilt.new('greeting.haml')
puts template2.render(Object.new, name: name, state: state)

puts '*'*50

# Markdown
pre_template3 = Tilt::StringTemplate.new('greeting.markdown')
                .render(Object.new, name: name, state: state)
template3 = Tilt::RedcarpetTemplate.new{pre_template3}
puts template3.render

puts '*'*50

# おまけでcssもつくる
doc_color = '#161'
pre_style_template = Tilt::StringTemplate.new('style.sass')
                     .render(Object.new, doc_color: doc_color)
style_template = Tilt::SassTemplate.new{pre_style_template}
puts style_template.render

すっきりしました。
MarkdownとSassに関しては変数を外部から与えることが出来なさそうだったので、Tilt::StringTemplateを一度カマせ、"i am #{name}"とかをi am jon などと解釈させてからレンダリングさせています。

erb/hamlとmarkdown/cssで書き方が２通りしかなくなりました。
markdown/sassで内部に変数を渡さなければ、erb/hamlと同じ書き方でいけます。

出力は

$ ruby greeting_tilt.rb
<h1>ERBで書いた文章だよ</h1>
<ul>
  <li>ほげ夫 さん、こんにちは！</li>
  <li>今日は、ごきげんですね</li>
</ul>
**************************************************
<h1>Hamlで書いた文章だよ</h1>
<ul>
  <li>ほげ夫 さん、こんにちは！</li>
  <li>今日は、 ごきげん ですね</li>
</ul>
**************************************************
<h1>Redcarpetで書いた文章だよ</h1>

<ul>
<li>ほげ夫 さん、こんにちは！</li>
<li>今日は、ごきげんですね</li>
</ul>
**************************************************
h1 {
  color: blue; }
  h1 li {
    margin: 10px;
    color: #116611; }

おお、できてますね。
ちなみに

template1 = Tilt['greeting.erb']

こんなふうにも使えるとREADMEには書いてありました。

多さっぱな使い方はtilt/template.mdを、
細かいことはtilt/testを見ると、
実際どう使う・使えるかがわかりやすいと思います。

レンダリングエンジン毎の実装の違いを意識せずに複数のエンジンを使えるのは、例えばオリジナルのフレームワークなどを作るときに便利そうかもしれない……？

小ネタ

「tilt」でgoogle検索すると、画面が傾く……ちょっとびっくりした。