[Rails]パンくずリストの実装方法

はじめに

パンくずリストを一ページごとに挿入するのは面倒で管理がしにくいです。webサービスに関しても遷移が多くなるので、パンくずリストを実装していないと希望のページに飛びにくくなってUI的に下がります。そこで、パンくずリストを簡単に導入できるGemを紹介します。是非つかっていただけたら記事を書いた甲斐があって嬉しいです。

紹介するGem

gretel

パンくずリストのためにつくられたGemで、スター数は少ないものの簡易的にパンくずリストを実装できます。
多少使いにくい部分も出てきましたので改善の余地があります。最新アップデートが一か月前なので、まだ期待はできるかなと。（自分でプルリク出すのはニッチすぎる部分なので控えます😅）

使い方

1.Gemをインストール

Gemfile

gem "gretel"

bundle install

2.Configファイルを作成

rails generate gretel:install

上記のコマンドを実行すると、config/breadcrumbs.rbが作成されます。このConfigファイルでパンくずリストのバックエンド部分を設定します。

3.Configファイルを編集

config/breadcrumbs.rb

# rootの設定
crumb :root do
  link "Home", root_path
end

# 投稿一覧の設定
crumb :posts do
  link "投稿一覧", posts_path
end

# 投稿詳細の設定
crumb :post do |post|
  link post.title, post
  parent :posts # 投稿詳細の親元を投稿一覧に設定する
end

コードの説明

link: パンくずリストの実際に表示されるリンクの名前とpathを設定しています。投稿詳細の部分は、投稿のタイトルを表示しています。

crumb :example : くずを作成。exampleには変数名をつけています。view側で呼び出すときに、わかりやすい名前にしましょう。（基本的には、path名から取ってきます）

parent: 親元のくず名を指定します。

4. Viewファイルに出力

layout/applcation.rb

<%= breadcrumbs pretext: "You are here: ", separator: " &rsaquo; " %>
<%= yield %>

まず、表示する場所に挿入します。一定の場所に表示したいので例ではlayout/application.rbの<%= yield %>上に設置しています。

pretext : 現在位置のくずに追加でテキストを指定できます。
separator: 例えば、[Home > Posts > Post]の">"の部分を変数として決めれます。

views/posts/index.html.erb

<% breadcrumb :posts %>

最後に作成した「くず」を呼び出してあげます。
これで完成です。

まとめ

デメリットとしてはページごとに「くず」を呼び出さなければいけない部分であり、Configファイルでpathと連携することができれば各ページに挿入しなくて済むかなと思います。