webの世界では以前からhtml
css
javascript
といった技術が使われていてそれは今でも変わらないのですが、最近ではもっと効率的に開発するためにその他の言語からそれらを生成する手法がとられています。
例えばcss
ならsass
やless
から。javascript
ならcoffeescript
やtypescript
なんかも有名です。html
だとHaml
やJade
がありますが、今回はSlim
を使ってhtml
を生成してみます。
Slimって?
Slim
はruby
製テンプレートエンジンで、シンプルなマークアップで記述したファイルからhtml
を生成することができます。
Slimをいれる
gem install slim
さっそく生成してみる
適当な作業ディレクトリを作成して、sample.slim
ファイルを次の内容で作成します。
doctype html
html
head
title Title!!
body
h1 This is H1
ターミナルでslimrb
コマンドを入力します。
slimrb sample.slim
こんなhtml
が出力されます。
<!DOCTYPE html><html><head><title>Title!!</title></head><body><h1>This is H1</h1></body></html>
すべて1行で出力されるので見づらい場合は
slimrb -p sample.slim
とすると、
<!DOCTYPE html>
<html>
<head>
<title>Title!!</title>
</head>
<body>
<h1>
This is H1
</h1>
</body>
</html>
こんな感じで改行&インデントされて見やすいhtml
が出力されます。
ファイルに保存したい場合は
slimrb sample.slim sample.html
これでOKです。
書き方
基本
タグ名を書くだけでOK。閉じタグは必要ありません。<>
もいりません。
h1 こんにちは!
p はじめまして
これは
<h1>こんにちは!</h1>
<p>はじめまして</p>
こんな風になります。
入れ子
インデントを入れるとタグの入れ子になります。インデントの数は自由です。
ul
li りんご
li いちご
li バナナ
<ul>
<li>りんご</li>
<li>いちご</li>
<li>バナナ</li>
</ul>
テキスト
1行で書く
p これは内容です
複数行で書く
p
|これは内容です
属性
属性は書き方が色々あります。どれかに統一したほうがいいでしょう。
/囲まない
a href="http://www.mosa-architect.com" target="_blank"
|MOSAアーキテクト
/[]カッコで属性を囲む
a [href="http://www.mosa-architect.com" target="_blank"]
|MOSAアーキテクト
/()カッコで属性を囲む
a (href="http://www.mosa-architect.com" target="_blank")
|MOSAアーキテクト
<a href="http://www.mosa-architect.com" target="_blank">MOSAアーキテクト</a>
ちなみに私は[]
で統一しています。
id classをつける
css
の記法で書くことができます。タグ名を省略するとデフォルトでdiv
タグになります。これは便利です。
div#user-id.user
/divは省略可能
#user-id.user
<div id="user-id" class="user"></div>
おまけ
あれ?この記法あってるのかな?というとき
echo "p hello!" |slimrb -s
とすると簡単に確認できます。不正な記法のときはエラーになります。
<p>hello!</p>
ちなみに複数行のときはecho
コマンドの-e
オプションを使用します。
echo -e "p\n |this is content"|slimrb -s
既存のhtmlをSlim化したい
html
をSlim
化してくれるhtml2slimというgemがあります。
gem install html2slim
html2slim -h
Usage: html2slim INPUT_FILENAME_OR_DIRECTORY [OUTPUT_FILENAME_OR_DIRECTORY] [options]
まとめ
Slim
を使うとものすごくシンプルに書けますね。記法もとても簡単なのですぐにでも使ってみたくなったのではないでしょうか?
MOSAアーキテクトでは会社のホームページを社員が構築・運用していますが、もちろんSlim
で書いてhtml
を生成しています。
Slim
にはruby
コードが書けたりファイルをインクルードする機能があったりするのですが、それはまた別の記事で紹介したいと思います。