動的リストとは、デザインエディタ外部の変数データを連携し、一覧として動的に反映できるリストです。リストのデータ管理に使用するプロパティ管理表ではなく、Studio内外のデータソースを連携して使用します。
エディタでの要素 | データ（プロパティ）の管理場所・参照元 |
右パネル[データ]タブ内のプロパティ管理表 | |
動的リスト | ・CMSダッシュボードで作成した、Studio CMSのコンテンツ（CMSリスト） ・RSS連携で取得した外部データ（RSSリスト） |
外部データ連携時に制限のある機能
Studio CMSのデータを紐付けるCMSリストと、APIやRSSから取得した外部データを紐付けるAPI / RSSリストでは、動的リストで利用できる機能が異なります。
機能 | APIリスト | RSSリスト | 注意点 |
○ | ○ | 外部データ連携により取得した変数データをプロパティとして紐付けできます。 | |
△ | × | 一部機能が利用できません。詳細は、後述の外部データ連携時に制限のある表示設定を参照してください。 | |
△ | × | RSSリストでは利用できません。 | |
× | × | 利用できません。 |
動的リストを追加する
以下のいずれかの方法で、デザインエディタ上のページに動的リストを配置します。
※リストに紐付けるデータは事前に準備しておく必要があります。
プリセットされた動的リストを追加する
データが連携済みであれば、データ紐付け済みのCMSリストとRSSリストを追加できます。APIリストは後述の既存のリストを動的リストに変換する方法で作成してください。
画面左のナビゲーションから、[接続]アイコン
をクリックします。[CMS]、[RSS]タブのいずれかを選択します。
一覧から配置したい動的リストを選び、ドラッグ＆ドロップまたはクリックでスクリーン上に配置します。
紐付けデータの変更が必要な場合には、紐付けたデータを変更するの手順を参照してください。
既存のリストを動的リストに変換する
手動作成したリストに後からデータを紐付けて、動的リストに変換します。APIリストは必ずこの方法で作成する必要があります。
動的リストに変換したいリストを選択します。
右パネルで[データ]タブを開きます。
パネルが閉じている場合は、右パネルを開いてください。
リストの[データを紐付け]をクリックします。
紐付けたいデータを選択して、リストを動的リストに変換します。
紐付けたデータとの連携を解除する
データの紐付けを解除すると、動的リストから静的なリストに自動的に変換されます。
データの連携を解除しても、リストのデザインには影響しません。
対象の動的リストを選択します。
右パネルで[データ]タブを開きます。
パネルが閉じている場合は、右パネルを開いてください。
[データ]タブ右上部の、リストに紐付くモデル/コレクション名をクリックします。
[データの連携を解除]を選択して、連携を解除します。
紐付けたデータを変更する
配置済みの動的リストに紐付けたデータは、CMSモデル、CMSコレクション、API、RSS のいずれにも後から変更できます。
データを変更しても、リストのデザインには影響しません。
対象の動的リストを選択します。
右パネルで[データ]タブを開きます。
パネルが閉じている場合は、右パネルを開いてください。
[リスト]の紐付けデータ入力欄をクリックします。
表示されたデータリストから、変更するデータを選択します。
変数データ（プロパティ）をボックス要素に紐付ける
リスト内のテキストや画像ボックスなどに変数データ（プロパティ）を紐付け、データを表示できます。
CMSリスト内のボックス要素に変数データ（プロパティ）を紐付ける
Studio CMSのプロパティをCMSリスト内のボックス要素に紐付ける方法は、以下のヘルプ記事を参照してください。
API / RSSリスト内のボックス要素に変数データ（プロパティ）を紐付ける
APIやRSSで連携したデータをリスト内のボックス要素に紐付ける方法は、以下のヘルプ記事を参照してください。
リストアイテムの表示設定をする
動的リストでは、表示するアイテム数や、アイテムが0件のときの表示方法などの設定ができます。
Studioの内部データを連携するCMSリストと、外部データを連携するAPI／RSSリストでは利用できる表示設定の内容が異なります。
表示設定をしたい動的リストを選択します。
リスト内のアイテムではなく、リスト自体を選択してください。
（レイヤーパネルで要素を選択する場合には、リストアイコン
のレイヤーを選択します）右パネルで[データ]タブを開きます。
パネルが閉じている場合は、右パネルを開いてください。
各項目の設定を行います。
すでにサイトを公開済みの場合には、設定後、公開パネルでサイトを更新します。この操作を行うまで、公開サイトへは反映されません。
対応機能一覧
機能 | CMSリスト | APIリスト | RSSリスト |
○ | × | × | |
○ | ○ | ○ | |
○ | ○ | ○ | |
○ | ○ | × | |
○ | × | × |
フィルター（CMSリストで使用可）
あらかじめ設定したCMSプロパティ、または検索ワードをを元にフィルター条件を設定し、リストで表示するアイテムを絞り込めます。
詳細は、フィルター：CMSリストの表示アイテムを絞り込むをご覧ください。
表示数
リストに表示するアイテムの最大数を指定できます。設定した件数を超えるアイテムはリストに表示されません。
０件の表示
リスト内のアイテムが０件の場合に表示するデザインの調整ができます。
「０件の表示」を有効にして、表示プレビューで確認しながらデザインを編集できます。
もっと見るボタン（CMSリスト・APIリストで使用可）
表示件数の上限を設ける設定で、上限を超える場合にリスト下部へ［もっと見る］ボタンが自動的に表示されます。
クリックすると指定した件数分のアイテムを追加で読み込みます。
表示数は50件まで設定できます。
読み込むアイテムがない場合には、ボタンは表示されません。
ボタンのデザインは、スクリーン上で確認・調整ができます。
注意：CMSコレクションを紐付けたCMSリストでは設定できません。
同一アイテムを非表示（CMSリストで使用可）
CMS記事の詳細ページに関連記事リストを設置した際、現在表示中の記事をリスト内に含めない設定です。
以下の2つの条件を満たす場合のみ、設定用のチェックボックスが表示されます。
注意： 動的モーダルでの「同一アイテムを非表示」機能の動作条件
動的モーダルで［同一アイテムを非表示］を有効にするには、モーダルのリンク元ページが動的ページである必要があります。
リストのレイアウトや外観を設定する
他のボックス要素と同様に動的リストのデザインや装飾を編集できます。
条件付きスタイルの設定や表示条件の設定をすることで、特定のアイテムのみ特別なデザインや装飾を適用することも可能です。
条件付きスタイル（CMSリスト・APIリストで使用可）
リスト要素に「最初のアイテム」スタイルを設定し、リストの先頭だけ異なるデザインを適用できます。
詳しくは、条件付きスタイル > 最初のアイテムを参照してください。
表示条件（CMSリストで使用可）
特定の条件に合致する場合のみ、リストやページ内の要素を表示できます。
例：ブール値プロパティを使い、フラグが「true」の記事だけを表示する。
設定方法の詳細は、以下ヘルプ記事をご覧ください。
ブログ 記事 一覧 API RSS