【Ruby on Rails】パンくずリストにgemの「gretel」を使ってみた
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
【メリット】
①簡単にパンくずリストを実装できる
②自分がどのページにいるのか分かりやすくなる
③親の階層に移動しやすくなる
【背景】
階層構造があるアプリを作る機会があり、ページを見やすくするためにパンくずリストを実装することにしました。
そこでネットを調べていると、「gretel」というgemを見つけたので、使ってみました。
【内容】
環境
・Ruby on Rails 5.0.1
・Ruby 2.3.1
・gretel(
GitHub - lassebunk/gretel: Flexible Ruby on Rails breadcrumbs plugin.
)
実装
◆Gemfileに「gretel」を記述
Gemfile
gem "gretel"
◆「gretel」をインストール
ターミナル
＄ bundle install
◆設定ファイルを生成
ターミナル
＄ bundle exec rails generate gretel:install
すると、「config/breadcrumbs.rb」が生成されます。
◆設定ファイルを編集
パンくずリストの定義を行うために、breadcrumbs.rbファイルを編集します。
サンプル
crumb :リンク名 do |引数|
link "表示リンク名", 移動先のリンクURL
parent :親リンクの指定
end
config/breadcrumbs.rb
crumb :root do
link "ホーム", root_path
end
crumb :mypage_users do |user|
link "マイページ", users_profile_path
parent :root
end
crumb :delete_users do |user|
link "ログアウト", user
parent :mypage_users
end
◆Viewファイルの編集
今回は、全てのページにパンくずリストを実装するわけではなく、ログアウトページにだけパンくずリストを実装します。
全てのページにパンくずリストを実装したい方は、下記の記事を参考にしてみてください。
また、パンくずリストのセパレータにFont Awesomeを利用しているので、CSSも編集しています。
それではいきます。
ogout.html.erb
<% breadcrumb :delete_users, @users %>
<%= breadcrumbs pretext: " ", separator: " #{content_tag(:i, '', :class=>'fa fa-caret-right')} ", style: :ul %>
breadcrumbs.scss
.breadcrumbs {
position: relative;
background: #fff;
height: 40px;
width: 100%;
padding-left: 10%;
display: flex;
li{
display: block;
height: auto;
line-height: 40px;
a{
display: block;
height: auto;
color: #333;
}
}
}
.fa.fa-caret-right{
display: block;
line-height: 40px;
margin: 0 10px 0 10px;
}
表示画面
パンくずリストのデザインを変えたい場合は、CSSやFont Awesomeを変更してみてください。
【今後に向けて】
今回もgemの中身まで確認するまでは至りませんでした。
他の方のサイトを見て学習するのも良いけど、gemのリファレンスを見て、自分の力だけで機能を実装できるようになりたいものです。
その一方で、色んなgemを知って使えるようにもなりたい・・・
これからポートフォリオを作るつもりなので、gemをスピード重視でどんどん使って、色んなgemをご紹介できればと思ってます。
