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