SinatraでHaml入門

[Ruby][備忘録][Haml][Sinatra]SinatraでHaml入門

あらすじ

Sinatraとか使っていてもHtmlべた書きばかりなので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'

Sinatraと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 で <br /><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>

Rubyの構文はもう少し本格的に書く事もできるようで、条件分岐なんかも書ける。とりあえずFizzBuzzも書ける。

出力結果

実行

$ bundle exec ruby app.rb

Htmlにで描画された画面

[f:id:kk_Ataka:20111226233342j:image]

生成されたソース

[f:id:kk_Ataka:20111226233343j:image]

まださわりしか触っていないのでこれから触ってみる。

関連記事(この記事の初版より古い記事はリンクがグレーで表示されます)

  1. 2011/11/26 [Ruby] [Sinatra] [Heroku] HerokuにWebアプリ(Sinatra)をデプロイする手順をまとめた
  2. 2011/12/27 [Evernote] [Ruby] [API] EvernoteのAPIをRubyから叩きたい
  3. 2011/12/21 [Ruby] Ruby実行時のオプションをよろしく解析してくれるoptparseを使ってみる
  4. 2011/12/15 [Ruby] [Solaris] [Redmine] RedmineとApacheを連携させるPassengerをインストールできなかった
  5. 2011/12/07 [Ruby] ZenTestでRSpecを自動実行できるようにした
  6. 2011/12/05 [Ruby] [Redmine] RedmineでプラグインインストールしたらTemplateErrorが出た
  7. 2011/12/04 [Ruby] [Mac] [Unix] 複数のRuby環境の管理・切替ができるrvmをインストールした
  8. 2011/11/30 [Ruby] [Heroku] rvm環境でRuby実行時にReadlineエラーが起きた時の対処法
  9. 2011/11/29 [Ruby] pikでインストールしたRubyでbundle exec rubyしたらエラーになった 解決編
  10. 2011/11/28 [Ruby] pikでインストールしたRubyでbundle exec rubyしたらエラーになった
  11. 2011/11/27 [Ruby] [Heroku] [Lokka] LokkaをインストールしてHerokuにデプロイした
  12. 2011/11/24 [Ruby] 複数のRuby環境の管理・切替ができるpikを実行できた nyaos編
  13. 2011/10/04 [Ruby] 複数のRuby環境の管理・切替ができるpikを実行できた
  14. 2011/10/03 [Ruby] Rubyのgemバージョン管理ができるBundlerを実行できなかった
  15. 2011/09/30 [Java] [Windows] [Ruby] .msgファイルをパースして中から添付ファイルを抜き出す