Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

nanocのhelper 利用実例

2,379 views

Published on

Rubyによるwebサイトジェネレータnanocの組み込みhelperの利用例を解説。
2013年4月6日 第0回nanoc勉強会発表資料。

Published in: Technology
  • Be the first to comment

nanocのhelper 利用実例

  1. 1. nanocのHelper 利用実例ファーエンドテクノロジー株式会社 前田 剛
  2. 2. nanocのhelperとはアイテム、レイアウトの中で呼び出すことができる機能群。・nanocには10個のヘルパーが組み込まれている・新たなヘルパーをRubyで記述することもできる
  3. 3. helperの利用例 www.farend.co.jp Bloggingサイトのニュースを 一覧表示 www.farend.co.jp/products/is-support/ Breadcrumbs パンくずリストを表示
  4. 4. 組み込みのhelper Blogging ブログなど時系列の記事の処理Breadcrumbs パンくずリスト Capturing コンテンツの一部を保持し他の場所で再利用 Filtering フィルタの呼び出しHTMLEscape HTMLエスケープ処理 LinkTo アイテムへのリンク Rendering 部分テンプレート Tagging タグ管理 Text テキストの冒頭の切り出し、HTMLタグの削除 XMLSitemap サイトマップ生成 ▶ nanoc.ws/docs/reference/helpers/
  5. 5. helperの使い方
  6. 6. ①helper読み込み利用するヘルパーに対応するモジュールを lib/*.rb 内で include する lib/default.rb # All files in the lib directory will be loaded # before nanoc starts compiling. include Nanoc::Helpers::Rendering include Nanoc::Helpers::HTMLEscape include Nanoc::Helpers::LinkTo include Nanoc::Helpers::Blogging include Nanoc::Helpers::Tagging include Nanoc::Helpers::Text include Nanoc::Helpers::Breadcrumbs
  7. 7. モジュール名はAPIドキュメントへのリンクで確認できるnanoc.ws/docs/reference/helpers/blogging/
  8. 8. ②itemやlayout内で利用するhelperで定義されているメソッドをitemやlayout内で利用する。 layouts/default.rb ・ ・ ・ <div class="footer"><%= render "_footer" %></div> ・ ・ ・ helperにより利用できるようになるメソッドの確認 ▶ http://nanoc.ws/docs/api/Nanoc/Helpers.html
  9. 9. Blogging Helper
  10. 10. Blogging helperとはサイトの新着情報やブログなど時系列の記事を扱うのに便利なメソッドを提供。・記事が新しい順に格納された配列を返す sorted_articles メソッド・atomフィードに対応する XML を返す atom_feed メソッド
  11. 11. 記事一覧の表示
  12. 12. Blogging helperの処理対象とするitem(ブログ記事、新着情報等)はitemのメタデータに created_at属性・kind属性を追加。 --- title: 舞姫 created_at: 2013/04/05 kind: article --- 石炭をば早(は)や積み果てつ。中等室の卓(つくゑ)のほとりはいと静にて、 熾熱燈(しねつとう)の光の晴れがましきも徒(いたづら)なり。今宵は夜毎に こゝに集ひ来る骨牌(カルタ)仲間も「ホテル」に宿りて、舟に残れるは余一人 (ひとり)のみなれば。
  13. 13. sorted_articleメソッドで記事の一覧を新しい順に取得できる。<% sorted_articles.each do |article| %> <div> <p> <strong><%= link_to(article[:title], article) %></strong><br> <%= attribute_to_time(article[:created_at]).strftime("%Y/%m/%d") %> </p> <p> <%= excerptize(strip_html(article.compiled_content), length: 30) %> <p> <hr> </div><% end %>
  14. 14. Blogging 利用例① Redmine.JP Blog blog.redmine.jp
  15. 15. Blogging 利用例② ファーエンドテクノロジー www.farend.jp
  16. 16. Text Helper
  17. 17. Text helperとはテキストの抜粋・HTMLタグの除去を行うメソッドを提供。・指定したテキストの抜粋を返す excerptize メソッド・HTMLタグを除去する strip_html メソッド
  18. 18. <%= excerptize(strip_html(article.compiled_content), length: 30) %>
  19. 19. Text 利用例 Redmine.JP Blog blog.redmine.jp
  20. 20. Breadcrumbs Helper
  21. 21. Breadcrumbs helperとはパンくずリストの表示に利用できる、ページ階層の情報を格納した配列を返す breadcrumbs_trail メソッドを提供。
  22. 22. <ul class="breadcrumb"> <% breadcrumbs_trail[0..-2].each do |page| %> <% next unless page %> <li><%= link_to(page[:title], page) %> <span class="divider">/</span></li> <% end %> <li><%= item[:title] %></li></ul>
  23. 23. Breadcrumbs 利用例 RubyWorld Conference www.rubyworld-conf.org
  24. 24. Rendering Helper
  25. 25. Rendering helperとはitemまたはlayout内に別のlayoutの内容を取り込むことができる。Ruby on Railsの部分テンプレートのような機能。重複するコードをまとめたりlayoutの内容を分割してシンプルに保つのに便利。
  26. 26. アクセス解析用コードを レイアウトから分離コーディングのときに邪魔になるものをレイアウトの外に追い出せる。<%= render _analytics %>layouts/_analytics.html<script type="text/javascript"> var _gaq = _gaq || []; _gaq.push([_setAccount, UA-2756109-1]); _gaq.push([_trackPageview]); (function() { var ga = document.createElement(script); ga.type = text/javascript; ga.async = true; ga.src = (https: == document.location.protocol ? https://ssl : http://www) + .google-analytics.com/ga.js; var s = document.getElementsByTagName(script)[0]; s.parentNode.insertBefore(ga, s); })();</script>
  27. 27. helperの自作
  28. 28. helperを自分で作るには文字列を返すメソッドを定義したモジュールを作るだけ。
  29. 29. Facebookのプロフィール画像を 取得するhelperを作ってみる <%= facebook_picture(MAEDA.Go) %> ▼ <img src="http://profile.ak.fbcdn.net/hprofile-ak- ash4/195627_100001335623912_284375135_q.jpg" />
  30. 30. lib/facebook_picture.rbrequire open-urirequire jsonmodule FacebookPicture def facebook_picture(id) graph_json = open("https://graph.facebook.com/#{URI.encode(id.to_s)}" "?fields=picture,name").read img_url = JSON.parse(graph_json)[picture][data][url] %Q|<img src="#{img_url}">| endendinclude FacebookPicture
  31. 31. まとめ
  32. 32. •helperを利用することでwebサイトの制作に便利な機能が 追加される。•helperの自作も簡単。文字列を返すメソッドを作るだけ。
  33. 33. ありがとうございました

×