パンくずリストを作ろう

今回はパンくずリストを作ってみたいと思います。

パンくずリストとは

自分が今サイトのどこにいるかわかりやすく表示したものです。

こんなやつです。

アプリ立ち上げ

アプリの新規作成からやっていきます。

rails new gretel_app

名前はgretel_appとしておきます。
ターミナルでgretel_appに移動したら

rails g scaffold task title:string body:text

こんな感じでscaffoldして

rails db:migrate

マイグレートして

rails s

サーバーを起動します。
タスク一覧はこんな感じです。

gem gretelの導入

gretelというgemで簡単にパンくずリストを作ることができます。
Gemfileに

gem 'gretel'

として

bundle install

さらに

rails g gretel:install

とすると、config/breadcrumb.rbが作成されます。
これで準備できました。

breadcrumb.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`).

こちらが先程のコマンドで作成されたファイルの中身です。

crumb :new_task do
  link 'New Task', new_task_path
  parent :root
end

これでタスクの新規作成ページにパンくずリストを表示させる設定ができました。

crumb ページ名 do
  link ビューに表示したい名前, URL
  parent 親ページ名
end

省略しましたがroutes.rbでroot 'tasks#index'としています。

viewファイルに記述

viewの表示させたい場所に記述していきます。
全てのページに表示させたい場合はapplication.html.erbに

<!DOCTYPE html>
<html>
  <head>
    <title>GretelApp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= breadcrumbs separator: " &rsaquo; " %> <!--ここを追加 -->
    <%= yield %>
  </body>
</html>

とします。
ページの上部にある方が分かりやすいのでyieldの上に置いてます。
separator: " &rsaquo; "の部分は、親ページと子ページの間の文字を設定しています。
この場合、「>」になるんですが&rsaquo;となっているのは、「>」はHTMLタグと認識されたりする場合があるためこのように特殊文字になっています。
他にもオプションがあるのでgretelのgithubのOptionsの項を参考にしてください。

次に各ページのファイルにも記述していきます。
新規作成ページ(new_task_path)を

<h1>New Task</h1>

<% breadcrumb :new_task %> <!-- ここで呼び出し -->

<%= render 'form', task: @task %>

<%= link_to 'Back', tasks_path %>

このようにしました。
breadcrumb.rbで設定したページ名を指定することでパンくずリストを表示させます。
では確認してみましょう。

うまく表示できました。

次は詳細ページに表示させます。
breadcrumb.rbに

crumb :task_show do |task|
  link "About #{task.title}", task_path(task)
  parent :root
end

詳細ページはIDが必要なのでブロック変数を使ってこのようにします。
viewには

<% breadcrumb :task_show, @task %>

このように記述します。

最後に編集ページです。

crumb :edit_task do |task|
  link 'Edit Task'
  parent :task_show, task
end

編集ページは一番下の階層なのでlinkにはURLは必要ありません。
parentにもtaskを渡しておきます。
viewの方も

<% breadcrumb :edit_task, @task %>

として確認してみましょう。
詳細ページ

編集ページ

このようにこのように階層を重ねることもできます。

最後に

無事実装できました。
関係ないですがパンくずって何のことだろうとずっと思ってたんですが由来が面白いですね。
なぜhanselではなくgretelになったのかも気になるところです。
では今回は以上です。ありがとうございました。

参考サイト

GitHub - kzkn/gretel: Flexible Ruby on Rails breadcrumbs plugin.
【Rails】 gretelを使ってパンくずリストを作成しよう | Pikawaka - ピカ1わかりやすいプログラミング用語サイト
 Rails パンくずリスト gretel の使い方 - Qiita