メインコンテンツにスキップ

CMSリストのフィルター:ダイナミックフィルター(Dynamic)

ページの表示内容に合わせて表示アイテムが自動で切り替わるフィルター機能が、ダイナミックフィルターです。動的ページ内にCMSリストを配置し、CMSモデルを参照している参照プロパティ(シングルセレクト)を条件として設定します。

ダイナミックフィルターとは

ダイナミックフィルター(Dynamic)は、動的ページ内に配置したCMSリストの表示アイテムを、ページで表示中のCMSアイテムに応じて自動で絞り込むフィルターです。

通常のフィルターと異なり、ページごとにフィルター値が自動で切り替わるため、カテゴリー別一覧や関連記事一覧などのページを効率的に作成できます。

Point: CMSリストとは

CMSリストとは、Studio内外のデータを参照してサイト上で表示する動的リストのうち、Studio CMSの内部コンテンツデータを紐付けたリストです。

あらかじめ設定したCMSプロパティを元に、リストを動的に編集することも可能です。


ダイナミックフィルターの設定条件

ダイナミックフィルターは、次の条件をすべて満たす場合に設定できます。

  1. 動的ページ上にCMSリストを配置している。

  2. フィルター条件に参照プロパティ(シングルセレクト)を使用している。

  3. 動的ページ・CMSリスト・フィルター条件の参照プロパティに紐付くCMSモデルの組み合わせが、後述のいずれかのパターンに当てはまっている。

ダイナミックフィルターが使用できないケース

  • 通常ページに配置したCMSリストには、ダイナミックフィルターは設定できません。

  • 参照プロパティをマルチセレクトで設定した場合には、フィルター条件の選択肢に[Dynamic]が表示されません。

  • セレクト/マルチセレクトプロパティは、ダイナミックフィルターの条件として使用できません。

動的ページ・CMSリスト・参照プロパティに紐付くモデルの組み合わせパターン

ダイナミックフィルターは、いま表示している動的ページのCMSアイテムを基準にして、CMSリスト側の参照プロパティの値と照合し、一致するアイテムだけを表示する仕組みです。

そのため、動的ページ・CMSリスト・参照プロパティのモデルの関係が、次のいずれかのパターンになっている必要があります。

以下の例は「カテゴリー」「記事」というCMSモデルが作成されている場合に、どのような組み合わせであればダイナミックフィルターが使用できるかを説明します。

パターン1:動的ページと参照プロパティが同一のCMSモデルと紐付いている。

  • 動的ページに紐付くCMSモデル:「カテゴリー」

  • CMSリストに紐付くCMSモデル:「記事」

  • フィルター条件のプロパティ:記事モデル内の「カテゴリー」(「カテゴリー」モデルを参照する参照プロパティ/シングルセレクト)

このパターンでは、「カテゴリー」ごとの動的ページ上に、そのカテゴリーに属する記事一覧を自動で表示する「カテゴリー別記事一覧ページ」を作成できます。

パターン2:動的ページとCMSリストが同一のCMSモデルと紐付いている。

  • 動的ページのモデル:「記事」

  • CMSリストのモデル:「記事」

  • フィルター条件のプロパティ:記事モデル内の「カテゴリー」(「カテゴリー」モデルを参照する参照プロパティ/シングルセレクト)

このパターンでは、表示中の記事と同じカテゴリーに属する記事のみを絞り込んだ「関連記事一覧」を、記事ページ内に表示できます。


ダイナミックフィルター設定前の事前準備

事前準備 1:CMSダッシュボードでプロパティ構造を設計する

ダイナミックフィルターを利用する前に、CMSダッシュボードで参照関係を含めたプロパティ構造を設計します。

  1. 記事タイプのCMSモデルで記事アイテムを作成します。

  2. カテゴリーやタグなど、記事分類に使用するCMSモデルを作成します。

  3. 記事タイプのCMSモデルに、2で作成したCMSモデルを参照するプロパティ(参照プロパティ)をシングルセレクトとして追加します。マルチセレクトとして追加した場合、フィルター条件にダイナミックフィルター(Dynamic)は表示されません。

    ここで設定した参照プロパティを元に、動的ページ上でリストのアイテム表示が切り替わります。

    以下の画像では、例として[Workshops]という記事タイプモデルに[Category]というカテゴリタイプモデルを参照するプロパティが設定されています。

事前準備 2:記事モデルのアイテムを表示する動的ページを作成する

記事モデルのアイテムを表示する動的ページを作成します。


ダイナミックフィルターを設定する手順

注意: サポート窓口へのお問い合わせについて

  • Studioサポートポリシーに基づき、サポート窓口では個別での設定方法の解説や、フィルター条件の掛け合わせ方法のご相談を承ることはできません。

  • 不具合が疑われる挙動については、Studioへログイン後 右下の[?]よりチャットサポートへお問い合わせください。

手順 1. 動的ページにCMSリストを追加する

  1. デザインエディタを開きます。

  2. 記事一覧やカテゴリ別一覧を表示したい動的ページを追加するか、既存の動的ページを開きます。

  3. 画面左のナビゲーションから[接続]アイコンを選択して、接続パネルを開きます。

  4. リスト表示したいCMSモデルが紐づいているCMSリストを選択して、動的ページ上に配置します。

  5. 外観やレイアウトなど、表示デザインの調整をします。

    必要に応じて、ボックスのデザイン設定の記事コレクションを参照してください。

手順 2. CMSリストにダイナミックフィルターを設定する

  1. ページに配置したCMSリストを選択します。リストアイテム単体ではなく、CMSリスト全体を選択してください。

  2. 右パネルで[データ]タブを選択します。パネルが閉じている場合には、右パネルを開いてください。

  3. [フィルター]で、次の手順でフィルター設定をします。

    1. [フィルター]横の[+]をクリックし、フィルターを追加します。

    2. [フィルター]の入力フィールドで、事前準備1で記事分類用に設定した参照プロパティをプルダウンリストから選択します。

      以下の画像では、例としてカテゴリモデル[Category]の参照プロパティを選択します。

    3. [フィルター条件]の入力フィールドで、[Dynamic]表示のある条件を選択します。

      • [URLクエリ設定中]と表示されている場合は、右隣に表示される[個別に値を設定する]リンクボタンをクリックすると、条件を選択できます。

      • プルダウンリスト上に[Dynamic]表示がない場合は、このページの「ダイナミックフィルターの設定条件」を確認し、条件を満たすようにCMSモデルや参照プロパティを見直します。

手順 3. プレビューや公開サイトでの動作を確認する

  1. エディタ上やライブプレビューで、フィルター条件が期待どおりに機能しているか確認します。

  2. 公開パネルでサイトを更新します。この操作を行うまで、公開サイトには反映されません。


フィルター設定の注意事項

  • フィルターは最大5件まで追加できます。

  • 複数のフィルター条件を設定した場合、すべてAND条件で適用されます。OR条件での絞り込みはできません。

  • ダイナミックフィルターと他のフィルター(固定フィルター、URLクエリフィルター)を組み合わせて使用することもできますが、組み合わせ方によっては表示件数が0件になる場合があります。

こちらの回答で解決しましたか?