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

slim-kanban

元ネタ: マークアッパー的 Haml入門21の手引き

Slim は Ruby 製のテンプレートエンジンで HTML を効率的に生成するための記法です。JadeHaml の影響を受けています。

元ネタのブログ記事が良さげな感じだったので Slim 版を試しに書いてみることにしました。Haml にあって Slim に無い機能もありますが, そのまま当て込んで書いています。いわゆるSlimの入門記事です。Slimの書き方〜といった記事もあまりないのでご参考までに。

※ ターミナルでコマンド実行を記述する場合 $ command のように頭に $ をつけて記述しています。

目次

Slim を使えるようにする

Mac であれば アプリケーション>ユーティリティ>ターミナル を立ちあげて, 次のコマンドを入力してください。

$ gem install slim 

問題なく処理が終われば Slim がインストールされています。

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

まずは Slim のファイルを HTML に変換する方法を確認しましょう。

デスクトップに test.slim というファイルを作成します。Slim で作成するファイルの拡張子は .slim です。ターミナルを起動し, まずデスクトップへ移動します。

$ cd ~/Desktop 

test.slim の内容を記述します。

doctype html 
html 
  head
    title test.slim 
  body 
    h1 Slim Sample 

ファイルが用意できたら次のコマンドを実行しましょう。

$ slimrb test.slim test.html 

変換されたファイル test.html は次のように変換されます。

<!DOCTYPE html><html><head><title>test.slim</title></head><body><h1>Slim Sample</h1></body></html>

Slim の変換コマンド slimrb では, デフォルトで圧縮(改行等を除いた)したファイルを出力します。このままでは見づらいかと思います。その場合には次のようにコマンドを入力します。

$ slimrb -p test.slim test.html 

-p オプションを使うことで改行された html ファイルが出力されます。test.html は次のようになりました。

<!DOCTYPE html>
<html>
  <head>
    <title>
      test.slim
    </title>
  </head>
  <body>
    <h1>
      Slim Sample
    </h1>
  </body>
</html>

HTML から Slim に変換できる web サービスもあるようです。
HTML2slim

Vim で Slim を編集しながら HTML に変換する方法が Qiita に投稿されています。
quickrun.vimでSlimをHTMLに変換表示する – Qiita [キータ]

基本の記法

Slim でのタグの書き方は簡単です。<, >, /> を HTML のタグから取り除き, 閉じタグを書かないことを意識してください。インデントは好みで問題ありません。個人的には Ruby に併せて半角スペース2つにしています。そのまま HTML を記述することもできます。

Slim の記述

p aaa
<p>bbb</p>

出力される HTML (-p オプション)

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

テキストの扱い

Slim を使うにあたって Haml と大きく異る点は「テキストの扱い」です。Slim のテキストの扱いはどうやら Jade に影響を受けているらしく, Haml や HTML を書かれる人からは不思議な書き方かもしれません。大切なのは | の扱いです。

Slim の場合, | 以降に記述されたテキストは全て非HTMLタグのテキストとして変換されます。具体例で見て行きましょう。

出力したい HTML (-p オプション)

<p>
aaa
</p>

Slim の記述1: HTML タグの記述の後に半角スペース, 続けてテキストを書く

p aaa

Slim の記述2: HTML タグから改行し, | のあとにテキストを書く

p
  | aaa 

Slim の記述3: HTML タグを記述, | の行で改行し, 次の行にテキストを書く

p
  |
    aaa

目新しい記述方法は 2 と 3 になるかと思います。特に 3 は初見で分かりづらいですね。3 の書き方はテキストの文量が多くなりがちな時に使うと文章の見通しが良くなるので時々使っています。

入れ子(ネスト)も可能

Slim の記述

div
  | abcdef
  p
    span
      | foo

出力される HTML (-p オプション)

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

一行で出力したい場合

※できない

Slim の記述

p abc 

出力される HTML (-p オプション)

<p>
abc 
</p> 

出力される HTML (オプションなし)

<p>abc</p>

元記事 で意図する動作はおそらくできません。-p オプションの場合は細く改行した HTML を。オプションなしの場合には圧縮された HTML を出力します。

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

元記事 と同様の動作, タグ間の空白または改行を取り除く, を実現する方法は Slim では確認できませんでした。

別の意味で「タグ間の空白/改行をコントロール」する方法があります。元記事では削除する方法でしたが, Slim にはタグの前後にスペースを追加する方法があります。

タグの後に > をつけるとタグの後にスペース, < をつけるとタグの前にスペース, <> で前後にスペースです。1つずつ見てみましょう。このスペースの確認にはオプション無しの変換が適しています。

まず, > をタグの後につけてみます。それぞれのタグの後にスペースが追加されます。

Slim の記述

a> href="url" Link1
a> href="url" Link2 

出力される HTML (オプションなし)

<a href="url1">Link1</a> <a href="url2">Link2</a> 

次に, < をタグの後につけてみます。それぞれのタグの前にスペースが追加されます。

Slim の記述

a< href="url" Link1
a< href="url" Link2 

出力される HTML (オプションなし)

 <a href="url">Link1</a> <a href="url">Link2</a>

最後に, <> をタグの後につけてみます。それぞれのタグの前後にスペースが追加されます。

Slim の記述

a<> href="url" Link1
a<> href="url" Link2 

出力される HTML (オプションなし)

 <a href="url">Link1</a>  <a href="url">Link2</a> 

わかりづらいですが, a タグの間には 2 スペース挿入されています。

属性を付ける

src, href, name, title といった属性を表示する方法です。Slim の場合, そのまま書く方法と, [], {}, () を使う方法の 2 通りがあります。括弧を使って書く場合には属性を複数行に渡って記述することができます。

Slim の記述

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

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

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

出力される HTML (すべて同じ出力内容)

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

id と class をつける

CSS と同様の方法で id, class をつけることができます。タグを省略した場合には, デフォルト設定であれば div タグになります。

Slim の記述

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

出力される HTML (-p オプション)

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

コメントアウト

HTML のコメントアウトは /! で書けます。

Slim の記述

/! 
  この部分は
  コメントです

/! 一行コメント

出力される HTML (-p オプション)

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

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

IE 限定でアレコレするための設定にはこれ。HTML コメントと混乱する場合があるので注意が必要です。

Slim の記述

/[if lt IE9]
  script src="html5.js" 

出力される HTML (-p オプション)

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

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

HTML には出力されないコメントの書き方です。/ を使います。

/ Slim のコメントです

DOCTYPE 宣言

doctype hoge で宣言できます。

doctype html または doctype 5 で HTML5, doctype 1.1 で strict モードの XHTML1.1 です。詳細はドキュメントの Doctype tag 参照。

Slim の記述

doctype html 
doctype 5
doctype 1.1

出力される HTML (-p オプション)

<!DOCTYPE html>
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

pre, textarea の記述

そのままテキスト書けば勝手に改行されるので大丈夫。

Slim の記述

textarea 
  | abc 
    def

出力される HTML

<textarea>abc
def</textarea>

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

元記事 と同様の出力内容を得るには次のように書きます。

Slim の記述

pre
  code
    - str = "<div>test1</div>\n\
      <div>test2</div>"
    = str

出力される HTML

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

一度 Ruby の変数に入れてから = で出力しています。= はすべての出力をエスケープしてくれるので欲しい結果が得られています。str 変数に与える文字列には改行を含めていることに注意して下さい。これ他に手段ないんだろうか?

追記: 2013/07/25

変数に入れなくてもそのまま出力できますよね。

pre
  code
    = "<div>test1</div>\n\<div>test2</div>"

変数を使う

すでに出て来ましたが - の後には Ruby のコードを書くことができます。Slim では = でエスケープ出力, == で非エスケープ出力, #{...} で変数出力ができます。

Slim の記述

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

出力される HTML (-p オプション)

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

変数を使った条件分岐

if, else で表示する内容を変更できます。- の後に Ruby の条件分岐を記述します。

Slim の記述

- aaa = 333
- if aaa > 22
  strong test1
- else 
  em test2 

出力される HTML

<strong>test1</strong>

スイッチ

複数の候補に対して条件分岐する場合には, case を変えれば対応できます。こういうのはフレームワーク側や Slim の前の処理部分がある場合には任せた方がいいと思う。できるんだけども。

Slim の記述

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

出力される HTML

<div>bbb</div>

連番をふる

(3..7)とすることで3から7までの5つを書き出します。この辺りは Slim というより Ruby のコードの扱いですね。

Slim の記述

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

出力される HTML (-p オプション)

<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 を使う

Slim ファイルの中で Sass を使うことができます。Sass の利用には gem がインストールされている必要があります。

Slim の記述

sass:
  $wid: 300px
  $col: red 
  div#ggg
    width: $wid 
    height: $wid/3
    color: $col 
    text-align: justify
    span.ddd
      display: block

出力される HTML

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

Sass 以外にも「埋め込みエンジン」としていくつかのテンプレートエンジンを直接 Slim ファイルの中に記述することができます。代表的なものは次のとおりです。

  • JavaScript: javascript:
  • Ruby: ruby:
  • CSS: css:
  • SCSS: scss:
  • Less: less:
  • CoffeeScript: coffee:

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

Slim ファイルを分割し, 読み込んで使用できます。

Slim の記述

== Slim::Engine.new(File.read('header.slim')).render

分割や共通化が必要になったら Middleman 使いましょう!! Slim も Haml も動きます。

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

元記事 によると Haml はすべてシングルクォートで出力されるらしいですね。Slim のコマンドには元記事のようなオプションはありませんでした。

Slim 本体のオプションの :attr_quote を変更すると出力される HTML の「属性の囲み文字」を変更することができます。デフォルトでは " で囲まれます。

次のコードは test.slim を変換し出力します。属性の囲み文字は ' になるように指定されています。

# coding: utf-8

require "slim"
puts Slim::Template.new('test.slim', {:attr_quote => "'"}).render

おわり

元記事になぞって Slim 版を書いてみました。これ書くの大変だったろうな…

Slim の困ったところは取り急ぎ gist や エディタの構文ハイライトが効かない場合が多いところです。emacs, vim, sublime text 2 はそれぞれプラグインがあるようなのでインストールしてみてください。

おまけ

Slim の詳細は 日本語版 README.md に書いてあります。2-3週間に1度は更新しています。

今回の記事とは違う視点からもっと簡単に Slim を使ってみよう!という主旨で書いた記事が Qiita に上げてあります。
速習テンプレートSlim(HTML作成編) – Qiita [キータ]

マークアッパー的 Slim 入門21の手引き」への3件のフィードバック

  1. ピンバック: Middleman: らくらく Slim 入門 | deadwood

  2. ピンバック: WordPressもくもく勉強会@群馬#1に参加しました | e2esound.com業務日誌

  3. ピンバック: マークアッパー的 Jade 入門 21 の手引き | e2esound.com業務日誌

コメントを残す

メールアドレスが公開されることはありません。