はじめに
今度はぱんくず機能を実装復習しましたのでまたすぐ実装できるように
記していきたいと思います。
実装していきます。
ぱんくず機能とは
現在どこのページにいるのかを視覚的にわかりやすくした表示できる機能ことです。
物語の「ヘンゼルとグレーテル」のなかで、ヘンゼルとグレーテルの二人が森の中で道に迷わないように歩きながら来た道の目印にぱんくずを落としていったことから"ぱんくず機能"で、gemの名前が「gretel」なのだそうです。
可愛いですね
ちなみに、ヘンゼルは男の子の方でグレーテルは女の子です。
実装
「gretel」というgemを「Gemfile」に記述し
gem 'gretel'
インストールします。
bundle install
こちらを入力すると「config」ディレクトリの下に「breadcrumbs.rb」ファイルが生成されます。
rails g gretel:install
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」を使い
"›"
を記入すると「 > 」 が出力されます。
<p><%= breadcrumbs pretext: "You are here: ",
separator: "›" %></p>
<% breadcrumb :pics %>
<% breadcrumb :advises %>
このように出力されます。
<% breadcrumb :new_advise %>
このように出力されます。
<% breadcrumb :show_advise, @advise %>
このように出力されます。
表示されました!!
まとめ
初めてnewファイルやshowファイルにぱんくず機能を実装したので少し時間がかかりましたが
無事実装することができました!!
自分がどこにいるかが把握できて便利ですね。
オプションも他にもあるようなのでまた違うのもしてみたいと思います。
ちなみに
こちらではこのように書かれています。
Forum:パンくずリストの設置場所はページの上、それとも下?
グーグルのジョン・ミューラー氏にツイッターでフォロワーが質問した。
ミューラー氏はこう答えた。
どこに設置しても構わない。
個人的なアドバイスをするなら、ユーザーインターフェイス要素をページに追加するときは使いやすくすることを推奨する(そうでなければ、追加する意味がないはず)。しかしながら、使いやすいかどうかはサイトによる。そしてサイトのことをいちばんよく知っているのはあなただ。
なるほどー
では本日はこれで終わりたいと思います!!
参考
virtualiment:Ruby on Railsでパンくずリストを表示するGem gretelの使い方メモ
githubから詳細が見れます。
GitHub gretel
omake
押さえておきたいWeb知識:[Ruby on Rails] appディレクトリとconfigディレクトリを分かりやすく解説します!