gretelを使ってパンくずリストを実装

パンくずリストとは

ユーザーがサイトを使用する際、自分が今サイトのどの位置にいるのかというのを瞬時にわかるようにするための表示のことを「パンくずリスト」と言います。「パンくず」と省略して使われています。
Railsアプリケーションにおいてパンくずを導入したい場合は、gretelというgemが便利です。

gretelの使用方法

Gemfileにgretelのgemを追加してbundle installします。

gem 'gretel'

generatorでgretelを起動させるコマンド実行します。

$ rails generate gretel:install

config配下にbreadcrumbs.rbが作成されたら準備完了です。このファイルの中にパンくずの定義をまとめて管理します。

config/breadcrumbs.rb

crumb :root do
  link "Home", root_path
end

ファイルにデフォルトで入っているコードは上記のようになっていて、現在はルートページのパンくずの設定のみ記述されています。

ユーザーの新規登録画面とユーザー詳細画面、ユーザー編集画面にもパンくずをつけるための設定を行っていきます。

config/breadcrumbs.rb

#:rootはパンくずの設定上の名前なのでわかりやすいものにします。
crumb :root do
  #実際にパンくずリストに表示される部分の設定です。
  link "Home", root_path
end

crumb :user_new do
  link "ユーザー登録", new_user_path
  #親のページ名（現在のページから見て一つ前のページ）
  parent :root
end

#ブロック変数を使って選択したユーザーを特定する
crumb :user_show do |user|
  link "#{user.name}の詳細", user_path(user)
  parent :root
end

crumb :user_edit do |user|
  #編集機能の子ページはないのでpathはつけない
  link "ユーザー編集"
  #ブロック変数の値を使って選択したユーザーを特定する
  parent :user_show, user
end

実際に設定したパンくずを表示していきます。
全てのページにパンくずリストを表示したいので、application.html.erbファイルに記述します。

view/layout/application.html.erb

<%= breadcrumbs separator: " &rsaquo; " %>

" › "は特殊文字で>を意味しています。HTMLで使うときに閉じタグと間違えてしまうのでこのように記載します。

そして、application.html.erbに表示されるパンくずをパンくずを使いたい各ビューファイルに指定する必要があります。

users/new.html.erb
<% breadcrumb :user_new %>

users/show.html.erb
<% breadcrumb :user_show, @user %>

users/edit.html.erb
<% breadcrumb :user_edit, @user %>

詳細画面と編集画面にはユーザー情報を入れたいのでインスタンスを渡さなくてはいけません。

参考 : GitHub - kzkn/gretel: Flexible Ruby on Rails breadcrumbs plugin.