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 メソッドを提供。

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の自作も簡単。文字列を返すメソッドを作るだけ。

ありがとうございました

nanocのhelper 利用実例

Technology