[Rails]ぱんくずリスト機能について

はじめに

今度はぱんくず機能を実装復習しましたのでまたすぐ実装できるように

記していきたいと思います。

実装していきます。

ぱんくず機能とは

現在どこのページにいるのかを視覚的にわかりやすくした表示できる機能ことです。

物語の「ヘンゼルとグレーテル」のなかで、ヘンゼルとグレーテルの二人が森の中で道に迷わないように歩きながら来た道の目印にぱんくずを落としていったことから"ぱんくず機能"で、gemの名前が「gretel」なのだそうです。

可愛いですね　

ちなみに、ヘンゼルは男の子の方でグレーテルは女の子です。

[gem gretel] 詳細

実装

「gretel」というgemを「Gemfile」に記述し

Gemfile

gem 'gretel'

インストールします。

bundle install

こちらを入力すると「config」ディレクトリの下に「breadcrumbs.rb」ファイルが生成されます。

rails g gretel:install

config/breadcrumbs.rb

設定ファイルを編集します。

config/breadcrumbs.rb

# crumb "現在のページ（表示させるページにも記述）" do
# link "ぱんくずリストでの表示名", "アクセスしたいページのパス"
# parent "親要素のページ(前のページ)"


crumb :pics do
  link "Home", root_path
end

crumb :advises do 
  link "相談一覧", advises_path
  parent :pics
end

crumb :new_advise do 
  link "相談新規投稿", new_advise_path
  parent :advises
end

crumb :show_advise do 
  link "相談詳細", advise_path
  parent :advises
end

viewファイル

オプションの「pretext」を使い
文字を入力するとその文字が出力されます。

「separator」を使い
"›" を記入すると「 > 」 が出力されます。

application.html.erb

<p><%= breadcrumbs pretext: "You are here: ",
                                      separator: "&rsaquo;" %></p>

1.

pics/index.html.erb

<% breadcrumb :pics %>

2.

advise/index.html.erb

<% breadcrumb :advises %>

このように出力されます。

3.

advises/new.html.erb

<% breadcrumb :new_advise %>

このように出力されます。

4.

advises/show.html.erb

<% breadcrumb :show_advise, @advise %>

このように出力されます。

表示されました！！

まとめ

初めてnewファイルやshowファイルにぱんくず機能を実装したので少し時間がかかりましたが
無事実装することができました！！

自分がどこにいるかが把握できて便利ですね。

オプションも他にもあるようなのでまた違うのもしてみたいと思います。

ちなみに

こちらではこのように書かれています。
Forum:パンくずリストの設置場所はページの上、それとも下？

グーグルのジョン・ミューラー氏にツイッターでフォロワーが質問した。

ミューラー氏はこう答えた。

どこに設置しても構わない。

個人的なアドバイスをするなら、ユーザーインターフェイス要素をページに追加するときは使いやすくすることを推奨する（そうでなければ、追加する意味がないはず）。しかしながら、使いやすいかどうかはサイトによる。そしてサイトのことをいちばんよく知っているのはあなただ。

なるほどー
では本日はこれで終わりたいと思います！！

参考

DoRuby:gretelでパンくずリストを作成

virtualiment:Ruby on Railsでパンくずリストを表示するGem gretelの使い方メモ

githubから詳細が見れます。
GitHub gretel

omake

押さえておきたいWeb知識：[Ruby on Rails] appディレクトリとconfigディレクトリを分かりやすく解説します!