SinatraでHaml入門
Hamlとは
HamlはHTML/XHTMLを生成するためのマークアップ言語です。インデントや簡略構文によって簡潔な記述が行えます。
http://haml.ursm.jp/
今まで
require 'rubygems' require 'sinatra' get '/' do "<style type='text/css'>.head {border-bottom: 1px solid #CCCCCC;border-left: 5px solid #CCCCCC;}.time {color: #CCCCCC;}.tweet {}</style><h1>Hello Tycoon-Timeline powerd by Heroku!!</h1><a href=''>Reload</a><dl><dt class='head'>User <span class='time'>2011/12/26 02:25:00</span></dt><dd class='tweet'>ついーと</dd ..." end
全部こんな感じ。なのでページがでかくなっていくことを考えると非常につらい。
準備
構成
Gemfile app.rb views ┗index.haml
Gemfile
Bundlerを使うのでGemfileを作成。
source :rubygems source "http://rubygems.org" gem 'sinatra' gem 'haml'
gemインストール
$ bundle install ./vendor/bundle
app.rb
require 'rubygems' require 'sinatra' require 'haml' get '/' do haml :index end
今までhtmlタグを書いていた返り値をhtml :indexとする。するとここではviews/index.hamlを見に行ってくれる。
views/index.haml
!!! %html %head %title Hello. %body %div#main %h1 Hello!! %a{:href => 'http://google.com'} Google %div.comment / Html comment This is html comment. %div.comment -# Haml comment This is haml comment. %div.ruby= Time.now %div.fizbuz - (1..15).each do |i| - if i % 15 == 0 %p FizzBuzz - elsif i % 3 == 0 %p Fizz - elsif i % 5 == 0 %p Buzz - else %p #{i}
ものすごく基本的な構文しか使っていないが、
記述 | 解説 | 例 |
---|---|---|
!!! | DOCTYPE宣言 | XMLとかも設定できる |
%hoge | 要素名 | %head で <head></head> |
%hoge value | 値にvalue | %title Hello. で <title>Hello.</title> |
%hoge{:属性 => 'value'} | 属性セット | %a{:href => 'http://google.com'} Google で <a href='http:google.com'>Google</a> |
%hoge#id | ID指定 | %div#main で <div id='main'></div> |
%hoge.class | class指定 | %div.test で <div class='test'></div> |
/ Html comment | コメント(Html) | / Html comment で <!-- Html comment --> |
-# Haml comment | コメント(Haml) | 生成されたHtmlには表示されない |
%hoge= Rubyの構文 | Rubyのコード実行 | %div= Time.now で <div>Mon Dec 26 ....</div> |