Ryota Kondo

Ryota Kondo

2022/12/26

microCMS|ブログの記事本文にはリッチエディタではなく、繰り返しフィールドをおすすめする理由

このブログはmicroCMSを使って作られており、各ブログの内容はコンテンツ(API)としてmicroCMSに登録しています。内容はブログの構成パーツ毎に専用のフィールドを決めて登録しており、例えばタイトルはテキストフィールド、記事のメインイメージは画像フィールドといった形です。

この構成パーツの中で、記事本文についてはリッチエディタというフィールドを使っていましたが、この度繰り返しフィールドに全て切り替えました。

ブログサイトの作成時に繰り返しフィールドの利点を理解していたらこのような切り替えをすることなく、最初から繰り返しフィールドにしていたと思います。同じようなことにならないよう、これからmicroCMSを使ってブログを作ってみようという方などに向けて、繰り返しフィールドをおすすめする理由を説明したいと思います。

繰り返しフィールドとは

繰り返しフィールドとは、あらかじめ設定しておいたカスタムフィールドのなかから使うものを選択し、好きな順番で好きなだけ繰り返して設定できるフィールドのことです。

使ったときのイメージはこのような感じです。最初はボタンのみ表示されます。

繰り返しフィールド

この「フィールドを追加」ボタンを押すと、どのカスタムフィールドを追加するのかの選択画面が表示されます。

繰り返しフィールド_選択

選択すると下のように使いたいカスタムフィールドが追加されます。今回は例として「Rich Editor」を選択しています。

繰り返しフィールド_追加後

上下に表示されている+ボタンからカスタムフィールドを追加したり、追加したカスタムフィールドの順番を入れ替えたりすることが可能です。

もちろん、カスタムフィールドにあらかじめ登録しておけば、リッチエディタを繰り返しフィールドに追加することができます。

繰り返しフィールドをおすすめする理由

私がリッチエディタではなく繰り返しフィールドを、特にブログの記事本文に、おすすめする理由は下の2点です。

  • 自由度の高い編集が可能となること
  • 機能拡張がしやすいこと

順番に説明します。

自由度の高い編集が可能

こちらは繰り返しフィールドの名前の通り、好きなカスタムフィールドを繰り返し自由に追加・編集することが可能です。

私が繰り返しフィールドに切り替えた理由の一つとして、テーブルを使うためには拡張フィールドを導入する必要があったというのがあります。公式ブログの「microCMSでテーブルを入力する」にもある通り、そのままではmicroCMSでテーブルを使うことができません。

当初のリッチエディタを使ったまま拡張フィールドを導入した場合は「リッチエディタ」・「拡張フィールド」もしくは「拡張フィールド」・「リッチエディタ」の順番で、その順番も固定になってしまいます。一方、繰り返しフィールドを導入した場合は記事ごとに何をいくつ使うのか自由に選択することが可能になります。

機能拡張がしやすい

ブログサイトを運営していると、後からGoogle MapやTwitterのつぶやきを表示させたくなったり、新しいWebサービスとの連携をしたくなったりすることもあると思います。この時、繰り返しフィールドを使っているとサイトを修正する手間を削減できます。

設定画面にあるAPIスキーマから繰り返しフィールドの詳細設定を開くと、どのカスタムフィールドを使用するのかの設定を変更することが可能です。

繰り返しフィールド_詳細設定

つまり、機能追加が必要となった時には新規でカスタムフィールドを作成し繰り返しフィールドに追加することで、既存のフィールドとも組み合わせた自由な編集をすることができるようになるということです。(実際に行う場合はAPIの変更となりますので、十分注意して実施してください。)

親となる繰り返しフィールドにmicroCMS上の変更はありませんので、フロントエンド側の実装については、作り方によりますが修正はほぼないと思います。子として新規作成したカスタムフィールドの実装は必要になります。

おわりに

「ブログの記事本文にはリッチエディタではなく繰り返しフィールドをおすすめする理由」を説明しました。

もちろんシンプルな構成のままブログサイトを運営していくと決めている場合などでは、最初の実装に手間がかかる分リッチエディタを使う方が良いと思います。ですが自由な編集や機能拡張のしやすさの利点を見ると、最初から繰り返しフィールドを採用したほうがいいケースが多いのではと思います。

microCMSを使ってブログを作成する際、こちらの記事が参考となれば幸いです。

関連タグの記事

Ryota Kondo
Ryota Kondo

システムエンジニア・プログラマー|このブログサイトの運営もしており、思いついたことをまとめて記事を書いています💡