gretelでパンくずリストを作成

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

パンくずリストを比較的簡単に作成できる、gretelというgemが便利そうだったので使ってみました。

導入や使用方法は、配布しているgitページのREADMEを参考にしています
lassebunk/gretel

環境

macOS High Sierra(バージョン 10.13.1）
Ruby 2.4.1p111

Rails 5.1.4

前準備

パンくずリストを表示するページを作成しておきます。
今回は、ユーザ一覧ページに表示するようにしたいと思いますので、generateしておきます。

$ rails generate scaffold User name:string mail:string

導入

Gemfileにgretelを追記してインストール

gem 'gretel'

パンくずリスト用の設定ファイルを作成

rails generateを利用することで、設定ファイルを生成出来ます。

$ rails generate gretel:install
  Running via Spring preloader in process 17601
    create  config/breadcrumbs.rb

今回はUserページへのパンくずリストを表示させたいので、breadcrumbs.rbを編集します

# config/breadcrumbs.rb
crumb :root do
 link 'Home', root_path
end
# ユーザ一覧ページヘのパンくずリスト
crumb :users do
  link "ユーザ一覧", users_path
end
# ユーザ個別ページへのパンくずリスト
crumb :user do |user|
  link user.name, user_path(user)
  parent :users
end

サンプルを見ながら追記してみました。parentを指定することで、階層構造を表現出来るようです。

viewページへの導入

設定ファイルだけではもちろん表示までは出来ないので、viewファイルをいじることになります。
まずは、app/views/layouts/application.html.erb にbreadcrumbを使用するように記述します。

# app/views/layouts/application.html.erbの任意の場所に、以下を追記
<%= breadcrumbs pretext: "You are here: ", separator: " &rsaquo; " %>

先頭に記述するテキストやリストのセパレータなど、用意されているオプションを利用することで比較的自由にカスタマイズ出来るようです（今回は、サンプルをそのまま使っています）

続いて、パンくずリストを表示するそれぞれのページにも記載していきます。

・ユーザ一覧ページ
<% breadcrumb :users %>
・ユーザ個別ページ
<% breadcrumb :user, @user %>

以上で、パンくずリストを表示することが出来ます。
実際にアクセスした画像が以下になります。

---

---

---

無事パンくずリストを表示させることが出来ました。

おわりに

今回は、パンくずリストを作成できるgem,gretelについて紹介いたしました。
オプションや記述を工夫すれば、より便利になりそうなので時間のある時にもう少しいじってみたいなと思いました。