CMSリストのフィルター：URLクエリフィルター

Point: CMSリストとは

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

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

URLクエリフィルターとは

サイト訪問者がCMSリストの表示アイテムを絞り込み検索できるフィルター（URLクエリフィルター）を設置できます。事前に設定済みの参照プロパティを活用して、設定したカテゴリーやタグなどを検索条件として使用します。

URLクエリフィルターの仕組み

値の取得元としてURLクエリパラメーターを指定し、ページURLに含まれるパラメーター値に応じて表示するCMSアイテムが自動的に絞り込まれる仕組みです。
サイト閲覧者が「URLクエリフィルター」を使用して絞り込み条件を設定すると、URLの末尾に/page?key=valueのようなクエリが付与されます。
クエリ付与済みのリンクを共有することで、絞り込み条件を適用済みのページリンクをシェアすることができます。

URLクエリフィルターの設定条件

URLクエリフィルターは、次の条件を満たす場合にのみ設置が可能です。

URLクエリフィルターの対象モデルに、他のCMSモデルを参照するプロパティ（参照プロパティ）を設定している。
URLクエリフィルターの対象モデルと同じCMSモデルが紐付いたCMSリストが同一サイト内に配置されている。

URLクエリフィルターを設置する

以下の手順で、URLクエリフィルターを設置します。

手順1. CMSダッシュボードで事前準備をする

URLクエリフィルターを設置する前に、Studio CMSのコンテンツを作成しておきます。

動的ページで表示する各種コンテンツを作成する。
URLクエリフィルターの表示項目に使用する参照プロパティを設定する。

手順2. フィルターとCMSリストを設置する

以下いずれかの方法で、フィルターとCMSリストをページに設置します。

プリセットパーツを使用する

接続パネルのCMSタブに、プリセットパーツが用意されています。

プリセットパーツは、フィルターのみ、またはリスト＋フィルターのいずれかを選択できます。

接続パネルを開きます。
[CMS]タブを選択します。
表示されたCMSプリセットから、対象のCMSモデルが紐付いた[フィルター]または[リスト＋フィルター]を選び、スクリーンに配置します。

検索ページを追加する

検索ページには、あらかじめ以下のセットが配置されています。

サイト閲覧者が、検索ワードや検索条件を元にリストの表示アイテムを絞り込める検索ページを短時間で用意できます。

検索フィールド
URLクエリフィルター ※参照プロパティが設定されている場合のみ
CMSリスト

手順3. CMSリストの設定をする

CMSリストのフィルター条件をURLクエリに設定し、リストの各種設定やレイアウト・外観の調整をします。

フィルターで絞り込み検索をしたいCMSリストをスクリーン上で選択します。リストアイテム単体ではなく、CMSリスト全体を選択してください。
右パネルの[データ]タブを開き、[フィルター]メニューを表示します。パネルが閉じている場合は、右パネルを開いてください。
[フィルター]で、[+]をクリックしてフィルターを追加します。
プルダウンリスト内の[モデル]配下から、フィルター条件に使用する参照プロパティを選択します。
フィルター条件が[URLクエリ設定中]になっていることを確認します。
（デフォルトで、URLクエリは有効化されています）
参照プロパティ/マルチセレクトで作成したプロパティをフィルターに設定している場合には、検索条件として[すべてに一致（AND条件）]または[いずれかに一致（OR条件）]のどちらかを選択します。
リストの表示設定をします。
それぞれの設定方法は、以下のヘルプ記事を参照してください。
- 表示数
- 0件の表示
- もっと見るボタン（Read more）
レイアウトや外観の編集は、以下のヘルプページを参考に設定を行なってください。
- ボックスのレイアウト設定
- ボックスの外観設定

手順4. URLクエリフィルターの設定をする

注意：URLクエリフィルターの制限

1つのCMSリストに追加できるフィルターの表示項目は最大5件までです。
表示項目を複数設定した場合に使用できる検索条件は、AND条件のみです。OR検索には対応していません。

フィルターを選択します。
右パネルの[データ]タブを開き、[フィルター設定]メニューを表示します。パネルが閉じている場合は、右パネルを開いてください。
[対象モデル]を確認します。
デフォルトで選択されているCMSモデルから変更する場合には、CMSリストに紐付けたモデルも同時に変更する必要があります。
表示項目を追加します。
表示項目を追加したい場合には、[表示項目]メニュー横の[+]をクリックして追加します。
表示項目を設定します。
設定済みの参照プロパティから、検索条件として使用したいプロパティを表示項目として選択します。
- ラベル：フィルター項目のラベルを編集するフィールドです。
- フィルター解除ラベル：フィルター項目の選択解除ボタンのラベルを編集するフィールドです。
- 項目を削除：フィルター項目を削除します。
[他のページに遷移する]を設定します。
必要に応じて、[他のページに遷移する]の設定が必要になります。トグルをオンにすると、遷移先ページの設定フィールドが表示されます。
この設定が必要な例は、他のページに遷移するの活用例を参考にしてください。
ライブプレビューで、URLクエリフィルターによるリストアイテムの絞り込みが機能することを確認します。
公開済みのサイトを編集している場合には、公開パネルでサイトを更新します。