htmlにrubyを埋め込んで、面倒な処理を簡単にするコードを書いた。<% %>で囲むのがめんどくさいが、いろいろ調べながらやってみた。
タグの生成
これはcontent_tagを使えばおk
content_tag :p, "Hellow world"
出力結果
<p>Hellow world</p>
リンクの生成
これはlink_toを使えばおk
<%= link_to "ほげほげ", "http://hogehoge.org/" %>
出力結果
<a href="http://hogehoge.org">ほげほげ</a>
イメージタグの生成
これはimage_tagを使えばおk
<%= image_tag("/images/hogehoge.png", :class => "sample") %>
出力結果
<img class="sample" src="/images/hogehoge.png" />
応用例
応用すると、画像リンクを生成、さらにはそれをliで囲むといったことができる。 以下は最近作ったWebページのサンプルである。画像をliで囲って表示させている。
<% file = "design/d_" %> <% i = 1 %> <% name = ["fabzine DM","Open Campus DM","ケーキ屋 DM","展覧会 DM","イベント DM","名刺"] %> <% for n in name %> <%= content_tag :li,(link_to image_tag(file+i.to_s+".jpg",:width => "150",:height => "212",:alt => n),file+i.to_s+".jpg",:rel => "example2",:title => n) %> <% i = i + 1 %> <% end %>
出力結果
<li><a href="design/d_1.jpg" rel="example2" title="fabzine DM"><img alt="fabzine DM" height="212" src="/assets/design/d_1.jpg" width="150" /></a></li> <li><a href="design/d_2.jpg" rel="example2" title="Open Campus DM"><img alt="Open Campus DM" height="212" src="/assets/design/d_2.jpg" width="150" /></a></li> <li><a href="design/d_3.jpg" rel="example2" title="ケーキ屋 DM"><img alt="ケーキ屋 DM" height="212" src="/assets/design/d_3.jpg" width="150" /></a></li> <li><a href="design/d_4.jpg" rel="example2" title="展覧会 DM"><img alt="展覧会 DM" height="212" src="/assets/design/d_4.jpg" width="150" /></a></li> <li><a href="design/d_5.jpg" rel="example2" title="イベント DM"><img alt="イベント DM" height="212" src="/assets/design/d_5.jpg" width="150" /></a></li> <li><a href="design/d_6.jpg" rel="example2" title="名刺"><img alt="名刺" height="212" src="/assets/design/d_6.jpg" width="150" /></a></li>
