gem gretelの使い方 ~パンくずリストを作ってみよう~

gem 'gretel'

このgemを使って、パンくずリストを作っていこうと思います。

パンくずリストってなんぞや？？

ホームページのすみっこで見られる、ページの階層ですね。Webサイト内で、どの位置にいるのかがわかる機能です。

「ユーザー」を押すとユーザーページへ、「ホーム」を押すと最初のページへ飛ぶことができます。(ハンバーガーメニューとかパンくずリストとか、プログラミングの世界は、遊び心があって良いですよね。)

gem 'gretel'を使う

こちらのGithubのREADMEをご覧ください↓↓

[https://github.com/kzkn/gretel:embed:cite]

gem 'gretel'をbundle installしたあと、

$ rails generate gretel:install

こちらのgenerateコマンドを使って、config配下にbreadcrumb.rbというファイルが生成されます。

それではbreadcrumb.rbに作りたいパンくずリストの設定を記述していきます。

breadcrumb.rbにパンくずリストの設定を記述

先ほどのリストを試しに作っていきます。

# breadcrumb.rb

crumb :dashboard do
  link ' Home', dashboard_path
end

crumb :users do
  link 'ユーザー', users_path
  parent :dashboard
end

crumb :user do |user|
  link 'プロフィール', user_path(user)
  parent :users
end

上記のような記述になります。書き方としては、

crumb :"シンボル名" do
  link 'パンクズに表示したい名前', URL
  parent :"一つ上の階層名"
end

このように当てはめていきます。parentは一つ上の階層がなければ(今回ならHome)記述しなくてOKです。

breadcrumb.rbの設定をこれで完了です。

viewファイルに記述していく

それぞれのviewファイルにbreadcrumbを記述していきます。

# Homeのviewファイル
<% breadcrumb :dashboard %>

# ユーザーのviewファイル
<% breadcrumb :users %>

# プロフィールのviewファイル
<% breadcrumb :users, @user %>

プロフィールのviewファイルで気をつけることは、

breadcrumb.rbにもあるように、プロフィールページはuser_path(user)というURLに飛ぶので、どのidのURLに飛んで欲しいのか(今回なら@user)を記述しないとエラーが出てしまいます。

あとはCSSなどで、ページの好きな位置にパンくずを表示すればOKです。とても簡単。。！

パンくずリストはヘッダーの下などに記述することが多いかと思いますので、部分テンプレートに分けておくのが便利かと思います。

gem gretelを使って、パンくずリストを作ってみよう

一見むずかしそうな機能が、とても簡単に作れることが分かったと思います。

便利なgemを駆使しながら、より使いやすいRailsアプリケーションを作っていきましょう！