超簡単にパンくず機能を実装する
超絶久しぶりになりましたが、皆様こんにちは。ハマッキーです。
今回はRuby on Railsでのアプリケーション開発における「パンくず機能」の実装に必要な手順についてお話していきたいと思います。
- パンくず機能とは？
- 実装の手順
- ①gem "gretel"をGemfileに記述し、ターミナルでbundle install
- ②ターミナルでrails g gretel:install
- ③②で生成されたconfig/breadcrumbs.rbにパンくずとして表示させる名前とそのリンク先を記述
- ④パンくずリストを表示させるビューファイル（ヘッダーなどの部分テンプレート）にパンくずを表示させるための記述を入れる
- ⑤③で設定したパンくずに該当するビューに、そのパンくずの情報をもたせる
- 確認
- 終わりに
パンくず機能とは？
パンくず機能とは、「ウェブページ上で自分が今どの階層に居るのか」を視覚的にわかりやすく表示する機能のことを言います。
パンくず機能という名前の由来は、グリム童話の「ヘンゼルとグレーテル」のお話の中で、森のなかで迷わないようにするために道標としてパンくずを置くことで家に帰れるように試みた、というエピソードが由来になっているそうです（そのパンくずは鳥に食べられてしまいヘンゼルとグレーテルは結局迷子になりますが）。
実装の手順
下記の手順でパンくず機能を実装できます。
①gem "gretel"をGemfileに記述し、ターミナルでbundle install
②ターミナルでrails g gretel:install
③②で生成されたconfig/breadcrumbs.rbにパンくずとして表示させる名前とそのリンク先を記述
④パンくずリストを表示させるビューファイル（ヘッダーなどの部分テンプレート）にパンくずを表示させるための記述を入れる
⑤③で設定したパンくずに該当するビューに、そのパンくずの情報をもたせる
①gem "gretel"をGemfileに記述し、ターミナルでbundle install
gem "gretel"
Gemfileにこの記述をした後、ターミナルでbundle installをしたらgretelの導入は完了です。
②ターミナルでrails g gretel:install
ターミナルで上記のコマンドを入力するとconfig以下にbreadcrumbs.rbというファイルが生成されます。
③②で生成されたconfig/breadcrumbs.rbにパンくずとして表示させる名前とそのリンク先を記述
目標は以下の画像のようにパンくずリストを作ることです。
書いたコードは以下のような感じ。
# crumb パンくず名 do
# link "パンくずとして表示させるリンク名", そのリンク先のURL
# end
crumb :root do
link "Home", root_path
end
crumb :mypage do
link "マイページ", user_path
parent :root
end
この記述についてもう少し詳しく深掘りしていきます。
まず各ページのパンくずに名前をつけます。Homeはアクセス時に一番最初に飛ぶページであるため、rootと名付けるのが一般的なようです。
マイページのパンくず名はmypageとします。
次に、パンくずに持たせるリンク先とリンク先を表示させたときに表示させるテキストを設定します。リンク先のURL等に関してはrails routesコマンドをターミナルで入力し、自分がパンくず機能をつけたいビューがどのURLを持っているのかを確認しましょう。
parentというのは、この記述をしたビューがどのビューの小要素的な階層になるのかを指定しています。ここでいうと、マイページはHomeの一個下の階層に該当している、といった感じです。
④パンくずリストを表示させるビューファイル（ヘッダーなどの部分テンプレート）にパンくずを表示させるための記述を入れる
私は今回hamlで記述しているため、
= breadcrumbs
この記述を部分テンプレート化させているヘッダーに組み込みました。
erbファイルで記述している方は、
<%= breadcrumbs %>
の記述を入れましょう。
⑤③で設定したパンくずに該当するビューに、そのパンくずの情報をもたせる
今回であれば、Homeとマイページのビューにパンくずの情報をもたせます。
Home ↓
- breadcrumb :root
マイページ ↓
- breadcrumb :mypage
これを各ファイルの一番上に書きます（記述する場所は多分どこでも良い）。
ここで注意してほしい事が一点ありまして、この記述をする際に
= breadcrumb :mypage
と記述をしないようにしましょう。
erbならこの記述です。
<%= breadcrumb :mypage %>
＝をつけた場合、処理の結果をビューに出力してしまうので、この記述だとわけわからん文字が出てきます。
確認
無事マイページにパンくず機能が実装されています。画像なのでわからないとは思いますが、HomeをクリックすればHome画面に遷移しました。
終わりに
パンくず機能実装のやり方は以上になります。
記事更新をめちゃくちゃサボってすみませんでしたm(__)m。
ちゃんとアウトプットしていかないとだめですね。
