はじめてのHaml、インストールから基本構文まとめ

  • Pocket
  • このエントリーをはてなブックマークに追加
  • 164 follow us in feedly

まえがき

Hamlを使ってみよう!ということで今回はインストールから基本までをさらっと掴みたいと思います。

Hamlの利点

ちょっとだけ使ってみた感想ですが

・少ないタイプ数(コード量)でHTMLを書ける!

・Rubyを走らせることができる!

ざっとこんな感じ、やってみないわけないでしょう!

開発環境

OS Mac

Ruby 1.9.3

gem 1.8.23

Haml 4.0.3

インストールする

gem install haml

# 確認
haml -v

.hamlファイルを.htmlにする

hamlコマンドを用いて.hamlファイルから.htmlを生成します。

# 書き方
haml -q xxx.haml(HTML化したいHamlファイル) xxx.html(生成するHTMLファイル名)

# -q オプションを指定することで区切り文字にダブルクォーテーションを使います

# 例
haml -q index.haml out/index.html

基本の書き方

test.haml

!!!
%haml{:lang => "ja"}
	%head
		%meta{:charset => "UTF-8"}
	%body

これをhamlコマンドでhtml生成

haml -q test.haml out/test.html

test.html

<!DOCTYPE html>
<haml lang="ja">
  <head>
    <meta charset="UTF-8">
  </head>
  <body></body>
</haml>

こんな感じになります。

 

覚えておかないといけないことは

・%でタグ名

・{:xx => “yy”}とすることでタグのパラメータを指定

・タグの開始・終了はインデントで表現

コメント

・HTMLのコメント

		/ html comment
		/
			comment
			comment
			comment

・Haml内でのコメント

		-# haml comment
		-#
			comment
			comment
			comment

どちらも、改行して字下げすることで複数行コメントにできます。

タグ内を改行したくない場合

		%p hello
		%p hello2

		%ul
			%li
				item
			%li<
				item
		

タグの横にスペースを開けて書くと改行はされないようです。

まだ “>” “<" の記号を用いることでhtmlでは改行していない状態にすることもできます

id class の付け方

		%div{:id => "main1", :class => "cls"}
		%div{:id => "main2", :class => "cls"}
		%div#main3.cls
		#main4.cls

↑のコードでdiv要素を4つ作成していますが、どれも同じような結果になります

id と classに関しては “#” “.”の記号を用いて省略して書くことができるようです。

Zencodingで慣れているのでこれはうれしい。

あとは “div”自体も省略できるようです。

css javascriptの書き方

		:css
			.cls{
				color:red;
			}
		:javascript
			console.log("hello")
		:escaped
			<div class="escaped"></div>

↑のようにするとstyleやjsを書くことができます。

またエスケープした状態でHTMLに出力することもできるようです

Haml内でRubyを走らせる

		%p total is #{5*100}
		%p= Time.now
		- x = 5
		%p= x

		- (1..10).each do |i|
			%p=i

↑のように計算したり、変数を使ったり、関数を使ったり、ループさせたりと

便利だなー

ソースまとめ

今回紹介したサンプルのhamlのソースと生成されたHTMLのソースです

index.haml

!!!
%haml{:lang => "ja"}
	%head
		%meta{:charset => "UTF-8"}
	%body

		/ html comment
		/
			comment
			comment
			comment
		-# haml comment
		-#
			comment
			comment
			comment
		
		-# tag
		%p hello
		%p hello2

		%ul
			%li
				item
			%li<
				item
		
		-# div
		%div{:id => "main1", :class => "cls"}
		%div{:id => "main2", :class => "cls"}
		%div#main3.cls
		#main4.cls

		-# filter
		:css
			.cls{
				color:red;
			}
		:javascript
			console.log("hello")
		:escaped
			<div class="escaped"></div>

		-# Ruby
		%p total is #{5*100}
		%p= Time.now
		- x = 5
		%p= x

		- (1..10).each do |i|
			%p=i

index.html

<!DOCTYPE html>
<haml lang="ja">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <!-- html comment -->
    <!--
      comment
      comment
      comment
    -->
    <p>hello</p>
    <p>hello2</p>
    <ul>
      <li>
        item
      </li>
      <li>item</li>
    </ul>
    <div class="cls" id="main1"></div>
    <div class="cls" id="main2"></div>
    <div class="cls" id="main3"></div>
    <div class="cls" id="main4"></div>
    <style>
      .cls{
      	color:red;
      }
    </style>
    <script>
      console.log("hello")
    </script>
    &lt;div class=&quot;escaped&quot;&gt;&lt;/div&gt;
    <p>total is 500</p>
    <p>2013-08-12 11:24:09 +0900</p>
    <p>5</p>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
  </body>
</haml>

おすすめ書籍

パーフェクトRuby (PERFECT SERIES 6)
Rubyサポーターズ すがわら まさのり 寺田 玄太郎 三村 益隆 近藤 宇智朗 橋立 友宏 関口 亮一
技術評論社
売り上げランキング: 9,964
プログラミング言語 Ruby
プログラミング言語 Ruby
posted with amazlet at 13.12.02
まつもと ゆきひろ David Flanagan
オライリージャパン
売り上げランキング: 114,558

関連記事

Followkeijiban.png

railsでページングを行うライブラリ『kaminari』がイケてる

まえがき railsでページングを簡単に実装できるライブラリ『kam...

記事を読む

Screeny Shot 2013-07-01 2.45.52.png

ニコニコ動画マイリストrssをPHPとRubyで取得してみる

まえがき ニコニコ動画のマイリストをRSSで取得できるみたいなので試...

記事を読む

shoes-sample-1.png

RubyのShoesで簡単GUIアプリ開発【インストール】

まえがき Amazonで新しい本を買いました。 RとRubyによる...

記事を読む

test.rb-6

RubyでRedisを使ってみるの巻

まえがき RubyでRedisを使ってみるメモ 事前準備としてはR...

記事を読む

ruby-term-ansicolorruby-term-ansicolor.png

Rubyで標準出力に色をつける『Term::ANSIColor』が使いやすくてイケてる!

まえがき RubyでThorとか触ってCUIのちょこっとしたツールと...

記事を読む

新着記事

no image

PHPでRubyのirbっぽいインタラクティブなスクリプトが実行できる「boris」

まえがき PHPでもRubyのirbみたいなことがしたくて探してみたと...

記事を読む

2015年の抱負と去年の振り返り〜よちよちWEB業界1年経験して〜

まえがき あけましておめでとうございます。今年もどうぞよろしくお願いし...

記事を読む

Java SE 7 Bronze試験(1Z0-802)を受けてきました

まえがき 以前から少し受けてみたかった試験『Java SE 7 Bro...

記事を読む

HubotでJenkinsのジョブを実行する

まえがき HubotをつかってJenkinsのジョブをじっこうしてみた...

記事を読む

no image

Hubotをforeverでデーモン化する

まえがき 今回はHubotをforeverを使ってデーモン化してみた時...

記事を読む

スポンサーリンク

PAGE TOP ↑