Rails でパンくずリストを自前で作る

ども、@kimihom です。

f:id:cevid_cpp:20210523144932j:plain

今回、サイトアクセスをより便利に、そしてサーチエンジンにサイト構成をわかりやすくさせるために、パンくずリストの実装を自前で行ったので、記事にする。

パンくずリスト Gem ?

Rails とパンくずで検索すると、必ず gretel Gem のライブラリを使う記事が出てくる。

私としては、単にパンくずリストを作るためだけに Gem を入れて管理したくないので、パパッと自分で実装した。その方が gretel の今後を機にする必要がなく、修正が必要な時でもパッと実装できるためだ。

何でもかんでも Gem ってやると、独特な機能を追加で欲しいと思ったときや、Rails アップデートをするときとかに特に苦労する。Rails を長らくやってくればわかる当然のことである。自分でパッと実装できる機能は、自分で考えて実装しようじゃないか！

パンくずリストの基本

パンくずリストは、独特な HTML タグに属性をつけて指定するようだ。本記事では CSS や HTML 構造について細かくは記さないので、以下ページなどを参考にすると良いだろう。

saruwakakun.com

それぞれのページに、ページのタイトルと親タイトルの名前とリンクをそれぞれ渡せばいいだけのようだ。このためだけに Gem 使うなんてしたくはないのである。さて実装を考えよう。

Rails 自前実装

まず、Rails のコントローラーで書けばいいのかと思ったけど、構成をわざわざアクション内にそれぞれ定義するのは美しくないし、パンくずリストは LP だけ定義すれば良かったので、View だけで完結するようにした。

app/views/shared/_breadcrumbs.html.erb

<div class="breadsrumbs container">
  <div class="clearfix">

    <ul class="srumb-list" itemscope
      itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a href="<%= root_path %>" itemprop="item">
          <span itemprop="name">ホーム</span>
        </a>
        <meta itemprop="position" content="1" />
      </li>

      <% breadcrumbs.each_with_index do |b, i| %>
        <li class="srub-detail"
            itemprop="itemListElement" itemscope
            itemtype="https://schema.org/ListItem">
          <a href="<%= b[:path] %>" itemprop="item">
            <span itemprop="name"><%= b[:name ] %></span>
          </a>
          <meta itemprop="position" content="<%= i + 2 %>" />
        </li>
      <% end %>
    </ul>

  </div>
</div>

この <li> タグをいかににして階層として複数出せるようにするかを考える必要がある。ポイントとなるのは、breadcrumbs だ。これは render の local で引数として渡せるようにしている。

<%= render partial: "shared/breadcrumbs", locals: {
  breadcrumbs: [
    { name: t("case.title"), path:  "/cases" },  # 事例一覧
    { name: t("case.#{params[:name]}.title"), path:  "/cases/#{params[:name]}" },  # 事例詳細
  ]
} %>