Netlify CMSで「関連記事の表示機能」を実装しようとした時にぶつかった壁と解決方法
こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。
今回は、Netlify CMSで「関連記事の表示機能」を実装しようとした時にぶつかった壁と、その解決方法についてまとめたいと思います。
やりたかったこと
あるコンテンツから別のコンテンツへの導線として、「関連記事の表示機能」を実装しようとしていました。
当初やりたかったのは『CMSの投稿画面に「関連記事」の選択欄があり、そこで表示したい記事を選択すれば自動的に関連記事へのリンクが挿入される』というものです。
調べてみると、Netlify CMSには「Relation」という選択したエントリのデータを表示させるウィジェットがあるようなので、それを使用して実装しようと考えました。
フロント側の実装は完了し、CMS側の実装をしよう……というところで、Relation ウィジェットでは上手くいかないことに気づきました。
Relation ウィジェットの仕様
実際に使ってみるなどして仕様をよく調べてみました。
その結果、Relation ウィジェットは「指定したコレクションのエントリのリストが入ったセレクトフォームが作られ、選択したエントリのフィールドのデータが取得できる」というものであることが分かりました。
公式リファレンスにも以下のように書いてあります。
The relation widget allows you to reference items from another collection. It provides a search input with a list of entries from the collection you’re referencing, and the list automatically updates with matched entries based on what you’ve typed.
relation | Netlify CMS | Open-Source Content Management System
(和訳)
Relation ウィジェットは他のコレクションからアイテムを取得します。指定したコレクションのエントリのリストを持つ検索機能付きのセレクトフォームが作られ、入力された文字にマッチするように入力欄が自動でアップデートされます。
これだけ見ると意図通りに使用できそうですが、その下のオプションを見てみると
valueField: (required) name of the field from the referenced collection whose value will be stored for the relation. Syntax to reference nested fields is similar to that of displayFields and searchFields. As valueField only allows for a single field, this parameter only accepts a string.
relation | Netlify CMS | Open-Source Content Management System
(和訳)
valueField: (必須) このウィジェットに値が格納される、参照するコレクションのフィールドの名前。ネストされたフィールドを参照する構文は、displayFields および searchFields の構文に似ています。valueField のみ1つのフィールドを指定することが許可されており、このパラメータは文字列のみを受け入れます。
valueFieldというパラメータに取得したいフィールド名を指定するのですが、そこには1つのフィールドしか指定できない、つまり選択したエントリから1つのフィールドのデータしか取得できないようです。
そのため、少なくとも「タイトル」と「URL」の2つのデータが欲しいこのような場合にはこのウィジェットを使うのは適切ではありませんでした。
解決方法
結果、String ウィジェットを2つ用意し、タイトルとURLを入力して関連記事を表示させる……という地道な形の実装になりました。
現状はこれで落ち着きつつ、もっとよりよい形を模索している状態です。
まとめ
今回はNetlify CMSで「関連記事を表示させる機能」を追加しようとした時にぶつかった壁と、その解決方法についてまとめました。
Netlify CMSを使っている方の参考にしていただけると嬉しいです。
Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています
Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。
現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい！
パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください！
お問い合わせしてみる！
