複数コンテンツ参照

複数コンテンツ参照は、別のAPIで管理している複数のコンテンツを紐付けることができるフィールドです。
記事に対して複数のカテゴリを紐付けたり、関連記事を複数選択して紐付けたりするなど、情報の共通化やリレーションを持たせる際に利用します。

データの入稿方法

• 基本的な操作方法はコンテンツ参照フィールドと同様です。
• 複数コンテンツ参照フィールドの場合は複数のコンテンツを一括選択が可能です。

補足

• 選択したコンテンツの順番はドラッグ＆ドロップで並び替えが可能です。
• 管理画面上の複数コンテンツ参照の順序はAPIのレスポンスにも反映され、配列は管理画面の並び順で返却されます。

API、CSVを利用した入稿については以下のドキュメントをご参照ください。

参照元コンテンツの確認

特定のコンテンツが他のコンテンツから参照されている場合、コンテンツ詳細画面の右上に[被参照n件]というボタンが表示されるので、現在の被参照数を確認することができます。
このボタンをクリックすると、そのコンテンツを引用している参照元のコンテンツ一覧がモーダルウィンドウで表示されます。

制限事項／注意事項

• 参照先となるAPIの閲覧権限がない場合、コンテンツの選択や選択状況の確認を行うことができません。
• 選択したコンテンツが下書き中や公開終了の場合はAPIレスポンスには含まれません。APIキーに「下書きコンテンツの全取得」や「公開終了コンテンツの全取得」の権限がある場合は取得可能です。
• 既知の不具合として、参照されていないコンテンツに「被参照◯件」が紐づいているケースがあります。こちらの詳細については、ヘルプ記事「参照されていないコンテンツに「被参照◯件」が紐づいており削除できません。どうすればいいですか？」をご参照ください。

詳細設定

GET APIのレスポンス形式

詳細は以下のドキュメントをご参照ください。

フロントエンドでの利用方法

複数コンテンツ参照フィールドはオブジェクトの配列形式でデータが返されるため、ループ処理を用いて参照先の情報を表示します。
以下はNext.jsで、記事詳細ページに関連記事のリストを表示する実装例です。

export default async function Page({ params }) {
  const { slug } = await params;

  // microCMS JavaScript SDK（https://github.com/microcmsio/microcms-js-sdk）を使用してデータを取得
  const data = await client.getListDetail({
    endpoint: "blog",
    contentId: slug,
  });

  return (
    <main>
      <h2>関連記事</h2>
      <div>
        {/* relatedArticles はフィールドIDです。実際のフィールドIDに置き換えてください */}
        {data.relatedArticles.map((article) => (
          <article key={article.id}>
            <Link href={`/blog/${article.id}`}>
              <Image
                src={article.eyecatch.url}
                alt={article.eyecatch.alt || ""}
                width={200}
                height={120}
              />
              <p>{article.title}</p>
            </Link>
          </article>
        ))}
      </div>
    </main>
  );
}