自分の環境

Ruby 2.5.1p57
Rails 5.2.4.2
mysql2 (0.5.3)

なぜパンくずを実装しようと思ったか

プログラミングスクールでフリーマーケットアプリケーションを作った際に
どこのページにいるかを目視できるようにする為です。

パンくずという言葉の由来

パンくずリストという語源は、童話「ヘンゼルとグレーテル」の話の中に主人公の兄弟が森に入るときに、迷子にならないように自分たちが通ってきた道にパンくずを置いていったエピソードが由来となっています。

パンくずのメリット

ユーザビリティが高くなる

パンくずリストを設置することで「自分が今サイト内のどこにいるのか」や「サイトの構造」を認識しやすくなり、結果として使いやすさを高めることができます。

パンくずリストとは

このようなことを指します。

①　パンくず機能のgem導入

Gemfileの一番下にgem gretelを記述

Gemfile.

gem gretel

ターミナルでbundle installをする

$bundle install

②　ファイルの設定

ターミナルで実行する

$ rails generate gretel:install

実行すると下記のファイルが生成されます

config.breadcrumbs.rb


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

crumb :loginer do
  link "ログインページ", new_user_session_path
end

・ :loginer ← 設定ファイルを呼び出します。
・ "ログインページ" ← パンくずリストに表示される名称です。
・ new_user_session_path ← 呼び出し元のパスを指定します。

③　ビューファイルの設定

new.html.haml

    -# config/breadcrumbs.rbに定義したmypageを呼び出し
    - breadcrumb :loginer
    -# 下記を記述した箇所にパンくずリストが表示される。
    = breadcrumbs separator: " &rsaquo; "

・ separator ← パンくずの区切り文字を指定。「&rsaquo」は出力されると「›」になります。

パンくずリストの表示は、一般的に全ページに表示する事ができるようlayout/breadcrumbs.html.hamlに記載する事が多いと思いますが、今回は全部のページではなく一部のページに投稿させたいので、部分テンプレート化して呼び出しています。

layout/_breadcrumbs.html.haml

.breadcrumbs
  = breadcrumbs pretext: "",separator: " &rsaquo; ", class: "breadcrumbs-list"

実際に記入するとこのように表示されます

new.html.haml

    - breadcrumb :loginer
    = breadcrumbs separator: " &rsaquo; "

④　親の設定

config.breadcrumbs.rbのcrumb、endの間にparentを設定する事で親を設定する事ができます。商品詳細ページを親に設定して商品編集ページをリストに表示させましょう。

config.breadcrumbs.rb

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

crumb :shower do
  link "商品詳細ページ", item_path
end

crumb :editer do
  link "商品編集ページ", edit_item_path
  parent :shower
end

するとこのような表示になります。

以上がパンくず機能の実装のやり方です。

今回参考にさせていただいた記事
https://qiita.com/Azure0701/items/16de34a0010eb7f05d89
https://www.asobou.co.jp/blog/web/breadcrumb-list
https://qiita.com/you8/items/d2d37a745060b79c112f

パンくず機能