パンくずリストを追加

パンくずリストとは

パンくずリストとは、Webサイトを訪れたユーザが今どこにいるかを視覚的にわかりやすくした誘導表示のことを言います。
基本的にWebページの階層順にリンクがリストアップされており、Webページの上部箇所に表示されているケースが多い。

パンくずリストの種類

位置型パンくずリスト

位置型パンくずリストとは自身が閲覧しているページが階層構造内のどこに位置しているかを示します。
そのページにたどり着く経路が異なる場合でも、同じページであれば表示されるリストも同じものになります。
ユーザ自身の現在位置を把握しやすいメリットがあり、階層構造に広がりのあるサイトに効果的です。

属性型パンくずリスト

位置型パンくずリストは、そのページにたどり着く経路が異なる場合でも、同じページであれば同じものが表示される「静的」なものでしたが、属性型パンくずリストは、ユーザの操作によって変化します。
サイト内構成の現在の位置を示すのではなく、閲覧しているページがWebサイト上のどのカテゴリー（属性）に分類されているのかを示します。
検索フィルタのような働きをし、ユーザが複数の選択肢を経て表示されるようなサイトに用いられる。

パス型パンくずリスト

現在閲覧しているページにどのようにしてたどり着いたのかを示します。ページへの経路が異なる場合、表示されるリストも変化する動的なパンくずリストです。
ブラウザの「戻る」ボタンや履歴機能と同じ役割であることから「履歴型のパンくずリスト」とも呼ばれています。また、同様の理由で機能が重複してしまうことから、最近のWebサイトではあまり見かけません。

パンくずリストのメリット

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

まずWebサイトにおけるユーザビリティとは「使いやすさ」「使い勝手のよさ」のことを指します。つまり使いやすいサイトほど、ユーザビリティが高いということになる。
ページ数の多いサイトになると構造が複雑になり、ユーザ自身が今サイト内のどこにいるか分かりにくくなることがあるが、パンくずリストを設置することで「自分が今サイト内のどこにいるのか」や「サイトの構造」を認識しやすくなり、結果として使いやすさを高めることができる。

・検索エンジンが効率的にクローリングできる

Google検索などの検索エンジンにヒットさせるには、まずはクローラーと呼ばれる情報収集ロボットに自身のサイトの情報を収集（クローリング）してもらう必要がある。

パンくずリストを設置することは、そのサイトが体系的に整理されることとなります。するとクローラーもパンくずリストによって効率的にそのサイト内のカテゴリーをたどることができるようになるため、サイトの全体像が把握しやすくなり、効率的なクローリングを期待することができる。

パンくずリストを導入

railsでパンくずを導入するには「gretel」というgemを使うと便利

Gemfile

gem 'gretel'

$ bundle install

その後起動コマンドを入力

$ rails generate gretel:install

このコマンドを入力すると、config配下にbreadcrumb.rbというファイルが生成される。
書き方の例

crumb crumsの名前を指定 do
  link '表示させたい文字', その文字のリンク先
  parent 親の指定
end

今回の場合

breadcrumd.rb

#先頭ページ(先頭ページはparentは指定しない。)
crumb :admin_dashboard do
  link '<i class="fa fa-dashboard"></i> Home'.html_safe, admin_dashboard_path
end

#タグ一覧ページ
crumb :admin_tags do
  link 'タグ', admin_tags_path
  parent :admin_dashboard
end

#タグ編集個別ページ
crumb :edit_admin_tag do |tag|
  link 'タグ編集', edit_admin_tag_path(tag)
  parent :admin_tags
end

views/layouts/admin.html.slim

main.content-wrapper
        section.content-header
          h1
            = yield 'content-header'
          == breadcrumbs style: :ol, class: 'breadcrumb'
          #ここにパンくずリストが表示される

各ページでパンくずを出すところを指定していく。 ※各ページでは=は使わないです。ビューとして表示させません。
app/views/admin/tags/index.html.slim

= content_for 'content-header' do #記載する場所で迷ったのでこの文も追記しておく
  | タグ

- breadcrumb :admin_tags

app/views/admin/tags/edit.html.slim

= content_for 'content-header' do
  | タグ編集

- breadcrumb :edit_admin_tag, @tag

参考文献

www.asobou.co.jp

qiita.com