JQ Blog

HAML & Slim

HAML (HTML Abstraction Markup Language)

インラインコードを使わなくてウェブHTML文書を記述することに使用するマークアップ言語です。PHPやASP、ほとんどのRubyOnRails Applicationで使用されています。コードが簡単になる長所がありますが、デザイナーやパブリッシャーとの協業が必要なプロジェクトには使用が難しくなる短所があります。

Gem HAMLのインストール

HAMLのGemをプロジェクトに追加します。Gemfileを開いて、 次のコードを「追加」します。

gem 'haml-rails'

そしてインストールします。

bundle install

これからHAMLを使えます！！

書き方

一番基本的な記法

(例)

!!!
%html{lang: "ja"}
  %head
    %meta{charset: "utf-8"}
  %body
    hello world!



<コード解説>

1.!!!
<!DOCTYPE html>を表す
2.%
タグの前に%を付けると<開始タグ>と<終了タグ>を表す。%html => <html></html>
3.インデントを必ず入れる
親子関係のタグは必ずインデントを入れて関係性を作る。
4.属性を入れる場合
Ruby風に{}とシンボルで書ける。
また、HTML風に書くなら「%html(lang=“ja”)」

こんなにもできます。

%div{id: "my-id"} Contents
%div{class: "my-class"} Contents

ちなみにidやclassは次のように書いても同じものが表示されます。divタグの場合のみ%divを省略することもできます。

#my-id Contents
.my-class Contents

これをHTMLで書くと、

<div id="my-id">
    Contents
</div>
<div class="my-class">
    Contents
</div>

こういうふうになります。

HTMLに記述されないコメント

次のように-#をつけて書いた文字列はHTMLには記述されません。

-# test comment


HTMLに残すコメント

HTMLに残すコメントはHAMLでは次のように書きます。

/ This is the peanutbutterjelly element

すると、

<!-- This is the peanutbutterjelly element -->


Rubyの変数を使う

HAML内ではRubyの変数を簡単に呼び出せます。

- text = "good"
- text2 = 'HAML'
%div{class: hoge}
    test message is #{text}
    = text2

これをHTMLに変換すると次のようになります。

<div class="good">
    test message is good
    HAML
</div>


Rubyのif文やcase文を埋め込む

Rubyのif文やcase文も埋め込むことが可能です。

%p
  - case 1
  - when 1
    = "1!"
  - when 2
    = "2?"
  - when 3
    = "3."


Rubyのブロックを使う

- (42...47).each do |i|
  %p= i
%p See, I can count!


Slim

SlimのgithubページにはSlimを “Slim は 不可解にならないように view の構文を本質的な部品まで減らすことを目指したテンプレート言語です。標準的な HTML テンプレートからどれだけのものが削除できるか確かめるところから始まりました。(<, >, 閉じタグなど) 多くの人が Slim に興味を持ったことで, 機能性は発展し, 柔軟な構文をもたらしました” と紹介しています。

Gem Slimのインストール

gem install slim

Slimの書き方

まず、HTMLとSlimを比べてみると、

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Jo's Training</title>
  </head>
  <body class="sample">
    <div id="contents">
      <h1>Sample File</h1>
      <img alt="sampleImage" src="http://www.jotraining.com/images/sampleImage.jpg" />
      <p>テキストテキストテキスト</p>
      <p>テキストテキストテキスト
        テキストテキストテキスト</p>
    </div>
  </body>
</html>

上記のようなHTMLは

doctype html
html
  head
    meta charset="utf-8"
    title Sample File
  body.sample
    #contents
      h1 Sample File
 
      img src="http://www.e2esound.com/images/yterajima.jpg" alt="yterajima"
 
      p テキストテキストテキスト
 
      p
        | テキストテキストテキスト
          テキストテキストテキスト

Slimではこういうふうに書けます。
Slimはインデントを用いてHTMLの入れ子を表現します。このインデントの深さは自由に決めることができます。

3つのポイント

1.通常のHTMLから <, >, /> を取り除く
2.doctype
3.テキストと | (パイプ)の扱い
4.コメント

通常のHTMLから<, >, />を取り除く

上記の例を見ると

<img alt="sampleImage" src="http://www.jotraining.com/images/sampleImage.jpg" />
 
img src="http://www.jotraining.com/images/sampleImage.jpg" alt="sampleImage"

doctype

上記のslimの1行目、doctype htmlはHTMLの<!DOCTYPE html>を表しています。

XML 宣言

doctype xml
  <?xml version="1.0" encoding="utf-8" ?>
 
doctype xml ISO-8859-1
  <?xml version="1.0" encoding="iso-8859-1" ?>

XHTML ドキュメントタイプ

doctype html
  <!DOCTYPE html>
 
doctype 5
  <!DOCTYPE html>
 
doctype 1.1
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
doctype strict
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
doctype frameset
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 
doctype mobile
  <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
    "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
 
doctype basic
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
 
doctype transitional
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 4 ドキュメントタイプ

doctype strict
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
 
doctype frameset
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">
 
doctype transitional
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

コメント

Slimのコメントには変換後出力されるコメントとされないコメントの2種類があります。

HTMLに記述されないコメント

/ このコメントは変換後表示されない

HTMLに残すコメント

/! このコメントは変換後HTMLコメントになる
 
<!-- このコメントは変換後HTMLコメントになる -->

参照

http://morizyun.github.io/blog/beginner-rails-tutorial-haml/ http://qiita.com/watak676/items/525ad3d8a1297e3244e3 http://qiita.com/yterajima/items/53fd0387279510ff082a https://github.com/slim-template/slim/blob/master/README.jp.md