gem gretelの使い方 ~パンくずリストを作ってみよう~
gem 'gretel'
このgemを使って、パンくずリストを作っていこうと思います。
パンくずリストってなんぞや??
ホームページのすみっこで見られる、ページの階層ですね。Webサイト内で、どの位置にいるのかがわかる機能です。
「ユーザー」を押すとユーザーページへ、「ホーム」を押すと最初のページへ飛ぶことができます。(ハンバーガーメニューとかパンくずリストとか、プログラミングの世界は、遊び心があって良いですよね。)
gem 'gretel'を使う
こちらのGithubのREADMEをご覧ください↓↓
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アプリケーションを作っていきましょう!