Introduction To Haml

2,933 views
2,841 views

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,933
On SlideShare
0
From Embeds
0
Number of Embeds
107
Actions
Shares
0
Downloads
18
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Introduction To Haml

  1. 1. Hamlプラグインで ビューをすっきり 記述する (株)永和システムマネジメント サービスプロバイディング事業部 浦嶌 啓太
  2. 2. アジェンダ •HTMLがいかに駄目かという話 •そこでHamlですよという話 •Hamlの始め方
  3. 3. 仕事でRailsを 始めて早一年
  4. 4. ビューを書くのが 嫌になりました        ____      /      \    /  _ノ  ヽ、_  \   /  o゚͡   ゚͡o  \  今日もまた、刺身の上に   |     (__人__)    |  タンポポのせる   \     ` ͡´     /  仕事が始まるお
  5. 5. HTMLは冗長なので •書くのがめんどう •うっかりミス多発
  6. 6. ありがちな うっかりミス
  7. 7. 1. DOCTYPE宣言をコピペし忘れる。 <?xml version="1.0"?> <html>
  8. 8. <p><strong><%=h @notice %></strong> 2. タグを閉じ忘れる。
  9. 9. <div class="content"> <%= yield %> <div> 3. タグを閉じ損ねる。
  10. 10. <p class="info"><%=h @info %></div> 4. 終了タグを変え忘れる。
  11. 11. <div class=<%=h @user.role %>> 5. 属性値をクオートし忘れる。
  12. 12. <%- if @content_for_nav -%> <div class="navigation"> <%= yield :nav %> </div> <% end %> 6. 余分な空行を消し忘れる。
  13. 13. これはひどい 間違い探しゲーム
  14. 14. ビューを書くのが大変! │ ├ 1. 我慢する │   [まちがい] │    人間無理は禁物です。 │    それよりも別の手段を探してみませんか? │    ちょっとしたプラグインでなんとかなるかも? │            ↑ │         ココがポイント! └ 2. Hamlを使う     [せいかい]
  15. 15. Hamlってなに? • HTMLを生成するためのテンプレート言語 • Railsのビューを記述する言語として使える
  16. 16. よくあるレイアウトを Hamlにしてみる
  17. 17. 1 <?xml version="1.0" encoding="utf-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html> 5 <head> 6 <title><%=h @title %></title> 7 </head> 8 <body> 9 <%- if @content_for_nav -%> 10 <div class="navigation"> 11 <%= yield :nav %> 12 </div> 13 <%- end -%> 14 <div class="content"> 15 <%= yield %> 16 </div> 17 </body> 18 </html>
  18. 18. 1 !!! XML 2 !!! 1.0 3 %html 4 %head 5 %title&= @title 6 %body 7 - if @content_for_nav 8 .navigation 9 = yield :nav 10 .content 11 = yield
  19. 19. 3分でわかる Haml文法講座
  20. 20. % •HTML要素を生成する •インデントでネストを表現する %h1 Hello <h1>Hello</h1> %ul %li Item <ul> <li>Item</li> </ul>
  21. 21. . と # •class属性とid属性を生成する •divの場合は要素名を省略可能 %p.desc … <p class=”desc”>…</p> .users #user_1 … <div class=”users”> <div id=”user_1”>…</div> </div>
  22. 22. - と = •ERBの <% … %> と <%= … %> に相当 •end の位置はインデントで判断する %h1= @title <h1><%= @title %></h1> - @usrs.each do |u| %li= u.id <% @usrs.each do |u| %> <li><%= u.id %></li> <% end %>
  23. 23. !!! •XML宣言やDOCTYPE宣言を生成する !!! XML <?xml version=’1.0’ encoding=’utf-8’ ?> !!! 1.1 <!DOCTYPE html PUBLIC "-//W3C// DTD XHTML 1.1//EN" "...">
  24. 24. 1 !!! XML 2 !!! 1.0 3 %html 4 %head 5 %title&= @title 6 %body 7 - if @content_for_nav 8 .navigation 9 = yield :nav 10 .content 11 = yield
  25. 25. 続きはWebで! http://haml.hamptoncatlin.com/
  26. 26. Hamlの考え方 •HTMLの生成に特化することで •less codeとDRYを実現する •ありがちなミスの発生を防ぎ、 きれいなコードを生成する
  27. 27. •余計なことを考えず、本来やりた いことに注力できる •これなら書いてやろうかという気 分になる つまり…
  28. 28. Hamlの始め方
  29. 29. インストールと使い方 $ gem install haml $ haml --rails path/to/rails_root •ERBと同じ場所にファイルを配置する app/views/foo/index.html.haml
  30. 30. 現実と折り合うには •いきなり全部Hamlに置き換えるのは 難しい…
  31. 31. トロイの木馬作戦 •HamlはERBと共存できる •新しく作るビューをHamlにする •partialをHamlにする •徐々にHaml率を高めていく
  32. 32. まとめ Hamlを使うとやりたいことに注力できる Hamlを使うとビューを書く気分になる Hamlは簡単に使い始められる
  33. 33. .happy.coding .with#haml
  34. 34. ご静聴 ありがとう ございました

×