すでにメンバーの場合は

無料会員登録

GitHubアカウントで登録 Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

登録がまだの方はこちらから

Pikawakaにログイン

GitHubアカウントでログイン Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

Rails

【Rails】 gretelを使ってパンくずリストを作成しよう

ぴっかちゃん
ぴっかちゃん

gretelとはパンくずリストを簡単に実装できるgemです。

アプリにパンくずリストをつけたいが、自分では難しいという方にぴったりなgemの紹介をする記事です。
gretelというgemを使うことにより簡単にパンくずリストを表示させることができます。

完成アプリ

サンプルアプリを使いながらパンくずリストを表示させるまでの流れを確認していきましょう。

パンくずリストとは?

ユーザーがサイトを使用する際、自分が今サイトのどの場所にいるのかというのをわかりやすくするための表示のことを「パンくずリスト」と言います。
例えばpikawakaだとこのようなサイト構成になっています。

サイト構成

ですので一つ一つの記事の上には下のようなパンくずリストが表示されています。

パンくず

パンくずの語源は童話「ヘンゼルとグレーテル」の中で主人公たちが森で迷子にならないよう、パンくずを落としながら進んでいったというのが由来になっています。

今回使うgretelというgemの名前はこの「グレーテル」から名付けられていると考えられます。

gretelの使い方

この章では実際にアプリを使いながらgretelの使い方を解説していきます。

サンプルアプリケーションを用意しよう

それでは今回使用するサンプルアプリを作成していきましょう。
ターミナルで下記のコマンドを実行してください。

ターミナル | 新規アプリの作成
1
2
rails _5.2.1_ new gretel_app -d mysql
cd gretel_app

次にscaffoldを使ってユーザー登録機能を実装します。

ターミナル | スニペットの説明
1
2
rails g scaffold User name:string
rails db:create && rails db:migrate

gemをインストールしよう

それでは次にGemfileにgretelを追加しインストールしていきます。
Gemfileの一番下に下記のコードを追記してください。

Gemfile | gemの追加
1
gem 'gretel'

次にbundle installコマンドを実行し、gemをインストールします。

ターミナル | gemのインストール
1
bundle install

rails sコマンドでサーバーを立ち上げ、http://localhost:3000/usersにアクセスし、下記の画面になっていれば準備完了です。

トップページ

gretelをインストールしよう

それでは次にgretelをインストールします。
ターミナルで下記のコマンドを実行します。

ターミナル | gretelのインストール
1
2
3
4
rails g gretel:install
# 下のコードが出力されていればインストール成功
Running via Spring preloader in process 29890
      create  config/breadcrumbs.rb

configフォルダにbreadcrumbs.rbが作成されていれば準備はOKです。

breadcrumbs.rb

設定ファイルを編集しよう

次に先ほどのコマンドで作成されたファイルを編集していきます。
config/breadcrumbs.rbを開きましょう。
このファイルはパンくずリストとして表示されるそれぞれのパンくずを設定するファイルになります。

config/breadcrumbs.rb | 設定ファイルの確認
1
2
3
crumb :root do
  link "Home", root_path
end

ファイルを開くと上のようになっているのが確認できます。
現在はルートページのパンくずの設定のみ記述されています。
それぞれの部分の見方を確認してみましょう。

config/breadcrumbs.rb | 設定ファイルの見方
1
2
3
4
crumb "ページ名" do
  link "ビューに表示される名前", "リンクされるURL"
  parent :親のページ名(現在の前のページ)
end

ページ名はここで設定したパンくずの名前です。
他のパンくず設定で親を定義するときや、ビューファイルでパンくずを呼び出す際の名前です。
linkの部分ではパンくずリストに表示されるテキストとリンク先を設定します。
parentの部分では現在ここで作ったページの親ページは何かを設定します。
rootの設定ではrootが一番上の親になるのでこの部分は記述しません。

パンくず

上の画像の例だと「Rails」の親は「HOME」、「【Rails】 ransackを使って検索機能gついたアプリを作ろう!」の親は「Rails」になります。

今回はユーザー登録ページ、ユーザー詳細ページ、ユーザー編集ページのビューファイルにパンくずリストを表示します。
それぞれのページへのリンクの作成しながら、どのように記述すれば良いかを確認していきましょう。

ユーザー登録ページの設定

まずはユーザー登録ページへのパンくずリストを表示するための記述をしていきます。

ユーザー登録ページ

先ほどのrootの定義の下に下記のコードを追記します。

config/breadcrumbs.rb | ユーザー登録のパンくず設定
1
2
3
4
5
6
7
8
crumb :root do
  link "Home", root_path
end

# 以下にコードを追加する
crumb :user_new do
end

crumbの部分はこの設定の名前なので「user_new」としました。
この名前はわかりやすければなんでも構いません。
まずはlinkの部分を記述していきます。

config/breadcrumbs.rb | 設定ファイルの見方
1
2
3
4
crumb :user_new do
link "ビューに表示される名前", "リンクされるURL"
parent :親のページ名(現在の前のページ) end

linkは実際にパンくずリストに表示される部分の設定です。
link_toメソッドのようにリンクを定義すると部分と考えるとわかりやすいかもしれません。

今回は「ユーザー登録」と表示させ、クリックした時にはusersコントローラーのnewアクションを動かしたいので、rails routesコマンドを使ってパスを調べます。

rails_routes

するとURI Patternでは/users/new、Prefixではnew_userと書けば良いということがわかります。
今回はPrefixを使いnew_user_pathとしましょう。

config/breadcrumbs.rb | ユーザー登録のパンくず設定
1
2
3
crumb :user_new do
link "ユーザー登録", new_user_path
end

続いて親の指定です。

config/breadcrumbs.rb | 設定ファイルの見方
1
2
3
4
crumb :user_new do
  link "ユーザー登録", new_user_path
parent :親のページ名(現在の前のページ)
end

ユーザー登録ページへのリンクはユーザー一覧のページに貼られています。

ユーザー一覧

ですのでユーザー登録ページの親はユーザーの一覧、つまりusersコントローラーのindexアクションになります。

今回の親はHOMEとなっています。

ユーザー登録ページ
今回はこの一覧ページをHOMEとしたいのでルーティングでrootとして設定しましょう。

routes.rbを編集してください。

config/routes.rb | rootの設定
1
2
3
4
Rails.application.routes.draw do
root "users#index"
resources :users end

これでルートの設定ができたので、breadcrumbs.rbのparentの部分は最初から定義されているrootを記述します。

config/breadcrumbs.rb | ユーザー登録のパンくず設定
1
2
3
4
crumb :user_new do
  link "ユーザー登録", new_user_path
parent :root
end

これでユーザー投稿ページのパンくずの設定は完了です。

config/breadcrumbs.rb | ここまでの完成コード
1
2
3
4
5
6
7
8
9
crumb :root do
  link "Home", root_path
end

# 追記したコード
crumb :user_new do
link "ユーザー登録", new_user_path
parent :root
end

ユーザー詳細ページの設定

これと同じように詳細ページの設定を作っていきます。

ユーザー詳細ページ

先ほどの記述の後に下記のコードを追記します。

config/breadcrumbs.rb | ユーザー詳細のパンくず設定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
crumb :root do
  link "Home", root_path
end

crumb :user_new do
  link "ユーザー登録", new_user_path
  parent :root
end

# 以下にコードを追加する
crumb :user_show do
link "ユーザー詳細", user_path
parent :root
end

crumbの部分は今回はusersコントローラーのshowアクションなので「user_show」としました。
今回の親もHOMEなので「parent :root」としました。

詳細ページ

linkの部分は前と同じようにrails routesコマンドでパスを確認します。

rails_routes

今回もPrefixを使いパスはuser_pathとしました。
ですが、今回はURI Patternが/users/:idとなっているため、ユーザーのidをパスに含める必要があります。

そういう時は下記のようにブロック変数を使って記述をします。

config/breadcrumbs.rb | ユーザー詳細のパンくず設定
1
2
3
4
crumb :user_show do |user|
link "ユーザー詳細", user_path(user)
parent :root end

またユーザーの詳細ページなのでリンクの表示の部分は式展開を使うことで実際のユーザー名を表示させることができます。
linkの部分を下記のように書き換えます。

config/breadcrumbs.rb | ユーザー詳細のパンくず設定
1
2
3
4
crumb :user_show do |user|
link "#{user.name}さんの詳細", user_path(user)
parent :root end

このようにレコードの情報を使いたい場合はブロック変数を使ってあげます。
このブロック変数の中身はこのパンくずをビューファイルで呼び出すときや、子となるパンくずの設定内で定義してあげます。
詳しい書き方は後述します。

これでユーザー詳細ページのパンくずの設定は完了です。

config/breadcrumbs.rb | ここまでの完成コード
1
2
3
4
5
6
7
8
9
10
11
12
13
14
crumb :root do
  link "Home", root_path
end

crumb :user_new do
  link "ユーザー登録", new_user_path
  parent :root
end

# 追記したコード
crumb :user_show do |user|
link "#{user.name}さんの詳細", user_path(user)
parent :root
end

ユーザー編集ページの設定

次にユーザー編集ページの設定です。

ユーザー編集ページ

先ほどの記述の後に下記のコードを追記します。

config/breadcrumbs.rb | ユーザー編集のパンくず設定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
crumb :root do
  link "Home", root_path
end

crumb :user_new do
  link "ユーザー登録", new_user_path
  parent :root
end

crumb :user_show do |user|
  link "#{user.name}さんの詳細", user_path(user)
  parent :root
end

# 以下にコードを追加する
crumb :user_edit do
link "ユーザー編集"
parent :user_show
end

今回の親はユーザー詳細ページなので「parent :user_show」としました。

ユーザー編集ページ

リンクの部分はどのように書いたらよいでしょうか?
この編集ページは最後の階層のページとなります。

ユーザー編集ページ

リンクがないので下の画像のようになり、現在のページの名前だけ表示されれば良いのでリンクは必要ありません。

編集ページ

ですので、link "ユーザー編集"とのみ記入し、このページへ飛ぶためのパスは記入しません。
今回の親ページはユーザー詳細ページなのでparentの部分は前回作成したcrumb :user_show do |user|の部分のuser_showを指定してあげます。

ただしこのユーザー詳細を呼び出す際、「user_show」のパンくずの設定内でユーザーの情報が入ったブロック変数を定義しているので、この変数に代入されるuserのインスタンスを渡してあげる必要があります。

config/breadcrumbs.rb | ユーザー詳細のパンくず設定
1
2
3
4
crumb :user_show do |user| # このブロック変数「user」の中身を定義する必要がある
link "#{user.name}さんの詳細", user_path(user) parent :root end

crumbとparentの部分を下記のように編集します。

config/breadcrumbs.rb | ユーザー編集のパンくず設定
1
2
3
4
crumb :user_edit do |user|
link "ユーザー編集"
parent :user_show, user
end

「:user_edit」で定義した「user」の中身はこのパンくずを呼び出すビューファイルで定義します。
書き方は後述します。
parentの部分でuserを渡してあげることにより、このブロック変数「user」の中身が詳細ページの「:user_show」のパンくずのブロック変数の値として使われます。

では編集ページのパンくず設定の中で使っているブロック変数の中身はいつセットされるのでしょうか?
それはこの後のビューファイルを編集するときに解説いたします。

これでユーザー編集ページのパンくずの設定は完了です。
全てのパンくずの設定ができました。

config/breadcrumbs.rb | 完成コード
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
crumb :root do
  link "Home", root_path
end

crumb :user_new do
  link "ユーザー登録", new_user_path
  parent :root
end

crumb :user_show do |user|
  link "#{user.name}さんの詳細", user_path(user)
  parent :root
end

# 追記したコード
crumb :user_edit do |user|
link "ユーザー編集"
parent :user_show, user
end

実際のアプリにパンくずリストを表示させよう

この章では、パンくずリストを表示するための流れを解説します。

ビューファイルを編集しよう

それでは先ほどの章で作成した設定ファイルをビューファイルで呼び出す記述をしていきます。
パンくずリストを表示させたい箇所に下記のコードを記述します。

表示させたいファイル | 表示させるためのコード
1
<%= breadcrumbs separator: "区切り文字" %>

区切り文字の部分には下の画像の囲ってある部分のように、パンくずで表示される文字を区切る部分に入る文字を指定します。
区切り文字

今回は「>」で区切りたいのと、文字の間に半角スペースを開けたいので下記のように記述します。

表示させたいファイル | 表示させるためのコード
1
<%= breadcrumbs separator: " > " %>

このままだと>はHTMLの閉じタグの意味を持つのであまりよろしくありません。
ですので今回は特殊文字の&rsaquo;を使用します。

表示させたいファイル | 表示させるためのコード
1
<%= breadcrumbs separator: " &rsaquo; " %>

今回は全てのページにパンくずリストを表示するので先ほどのコードをapplication.html.erbに記述をします。

app/views/layouts/application.html.erb | パンくずリスト表示の記述
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
  <head>
    <title>GretelTest</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
<%= breadcrumbs separator: " &rsaquo; " %>
<%= yield %> </body> </html>

そして、上記の場所に表示されるパンくずを下記のコードのように各ビューファイルに指定する必要があります。

各ビューファイル | ビューファイルの表示方法
1
<% breadcrumb :設定したcrumb %>

それでは「ユーザー登録ページ、ユーザー詳細ページ、ユーザー編集ページ」の指定場所をみていきましょう。

ユーザー登録ページ

ユーザー登録ページにbreadcrumbs.rbで定義したパンくずリストを呼び出すには下記のように記述をします。

app/views/users/new.html.erb | パンくずリストの呼び出し
1
2
3
4
5
6
7
<% breadcrumb :user_new %>
<h1>New User</h1> <%= render 'form', user: @user %> <%= link_to 'Back', users_path %>

新規登録ページのcrumbの部分はuser_newとしたのでこのように記述します。

config/breadcrumbs.rb | 新規登録ページの設定
1
2
3
4
crumb :user_new do
link "ユーザー登録", new_user_path parent :root end

このコードは表示したい場所に書く必要はありません。
なぜなら表示したい箇所にはapplication.html.erb内に<%= breadcrumbs separator: " &rsaquo; " %>を記述しているためです。

app/views/layouts/application.html.erb | パンくずリストを表示する記述
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
  <head>
    <title>GretelTest</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
<%= breadcrumbs separator: " &rsaquo; " %>
<%= yield %> </body> </html>

今回は1番上に記述しました。
では実際に表示されているか、またリンクでトップページに飛べるか確認してみましょう。

パンくずリスト確認

このようにリストが表示され、トップページにも戻ることができました。

ユーザー詳細ページ

では次に詳細ページに記述をしていきます。

app/views/users/show.html.erb | パンくずリストの呼び出し
1
2
3
4
5
6
7
8
9
10
11
<% breadcrumb :user_show %>
<p id="notice"><%= notice %></p> <p> <strong>Name:</strong> <%= @user.name %> </p> <%= link_to 'Edit', edit_user_path(@user) %> | <%= link_to 'Back', users_path %>

それでは表示されるか確認をしてみましょう。
詳細ページを表示させるために、一度ユーザーの登録をしてください。
では表示をさせてみます。

すると下記のようなエラーが出てしまいます。

エラーの確認

エラー文を見るとuserがnilと言われてしまっているので、名前を表示させるためusersテーブルのレコードが入ったインスタンスが必要なようです。
ですのでどのパンくずを呼び出すのかを記述している場所にこのインスタンスを渡してあげます。

今回ユーザー情報が入っているのはコントローラーで定義された@userなので下記のように記述します。

app/views/users/show.html.erb | パンくずリストの呼び出し
1
2
3
4
5
6
7
8
9
10
11
<% breadcrumb :user_show, @user %>
<p id="notice"><%= notice %></p> <p> <strong>Name:</strong> <%= @user.name %> </p> <%= link_to 'Edit', edit_user_path(@user) %> | <%= link_to 'Back', users_path %>

下記の図のような流れでインスタンスが受け渡されます。

インスタンスの受け渡し

編集後、表示を確認するとエラーが消えて、リンクの部分に名前が表示されているのが確認できます。

詳細ページ

ユーザー編集ページ

では最後に編集ページに記述をしていきます。

app/views/users/edit.html.erb | パンくずリストの呼び出し
1
2
3
4
5
6
7
8
9
10
11
<% breadcrumb :user_edit, @user %>
<p id="notice"><%= notice %></p> <p> <strong>Name:</strong> <%= @user.name %> </p> <%= link_to 'Edit', edit_user_path(@user) %> | <%= link_to 'Back', users_path %>

それでは表示されるか確認をしてみましょう。

編集ページ

このように、しっかりと詳細ページの子として表示されています。
今回の@userは下記の流れで渡されていきます。

インスタンスの渡され方

完成コード

これでこのアプリでのパンくずリストの設定は完了です。
簡単にこのようなパンくずリストを表示することができました。

完成アプリ

最後にbreadcrumbs.rbの完成コードを確認しておきましょう。

config/breadcrumbs.rb | 完成コード
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
crumb :root do
  link "Home", root_path
end

crumb :user_new do
  link "ユーザー登録", new_user_path
  parent :root
end

crumb :user_show do |user|
  link "#{user.name}さんの詳細", user_path(user)
  parent :root
end

crumb :user_edit do |user|
  link "ユーザー編集"
  parent :user_show, user
end

この記事のまとめ

  • パンくずリストとはユーザーに今自分がサイトのどの位置にいるかをわかりやすくするためのリストです。
  • railsではgretelというgemを使うと簡単に実装することができます。
  • アプリを使いやすくするためにもぜひ実装しておきましょう。

3

わかった!