ハムルマンのうた
～ 前奏 ～
あれはだれだ だれだ だれだ
あれはハムル
ハムルマン ハムルマン
裏切りものの名を受けて 全てを捨ててたたかう男
ハムルアローは ハッシュリテラル
ハムルイヤーは わからん
ハムルウィングは わからん
ハムルビームは 全然わからん
あ～～～～～っ Haml好き
正義のヒーロー
ハムルマン ハムルマーンッ
Haml をやりましょう
はい、おはようございます。僕です。今日は僕が応援したりしてなかったりしている方がHTMLとRubyの学習をやっていましてですね。これは……、Hamlも薦めるしかないと思ったのでHaml記事を書きました。件のHamlとは「HTMLをより簡単に書くためのビューテンプレートエンジン」です。まあ、なんのこっちゃですけどHTMLをRuby的な記法を用いて書けるように拡張したやつです。なので変数とかループが使える。
まあ、百聞は一見に如かずということで実際に書いてみると以下のような感じです。画像ファイル全部base64に変換してるんでコードが醜いけど許して、なんでもしますから。
-# 「-」でRuby的な記法。 -# 「-」以降「=」でつなぐと変数として利用できる - navItems = [{:text=>'HOME',:href=>'#home'},{:text=>'ABOUT',:href=>'#about'}] -# タグは「%」を用いて表記 -# 半角2つ使うことで階層構造を表現できる -# 属性情報は「{id: 属性名}」あるいは「{:id => 属性名}」 -# Rubyライクに使えるので「-」以降はブロックとしても利用できる %nav %ul - navItems.length.times do |i| %li %a{:href=> "#{navItems[i][:href]}"} #{navItems[i][:text]}
大まかな使い方は上のような感じです。なおノリで書いているので可読性とかそういうのは考慮していないです。Rubyっぽい表現を避けようと思えば半角2つで階層作ってやればマークアップ部分はできます。
これはもう使うしかないですね。
参考にしたもの
yamakasa3.hatenablog.com
