はじめに

Ruby on Railsで作成したWebアプリにパンくずリストを表示したい時に便利なのがgretelというgemです。gretelを使うと、gretelの設定ファイルとviewファイルに記述を追加するだけでパンくずリストを簡単に表示できます。使い方をメモします。

gretelの使い方は以下URLに書いてある手順を参考にしています。

lassebunk/gretel | GitHub

環境と前提

• Rails 4.2.0
• Ruby 2.2.2

以降で説明に使用するWebアプリは、Ruby on Railsチュートリアルで作成するアプリです。

やりたいこと

以下の赤線部分のように、パンくずリストを表示させます。

gretelのインストールと準備

まずはじめに以下をGemfileに追記して

インストールします。bundle installの省略形としてbundleを使っています。

そして以下コマンドでgretelの設定ファイルを生成します。

これでconfig/breadcrumb.rbというファイルが生成されます。以上でgretelのインストールと準備は完了です。

gretelの設定ファイルの編集

config/breadcrumb.rbを以下のように編集します。なお、デフォルトのconfig/breadcrumb.rbに記述されているコメント部分は削除しています。

上記のように、crumbの後にパンくずリストの名前を任意に設定し、do~endブロックの中にそのパンくずリストの設定を記述します。
上記ではuser#index、user#show、user#edit、user#newの各Viewで使うパンくずリストの設定を記述しています。
linkでパンくずリストとして表示するリンク名とそのリンクURLを指定しています。また、parentで親リンクを指定しています。
パンくずリストで引数を取りたい場合は12行目、18行目のように、いつも通りブロックに引数を渡せばOKです。後はView側でこの引数に対応する値を渡します。

１点注意点があり、user#edit用のパンくずリストの設定箇所のparentでは親リンクとして:show_userを記述しており、そのあとに引数としてuserも渡す必要があります。

Viewの編集

あとはapp/views/layouts/application.html.erbとconfig/breadcrumb.rbに記述した設定に対応するViewファイルにパンくずリスト用の記述を加えるだけでパンくずリストが表示されるようになります。

application.html.erbの編集

以下の11行目のようにapp/views/layouts/application.html.erbに記述を加えます。

上記の11行目を記述することでパンくずリストがこの位置に表示されるようになります。なお、separator:オプションはその名の通りセパレータを指定するオプションです。ここでは、セパレータとして

を指定しており、これはブラウザの表示上は > のように表示されます。

また、例えば以下のようにすることでfontawsomeのアイコンをセパレータとして表示することもできます。

他にも色々オプションがあり、それらは作成者のGitHubページで確認できます。

各Viewファイルの編集

app/views/layouts/application.html.erbに記述を加えただけでは、パンくずリストは表示されません。パンくずリストを表示したい各Viewファイルにも少しだけ記述を加える必要があります。といっても以下のように１行加えるだけです。

同様にuser#show、user#edit、user#newに対応するViewファイルも以下のようにそれぞれ追記します。user#show、user#editのViewでは引数として@userを渡しています。

これによってパンくずリストが表示されるようになります。


以上で完了です。もし間違いやより良い方法などがありましたら教えて頂ければと思います。