はじめに

こんにちは！大ちゃんの駆け出し技術ブログです。

本日はパンくずリスト gretelというRailsのgemについて紹介したいと思います！

名前がパンくず！？読み方は”グレてる”！？

本当に読み方が印象的だなと思いますwww

ですが、こちらのパンくずリストは皆さんもウェブサイトでみたことがあるものだと思います！では説明をしていきます！

gretelの概要

gemのgretelは公式のREADMEで以下のように説明されています。

Gretel is a Ruby on Rails plugin that makes it easy yet flexible to create breadcrumbs. It is based around the idea that breadcrumbs are a concern of the view, so you define a set of breadcrumbs in config/breadcrumbs.rb (or multiple files; see below) and specify in the view which breadcrumb to use. Gretel also supports semantic breadcrumbs (those used in Google results).

これを日本語訳すると以下のようになります！（翻訳の仕事をしたことはないので多めにみていただけると幸いですmm）

GretelはRuby on Railsのプラグインで、パンくずリストの作成を簡単かつ柔軟に行うことができます。パンくずリストはビューに基づいているので、config/breadcrumbs.rb (または複数のファイル。以下を参照) でパンくずリストのセットを定義し、どのパンくずリストを使うかをビューで指定します。Gretelはセマンティックパンくずリスト (Google の結果で使用されるパンくずリスト) もサポートしています。

めちゃくちゃ分かりにくい訳でごめんなさいm( _ _ )m

最後の文の訳にのみ触れておきます。なぜなら、パンくずリストが何であるかがわかるからです。

Gretelはセマンティックパンくずリスト (Google の結果で使用されるパンくずリスト) もサポートしています。

この文で注目して欲しい部分は「Google の結果で使用されるパンくずリスト」の部分です。

実はパンくずリストはGoogleの検索結果のページにもあります。例えば、「Amazon Prime」と検索してみましょう。

どれがパンくずリストなのか分かりますか？実はこちらがパンくずリストです。

Webページのタイトルの部分の上にある小さい文字の部分です。 Google検索すると必ず表示されるので、絶対に見たことがあるはずです。

このリストは何を意味しているのかは直感的にわかるでしょう。回答は左のページ(www.amazon.co.jp)は右のページ(Prime-Video)の親ページということになります。 (Amazon Primeは元々あったAmazonのHomeページ(親ページ)に付け足されたページ(子ページ)ということですね)

このようにパンくずリストはページごとの親子関係をリストで表示するという機能を持っています。

gretelのインストール手順

では実際にRailsでgretelをインストールします。なお、本記事で取り扱うサンプルアプリのRails、Rubyのバージョンは以下になります。

Rails 6.0.3.4
ruby 2.6.5

ではさっそくアプリを作成するディレクトリに移り、$ Rails newをつかって初期アプリを作成しましょう！本記事ではscaffoldを使用して雛形のアプリを作成しましょう。

$ cd 任意のディレクトリ
$ rails new scaffold_gretel
$ cd scaffold_gretel
$ rails  db:create
$ rails generate scaffold user name:string email:string
$ rails db:migrate

今回はroot_pathをユーザー一覧画面とします。そのため、config/routes.rbを編集します。

Rails.application.routes.draw do
  root to: 'users#index'
  resources :users
end

念のため、サーバーを起動しルートパスがユーザー一覧画面となっているか確認してください！

次にGemfileにgretelを追加し、bundle installします。

Gemfile

gem 'gretel'

ターミナル

$ bundle install
・
・
Fetching gretel 4.2.0
Installing gretel 4.2.0
・
・
Bundle complete!

次にgenerateコマンドでインストールしたら、config/breadcrumbs.rbが作成されます。

$ rails generate gretel:install
      create  config/breadcrumbs.rb

最初のインストール手順は終了です。

実装方法

いよいよ実装に移ります！

まず、先程作成したの中身を見てみましょう！

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`).

上のファイルに追記します。

crumb :root do
  link 'Home', root_path
end
crumb :users do
  link "ユーザ一覧", users_path
end
crumb :user_show do |user|
  link user.name, user_path(user)
  parent :users
end

追記したファイルのそれぞれの意味は後ほど説明します。

ビューにパンくずリスト表示部分を追加します。まず、application.html.erbに以下の記述を足してください。

scaffold_gretel/app/views/layouts/application.html.erb

  <body>
    <%= breadcrumbs separator: " &rsaquo; " %> # 追記
    <%= yield %>
  </body>

そして、以下の記述をルートパスであるユーザー一覧画面のビューに記載しましょう。

scaffold_gretel/app/views/layouts/application.html.erb

<% breadcrumb :users %>

そうして再度ルートパスを読み込むと、リンクタグが表示されたかと思います。

まずroot_pathである"Home"が親ページとして表示され、その子ページとして"ユーザー一覧"が表示されているかと思います。 breadcrumb :usersの記載は:usersと対応したconfig/breadcrumbs.rbの以下の部分を表示しています。

crumb :users do
  link "ユーザ一覧", users_path
end

これはlink_toではなくlinkですが、意味はほとんど同じです。テキストがユーザー一覧でユーザー一覧画面のリンク(users_path)を含んでいます。

次にユーザー詳細画面であるscaffold_gretel/app/views/users/show.html.erbにも追記します。

scaffold_gretel/app/views/users/show.html.erb

<% breadcrumb :user, @user %>

ユーザー詳細画面に移動しましょう。

このパンくずリストを表示しているのは以下の部分です。

crumb :user_show do |user|
  link user.name, user_path(user)
  parent :users
end

<% breadcrumb :user, @user %>の@userは上の記載のuserの値となるので、テキストがuser.nameでユーザー一覧画面のリンク(user_path(user))を含んでいます。

また、parent :usersと記載したおうに親ページのユーザー一覧のリンクも表示されています。こちらのリンクをクリックするとユーザー一覧画面に遷移できます。

最後に

以上ざっくりとパンくずリストについて説明しました。導入するのはとても簡単なのでぜひ使ってみてください！

以上、大ちゃんの駆け出し技術ブログでした！

大ちゃんの駆け出し技術ブログ

RUNTEQ受講生のかわいいといわれるアウトプットブログ

【Gem】パンくずリスト "gretel"

はじめに

gretelの概要

gretelのインストール手順

実装方法

最後に