Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Introduction To Haml

3.380 visualizaciones

Publicado el

Publicado en: Tecnología
  • Sé el primero en comentar

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. ご静聴 ありがとう ございました

×