Go to Qiita Advent Calendar 2024 Top
LoginSignup
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Salesforce PlatformAdvent Calendar 2020

Day 18
@arufian(アルフィアン ビュスロ)

SalesforceCMSのコンテンツを自作のLightning Web Componentで表示させてみた

Last updated at Posted at 2020-12-17

背景

昨年リリースされたSalesforce CMSは今Salesforce機能の一つとして成長してます。
以下主な目的でSalesforce CMS利用できると思います。

その流れで、自作のカスタムLightningコンポーネントでCMSのコンテンツを表示させることは簡単にできるだろうと思いきや、詳しいやり方やベストプラクティスは公式ドキュメントにも中々見つかりませんでした。一つの手がかりがこちらの記事です。
https://developer.salesforce.com/blogs/2019/11/content-delivery-api-to-extend-or-integrate-content.html
上記の記事通りで実際にやってみると意外と落とし穴がありましたね。

よしやってみよう！

全てのソースコードはGithubにあげました。参考してもらえれば嬉しいです。

まずはAPEXクラスを作成

CMSコンテンツデータを取得するためにはLWC（Lightning Web Component）のみで取得することができないので、Apexを経由して取得する必要があります。

書いたApexのコードはこちらです：

public with sharing class MyContentManager {
 
    @AuraEnabled(cacheable=true)
    public static List<ConnectApi.ManagedContentVersion> initMethod(){
        MCController mcController = new MCController();
        return mcController.results;
    }
 
    public class MCController{
        private String communityId;
        public List<ConnectApi.ManagedContentVersion> results;
 
        public MCController(){
            communityId = Network.getNetworkId();
            getMContent();
        }
         
        public void getMContent() {
            try{
                String language = 'ja';
                ConnectApi.ManagedContentVersionCollection contentList = ConnectApi.ManagedContent.getAllManagedContent(communityId, 0, 25, language, 'cms_image', true);
                System.debug(contentList);
                results = contentList.items;           
            }
            catch(ConnectApi.ConnectApiException e){
                System.debug('Error Message : '+e);
                results = new List<ConnectApi.ManagedContentVersion>();
            }           
        }
    }   
}

一つ一つのコードを見ていきましょう。

MCController

こちらのクラスはConnectApiよりSalesforceCMSのコンテンツを取得するためのでクラスです。ConnectAPIの仕様はこちらで参考できます。

今回SalesforceCMSのコンテンツは特定のコミュニティーページに作成されましたので、以下の用にMCControllerのコンストラクターでコミュニティーIDを取得します。

communityId = Network.getNetworkId();

MCControllerのgetMContentメソッド

Apexクラスのメイン処理はこちらのメソッドにあります。
ConnectApi.ManagedContent.getAllManagedContentでCMSコンテンツを取得します。以下はgetAllManagedContentメソッドの仕様：

getAllManagedContent(String communityId, Integer pageParam, Integer pageSize, String language, String managedContentType, showAbsoluteUrl)

パラメータ説明：

- communityId: コミュニティID
- pageParam :  ページ数、０を指摘するとページ１のコンテンツが返ってきます
- pageSize: ページ毎の最大コンテンツ数
- language: コンテンツは言語毎に分かれるのでどの言語のコンテンツを取得するのを指摘する必要があります
- managedContentType: 一番重要なパラメータで、コンテンツの種類名を指摘します
- showAbsoluteUrl: 取得するコンテンツのURLが絶対URLか相対かを指摘することができます。外部サービスやコミュニティーページには絶対URLを取得した方が無難です。

コンテンツの種類名はSalesforce上で拝見することができないので、メーターデータを覗きながら取得しないといけません。以下の画像（GIF）をご参考ください。
contenttype-metadata.gif

results = contentList.items;

得されたコンテンツのアイテムをresults変数に渡します。後でこちらの変数はLWC側に渡します。

DEMJContentManagementクラスのinitMethodメソッド

@AuraEnabled(cacheable=true)
public static List<ConnectApi.ManagedContentVersion> initMethod(){
    MCController mcController = new MCController();
    return mcController.results;
}

こちらのメソッドはLWC側にコンテンツを渡すためのメソッドです。先ほど取得されたresults変数はこちらのメソッドでLWCに渡されます。

LWCコンポーネント

LWCでは CSS、HTML、JS、メターデータのファイルで分かれてます。今回はCSSとメタデータは使ってないので、JSとHTMLのみ解説します。

JavaScript

全体的な書いたJSコードはこちら：

import { LightningElement, wire, track } from 'lwc';

import initMethod from '@salesforce/apex/MyContentManager.initMethod';

export default class DemjCMSContent extends LightningElement {
  @track results;
  @track datas = [];
  @track loaded = false;

  @wire(initMethod)
  loadRecord({ error, data }) {
    if (error) console.error(error);
    if (data) {
      this.results = data;
      this.populateData();
    }
  }

  populateData = async () => {
    try {
      this.results.forEach(val => {
        const { source, title } = val.contentNodes;
        this.datas.push({
          id: val.managedContentId,
          image: source.url,
          title: title.value,
          description: (val.contentNodes.altText) ? val.contentNodes.altText.value : '',
          url: (val.contentNodes.thumbUrl) ? val.contentNodes.thumbUrl.value : '#',
        });
      });
      this.datas.sort((prev, next) => {
        const nameA = prev.title;
        const nameB = next.title;
        if (nameA < nameB) {
          return -1;
        }
        if (nameA > nameB) {
          return 1;
        }
        return 0;
      })
      this.loaded = true;
    } catch (e) {
      console.error(e)
    }
  }
}

上を分解して、下に解説します：

State

こちらは今回のLWCコンポーネントで使ったState。

@track results; // 上記で取得されたコンテンツを保管するための変数です。
@track datas = []; // レンダリングする際に必要な変数
@track loaded = false; // 非同期処理を待つ間にローディング画面を表示するための変数

loadRecordメソッドのwire

このwireのメソッドはApexで取得されたコンテンツを非同期で取得するためのメソッドです。

/**
 *  ApexのinitMethodを非同期処理で呼び込む
 **/
@wire(initMethod)
loadRecord({ error, data }) {
  if (error) console.error(error);
  if (data) {
    this.results = data; // initMethodの戻り値はこちらの変数に保管
    this.populateData();
  }
}

populateDataメソッド

データが全て取得されたら、今度は取得されたデータをコンポーネント上でレンダリングします。
そしてArray.sortでタイトル順で並び替える

/**
 * レンダリングする際に必要なデータを生成
 **/
populateData = async () => {
  try {
    this.results.forEach(val => {
      const { source, title } = val.contentNodes;
      // レンダーリングに必要なデータを生成
      this.datas.push({
        id: val.managedContentId,
        image: source.url,
        title: title.value,
        description: (val.contentNodes.altText) ? val.contentNodes.altText.value : '', // altTextはオプショナルなので、念のためチェックしデフォルト値を設定
        url: (val.contentNodes.thumbUrl) ? val.contentNodes.thumbUrl.value : '#',　// thumbUrlもオプショナルなので、念のためチェックしデフォルト値を設定
      });
    });
    // 生成されたデータをタイトル順で並び替える
    this.datas.sort((prev, next) => {
      const nameA = prev.title;
      const nameB = next.title;
      if (nameA < nameB) {
        return -1;
      }
      if (nameA > nameB) {
        return 1;
      }
      return 0;
    })
    this.loaded = true;
  } catch (e) {
    console.error(e)
  }
}

注意：LWCあるあるかもしれませんが、Apexより取得された値がNullの場合、JSONオブジェクトのIndex自体がなくなります。Salesforce CMSではcontentNodes.altTextとcontentNodes.thumbUrlは必須項目ではないなので、念のためNullの場合デフォルト値を与えます。

HTML

柔軟性を表現させるため、今回レンダリングするUIは２種類用意します。カルーセルとカード型。

<template>
  <!-- 非同期処理が終わるまでローディングスピナーを回す -->
  <template if:false={loaded}>
    <lightning-spinner alternative-text="Loading" size="medium"></lightning-spinner>
  </template>
  <template if:true={loaded}>
    <!-- カルーセル型でデータをレンダリングする -->
    <div class="container">
      <lightning-carousel>
        <template for:each={datas} for:item="data">
          <lightning-carousel-image key={data.id} src={data.image} header={data.title} description={data.description}
            href={data.url}>
          </lightning-carousel-image>
        </template>
      </lightning-carousel>
    </div>

    <div class="card-container">
      <template for:each={datas} for:item="data">
        <!-- カード型でデータをレンダリングする -->
        <div class="card-sizer" key={data.id}>
          <a href={data.url} target="_blank">
            <lightning-card>
              <p class="slds-p-horizontal_small centering">
                <img src={data.image} />
              </p>
              <p slot="footer" class="footer">
                <span class="title">{data.title}</span>
                <span class="description">{data.description}</span>
              </p>
            </lightning-card>
          </a>
        </div>
      </template>
    </div>
  </template>
</template>

以上、Salesforce CMSのコンテンツを自作のLWCコンポーネントで表示させてみました。

最後に

上ではSalesforce CMSのコンテンツを取得する方法を書いたですが、逆にApexやLWCでコンテンツ作成することはできるのか？
残念ながらそのインターフェスはまだ用意されてませんね。根拠はこちら：

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?