はじめに
Ruby on Railsで作成したWebアプリにパンくずリストを表示したい時に便利なのがgretelというgemです。gretelを使うと、gretelの設定ファイルとviewファイルに記述を追加するだけでパンくずリストを簡単に表示できます。使い方をメモします。
gretelの使い方は以下URLに書いてある手順を参考にしています。
環境と前提
- Rails 4.2.0
- Ruby 2.2.2
以降で説明に使用するWebアプリは、Ruby on Railsチュートリアルで作成するアプリです。
やりたいこと
以下の赤線部分のように、パンくずリストを表示させます。
gretelのインストールと準備
まずはじめに以下をGemfile
に追記して
gem 'gretel'
インストールします。bundle install
の省略形としてbundle
を使っています。
$ bundle
そして以下コマンドでgretelの設定ファイルを生成します。
$ rails generate gretel:install
これでconfig/breadcrumb.rb
というファイルが生成されます。以上でgretelのインストールと準備は完了です。
gretelの設定ファイルの編集
config/breadcrumb.rb
を以下のように編集します。なお、デフォルトのconfig/breadcrumb.rb
に記述されているコメント部分は削除しています。
crumb :root do
link "Home", root_path
end
# user#index
crumb :users do
link "Users", users_path
parent :root
end
# user#show
crumb :show_user do |user|
link user.name, user
parent :users
end
# user#edit
crumb :edit_user do |user|
link "Edit #{user.name}", edit_user_path(user)
parent :show_user, user
end
# user#new
crumb :new_user do
link "New User", new_user_path
parent :users
end
上記のように、crumb
の後にパンくずリストの名前を任意に設定し、do~end
ブロックの中にそのパンくずリストの設定を記述します。
上記ではuser#index
、user#show
、user#edit
、user#new
の各Viewで使うパンくずリストの設定を記述しています。
link
でパンくずリストとして表示するリンク名とそのリンクURLを指定しています。また、parent
で親リンクを指定しています。
パンくずリストで引数を取りたい場合は12行目、18行目のように、いつも通りブロックに引数を渡せばOKです。後はView側でこの引数に対応する値を渡します。
1点注意点があり、user#edit
用のパンくずリストの設定箇所のparent
では親リンクとして:show_user
を記述しており、そのあとに引数としてuser
も渡す必要があります。
Viewの編集
あとはapp/views/layouts/application.html.erb
とconfig/breadcrumb.rb
に記述した設定に対応するViewファイルにパンくずリスト用の記述を加えるだけでパンくずリストが表示されるようになります。
application.html.erbの編集
以下の11行目のようにapp/views/layouts/application.html.erb
に記述を加えます。
<!DOCTYPE html>
<html>
<head>
<title>FirstApp</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<div class="container">
<p><%= breadcrumbs separator: "&rsaquo;"%></p> <!-- これを追記 -->
<%= yield %>
</div>
</body>
</html>
上記の11行目を記述することでパンくずリストがこの位置に表示されるようになります。なお、separator:
オプションはその名の通りセパレータを指定するオプションです。ここでは、セパレータとして
"&rsaquo;"
を指定しており、これはブラウザの表示上は >
のように表示されます。なお、上記の&rsaquo;
の&
は全角になっているため、コピペで使用する場合は、半角の&
に置換して使ってください。
また、例えば以下のようにすることでfontawsomeのアイコンをセパレータとして表示することもできます。
...
<%= breadcrumbs separator: " #{content_tag(:i, '', :class=>'fa fa-caret-right')} " %>
...
他にも色々オプションがあり、それらは作成者のGitHubページで確認できます。
各Viewファイルの編集
app/views/layouts/application.html.erb
に記述を加えただけでは、パンくずリストは表示されません。パンくずリストを表示したい各Viewファイルにも少しだけ記述を加える必要があります。といっても以下のように1行加えるだけです。
<% breadcrumb :users %> <!-- これを追記 -->
...以下略...
同様にuser#show
、user#edit
、user#new
に対応するViewファイルも以下のようにそれぞれ追記します。user#show
、user#edit
のViewでは引数として@user
を渡しています。
<% breadcrumb :show_user, @user %> <!-- これを追記 -->
...以下略...
<% breadcrumb :edit_user, @user %> <!-- これを追記 -->
...以下略...
<% breadcrumb :new_user %> <!-- これを追記 -->
...以下略...
これによってパンくずリストが表示されるようになります。
以上で完了です。もし間違いやより良い方法などがありましたら教えて頂ければと思います。
SPONSORED LINK