まえがき

みなさんパンくずリストは知っていますでしょうか。どこかで耳にした方もいるかもしれません。ちょっと変わった名前ですがbreadcrumbsと書くとかっこいいですね。このパンくずリストですが名前によらずとても便利な物なのでぜひ作り方を覚えましょう。

パンクズリストとは

ホーム＞おすすめ一覧＞家電製品
のような現在いる位置を視覚的に見ることができる物です。大抵画面上部に用いられることが多いです。
これはよくSEO対策的に使われることが多く、SEOに詳しい人にとってはおなじみなのではないでしょうか。

パンクズリストを作るメリットは以下の通りですです。

設置するメリット

ユーザビリティーの向上

パンくずリストを用いることで視覚的に現在いる位置を構造的に見ることができるので、そのwebアプリを使うユーザーがサイト内で迷子になることがなくなり、ストレスなくサイト内巡回をすることができます。また、様々なユーザーはみなトップページからサイトに訪れるわけではなくそれぞれ必要なページに直接飛んでくるので、本当に目的のページを開けているか確認をするという使い方もされます。

検索ページに表示される時がある

googleなどで検索をかけた時にページの説明欄にパンクズリストが表示されているのを見たことがある人もいるかもしれません。パンくずが表示されていると検索ページにいるだけでサイト内の構造を見ることができ、飛びたいページの上層カテゴリも表示されるのでクリック率対策になります。

内部SEO対策

googleはページ内を評価する際に一つ一つのページに飛びリンクの文字などを認識しそのページが有用なのかどうかを判断しています。その際にパンクズリストがあるとその作業がスムーズになるために高く評価されSEO対策に効くとされています。

設置方法

では本題です。今回はRailsでの設置になります。
RailsではGretelというgemを用意してくれています。

GitHub
https://github.com/lassebunk/gretel

gem "gretel"

このようにgemfileの一番下に追加します。

$ bundle install

そしてコマンドを打ち、設定ファイルを作っていきます。

$ rails generate gretel:install

すると以下のようなファイルが生成されます。

config/breadcrumbs.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`).

今回はマイページを作っていきたいのでrootを設定した後にマイページを表記していきます。

config/breadcrumbs.rb

# ルート
crumb :root do
  link "ホーム", root_path
end

# マイページ
crumb :mypage do
  link "マイページ", mypage_users_path
end

crumbs :mypage doはなんという名前でhtml上に表記し呼び出すかを書きます、後々使います。
linkはパンクズリストに表示される文字とそのページがどこのパスに属しているかを表記します。
パンクズリストはリンクになっている場合が多いのでそのリンクはここで設定します。

ではビューファイルに表記していきます

mypage.html.haml

- breadcrumb :mypage
= breadcrumbs pretext: "You are here:",separator: " &rsaquo; "

- breadcrumb :mypageはconfig/breadcrumbs.rbに定義したmypageを呼び出すことができ、
= breadcrumbs pretext: "You are here:",separator: " &rsaquo; "
で表示したい位置を指定することができます。

&rsaquo;という表記はHTML特殊文字と言われる物で＞の部分を表記しています。

また親子の関係を示すために以下のような表記方法もあります

profile.haml.haml

# プロフィール
crumb :profile do
  link "プロフィール", edit_user_path
  parent :mypage
end

parentと表記しdoとendで挟むことによりcrumb :profile doの親を書くことができます。
この表記だと次のような表示になります。

ホーム > マイページ > プロフィール
といった感じでしょうか。

まとめ

いかがだったでしょうか、今回書いて行ったパンクズリストは企業としても重宝する技術ですし、習得していて損はないのではないでしょうか。ぜひポートフォリオなどにも実装してみてください！

【Rails】パンクズリストの作り方