ボクココ

サービス開発を成功させるまでの歩み

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 だ。これは renderlocal で引数として渡せるようにしている。

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

デフォルトでトップページは作る必要がないようにしているので、Home > 事例 > 事例詳細 と表現したい場合には上記のコードだけで済むようになる。

パンくずリスト実装の確認 無事に作り終えたら、以下の チェックページから正しく書けているかを確認できる。検索に当てて欲しい Google さんのページなので、ここで OK と出れば間違いないだろう。

構造化データ テストツール

終わりに

パンくずリストとか、実際の Rails 実装とはかけ離れて、単に面倒なだけと思うエンジニアも多いことだろう。だからこその Gem を使うっていう楽さが、選ばれる理由であろう。それは今はいいけど、数年後、ため息をつくことになろう。

"Rails 使えばどんな機能も Gem 入れてすぐできるよ^^"

そんな Rails エンジニアはいらない。必要な時は私たち自身が Ruby で機能を作り上げる。そんなエンジニアこそ、必要とされているのではないだろうか。

P.S. HTML で "パンくずリスト" って語源は英語だけど、命名の付け方がセンスあるなと思った。