hamlを導入し、マテリアルデザインについて学んでみた!
かずまです。
今日は東京ドームでプロ野球観戦をしてきました。
控えめに言って最高でした。
さてさて本題へ行きます。
今回は今まで導入を怠っていたhamlの導入を行いました。
それに加え、Googleがものすごい推しているマテリアルデザインについて学ぼうということでRailsの新たなプロジェクトを立ち上げ、
ぱちぱちコードを書いていました。
hamlについて
『Haml』とは簡単にいうとHTMLをより簡単に書くためのビューテンプレートエンジンです。
これをつかいこなせるようになるとHTMLよりもシンプルに記述できます。[1]
確かに見た目はすごくシンプルなのでこれは!と思っていたのですが、html.erbから抜け出せず...今の今になってしまいました。
ちなみにhamlをもっとシンプルにしたものでslimというものもあるそうです。[3]
例えばですが、Contents一覧ページを作ろうとした時にhamlを使うとこうなります。
.row - @contents.each do |content| .col.s12.m6 .card .card-image %img{:src => "http://materializecss.com/images/sample-1.jpg"}/ %span.card-title= content.name %a.btn-floating.halfway-fab.waves-effect.waves-light.red %i.material-icons add .card-content %p= content.memo .card-action %a{:href => "#{content.url}"} This is a link
インデントで識別されるのでちょっとpythonっぽいですね。
divが省略できる
普段良く使うdivタグですが、hamlでは省略出来ます。
.cardとか、.rowみたいな感じ。
Rubyをコードに入れるときは=をつける、もしくは#{}を使う
erbだと<%= %>でしたが、=とか#{}とかで書けるのでタイプ数が減って便利です。
あとはendが必要ないので楽。
Javascriptの生コードを書く場合
:javascript $(document) { }
これで変換してくれます。便利。
hamlいいですね。はじめはSyntax Errorでメンド!!と思ってましたが、慣れて来るともうerbには戻れない...です。
マテリアルデザインについて
マテリアルデザインの説明が結構複雑かもしれないのでここは引用でわかりやすいものを貼っておきます。
matome.naver.jp
よく動く
ボタンが特徴的!
参考文献
[1] Hamlの書き方 - Qiita
[2] Hamlが5分で分るチートシート [Rails初心者チュートリアル] | 酒と涙とRubyとRailsと
[3] テンプレートエンジン => Haml、Slimって何? - Qiita