動的ページは、Studio CMSで管理しているCMSアイテムや、Data Connect APIで取得した詳細データを、ページごとに動的に表示するためのページタイプです。
本記事では、Studio CMSで管理している1件分のデータを「CMSアイテム」、Data Connect APIで取得した1件分のデータを「詳細データ」と表記します。
Point: Studio CMSとは
Studio CMSは、Studio上でコンテンツを構造化して管理・更新できるCMS（Content Management System）機能です。 モデルやアイテム、プロパティを組み合わせて、ブログやニュースなどの更新性が高いコンテンツを一元管理します。
Studio CMSの仕組みや基本的な使い方は、以下の記事も参照してください。
利用できるデータ
動的ページでは、作成時に接続するデータソースを選択します。
接続できるデータは、以下のデータです。
Studio CMSで作成したCMSモデル
Data Connect APIの詳細エンドポイント
注意： Data Connect APIの詳細エンドポイント取得には、Business Plus以上のプラン契約が必要です。
動的ページを追加する
Tips: CMSが初期化されていないプロジェクトでも、有効なAPIの詳細エンドポイントがあれば、動的ページを作成できます。
スクリーンで表示するデータを切り替える
動的ページでは、接続したデータソースのうち、1件分のデータをスクリーン上でプレビュー表示できます。
Studio CMS内のデータを紐付けた動的ページの場合には、紐付けたCMSモデルの先頭のCMSアイテムが初期表示され、ページパネル下部のメニューから表示するアイテムの切り替えができます。
注意：APIから取得したデータは、表示データの切り替えができません。
動的ページ内のボックスにデータを紐付ける
動的ページに配置したボックスには、ページに紐付けたデータソースのフィールドを紐付けて、内容を動的に表示します。
Studio CMSではCMSプロパティを、APIでは詳細データのフィールドを利用します。
動的ページにテキストボックスや画像ボックスを配置します。
紐付けたい要素を選択します。
Studio CMSを使う場合はCMSプロパティを、APIを使う場合は詳細データのフィールドを選択します。
各ボックスに必要なフィールドを紐付けます。
CMSプロパティの詳細な紐付け方法は、デザインエディタで、ボックス要素とCMSプロパティを紐付けるも参照してください。
CMSプロパティごとの挙動や仕様は、CMSプロパティをご覧ください。
データソースを変更する
動的ページに紐付けるデータソースを変更する際は、ページ設定タブで操作します。
注意：データ変更における留意点
Studio CMSのCMSモデルからAPIで取得したデータへの付け替えなど、取得場所が異なるデータへの変更はできません。
データソースを変更しても、スクリーン上のデザイン自体は保持されますが、変更前後でフィールド構造が異なる場合は、各要素のデータ紐付けを再設定する必要があります。
ページパネルで対象の動的ページを選択します。
ページ設定タブを開きます。
Studio CMSを使う場合は[CMS Model]で新しく紐付けるCMSモデルを選択します。
APIを使う場合は、APIの詳細エンドポイントを選択します。
動的ページのメタ情報を設定する
動的ページにも、ページタイトル、説明文、カバー画像などのメタ情報を設定できます。
静的ページと同様に、右パネル上の[ページ][サイト]タブで設定をします。
詳しい設定方法やSEOについて詳しくは、次のヘルプ記事を参照してください。
パスとパラメータを設定する
動的ページのURLは、固定のパスと動的なパラメータで構成します。Studio CMSとAPIでは、動的な部分に使う値が異なります。
Studio CMSのパス設定
Studio CMSの動的ページでは、URLパスに:slugを使います。
slugはCMSダッシュボードでCMSアイテムごとに設定する値で、:slug部分にCMSアイテムのSlug（スラッグ）が入ります。
詳細は、Slug（スラッグ）の記事を参照してください。
Data Connect APIのパス設定
Data Connect APIで取得したデータを紐づけた動的ページでは、詳細エンドポイントのURLパラメータ名をページパスにも使用します。
たとえば詳細エンドポイントが https://example.com/api/items/:id の場合、ページ側のパスも /contents/:id のように設定します。
一覧ページから詳細ページへリンクする際は、一覧データのidなどの識別子を、そのパラメータに渡します。パラメータ名が一致していない場合、正しい詳細データを取得できません。
動的ページでボックスのデザイン編集をする
動的ページ内の各ボックスのデザイン編集は、通常のページと同様にデザインエディタで行います。
基本のデザイン設定は、接続しているすべてのデータで共通です。
テキスト、画像、余白、レイアウトなどの設定は、通常のページと同じ操作で編集できます。
データごとに表示内容は変わりますが、ボックスの基本デザインは同じ設定が適用されます。
ブール値プロパティや表示条件を活用する
注意：Data Connect APIを紐付けた動的ページでは、ブール値プロパティや表示条件は利用できません。
Studio CMSを紐付けた動的ページでは、ブール値プロパティや表示条件を使って、条件に応じた表示の切り替えができます。
たとえば、特定のCMSアイテムだけバッジを表示したり、要素の表示・非表示の切り替えが可能です。また、条件付きスタイルを使用して、条件に応じて色や見た目を切り替えることができます。
設定方法の詳細は、以下の記事を参照してください。
記事 記事ごとに設定 CMS ブログ