Salesforce Experience CloudでCMS画像をLWCで表示する方法

こんにちは。
株式会社ROBOT PAYMENTでサブスクペイ Professionalの開発を担当している泉谷です。今回が初投稿になります。

SalesforceのExperience Cloudを使ってサイト運営をしていると、「Salesforce CMSにアップロードした画像をサイト上で表示したい！」というシーンがよくあります。
ここでは、Experience Cloudの Build Your Own (Aura) テンプレートを前提に、Salesforce CMSで画像コンテンツを登録し、LWCからその画像を呼び出して表示する方法をまとめます。

CMS画像をLWCで表示する基本的な流れ

Salesforce CMSに画像コンテンツを登録し、公開状態にする
LWCのmetaファイルで、Experience Builderから画像を選択できるようにする
CMS画像URLを取得するためのApexメソッドを作成する
LWCのJavaScriptからApexメソッドを呼び出し、画像のURLを取得する
取得したURLをLWCのHTMLにセットして、画像として表示する

1. Salesforce CMSに画像コンテンツを登録・公開する

まずは画像をSalesforce CMSに登録して公開します。今回はCMSワークスペース（拡張CMSワークスペースではありません）を利用します。

＜手順＞
a. CMS ワークスペースで画像コンテンツを「Image」としてアップロードします。 b. 画像コンテンツは「公開」します。
（未公開のままだと、Experience Cloudサイト側から画像を選択できません）

2. LWCのmetaファイルでCMS画像を選択可能にする

Experience BuilderからCMSに登録した画像を直接選択できるようにするには、LWCの js-meta.xml ファイルで「ContentReference」プロパティを定義する必要があります。
この設定を追加することで、Experience Builderのプロパティパネルから、Salesforce CMSで公開済みの画像を選択できるようになります。

※カスタムLWCでCMSコンテンツを利用する方法（公式ヘルプ）

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>63.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>DummyFetchImageComponent</masterLabel>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property type="ContentReference" name="contentId" label="Content ID" filter="cms_image"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

3.ApexメソッドでCMS画像の情報を取得する

Apex側では、Salesforceが提供する標準APIのgetManagedContentByContentKeysメソッドを利用して、CMSのコンテンツ情報（画像URLなど）を取得します。
このメソッドは、コミュニティIDとコンテンツキーのリストを受け取り、該当するCMSコンテンツの詳細情報を返します。コンテンツキーは複数まとめて指定することも可能です。
また、引数のshowAbsoluteUrlをtrueにすることで、画像URLがhttps://〜のような絶対パスで返ってくるため、LWCからそのまま利用できて便利です。
ちなみに、LWCから@wireで呼び出すためには、Apexメソッドに@AuraEnabled(cacheable=true) を付与する必要があります（public staticメソッドの定義直前に記述）。

以下は、LWCのJavaScriptでインポートしたDummyContentControllerクラスのメソッドgetContentUrlFuncのサンプルです。

public with sharing class DummyContentController {

    @AuraEnabled(cacheable=true)
    public static String getContentUrlFunc(String communityId, String contentId) {

        // contentIdをList型にしてメソッドに渡す
        List<String> contentKeys = new List<String>{ contentId };

        ConnectApi.ManagedContentVersionCollection contentCollection =
            ConnectApi.ManagedContent.getManagedContentByContentKeys(
                communityId,
                contentKeys,
                null,         // pageParam
                null,         // pageSize
                null,         // language
                null,         // managedContentType
                true          // showAbsoluteUrl
            );

        ConnectApi.ManagedContentMediaSourceNodeValue mediaNode =
            (ConnectApi.ManagedContentMediaSourceNodeValue) contentCollection.items[0].contentNodes.get('source');

        return mediaNode.url;
    }
}

戻り値はConnectApi.ManagedContentVersionCollection型で、itemsプロパティから各コンテンツの詳細情報（コンテンツキー、タイトル、画像URLなど）を参照できます。この標準メソッドを使うことで、ApexからCMSの画像情報を効率よく取得し、LWCへ渡すことができます。

【補足：Apexクラスへのアクセス権限の付与】実行ユーザー（Experience Cloudのゲストユーザーなど）には、上記のApexクラス（DummyContentController）へのアクセス権を、「プロファイル」または「権限セット」から付与してください。

4. LWCのJavaScriptでApexメソッドを呼出し、画像のURLを取得する

LWCで画像の情報（例：画像URLなど）を表示するには、ApexメソッドをJavaScriptファイルから@wireデコレーターを用いて呼び出し、そのメソッドで取得した画像情報をHTML側で利用します。
ApexメソッドからCMS画像情報(URL等)を取得するためには、コミュニティIDとコンテンツキーの2つの情報が必要です。

コミュニティID

画像を取得したい対象のExperience Cloudサイトを特定するために使います。
コンテンツキー

Salesforce CMSに登録された各画像コンテンツを一意に識別するためのキーです。コンテンツキーは、Experience Builderでの画像選択を通じて、LWCの@api contentIdプロパティに渡されます。

これら2つの情報を指定して、Apexメソッドから該当するCMS画像情報を取得します。 communityId や、Apexメソッド（※ここではサンプルとしてgetContentUrlFuncとしています）は、以下のようにインポートします。

import { LightningElement, api, wire } from 'lwc';
import getContentUrlFunc from '@salesforce/Apex/DummyContentController.getContentUrlFunc';
import communityId from '@salesforce/community/Id';

export default class DummyFetchImageComponent extends LightningElement {
    @api contentId;
    imageUrl;

    @wire(getContentUrlFunc, { communityId: communityId, contentId: '$contentId' })
    wiredContent({ error, data }) {
        if (data) {
            // 実際の内容をconsoleで確認し、必要な値（画像URLなど）を取得してください。
            this.imageUrl = data;
        } else if (error) {
            // エラー処理
            console.log('error:', JSON.stringify(error, null, 2));
        }
    }
}

5.取得した画像URLをLWCのHTMLで画像として表示する

LWCのHTMLテンプレートでは、取得した画像URL（imageUrl）をタグのsrc属性にセットして表示します。

<template>
    <template lwc:if={imageUrl}>
        <img src={imageUrl} alt="CMS Image" />
    </template>
</template>

まとめ

以下の手順で、Experience CloudサイトにCMS画像を簡単に表示できるようになります。

Salesforce CMSに画像コンテンツを登録し、公開状態にする
LWCのmetaファイルで、Experience Builderから画像を選択できるようにする
CMS画像URLを取得するためのApexメソッドを作成する
LWCのJavaScriptからApexメソッドを呼び出し、画像のURLを取得する
取得したURLをLWCのHTMLにセットして、画像として表示する

ぜひ活用してみてください！

We are hiring！！

ROBOT PAYMENTでは一緒に働く仲間を募集しています!!!

ROBOT PAYMENT TECH-BLOG

株式会社ROBOT PAYMENTのテックブログです