マークアッパー的 Haml入門21の手引き

HamlはHTMLを効率的に生成するための記法です。

むずかしいと思っている方も多そうなので、かいつまんでシンプルにまとめてみました。

Hamlを使えるようにする

Macの場合は アプリケーション>ユーティリティ>ターミナルを開きます。

開いてすぐの位置に次の一行を入力します。

gem install haml

処理が数分ほどかかります。ターミナルはそのままにしてください。

HamlファイルをHTMLに変換する

まずは書いたコードがどのようにHTMLとなるのか確認できるようにしましょう。

試しにデスクトップにtest.hamlというファイルを作ります。

HamlをHTMLにするため、先ほどのターミナルを開きます。ファイルを置いた階層までcdで移動します。

cd desktop
これを入力しEnter(return)キーを押して
haml test.haml test.html
を入力してEnterを押すとHTMLが出力されます。

直接パスを指定するのもOK

haml ~/desktop/test.haml ~/desktop/test.html

HTMLからHamlに変換したりその逆も出来るWebサービスもあるようです。
HTML => Haml [HTML2Haml]

エディタによっては自動で変換してくれるプラグインなどもあります。Emacsを使える方は前回の記事が参考になるかと思います。

基本の記法

%で始まるタグと、半角空白2つのインデントが重要です。インデントにさえ気をつければそのままHTMLを書くことも可能です。

hamlの記述

%p
  aaa
<p>bbb</p>

出力されるHTML

<p>
  aaa
</p>
<p>bbb</p>

入れ子(ネスト)も可能

hamlの記述

%div
  abcdef
  %p
    %span
      foo

出力されるHTML

<div>
  abcdef
  <p>
    <span>
      foo
    </span>
  </p>
</div>

一行で出力したい場合

半角スペース空けて改行なしで記述します。

Hamlの記述

%p abc

出力されるHTML

<p>abc</p>

タグ間の空白/改行をコントロール

"<"をタグの後ろに付けると、タグの内側の改行や空白を取り除いて出力します。">"の場合はタグの外側です。

両方を合わせて"<>"または"><"と記載することもできます。

Hamlの記述

%div<
  %div<
    %div<
      abc
%div
  %div<>
    %div<
      abc

出力されるHTML

<div><div><div>abc</div></div></div>
<div><div><div>abc</div></div></div>

属性を付ける

src,href,name,titleといった属性を表示する場合です。先ほどの"<"を末尾に使って一行で出力しています。

Hamlの記述

%a(href="foo/abc.html" title="abc_def")<
  これはリンクです。

出力されるHTML

<a href="foo/abc.html" title="abc_def">これはリンクです。</a>

idとclassを付ける

タグを省略した場合は、divタグになります。前述の属性を付ける方法でも大丈夫です。

Hamlの記述

%div#aaa abc
#bbb abc
%p.ccc abc
%p(class="ddd") abc

出力されるHTML

<div id="aaa">abc</div>
<div id="bbb">abc</div>
<p class="ccc">abc</p>
<p class="ddd">abc</p>

コメントアウト

スラッシュでコメントアウトができます。

Hamlの記述

/
  この部分は
  コメントです。
/ 一行のコメント

出力されるHTML

<!--
  この部分は
  コメントです。
-->
<!-- コメント -->

IE条件分岐コメントアウト

おなじみIEバグのための設定ですね。

Hamlの記述

/[if lt IE 9]
  %script(src="html5.js")

出力されるHTML

<!--[if lt IE 9]>
  <script src="html5.js"></script>
<![endif]-->

hamlファイルのみのコメント

HTMLには出力されません。

-#
  この部分は
  コメントです
-# 一行のコメント

DOCTYPE宣言

!!!はXHTMLで、さらに5を付けるとHTML5です。

Hamlの記述

!!!
!!! 5

出力されるHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>

pre,textareaの記述

:preserveフィルターを使うと、改行と空白がそのまま保持されます。&#x000A;の部分はブラウザで表示すると改行されています。

Hamlの記述

%textarea
  :preserve
    abc
    def

出力されるHTML

<textarea>abc&#x000A;def</textarea>

エスケープ&改行空白保持

このコードをブラウザを通して見るとしっかりそのまま表示されます。

タグ2つにフィルター2つを重複させていて、4行にわたる記述が面倒ですね。まとめて一つのフィルターにする方法はこちらに書きました。
Haml のpreエスケープフィルタ作り方

Hamlの記述

%pre
  %code
    = preserve do
      :escaped
        <div>test1</div>
        <div>test2</div>

出力されるHTML

<pre><code>&lt;div&gt;test1&lt;/div&gt;&#x000A;&lt;div&gt;test2&lt;/div&gt;</code></pre>

変数を使う

先頭に"-"を付けます。ここではfooという変数にbazという文字列を代入しています。変数を表示するにはいくつかの方法があります。

Hamlの記述

- foo = "baz"
%div(title=foo class="abc#{foo}")
  属性や文章に#{foo}埋め込むこともできます。
  = foo
%p= foo

出力されるHTML

<div class="abcbaz" title="baz">
  属性や文章にbaz埋め込むこともできます。
  baz
</div>
<p>baz</p>

変数を使った条件分岐

if,elseで表示する内容を変更できます。

Hamlの記述

- aaa = 33
- if aaa > 22
  %strong test1
- else
  %em test2

出力されるHTML

<strong>test1</strong>

スイッチ

いくつかの候補を頻繁に変更する場合は、caseだけ変えればいいので便利ですね。

Hamlの記述

%div<
  - case "b"
  - when "a"
    = "aaa"
  - when "b"
    = "bbb"
  - when 5
    = "ccc"

出力されるHTML

<div>bbb</div>

連番をふる

(3..7)とすることで3から7までの5つを書き出します。数字の間のドットを3つにすると最後の一つ((3..7)の場合は7)は対象になりません。

Hamlの記述

- (3..7).each do |i|
  %p(id="ee_#{i}") test#{i+10}

出力されるHTML

<p id="ee_3">test13</p>
<p id="ee_4">test14</p>
<p id="ee_5">test15</p>
<p id="ee_6">test16</p>
<p id="ee_7">test17</p>

sassを使う

CSSの記述にはSassも使えます。入れ子することも可能。

sassコマンドはターミナルに gem install sass と入力して取得します。

Hamlの記述

%style(type="text/css")
  :sass
    $wid:300px
    $col:red
    div#ggg
      :width $wid
      :height $wid/3
      :color $col
      :text-align justify
      span.ddd
        :display block

※ haml ver 4.0から%styleの記述は不要で:sassのみで<style>タグを出力するようになりました。

出力されるHTML

<style type="text/css">
  div#ggg {
    width: 300px;
    height: 100px;
    color: red;
    text-align: justify; }
    div#ggg span.ddd {
      display: block; }
</style>

外部ファイルをインクルードする

hamlやhtmlなど他のファイルを読み込んで使用できます。長いので関数にして省略したいところですので、次回書きます。

= Haml::Engine.new(File.read("header.haml")).render

すべてダブルクオートで出力する

初期設定では全てシングルクオートで出力されます。ダブルクオートにしたい...

そんなこともあろうかとHTMLへの変換時に専用のオプションが用意されています。-qまたは--double-quote-attributesを付けます。

haml -q input.haml output.html

おわり

Hamlって意外に使えるんですよね。

というわけでHamlのススメでしたー

参考