Railsでパンくずリストを作成する方法 - Gretelを使った実装

はじめに

こんにちは！
記事をご覧いただきありがとうございます。

本記事では、Railsでパンくずリストを作成する方法についてまとめます。

目次

1. パンくずリストについて
2. 手順
3. 書き方
4. 最後に

パンくずリストについて

パンくずリストとは、Webサイトの現在のページの位置を示すナビゲーションリンクのことです。ユーザーがどのページにいるかを視覚的に把握できるため、サイトのユーザビリティが向上します。今回は、Rails用のGretelというGemを使って、パンくずリストを簡単に実装する方法を以下にまとめています。

手順

Gretelをインストールする

まず、GretelをGemfileに追加し、インストールします。

# Gemfile
gem 'gretel'

インストールコマンドを実行します。

bash
$ bundle install

設定ファイルを作成する

次に、以下のコマンドを実行して、config/breadcrumbs.rbファイルを作成します。

bash
$ rails g gretel:install

このファイルに各ページのパンくずのパスを定義していきます。

書き方

パンくずリストの定義

config/breadcrumbs.rb内にページごとのパンくずを設定します。

# config/breadcrumbs.rb

# ホームページ
crumb :client_root do
  link 'ホーム', root_path
end

# トップページ
crumb :top do
  link 'トップ', top_path
  parent :client_root
end

# one
crumb :client_ads do
  link '詳細1', new_one_path
  parent :top
end

# two
crumb :manual_ads_input do
  link '詳細2', new_two_path
  parent :top
end

ビューに表示する

ビューにパンくずリストを表示するには、レイアウトファイルや個別のビューに以下のコードを追加します。

= breadcrumbs separator: " > "

最後に

最後まで読んでいただきありがとうございました。Gretelを使えば、設定ファイルで各ページのパスを定義し、ビューで呼び出すだけで、ユーザーにわかりやすいナビゲーションを提供できます。
この記事を読んでRailsでパンくずリストを作成する方法について理解が深まれば幸いです。