[Rails]gretelとパンくず（パンくずリストの作り方）

何を書くのか

railsのgem "gretel"を用いたパンくずリストの作り方

環境

Rails: 6.0.3.4
Ruby: 2.6.5

結論

gretelの力でパンくずを作成し、それをビューで表示する。

パンくずリストとは

こういう風に、ヘッダーなどに「今どこどこにいますよ！」っていう表示を見た事があるでしょうか。これをパンくずリストと言います。今回は、これを作成していきます。

gretelの導入

今回使うのは、gemのgretelです。
gretelのGithub

最初に、gretelの導入を行います。

Gemfileに記述し、bundle installします。

gem "gretel"

と、記述し、ターミナルで

$ bundle install

を実行します。

そしたらターミナルでこちらのコマンドを実行しましょう。

rails g gretel:install

これを実行すると、"breadcrumbs.rb"というファイルが生成されます。
ファイルの中は、こんな感じになっているかと思います。

breadcrumbs.rb

crumb :root do
  link "Home", root_path
end

# crumb :projects do
#   link "Projects", projects_path
# end

# crumb :project do |project|
#   link project.name, project_path(project)
#   parent :projects
# end

# crumb :project_issues do |project|
#   link "Issues", project_issues_path(project)
#   parent :project, project
# end

# crumb :issue do |issue|
#   link issue.title, issue_path(issue)
#   parent :project_issues, issue.project
# end

# If you want to split your breadcrumbs configuration over multiple files, you
# can create a folder named `config/breadcrumbs` and put your configuration
# files there. All *.rb files (e.g. `frontend.rb` or `products.rb`) in that
# folder are loaded and reloaded automatically when you change them, just like
# this file (`config/breadcrumbs.rb`).

これが確認できれば、準備は完了です。

breadcrumbs.rbの中身を作る

それでは、ここからはパンくずリストの中身、つまり表示する文字列だったりを決めます。
ここでは、gretelの公式で紹介されている例を参考に説明します。

breadcrumbs.rb

#トップページ
crumb :root do
  link "Home", root_path
end

# 一覧表示ページ
crumb :issues do
  link "All issues", issues_path
end

# 詳細表示ページ
crumb :issue do |issue|
  link issue.title, issue
  parent :issues
end

説明を加えます。

breadcrumbs.rb

link "Home", root_path

基本の型は、'link "表示する文字列", パス'です。それを

breadcrumbs.rb

crumb :root do
  link "Home", root_path
end

のように、do~endで囲ってあげます。
ちなみに、:rootは、ビューの表示等で利用することになるので、自分が判断しやすい名称に設定しておきましょう。

また、こういうこともできます。

breadcrumbs.rb

#詳細表示ページ
crumb :issue do |issue|
  link issue.title, issue
  parent :issues
end

詳細表示ページには、parent :issuesとあります。これは、「issuesを親に持つよ！」ということを示しています。
これがないと、ページ間のつながりを判断してもらえず、意味がなくなってしまいます。

ビューに表示する

それでは、先ほど作ったパンくずリストの要素等を、ビューで表示していきます。

この例では、app/views/issues/show.html.erbを例にだします。

issues/show.html.erb

<% breadcrumbs :issue, @issue> 
<%= breadcrumbs separator: " &rsaquo; " %>  <%# 矢印を示すオプション　%>

基本的に、表示に必要なのは、この二つだけです。１行目で、（コントローラーから送られてきた）@issueを、先ほどcrumbの後ろにシンボルで記述した:issueのバリューとして定義します。あとは、自由にオプションをつけて、完成です。

補足

これは、初歩中の初歩です。公式Githubにはいろいろなオプションが確認できるので、ここからはそちらを参考してください。

#最後に
最後まで読んでいただき、ありがとうございます。
ソースコード、記事の書き方について**「もっとこうしたほうがいいよ！」というご意見、「そこどうなっているの？」というご質問**など、お待ちしております。

#参考文献
gretel