このドキュメントは、Framerを学ぶ日本のユーザーが韓国語の資料不足で感じる困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しています。Framerを使う皆さまに少しでも役立てば幸いです。

ウェブサイトにカテゴリーページを作成したい場合、複数のCMSコレクションを結合する方法を考慮してください。この方法を使用すると、1つのテンプレートで現在のページに合わせてコンテンツをフィルタリングすることができます。

CMS設定

Framer YouTubeチャンネルを購読してください

動作を理解するために、ランニングをテーマにした簡単なブログを例に挙げてみましょう。このブログには、投稿グリッド、投稿詳細ページ、著者ページがあり、著者ページには著者の略歴と著者が書いた記事が表示されます。これには2つのコレクションが必要です。

• articles: 投稿情報を含むコレクション

• authors: 著者情報を含むコレクション

投稿に著者を指定しておけば、著者情報を一箇所で更新できます。また、articlesコレクションから著者のスラッグを参照し、後でauthorsコレクションからその著者のデータを取得することができます。

ネストされたコレクション

投稿詳細ページに著者名を表示するには、他のコレクション内にコレクションをネストする必要があります。著者のスラッグを基にデータをフィルタリングして、投稿ページに表示できます。この方法は、投稿ページだけでなく記事ページや著者ページなど、他のすべてのページにも同様に活用できます。

• 1つのコレクション内で別のコレクションのデータを取り込んで使用する方法です。

• 例: articlesコレクションで著者のスラッグを保存 → このスラッグを基にauthorsコレクションのデータを取得し、投稿詳細ページに著者名/プロフィールを表示

• 目的: 特定の項目（例: 投稿）と関連した他のコレクション（例: 著者）をマッチングすること

コレクション接続のメリット

コレクションを接続するとカテゴリーページが簡単に作成でき、現在のページ条件に応じてコンテンツをフィルタリングできます。
ウェブサイトにテンプレートとカテゴリーを設定する際に時間を節約できる効率的な方法です。

• 複数のCMSコレクションを関係的に接続して使用する、より大きな概念です。

• 例: articlesとauthorsを接続 → 後でカテゴリーページで「現在のページ条件（カテゴリー=ランニング）」に基づいてarticlesをフィルターしたり、特定の著者が書いた記事だけを集めて表示することができます。

• 目的: テンプレートとフィルタリングを簡単に実装し、ウェブサイト全体のデータ管理の一貫性を確保すること

Strideプロジェクトで練習する →

本記事はFramer公式ブログの‘カテゴリーページ用に複数のCMSコレクションを結合する’を翻訳・改編したコンテンツです。