速習テンプレートSlim(HTML作成編)

  • 391
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

テンプレートエンジンSlimを使ってスマートにHTMLを作成する

昨日うちの事務所で開催したagatsuma.survive#02の中でSlimの説明が思ったよりも好評だったので改めてまとめてみます。

このエントリでは Slimを使ってHTMLを作成する ことだけを目的としているため、動的にSlimでゴニョゴニョするような話は出て来ません。HTMLの代替にSlimを使う、といった主旨の内容です。プログラムの話も出て来ませんが、残念ながらコマンドラインを少し使います。

Slim とは?

  • 拡張子は .slim
  • view の構文を本質的な部品まで減らすことを目指したテンプレート言語
  • Ruby製のテンプレートエンジン
  • 高速, 軽量
  • インデント重要

用途

  • Railsプロジェクトのテンプレート
  • Sinatra(Padorino)のテンプレート
  • HTMLの代替(個人的には)

SlimでHTMLを作成するメリット

  • タイプ数が減る
  • HTML に比べ見通しが良い
  • 実はそんなに難しくない

Slim環境の用意

SlimはRubyのgemとして配布されています。Rubyが入れてあれば、コマンドラインからgemをインストールするだけです。

gem install slim

もしRubyが入っていない場合には、頑張って入れてください。Mac/LinuxであればRVMやrbenvといった便利なツールがあります。

gemのインストールが完了したら次のコマンドを実行しましょう。

slimrb --help

slimrbコマンドのオプション一覧が表示されれば問題ありません。

先述のコマンドのとおり、Slimで使うコマンドはslimrbです。SlimをHTMLに変換するには次のコマンドを叩きましょう。

slimrb -p path/to/sample.slim > path/to/converted_sample.html

-pはslimrbコマンドのオプションで読みやすいHTML(改行有り)を出力してくれます。

Slimの書き方

まず、次のHTMLとSlimを比較してみましょう。

sample.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Sample File</title>
  </head>
  <body class="sample">
    <div id="contents">
      <h1>Sample File</h1>
      <img alt="yterajima" src="http://www.e2esound.com/images/yterajima.jpg" />
      <p>テキストテキストテキスト</p>
      <p>テキストテキストテキスト
        テキストテキストテキスト</p>
    </div>
  </body>
</html>
sample.slim
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はインデントを用いてHTMLの入れ子を表現します。このインデントの深さは自由に決めることができます。今回はRubyらしく2スペースで書いています。

Slimの簡単な覚え方

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

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

これは読んでそのままです。例に上げたsample.slimの10行目、imgタグを見てください。

<img alt="yterajima" src="http://www.e2esound.com/images/yterajima.jpg" />
<!-- Slimの場合

img src="http://www.e2esound.com/images/yterajima.jpg" alt="yterajima"

-->

何が変わったかと言えば, <と/>が無くなっただけです。他のタグでも同様に書き直すとSlimとしてパースすることができます。

また、idとclassを表すショートカットとして、CSSの表記のように #. が使用できます。デフォルトではこのショートカットだけで表記した場合、div id="", div class=""になります。

2. doctype

sample.slimの1行目、doctype htmlはHTML文書のドキュメントタイプを表しています。この表記方法についてはSlimのREADME(日本語版)にまとめてあるので参照してください。XML宣言を記述することも可能です。

3. テキストと | (パイプ)の扱い

HTMLのタグの中に書く通常のテキストの扱いには若干のルールがあります。

まず、簡単なものはタグの後にスペースを置いて表記する方法です。sample.slimであればh1タグの
後や最初のpタグの後に続く書き方です。

h1 Sample File

p テキストテキストテキスト

スペース後のテキストがそのままHTMLタグの中身になります。少々ややこしいのは複数行のテキストを書く場合です。その場合には | を使います。

p
  | テキストテキストテキスト
    テキストテキストテキスト

p
  | 
    テキストテキストテキスト
    テキストテキストテキスト

|以降にある文字列、インデントされた文字列はすべてテキストとして扱われます。

4. コメント

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

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

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

まとめ

HTMLの作成のみを目的とするなら、この程度のことを覚えれば実用できるかなと思います。その他の機能の詳細やRubyコードの扱いについては日本語版READMEを参照してください。

その他

  • Sass/Scss, Less等のCSSプリプロセッサと組み合わせる場合にはMiddlemanを使うと便利です。
  • syntax対応してるエディタが少ないのが辛いところ