Gretelとは
Gretelは、いわゆる「パンくずリスト」をページごとに簡単にセットできるようにするgemです。
パンくずリストとは、「TOPページ > 東京 > 目黒区のお店」のように、表示されているページを階層構造で表現するパーツのことです。このパンくずリストを表示することで、動的なページの構造を検索エンジンに正しく伝えることができ、内部リンクも生成されるため、SEO対策として有効とされています。
Gretelの導入
ここからは、既存のRailsプロジェクトにGretelを導入して、パンくずリストを表示する手順を紹介します。
gemインストール
Gemfileに以下の通り記述します。
…（中略）… gem 'gretel' …（中略）…
以下のコマンドを実行しgemをインストールします。
bin/bundle
設定ファイルのインストール
Gretelでは、設定ファイルにRubyで記述された形式にのっとってページごとのパンくずリストを管理します。
まず、Gretelが提供する以下のコマンドを実行して設定ファイルを作成します。
bin/rails g gretel:install
▼
create config/breadcrumbs.rb
インストール用コマンドを実行すると、設定ファイルであるconfig/breadcrumbs.rbが生成されます。
設定ファイルを確認すると、デフォルトでトップページにあたるroot_path定義が有効になっており、その他はサンプルの記述がコメントアウトされた状態となっています。
crumb :root do link "Home", root_path end …（中略）…
このroot_pathに該当する記述は、Gretelの最も基本的な定義です。「crumb [パンくずリスト名] do～end」とブロックを定義します。[パンくずリスト名]はシンボルで記述します。ブロック内では、「link [リンクテキスト], [パス]」と記述して、そのパンくずリストのリンクテキストを定義します。このlinkメソッドはGretelが提供するものですが、Railsのlink_toヘルパーと同じような形式で記述することができます。
デフォルトの設定は、トップページのリンクを「Home」というテキストにし「/」ページにリンクする、といった定義です。
記事一覧／記事詳細へのパンくずリスト設置（1）
ここからは、トップページ（/）を定義して、記事一覧ページ（/articles）と記事詳細ページ（/articles/:id）にパンくずリストを設置していきます。パンくずリストの構造として以下のような構造を想定します。
| ページ | パス | 設置する形式 |
|---|---|---|
| トップ | / | ※設置なし |
| 記事一覧 | /articles | Home > 記事一覧 |
| 記事詳細 | /articles/:id | Home > 記事一覧 > 記事タイトル |
トップページの準備
まず、トップページを用意して記事一覧ページへのリンクを設置します。以下の通りルーティング定義を追加します。
…（中略）… root to: 'home#index' …（中略）…
次に、トップページ用のコントローラーを作成します。
class HomeController < ApplicationController def index end end
indexアクションに対応するビューを作成します。
<div> <%= link_to '記事一覧', articles_path %> </div>
パンくずリストを表示するための下準備
記事一覧／記事詳細ページにパンくずリストを表示するために、下準備が必要です。パンくずリストはページごとに異なるので、ページに対応するビューファイルでbreadcrumbメソッドを使って設定ファイルで定義したパンくずリストを呼び出します。
呼び出したパンくずリストを表示するには、まずレイアウトファイルにパンくずリストをビューごとに呼び出す共通処理を入れる必要があります。
以下のようにレイアウトファイルを修正します。
…（中略）…
<body>
<%= breadcrumbs %>
<%= yield %>
</body>
</html>
このように、Gretelが提供するbreadcrumbsメソッドをレイアウトで呼び出しておくことで、ビューごとにbreadcrumbメソッドを使ってパンくずリストを表示することができます。
レイアウトでの定義は「breadcrumbs」と複数形で、ビューでの定義は「breadcrumb」と単数形となっている点に注意が必要です。
記事一覧のパンくずリスト設置
ここからはパンくずリストをページごとに設置していきます。まずは記事一覧ページにパンくずリストを設置します。
記事一覧用のパンくずリストを設定ファイルに定義します。
crumb :articles do link '記事一覧', articles_path end
ここでは、記事一覧のルーティングであるarticlesというパンくずリスト名を定義し、「記事一覧」と文字列で表記し、下層にあるページを表示した場合のリンク先を記事一覧のパスに指定しています。
設定ファイルに記述したパンくずリストを呼び出す記述をビューに追記します。
…（中略）… <% keywords %w(Ruby Rails gem) %> <% breadcrumb :articles %> # 追記 <p id="notice"><%= notice %></p> …（中略）…
このようにbreadcrumbメソッドは、「breadcrumb [パンくずリスト名]」と記述することで設定ファイルで定義したパンくずリスト名をシンボル形式で呼び出すことができます。
