なんか書いていこうぜー .com

今日仕事で gretel が使いやすかったのでメモ。

これまでの パンくずリスト(breadcrumbs) は、だいたい、controller の中で add_breadcrumb みたいなメソッド を呼び出してリストを作る感じなのですが、 gretel はちょっと違うのね。

Contoller を汚さずに、パンくずが作れる

gem を install します。ここは適宜、bundle とかにしてください。

$ gem install gretel

設定を記述するファイルを出力するコマンドを入力します。いわゆる、install コマンドです。

$ rails g gretel:install

このコマンドを打つと、config/breadcrumb.rb が作成されます。 ここに表示するパンくずの設定を書くのですが、

# Root crumb
crumb :root do
  link "Home", root_path
end

# Issue list
crumb :issues do
  link "All issues"
  parent :root
end

この記述で、 Home > All issues のパンくずの設定ができました。

view の layout と、パンくずを表示する画面にメソッドを書く必要があるのですが、パンくずの関係の設定はこのファイルに書くだけです。

これの何が嬉しいかというと、controller に書くタイプの下の例だと、update で更新に失敗したとき、edit で設定したパンくずの設定をもう一度書かないといけない。これが面倒で漏れやすいんですよ。

# 結構適当に書いてる
def edit
  add_breadcrumb 'Home', root_path   # ←ここ
  add_breadcrumb 'All Issues', nil   # ←ここ
end

def update
  @post = Post.find(params[:id])
  @post.attributes = post_params

  if @post.update
    redirect_to posts_path
  else
    add_breadcrumb 'Home', root_path # ←ここ
    add_breadcrumb 'All Issues', nil # ←ここ

    render action: :edit
  end
end

gretel は、この設定と後述する view 側の設定で、view単位でパンくずの設定が書けるのでこの点は気にせず、DRYに書けます。

view 側も簡潔に書ける

とりあえずパンくずを出力するには、app/views/layouts/application.html.erb に

<%= breadcrumbs %>

のように書き、表示したい各view に 以下のように書けば、 Home > All Issues が出力されます。

<%= breadcrumb :issues %>
# 指定された :issues から parent の設定をたどって、 'Home > All Issues' が出力される

view 単位にパンくずが設定できるので、前述のようにupdate と edit に同じ記述をする必要がなく、DRY にパンくずが書けます。しかも、指定した crumb から parent たどっていくだけなので、設定自体も非常に見やすい。

gretel を見ると、bootstrap や foundation5 に対応していたり、リストの形式を ol, ul にしたり、class の指定をしたりもできます。

私が仕事で使ったときは、別にパンくず用のデザインがあったので、そのデザインで出力されるように書きました。 Building the breadcrumbs manually のパートに書かれているやり方を使えば簡単に独自レイアウトにも対応できます。

とにかく、DRY にしかも簡単に書けるのがすばらしいので、パンくず実装するときは使ってみてください。