Slim入門ということで書き方の練習を始めました。この記事ではHTMLのViewをSlim形式に書き換える際のポイントを書いていきます。
Slimとは
Ruby製のテンプレートエンジンです。HTMLタグを短く書くことができます。
ボクはRailsのビューを書くのに使っていますので、Railsでの使用を想定しています。
Railsへの導入
gemファイルにslimの読み込みを記述します。
gem 'slim-rails'
あとはbundle installでslimがインストールされます。
slim-rails が入った後にrails generate コマンド経由でviewが生成された場合に、.erbのファイルではなく.slim拡張子のファイルが出力されます。
HTMLからSlimへの変換ツール
HTMLからSlimへの変換は、変換ツールがあります。まだSlimに慣れていない場合は、ツールを使いながら練習するとわかりやすいです。
erbをslimに変換する
変換する場合は、html2slimというgemを利用しました。
html2slim slimへ変化したいerbのパス
コマンドにerbのパスを指定すると、erbファイルがslimファイルに変換されました。
大量のerbを一括変換する場合には以下の記事が参考になります。
http://qiita.com/mocchicc/items/abab4cdfac7b542742a6
Rubyコードの書き方
RailsのSlimを使用したViewに、Rubyのコードを書く書き方です。
<% %>の書き方
Rubyのコード<% %>を書く場合は、Slimでは-で書ことができました。
以下はSlimでのif文を書く場合です。
- if logged_in?
li = link_to 'イベントを作る', new_event_path
li = link_to 'ログアウト', logout_path
- else
li = link_to 'Twitterでログイン', '/auth/twitter'
<%= %>の書き方
Rubyの<%= %>を書く場合は、Slimでは=で書ことができました。
= form_for @event, :html => { class: "ui form"} do |f|
= f.text_field :title, placeholder: "タイトル"
= f.submit "イベントを作成", class: "btn"
<form class="ui form" id="new_event" action="/events" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden"name="authenticity_token" value="xWNf4uQj5lW1s2070bCmu3f4NzzfhdOfZno4M1INX5hZnCF4TSKYPu1vczQYwPOK0YggtE62BB3FfNLFZbCJlA==" />
<input placeholder="タイトル" type="text" name="event[title]" id="event_title" />
<input type="submit" name="commit" value="イベントを作成" class="btn" />
</form>
コメントの書き方
Slimのコメントは/を使うとコメントにすることができます
- if logged_in?
li = link_to 'イベントを作る', new_event_path
/li = link_to 'ログアウト', logout_path
/を付けたので、元々2つあったliタグのうち、ログアウトの方のタグは表示されなくなりました。
ちなみに#でもコメントを付けられるみたいです。ただ、こちらはコメントされた形でソースに書きだされます。
HTMLタグの書き方
よく使うタグの書き方です。
p
<p></p>
タグを打つだけで<>の囲いと綴じタグが不要になります。
aタグ
a href="//example.com" hoge
<a href="//example.com">hoge</a>
target属性を付ける
他に属性を付けたい場合は、属性を後ろに追加します。よくあるのはtarget属性ですね。
a href="//example.com" target="_blank" hoge
<a href="//example.com" target="_blank">hoge</a>
imgタグ
img src="https://pbs.twimg.com/profile_images/1739640742/20120108024459Comic20120102_001-1_normal.jpg" alt="ぷぎえもん"
<img alt="ぷぎえもん" src="https://pbs.twimg.com/profile_images/1739640742/20120108024459Comic20120102_001-1_normal.jpg">
imgタグの属性をさらに足す場合は、後ろに属性を足せばいいことがわかりやすいです。
HTMLタグへテキストを加える
pタグの後ろへテキストを書きます。
p ほげほげ ふがふが
<p>
ほげほげ ふがふが
</p>
長いテキストなど、改行してテキストを書くにはパイプを使用します。
p
|
ほげほげ ふがふが
ほげほげ ふがふが
<p>
ほげほげ ふがふが
ほげほげ ふがふが
</p>
また、パイプを使用する場合はパイプの後ろに書いてもOKです。
p
| ほげほげ ふがふが
Rubyの変数を渡す場合は以下の様になります。
h1 = @event.title
h1
= @event.title
２パターン挙げましたが、上記は２つとも同じHTMLを出力します。
<h1>
イベントタイトル
</h1>
ではパイプを使ってRubyの変数を書く場合はどうなるでしょうか。
h1
|
= @event.title
<h1>
= @event.title
</h1>
パイプを使うとRubyと認識してくれませんでした。
IDとクラスの指定
#と.を使用してIDとクラスを指定します。
#pam
<div id="pam">
</div>
上記の場合HTMLエレメントを指定しないので自動でdivタグになります。
クラスを複数付ける書き方
クラスを複数付ける場合は、.classをつなげて書きます。
.piyo.hoge
<div class="piyo hoge">
</div>
複数のクラスを付けることができました。
ネスト
インデントをするとネストされて表示されます。
#pam
.hoge
p.huga.piyo
|
わーいわーい
<div id="pam">
<div class="hoge">
<p class="huga piyo">
わーいわーい
</p>
</div>
</div>
divタグがネストされて表示されています。
インラインHTMLの書き方
Slim内にHTMLを書きたい場合は、そのままHTMLを書くと動作します。
<がHTMLタグと認識されるようです。
@quizという２つ値が入った変数をループさせて、idにindexをフル例です。
.ui.grid
- @quiz.each do |q|
<div id="quiz_#{q.id}">クイズ#{q.id}</div>
<div class="ui grid">
<div id="quiz_1">クイズ1</div>
<div id="quiz_2">クイズ2</div>
</div>
インラインHTML内の場合は、Rubyのコード出力が#{}になるのがポイントでしょうか。
参考
その他Slimの書き方は @yterajima さんの以下の記事が参考になります。
-
Slimを利用したHTMLの書き方
-
Github
-
ドキュメント
-
erbのslim変換