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

1. nanocのHelper
利用実例
ファーエンドテクノロジー株式会社
前田 剛

2. nanocのhelperとは
アイテム、レイアウトの中で呼び出すことができる機能群。
・nanocには10個のヘルパーが組み込まれている
・新たなヘルパーをRubyで記述することもできる

3. helperの利用例
www.farend.co.jp
Blogging
サイトのニュースを
一覧表示
www.farend.co.jp/products/is-support/
Breadcrumbs
パンくずリストを表示

4. 組み込みのhelper
Blogging ブログなど時系列の記事の処理
Breadcrumbs パンくずリスト
Capturing コンテンツの一部を保持し他の場所で再利用
Filtering フィルタの呼び出し
HTMLEscape HTMLエスケープ処理
LinkTo アイテムへのリンク
Rendering 部分テンプレート
Tagging タグ管理
Text テキストの冒頭の切り出し、HTMLタグの削除
XMLSitemap サイトマップ生成
▶ nanoc.ws/docs/reference/helpers/

5. helperの使い方

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. モジュール名はAPIドキュメントへのリンクで確認できる
nanoc.ws/docs/reference/helpers/blogging/

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. Blogging Helper

10. Blogging helperとは
サイトの新着情報やブログなど時系列の記事を扱うのに便利なメソッド
を提供。
・記事が新しい順に格納された配列を返す sorted_articles メソッド
・atomフィードに対応する XML を返す atom_feed メソッド

11. 記事一覧の表示

12. Blogging helperの処理対象とするitem（ブログ記事、新着情報等）は
itemのメタデータに created_at属性・kind属性を追加。
---
title: 舞姫
created_at: 2013/04/05
kind: article
---
石炭をば早（は）や積み果てつ。中等室の卓（つくゑ）のほとりはいと静にて、
熾熱燈（しねつとう）の光の晴れがましきも徒（いたづら）なり。今宵は夜毎に
こゝに集ひ来る骨牌（カルタ）仲間も「ホテル」に宿りて、舟に残れるは余一人
（ひとり）のみなれば。

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. Blogging 利用例①
Redmine.JP Blog blog.redmine.jp

15. Blogging 利用例②
ファーエンドテクノロジー www.farend.jp

16. Text Helper

17. Text helperとは
テキストの抜粋・HTMLタグの除去を行うメソッドを提供。
・指定したテキストの抜粋を返す excerptize メソッド
・HTMLタグを除去する strip_html メソッド

18. <%= excerptize(strip_html(article.compiled_content), length: 30) %>

19. Text 利用例
Redmine.JP Blog blog.redmine.jp

20. Breadcrumbs Helper

21. Breadcrumbs helperとは
パンくずリストの表示に利用できる、ページ階層の情報を格
納した配列を返す breadcrumbs_trail メソッドを提供。

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. Breadcrumbs 利用例
RubyWorld Conference www.rubyworld-conf.org

24. Rendering Helper

25. Rendering helperとは
itemまたはlayout内に別のlayoutの内容を取り込むことが
できる。Ruby on Railsの部分テンプレートのような機能。
重複するコードをまとめたりlayoutの内容を分割してシンプ
ルに保つのに便利。

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. helperの自作

28. helperを自分で作るには
文字列を返すメソッドを定義したモジュールを作るだけ。

29. Facebookのプロフィール画像を
取得するhelperを作ってみる
<%= facebook_picture('MAEDA.Go') %>
▼
<img src="http://profile.ak.fbcdn.net/hprofile-ak-
ash4/195627_100001335623912_284375135_q.jpg" />

30. lib/facebook_picture.rb
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}">|
end
end
include FacebookPicture

31. まとめ

32. •helperを利用することでwebサイトの制作に便利な機能が
追加される。
•helperの自作も簡単。文字列を返すメソッドを作るだけ。

33. ありがとうございました