リスト：リストプロパティ

Point：リストとは

リストは、同じレイアウトのボックスをまとめて管理できる機能です。

テキストや画像などのデータを一元管理できるほか、Studio CMSなどと接続すれば、更新に応じて内容が自動反映される動的リストとしても使えます。デフォルトでは、静的リストとして機能します。

リスト機能の概要については、リストの記事を参照してください。

デフォルトのリストは静的リストとして機能し、リストプロパティを接続します。リストプロパティは、デザインエディタ内のプロパティ管理表で設定します。

この記事では、リストプロパティの種類やプロパティ管理表の使い方を説明します。

	データ（プロパティ）の管理場所・参照元
リスト（静的なリスト）	デザインエディタ上のプロパティ管理表（右パネル > [データ]タブ）
動的リスト	CMSダッシュボードで作成したコンテンツ（CMSリスト） Data Connect APIで取得した外部データ（APIリスト） RSS連携で取得した外部データ（RSSリスト）

プロパティの種類

リストプロパティは、以下の5種類があります。

プロパティの種類	説明
テキストプロパティ	自由な文字情報（概要や補足説明など）を登録するプロパティです。テキストボックスに紐付けて表示します。
画像プロパティ	アップロード画像やフリー画像など、画像を登録するプロパティです。画像ボックスに紐付けて表示します。
URLプロパティ	プロジェクト内のページや、外部サイトへのURLリンクを登録するプロパティです。リンク設定をしたいボックスに紐付けます。
ブール値プロパティ	ON／OFFや有無などを管理する真偽値のプロパティです。フラグ的な情報（例：おすすめ商品のマーク付け、特定データの色変更）の表現に活用できます。
カラープロパティ	カラーコードなど色の情報を保存するプロパティです。カテゴリごとの色分けや、デザインと連動した表示に活用できます。

ブール値プロパティやカラープロパティの活用例は、以下の記事を参照してください。

Tips：リスト内の画像に代替テキスト（alt）を設定する

リストアイテム内の画像に代替テキスト（alt）を設定する際は、テキストプロパティとして代替テキストを登録してから、対象の画像ボックスへ紐付けます。

デフォルトのリストに紐付けるリストプロパティは、[データ]タブ内のプロパティ管理表で管理します。行にリストアイテム、列にプロパティが並びます。

各行は1つのリストアイテムに対応し、上からリストアイテム番号順（0番、1番、2番…）に並びます。

以下の操作は、スクリーン上とレイヤーパネル上に反映されます。

注意：リストアイテムの追加や複製は、スクリーン上やレイヤーパネル上で操作することができません。

プロパティ管理表を表示します。
表内でそれぞれ以下の操作を行います。
- 行を追加する：プロパティ管理表の最下部を表示し、[+New]をクリックして追加します。
- 行を削除する：対象のアイテムにカーソルを合わせ、表の右端に表示されるゴミ箱アイコンをクリックします。
- 行を並び替える：対象のアイテムにカーソルを合わせ、表の左端に表示されるスライドアイコンをドラッグします。または、レイヤーパネルでリストアイテムのレイヤーをスライドします。

各列は「タイトル」「キャプション」などのプロパティに対応し、それぞれのデータが入ります。

以下の手順でプロパティ項目を編集します。

注意：追加したプロパティをリスト上に反映するには、プロパティとボックスを紐付ける設定が必要です。

プロパティ管理表を表示します。
表内で以下の操作を行います。
- 列を追加する：表の右上の[+]をクリックし、プロパティの種類を選びます。
- 列を削除する：プロパティ名をクリックして[Delete]を押します。
- 列を並べ替える：プロパティ名をドラッグして移動します。
- 名称を編集する：プロパティ名をクリックして名前を編集します。

各アイテムごとに設定したプロパティの値は、右パネルまたはスクリーン上で編集します。

テキストプロパティと画像プロパティのみ、スクリーン上で編集が可能です。

リストアイテムを編集モードに切り替えます。
該当のテキストボックスまたは画像ボックスを選択します。
スクリーン上で直接編集操作をします。
- テキストボックスの編集方法は、テキストボックス > テキストを編集するを参照さいてください。
- 画像ボックスの操作方法は、画像ボックス > 配置済みの画像を変更するを参照してください。
編集後はリスト外をクリックして、編集モードを終了します。

注意：以下の場合、スクリーン上では直接変更できません。プロパティ管理表で編集をしてください。

プロパティ管理表内のプロパティは、スクリーン上のボックスに紐付け設定をすることで初めてリスト上に反映されます。

関連記事