kazumalab tech log

流行りとリラックマと嵐が大好きです。技術的ログ。

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

よく動く

ボタンが特徴的!

操作に対してのレスポンス

Googleのアプリケーションはほとんどマテリアルデザインを使用しています。
f:id:kazumalab:20170424015815p:plain:w200
上の写真はストリートビューアプリ。

Googleガイドラインを出しています。
Introduction - Material design - Material design guidelines


今回使うのはマテリアルデザインのガイドラインにそって作られたCSSフレームワークを導入します。

materializecss.com

materializecssです。
ちょっとシンプルすぎるかなとも思いましたがまぁ初心者の僕にはこれが優しいかと...!

色々試してます。

ちょっと気になる文献

morizyun.github.io