パンくずリストを表示させる方法

f:id:ryoutaku_jo:20190221182412p:plain

【結論】
パンくずリストとは、現在表示中のページが、
 ツリー構造になっているサイト全体の
 どの部分なのかを表示させる機能

・gretelとは、パンくずリストを簡単に実装する為のgem

【目次】


【本題】

パンくずリストの実装について

メルカリでは、パンくずリスト
現在のページがサイト全体のどの部分なのか表示する機能が実装されています

f:id:ryoutaku_jo:20190222024843p:plain
※「メルカリ マイページ 出品した商品 - 取引中」がパンくずリスト

今回のチーム開発では、別メンバーがこの機能を実装しましたが、
使える機能なので、今後自分で実装できる様に、実装方法を調べました。

gretelとは

パンくずリストを簡単に実装する為のgemです。

github.com

実装方法

1:gemをインストールする
まずはgretelを導入します。

gem 'gretel'


2:設定ファイルを生成する
下記のコマンドをターミナルで実行し、
gretelの設定ファイル「config/breadcrumbs.rb」を作成します。

bundle exec rails generate gretel:install


3:設定ファイルを編集する
先ほど生成した設定ファイルに、パンくずで表示させたい
項目を記述して行きます。

下記の様に記述します

crumb :パンくず名 do
  link "ビューに表示させるリンク名", リンク先のパス
end

実際に実装したものは下記の通りです。

crumb :root do
  link "メルカリ", root_path
end

crumb :mypage do
  link "マイページ", users_path
  parent :root
end

crumb :card do
  link "支払い方法", card_users_path
  parent :mypage
end

crumb :profile do
  link "プロフィール", profile_users_path
  parent :mypage
end

crumb :identification do
  link "本人情報の登録", identification_users_path
  parent :mypage
end

crumb :logout do
  link "ログアウト", logout_users_path
  parent :mypage
end

crumb :exhibition do
  link "出品した商品-出品中", exhibition_users_path
  parent :mypage
end

crumb :trading do
  link "出品した商品-取引中", trading_users_path
  parent :mypage
end

crumb :sold do
  link "出品した商品-売却済み", sold_users_path
  parent :mypage
end

4:ビューにパンくずを表示させる記述を追加する
ビューの中でパンくずを表示させたい箇所に、下記の記述を加えます。

    - breadcrumb :パンくず名
    = breadcrumbs separator: " › "

実際に実装したものは下記の通りです。

    - breadcrumb :trading
    = breadcrumbs separator: " › "

これで実装は完了です。

《今日の学習進捗》

チーム開発:27日目
明日でチーム開発も終了。
最終の完成度向上に努めるが、カテゴリ機能を実装してから、
他の機能が正常に動作しないトラブル発生。
影響範囲を考慮して無かった・・・

学習開始からの期間 :76日
今日までの合計時間:775h
一日あたりの平均学習時間:10.2h
今日までに到達すべき目標時間:694h
目標との解離:81h
「10,000時間」まで、

残り・・・「9225時間!」