nanocのhelper 利用実例
-
Upload
gmaeda -
Category
Technology
-
view
1.953 -
download
2
description
Transcript of nanocのhelper 利用実例
nanocのHelper利用実例
ファーエンドテクノロジー株式会社前田 剛
nanocのhelperとは
アイテム、レイアウトの中で呼び出すことができる機能群。
・nanocには10個のヘルパーが組み込まれている・新たなヘルパーをRubyで記述することもできる
helperの利用例www.farend.co.jp
www.farend.co.jp/products/is-support/
Bloggingサイトのニュースを
一覧表示
Breadcrumbsパンくずリストを表示
Blogging
Breadcrumbs
Capturing
Filtering
HTMLEscape
LinkTo
Rendering
Tagging
Text
XMLSitemap
組み込みのhelperブログなど時系列の記事の処理
パンくずリスト
コンテンツの一部を保持し他の場所で再利用
フィルタの呼び出し
HTMLエスケープ処理
アイテムへのリンク
部分テンプレート
タグ管理
テキストの冒頭の切り出し、HTMLタグの削除
サイトマップ生成
▶ nanoc.ws/docs/reference/helpers/
helperの使い方
①helper読み込み
# All files in the 'lib' directory will be loaded# before nanoc starts compiling.
include Nanoc::Helpers::Renderinginclude Nanoc::Helpers::HTMLEscapeinclude Nanoc::Helpers::LinkToinclude Nanoc::Helpers::Blogginginclude Nanoc::Helpers::Tagginginclude Nanoc::Helpers::Textinclude Nanoc::Helpers::Breadcrumbs
lib/default.rb
利用するヘルパーに対応するモジュールを lib/*.rb 内で include する
モジュール名はAPIドキュメントへのリンクで確認できる
nanoc.ws/docs/reference/helpers/blogging/
②itemやlayout内で利用する
・・・
<div class="footer"><%= render "_footer" %></div>・・・
layouts/default.rb
helperで定義されているメソッドをitemやlayout内で利用する。
helperにより利用できるようになるメソッドの確認 ▶ http://nanoc.ws/docs/api/Nanoc/Helpers.html
Blogging Helper
Blogging helperとは
サイトの新着情報やブログなど時系列の記事を扱うのに便利なメソッドを提供。
・記事が新しい順に格納された配列を返す sorted_articles メソッド・atomフィードに対応する XML を返す atom_feed メソッド
記事一覧の表示
---title: 舞姫created_at: 2013/04/05kind: article---
石炭をば早(は)や積み果てつ。中等室の卓(つくゑ)のほとりはいと静にて、熾熱燈(しねつとう)の光の晴れがましきも徒(いたづら)なり。今宵は夜毎にこゝに集ひ来る骨牌(カルタ)仲間も「ホテル」に宿りて、舟に残れるは余一人(ひとり)のみなれば。
Blogging helperの処理対象とするitem(ブログ記事、新着情報等)はitemのメタデータに created_at属性・kind属性を追加。
<% 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 %>
sorted_articleメソッドで記事の一覧を新しい順に取得できる。
Blogging 利用例①Redmine.JP Blog blog.redmine.jp
Blogging 利用例②ファーエンドテクノロジー www.farend.jp
Text Helper
Text helperとは
テキストの抜粋・HTMLタグの除去を行うメソッドを提供。
・指定したテキストの抜粋を返す excerptize メソッド・HTMLタグを除去する strip_html メソッド
<%= excerptize(strip_html(article.compiled_content), length: 30) %>
Text 利用例Redmine.JP Blog blog.redmine.jp
Breadcrumbs Helper
Breadcrumbs helperとは
パンくずリストの表示に利用できる、ページ階層の情報を格納した配列を返す breadcrumbs_trail メソッドを提供。
<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>
Breadcrumbs 利用例RubyWorld Conference www.rubyworld-conf.org
Rendering Helper
Rendering helperとは
itemまたはlayout内に別のlayoutの内容を取り込むことができる。Ruby on Railsの部分テンプレートのような機能。重複するコードをまとめたりlayoutの内容を分割してシンプルに保つのに便利。
アクセス解析用コードをレイアウトから分離
<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>
<%= render '_analytics' %>
layouts/_analytics.html
コーディングのときに邪魔になるものをレイアウトの外に追い出せる。
helperの自作
helperを自分で作るには
文字列を返すメソッドを定義したモジュールを作るだけ。
Facebookのプロフィール画像を取得するhelperを作ってみる
<%= facebook_picture('MAEDA.Go') %>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-ash4/195627_100001335623912_284375135_q.jpg" />
▼
require 'open-uri'require 'json'
module 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}">| endend
include FacebookPicture
lib/facebook_picture.rb
まとめ
•helperを利用することでwebサイトの制作に便利な機能が追加される。•helperの自作も簡単。文字列を返すメソッドを作るだけ。
ありがとうございました