【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の一番下に下記のコードを追記してください。
1
gem 'gretel'
次にbundle installコマンドを実行し、gemをインストールします。
1
bundle install
rails sコマンドでサーバーを立ち上げ、http://localhost:3000/usersにアクセスし、下記の画面になっていれば準備完了です。
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です。
設定ファイルを編集しよう
次に先ほどのコマンドで作成されたファイルを編集していきます。
config/breadcrumbs.rbを開きましょう。
このファイルはパンくずリストとして表示されるそれぞれのパンくずを設定するファイルになります。
1
2
3
crumb :root do
link "Home", root_path
end
ファイルを開くと上のようになっているのが確認できます。
現在はルートページのパンくずの設定のみ記述されています。
それぞれの部分の見方を確認してみましょう。
1
2
3
4
crumb "ページ名" do
link "ビューに表示される名前", "リンクされるURL"
parent :親のページ名（現在の前のページ）
end
ページ名はここで設定したパンくずの名前です。
他のパンくず設定で親を定義するときや、ビューファイルでパンくずを呼び出す際の名前です。
linkの部分ではパンくずリストに表示されるテキストとリンク先を設定します。
parentの部分では現在ここで作ったページの親ページは何かを設定します。
rootの設定ではrootが一番上の親になるのでこの部分は記述しません。
上の画像の例だと「Rails」の親は「HOME」、「【Rails】 ransackを使って検索機能がついたアプリを作ろう！」の親は「Rails」になります。
今回はユーザー登録ページ、ユーザー詳細ページ、ユーザー編集ページのビューファイルにパンくずリストを表示します。
それぞれのページへのリンクの作成しながら、どのように記述すれば良いかを確認していきましょう。
ユーザー登録ページの設定
まずはユーザー登録ページへのパンくずリストを表示するための記述をしていきます。
先ほどのrootの定義の下に下記のコードを追記します。
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の部分を記述していきます。
1
2
3
4
crumb :user_new do
link "ビューに表示される名前", "リンクされるURL"
parent :親のページ名（現在の前のページ）
end
linkは実際にパンくずリストに表示される部分の設定です。
link_toメソッドのようにリンクを定義すると部分と考えるとわかりやすいかもしれません。
今回は「ユーザー登録」と表示させ、クリックした時にはusersコントローラーのnewアクションを動かしたいので、rails routesコマンドを使ってパスを調べます。
するとURI Patternでは/users/new、Prefixではnew_userと書けば良いということがわかります。
今回はPrefixを使いnew_user_pathとしましょう。
1
2
3
crumb :user_new do
link "ユーザー登録", new_user_path
end
続いて親の指定です。
1
2
3
4
crumb :user_new do
link "ユーザー登録", new_user_path
parent :親のページ名（現在の前のページ）
end
ユーザー登録ページへのリンクはユーザー一覧のページに貼られています。
ですのでユーザー登録ページの親はユーザーの一覧、つまりusersコントローラーのindexアクションになります。
今回の親はHOMEとなっています。
今回はこの一覧ページをHOMEとしたいのでルーティングでrootとして設定しましょう。
routes.rbを編集してください。
1
2
3
4
Rails.application.routes.draw do
root "users#index"
resources :users
end
これでルートの設定ができたので、breadcrumbs.rbのparentの部分は最初から定義されているrootを記述します。
1
2
3
4
crumb :user_new do
link "ユーザー登録", new_user_path
parent :root
end
これでユーザー投稿ページのパンくずの設定は完了です。
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
ユーザー詳細ページの設定
これと同じように詳細ページの設定を作っていきます。
先ほどの記述の後に下記のコードを追記します。
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コマンドでパスを確認します。
今回もPrefixを使いパスはuser_pathとしました。
ですが、今回はURI Patternが/users/:idとなっているため、ユーザーのidをパスに含める必要があります。
そういう時は下記のようにブロック変数を使って記述をします。
1
2
3
4
crumb :user_show do |user|
link "ユーザー詳細", user_path(user)
parent :root
end
またユーザーの詳細ページなのでリンクの表示の部分は式展開を使うことで実際のユーザー名を表示させることができます。
linkの部分を下記のように書き換えます。
1
2
3
4
crumb :user_show do |user|
link "#{user.name}さんの詳細", user_path(user)
parent :root
end
このようにレコードの情報を使いたい場合はブロック変数を使ってあげます。
このブロック変数の中身はこのパンくずをビューファイルで呼び出すときや、子となるパンくずの設定内で定義してあげます。
詳しい書き方は後述します。
これでユーザー詳細ページのパンくずの設定は完了です。
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
ユーザー編集ページの設定
次にユーザー編集ページの設定です。
先ほどの記述の後に下記のコードを追記します。
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のインスタンスを渡してあげる必要があります。
1
2
3
4
crumb :user_show do |user| # このブロック変数「user」の中身を定義する必要がある
link "#{user.name}さんの詳細", user_path(user)
parent :root
end
crumbとparentの部分を下記のように編集します。
1
2
3
4
crumb :user_edit do |user|
link "ユーザー編集"
parent :user_show, user
end
「:user_edit」で定義した「user」の中身はこのパンくずを呼び出すビューファイルで定義します。
書き方は後述します。
parentの部分でuserを渡してあげることにより、このブロック変数「user」の中身が詳細ページの「:user_show」のパンくずのブロック変数の値として使われます。
では編集ページのパンくず設定の中で使っているブロック変数の中身はいつセットされるのでしょうか？
それはこの後のビューファイルを編集するときに解説いたします。
これでユーザー編集ページのパンくずの設定は完了です。
全てのパンくずの設定ができました。
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の閉じタグの意味を持つのであまりよろしくありません。
ですので今回は特殊文字の›を使用します。
1
<%= breadcrumbs separator: " › " %>
「<」や「& 」などはHTMLタグと認識されてしまったり、表示したい文字として認識されず表示されない場合があります。
その際に、使うのが特殊文字です。
「&」で始まり「;」で終わる書き方で、その中に表示させたい文字に対応するコードを記述します。
今回は全てのページにパンくずリストを表示するので先ほどのコードを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: " › " %>
<%= yield %>
</body>
</html>
そして、上記の場所に表示されるパンくずを下記のコードのように各ビューファイルに指定する必要があります。
1
<% breadcrumb :設定したcrumb名 %>
それでは「ユーザー登録ページ、ユーザー詳細ページ、ユーザー編集ページ」の指定場所をみていきましょう。
ユーザー登録ページ
ユーザー登録ページにbreadcrumbs.rbで定義したパンくずリストを呼び出すには下記のように記述をします。
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としたのでこのように記述します。
1
2
3
4
crumb :user_new do
link "ユーザー登録", new_user_path
parent :root
end
このコードは表示したい場所に書く必要はありません。
なぜなら表示したい箇所にはapplication.html.erb内に<%= breadcrumbs separator: " › " %>を記述しているためです。
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: " › " %>
<%= yield %>
</body>
</html>
今回は1番上に記述しました。
では実際に表示されているか、またリンクでトップページに飛べるか確認してみましょう。
このようにリストが表示され、トップページにも戻ることができました。
ユーザー詳細ページ
では次に詳細ページに記述をしていきます。
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なので下記のように記述します。
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 %>
下記の図のような流れでインスタンスが受け渡されます。
編集後、表示を確認するとエラーが消えて、リンクの部分に名前が表示されているのが確認できます。
ユーザー編集ページ
では最後に編集ページに記述をしていきます。
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の完成コードを確認しておきましょう。
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を使うと簡単に実装することができます。
- アプリを使いやすくするためにもぜひ実装しておきましょう。
