microCMS｜繰り返しフィールドの活用アイデア7選
microCMSで使用できる繰り返しフィールドは、あらかじめ設定したカスタムフィールドのなかから使うものを選択し、好きな順番で好きなだけ繰り返し登録できるフィールドのことです。
自由度が高く、いろいろな用途・目的で使えるフィールドとなっていますので、今回はこの「繰り返しフィールド」を活用するアイデアをまとめてみました。
microCMSを利用する際の、ひらめきの元となれば幸いです。
独自プロパティ付きリッチエディタ
ブログの記事など文章の入力に使用するリッチエディタは、太文字や箇条書きなど様々な編集を行うことができますが、これらで網羅できないことをしたいケースもあるかと思います。例えば、上のようにインフォメッセージや警告メッセージとするために背景色を変更したり、文字フォントをブロックごとに切り替えたり、コードブロックに適用するシンタックスハイライトのプログラミング言語を変更するケースなどです。
このようなケースの場合、文章（種類：リッチテキスト）とプロパティ（種類：セレクトフィールド）を持つカスタムフィールドを設定し、繰り返しフィールドに登録することで対応できます。
カスタムフィールドの設定例は下の通りです。
コンテンツ入力時はこのようなイメージです。
時系列表示
上のような企業サイトの沿革ページやイベントサイトの日程ページなど、日時＋文章の組み合わせで表示するケースでは、日時（種類：日時）と文章（種類：テキストフィールド）を持つカスタムフィールドを設定し、繰り返しフィールドに登録することで対応できます。
カスタムフィールドの設定例は下の通りです。
コンテンツ入力時はこのようなイメージです。
選択式フィールド
microCMSで入力する際に、1つの入力フィールドに対して画像や動画、YouTube埋め込みなどを場合によって選択したいケースもあるかと思います。このようなケースでも、少しトリッキーなやり方ですが、繰り返しフィールドで対応することが可能です。
選択したいカスタムフィールドをそれぞれ作成し、繰り返しフィールに登録します。ポイントは繰り返しフィールドの設定の「繰り返しフィールドの数を制限する」で最大を1にしておくことです。こうすることで入力フィールドの選択に対応しつつ、複数回入力を防ぐことができます。
繰り返しフィールドの設定例は下の通りです。
コンテンツ入力時はこのようなイメージです。
フロントエンドでの挿入フラグとして利用
Googleアドセンスの広告など「microCMS側で特に入力するものはないが差し込みたいもの」を、上のようにブログの記事の合間に挿入したいケースもあるかと思います。このようなケースでも、少しトリッキーなやり方ですが、繰り返しフィールドで対応することが可能です。
繰り返しフィールドに文章用のカスタムフィールドと、挿入用カスタムフィールドを登録します。コンテンツ入力時には、記事を書くときは文章用のカスタムフィールドを使用し、広告などを差し込みたい時には挿入用カスタムフィールドを入れるようなイメージです。あとはフロントエンド側で、文章用と挿入用カスタムフィールドの処理を分けるように実装します。
この方法だと挿入用カスタムフィールドが「繰り返しフィールドのどの位置にあるか」だけ分かればよいので、入力が不要なようにスキーマ設定をしておくのがおすすめです。例えばスキーマにはセレクトフィールドのみにして、必須項目ONで選択肢は1つ、初期値をその選択肢にします。
コンテンツ入力時はこのようなイメージです。
サイト内記事のリンクカード
カスタムフィールドにはコンテンツ参照のフィールドも設定できるため、上のようにブログの記事の合間にサイト内の他の記事へのリンクカードを差し込むということも、繰り返しフィールドを使うことで可能となります。
繰り返しフィールドに文章用のカスタムフィールドとリンクカード用カスタムフィールドを登録します。コンテンツ入力時には、記事を書くときは文章用のカスタムフィールドを使用し、リンクカードを差し込みたい時にはリンクカード用カスタムフィールドを入れるようなイメージです。
リンクカード用カスタムフィールドの設定例は下の通りです。
コンテンツ入力時はこのようなイメージです。
複数まとめて画像を設定する
【2023/05/23追記】
繰り返しフィールドを使わなくても複数の画像を設定できる専用のフィールドが、microCMSに追加されました。詳細は下の公式ブログ「複数画像フィールドが追加されました | microCMSブログ」を参照ください。
上のようなカルーセルやスライドショーなど複数の画像をまとめて表示する際には、画像フィールドだけをもつカスタムフィールドを設定し、繰り返しフィールドに登録することで対応できます。繰り返しフィールドを使う利点は、設定する画像の枚数を自由に変えられるところです。また、繰り返す最小数と最大数を設定することで下限・上限を付けることも可能です。
カスタムフィールドの設定例は下の通りです。
コンテンツ入力時はこのようなイメージです。
商品の一覧登録
上のような飲食店のメニューや、商品一覧に表示する内容を一覧で登録したいケースもあるかと思います。
このようなケースの場合、商品名（種類：テキストフィールド）、価格（種類：数字）、商品イメージ（種類：画像）を持つカスタムフィールドを設定し、繰り返しフィールドに登録することで対応できます。
カスタムフィールドの設定例は下の通りです。
コンテンツ入力時はこのようなイメージです。
終わりに
microCMSの繰り返しフィールドを活用するアイデアを紹介しました。繰り返しフィールドは、使ってみるとよくわかるのですが、自由度が高くアイデア次第で色々なことが対応できる仕組みになっています。何かやりたいことや課題があったときに、どうやって対応しようか考えてみるもの面白いです。
最後まで読んでいただき、ありがとうございました。
関連タグの記事
