【LWR × CMS】脱・固定テキスト!Salesforce CMS (拡張CMS) と「データバインディング」でサイトを動的に管理する

この記事はバージョン Winter ’26 において執筆しています。
現在の動作と異なる場合がありますので、ご認識おきください。

Webサイトの運用フェーズにおいて、「トップページの文言を一行変えるためだけに、システム管理者がビルダーを開いて、修正して、サイトを再公開する」…そんな非効率な作業をしていませんか?

モダンなサイト構築において、「コンテンツ(中身)」と「プレゼンテーション(見た目)」の分離は常識です。 LWRサイトでは、Salesforce CMS (Digital Experiences) をバックエンドとして利用し、「データバインディング」 という手法を使ってコンテンツを流し込むのが標準の作法です。

この記事では、LWRサイトの標準である 「拡張CMSワークスペース」 の基本から、ビルダー上でコーディングなしに画像やテキストを動的に紐付けるテクニックまでを解説します。

「拡張 CMS (Enhanced CMS)」とは何か?

Salesforce CMS には、従来の「CMS 1.0」と、新しい「拡張 CMS (Enhanced CMS / CMS 2.0)」の2種類が存在します。 LWRサイトを構築する場合、「拡張 CMS」 の利用が事実上の標準(推奨)となります。

  • 何が違うのか?
    • 基盤が強化され、検索やフォルダ管理のパフォーマンスが向上しています。
    • LWRサイトへの「データバインディング」がネイティブ対応しています。
    • サイドバイサイド編集: コンテンツを編集しながら、実際のサイトでの見え方をプレビューできます。

これからワークスペースを作るなら、迷わず「拡張CMS」を選択しましょう。

ワークスペースとコンテンツの作成

まずはコンテンツの入れ物である「ワークスペース」を作成し、そこにサイト(チャネル)を紐付けます。

手順:

  1. ワークスペース作成
    • アプリランチャーから「デジタルエクスペリエンス」を開き、「ワークスペースを追加」をクリックします。
  2. チャネルの追加
    • ウィザードの途中で「チャネルを追加」画面が表示されます。ここで、コンテンツを表示させたいサイトを選択します。
  3. コンテンツ作成
    • ワークスペースができたら、「コンテンツを作成」から「ニュース」や「画像」を作成し、「公開」 します。
  • デジタルエクスペリエンス
  • ワークスペース追加
  • コンテンツ作成
  • コンテンツ公開

これだけで準備は完了です。ビルダーに戻り、コンテンツが表示されるか確認しましょう。

LWRの魔法「データバインディング」

ここからが本題です。ビルダーでテキストを「手打ち」する必要はありません。

シナリオ:ニュース詳細ページを作る

例えば、「ニュース詳細ページ」にタイトルと本文を表示する場合を考えます。

  1. ビルダーで 「CMS コンテンツ詳細(ニュース Detail)」 ページを開きます(または作成します)。
  2. 「テキストブロック」 などのコンポーネントを配置します。
  3. 「テキスト(または式)」で 題名 {!Item.title} や 本文 {!Item.contentBody.body} を選択します。

すると、実際のプレビュー画面ではURLパラメータ(contentKey)に応じて、CMSから取得した「実際のニュースタイトル」に自動的に置き換わります。

これが データバインディング です。レイアウト(LWR)はそのままで、中身(CMS)だけを動的に入れ替えることができます。

コレクションで「一覧」を表示する

1つの記事ではなく、「最新ニュース一覧」や「製品リスト」を表示するには、「コレクション」 機能を使用します。

  1. コンテンツ分類を作成
    • アプリランチャーから「コンテンツ分類」を開き、「ワークスペースを追加」をクリックします。
    • コンテンツ分類とその子用語を階層で作成します。用語は半角英数で名前を付けましょう。
  2. コンテンツにタグ付け
    • 事前に作成したコンテンツにタグとして先ほど作成した子用語を関連付けます。
  3. コレクションを作成
    • ワークスペース内の「追加 ▼」から「コレクション」で、特定の条件(例:タグ=News)でフィルタリングした動的コレクションを作成して公開します。
  4. コンポーネントを配置
    • ビルダーで 「グリッド」 コンポーネントを配置します。
  5. データマッピング
    • 「テキストブロック」 などのコンポーネントを配置します。配置したコンポーネントを、コレクションの件数だけ繰り返すことになります。
    • 配置したコンポーネントに対して、「テキスト(または式)」で 題名 {!Item.title} や 抜粋 {!Item.body.contentBody.excerpt} を選択します。
    • 画像の例では、題名と抜粋用の「テキストブロック」をひとつずつ配置しています。コレクションに二件のニュースがありますので、2セットが繰り返し表示されています。
    • 「テキストブロックをリンクにする」にチェックを入れることで、サイト内の個別詳細ページに遷移させることもできます。
  • コンテンツ分類作成
  • タグ付け
  • 動的コレクション作成
  • コンポーネント配置
  • データマッピング
  • コレクションを作成
  • 保存して公開

まとめ:CMS導入は「運用」への投資

  • 固定テキストで作ったサイトは、修正のたびに「開発者(管理者)」の手を煩わせます。
  • CMSとデータバインディングで構築されたサイトは、「マーケティング担当者」がコンテンツを更新するだけで、即座にサイトに反映されます。

初期構築の手間は少しかかりますが、運用フェーズに入った瞬間にそのコストは回収できます。 「更新頻度が高い箇所」は、必ずCMS化することを設計段階で提案しましょう。

参考URL

拡張CMSワークスペースについて

LWRサイトでのデータバインディング

読者の声

タイトルとURLをコピーしました