この記事は PIXTA Advent Calendar 2017 の16日目の記事です。
コミックス6巻が発売され、とうとう魔王ミリムも出てきたということで、 やはりスライムに転生して魔王になりたい気がちょいちょいする id:necojackarc です。
概要
fotowa のカテゴリページ では、JSON-LD 形式でパンくずリストを作成しています。 具体的には、bread_crumbs_on_rails という人気の gem を拡張することで、これを実現しています。
本記事では、どのようにしてこの拡張を行っているのかを紹介します。
TL;DR
BreadCrumbsOnRails の出力形式を JSON-LD にできる gem 作りました！
背景
ざっくり言うと、fotowa のカテゴリページでのパンくずリストは、クローラーに伝えたいだけで、画面上に出す必要はないということから、JSON-LD 形式で作成することに決まりました。
また、Rails でのパンくずリスト作成する際、以下の2つが有力候補となるかと思います。
どちらも人気があり、スターの数はそれぞれ本記事執筆時点で800超、700超です。
この2つの一番大きな違いとしては、パンくずリストの定義方法です。
gretel ではパンくずリストの構造を config/breadcrumbs.rb に書いていくのに対し、breadcrumbs_on_rails ではコントローラー内に記述します。
そしてどちらも残念ながら、JSON-LD でのパンくずリスト出力を fotowa でのパンくずリスト実装時 (2017年7月) にはサポートしていなかった、という点です。
本題から外れますのでこれ以上の比較検討はここでは行いませんが、fotowa のケースでは breadcrumbs_on_rails が適していると判断し、こちらを導入しました。
実装方法
breadcrumbs_on_rails の README に “More complex customizations require a custom Builder” とある通り、カスタムビルダーをサポートしています。
この機能を利用し、以下の様なカスタムビルダーを作成します。
Breadcrumbs::JsonLdBuilder が今回作成したカスタムビルダーで、breadcrumbs_on_rails が保持しているデータを JSON-LD 形式で組み立てる処理を行っています。
親クラスで提供されているインスタンス変数に直接アクセスするという、親クラスの属性にガッツリ依存した形の拡張方法ですが、そうすることを前提としたクラスですので、突然ぶっ壊れる可能性は比較的低いとは思います。
app/views/layouts/_json_ld_breadcrumbs.html.erb は必須ではないですが、描画を簡潔にするために導入しました。
既存のビルダーなどを使う場合は、render_breadcrumbs とパンくずリストを表示したい箇所に埋め込むだけで良いのですが、JSON-LD 形式にするためには script タグで JSON を囲む必要があります。
毎回 script タグを書くのは面倒なので、既に囲った状態のものを描画できるよう、パーシャルとして定義しています。
使用方法
コントローラー内でのパンくずリストの設定は breadcrums_on_rails の使い方の通りです。 カスタムビルダーを準備したので、当然と言えば当然ですが、既存の機能をそのまま使えるので、導入コストや教育コストが低くなります。
README を参考に、シンプルな例を書いてみました。
def SampleController < ApplicationController add_breadcrumb "home", :root_path def index add_breadcrumb "index", index_path end end
描画は app/views/layouts/_json_ld_breadcrumbs.html.erb をレンダリングするだけで OK です。
<%= render "layouts/json_ld_breadcrumbs.html.erb" %>
楽ちん！
Gem 化
上記のアイデアを元に、他のプロダクトでも簡単に取り入れれるように gem 化しました。
ビルダー名が上記の説明例と少しことなっており、こちらは gem を導入後、
<script type="application/ld+json"> <%= render_breadcrumbs builder: BreadcrumbsOnRails::JsonLd::Builder %> </script>
のように使用可能です。
まとめ
今回は Rails でパンくずリストを JSON-LD 形式で出力する方法について紹介しました。 具体的には、既存のメジャー gem である weppos/breadcrumbs_on_rails のカスタム機能を利用することで JSON-LD 形式でのパンくずリストを出力可能としました。
necojackarc/breadcrumbs_on_rails-json_ld という gem も作成しましたので、もしよろしければお試しください。
せんでん！
fotowa はフォトグラファーの出張撮影サービスです！ 特に小さいなお子さんが居るファミリー層に人気があります。
これからはクリスマスやお正月休みがあり、家族や親戚で集まることも多いかと思います。 そこで、ささやかですが、てくすた読者の皆さんにこちらのクーポンを進呈します！
- クーポンコード：texta2017
- 割引額：2,000円
- 有効期限：2018年3月末日の撮影まで
この機会にぜひ fotowa をご活用ください！
