Salesforce Experience Cloud をマスターする：開発者向けカスタム LWC ガイド

日付:

背景と応用シーン

Salesforce Experience Cloud (旧称: Community Cloud) は、企業が顧客、パートナー、従業員とつながり、エンゲージメントを高めるためのブランド化されたデジタルエクスペリエンスを迅速に構築できる強力なプラットフォームです。セルフサービスポータル、パートナーリレーションシップマネジメント (PRM) サイト、顧客サポートフォーラムなど、その用途は多岐にわたります。

標準で提供されるテーマ、テンプレート、コンポーネントは非常に高機能ですが、ビジネス要件が複雑化するにつれて、独自の機能やデザインを実装する必要が出てきます。ここで登場するのが、Lightning Web Components (LWC) です。LWC は、最新の Web 標準に基づいて構築された Salesforce の UI フレームワークであり、開発者はこれを利用して、Experience Cloud サイトに再利用可能で高パフォーマンスなカスタムコンポーネントを組み込むことができます。

Salesforce 開発者として LWC を活用することで、以下のような応用シーンが実現可能になります。

1. 外部システムとのデータ連携

標準コンポーネントでは連携が難しい外部の ERP やレガシーシステムから API 経由でデータを取得し、Experience Cloud サイト上にリアルタイムで表示するカスタムコンポーネントを開発できます。例えば、パートナーが自社の在庫状況をポータル上で確認できるような機能です。

2. 高度にインタラクティブな UI の実現

複雑な計算ロジックや、動的なチャート描画、ステップバイステップのウィザード形式の入力フォームなど、リッチなユーザーエクスペリエンスが求められる場合に LWC は最適です。これにより、ユーザーの操作性を大幅に向上させることができます。

3. 特定のビジネスプロセスに特化した機能

特定の業界や企業独自のワークフローに合わせたコンポーネントを作成できます。例えば、保険代理店向けの保険金請求プロセスをガイドするコンポーネントや、製造業向けの部品発注コンポーネントなど、業務効率を直接的に改善するツールを構築できます。

本記事では、Salesforce 開発者の視点から、LWC を使用して Experience Cloud サイトをカスタマイズする際の基本的な原理、具体的な実装方法、そして注意すべき点について詳しく解説します。

原理説明

LWC を Experience Cloud サイトで利用可能にするための核心は、コンポーネントのメタデータ設定ファイル (.js-meta.xml) にあります。このファイルでコンポーネントを「公開 (expose)」し、どのページタイプで使用できるかを定義します。

1. コンポーネントの公開 (Exposing a Component)

まず、LWC を Experience Cloud の Experience Builder (エクスペリエンスビルダー) のコンポーネントパネルに表示させるためには、<isExposed> タグを true に設定する必要があります。

2. ターゲットの指定 (Defining Targets)

次に、<targets> タグ内で、このコンポーネントをどこに配置できるようにするかを指定します。Experience Cloud サイト向けには、主に以下の2つのターゲットが重要です。

  • lightningCommunity__Page: Experience Cloud サイト内の標準ページ、カスタムページなど、特定のページタイプにコンポーネントを配置できるようにします。
  • lightningCommunity__Default: これを指定することで、Experience Builder のプロパティエディタを通じてコンポーネントのプロパティを管理者が設定できるようになります。これがカスタム設定を可能にする鍵となります。

3. プロパティの定義 (Configuring Properties)

管理者が Experience Builder 上で動的に値を変更できるプロパティ（例えば、表示するタイトルや取得するレコードの件数など）を定義するには、<targetConfigs> を使用します。

<targetConfig> 内で <property> タグを定義し、その name 属性を LWC の JavaScript ファイル内で @api デコレータを付与したプロパティ名と一致させます。type (String, Integer, Booleanなど)、label (ビルダーに表示されるラベル)、default (デフォルト値) などの属性を指定することで、管理者はコードを触ることなくコンポーネントの挙動をカスタマイズできます。

この仕組みにより、開発者は再利用性が高く、かつ柔軟な LWC を作成し、サイト管理者はそれをドラッグ＆ドロップで配置し、GUI 上で簡単に設定できるようになります。開発と運用の見事な分業が実現されるのです。

サンプルコード

ここでは、Experience Builder で管理者が挨拶メッセージを自由に変更できるシンプルな LWC を作成します。

myGreetingComponent.html

このファイルはコンポーネントの HTML 構造を定義します。Salesforce Lightning Design System (SLDS) を利用して、標準コンポーネントと一貫性のある見た目を実現しています。

<template>
    <lightning-card title={cardTitle} icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <p>{greetingMessage}, Experience Cloud User!</p>
        </div>
    </lightning-card>
</template>

myGreetingComponent.js

コンポーネントのロジックを記述します。@api デコレータを使って、Experience Builder から値を受け取るための公開プロパティを定義します。

import { LightningElement, api } from 'lwc';

export default class MyGreetingComponent extends LightningElement {
    /**
     * @description Experience Builderで設定可能なカードのタイトル
     * @type {string}
     */
    @api cardTitle = 'Welcome';

    /**
     * @description Experience Builderで設定可能な挨拶メッセージ
     * @type {string}
     */
    @api greetingMessage = 'Hello';
}

myGreetingComponent.js-meta.xml

これが最も重要なファイルです。コンポーネントを Experience Cloud で利用可能にし、プロパティを設定できるように定義します。

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    
    <!-- Experience Cloudサイトで利用可能にするためのターゲット設定 -->
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>

    <!-- Experience Builderのプロパティエディタで設定可能な項目を定義 -->
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <!-- cardTitleプロパティの設定 -->
            <property
                name="cardTitle"
                type="String"
                label="Card Title"
                description="Enter the title for the component's card."
                default="Welcome" />
            
            <!-- greetingMessageプロパティの設定 -->
            <property
                name="greetingMessage"
                type="String"
                label="Greeting Message"
                description="Enter the greeting message to display."
                default="Hello" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

このコードを組織にデプロイすると、Experience Builder のコンポーネントパネルに「myGreetingComponent」が表示されます。ページにドラッグ＆ドロップすると、右側のプロパティエディタに「Card Title」と「Greeting Message」という入力フィールドが現れ、管理者が自由にテキストをカスタマイズできるようになります。

注意事項

Experience Cloud サイト向けの LWC を開発する際には、通常の内部向け開発とは異なるいくつかの点に注意が必要です。

1. 権限と共有設定 (Permissions and Sharing)

Experience Cloud サイトのユーザーは、多くの場合、外部ユーザー (Guest User または Authenticated External User) です。彼らがアクセスできるデータは、プロファイル権限、共有設定、共有セット (Sharing Set) によって厳しく制限されています。

  • Apex Controller の共有モード: LWC から呼び出す Apex クラスでは、with sharing、without sharing、inherited sharing のキーワードを明示的に指定することが不可欠です。外部ユーザーに特定のレコードへのアクセスを許可する場合、意図的に without sharing を使用する場面もありますが、セキュリティリスクを十分に評価する必要があります。
  • Guest User のセキュリティ: ゲストユーザーは認証されていないため、特に厳しいセキュリティ制約が適用されます。レコードの作成・編集・削除権限はデフォルトでオフになっており、慎重な設定が求められます。Apex からのデータ操作は、必ずセキュリティを考慮して実装してください。

2. パフォーマンス (Performance)

公開サイトである Experience Cloud では、パフォーマンスがユーザーエクスペリエンスに直結します。

  • キャッシュの活用: Apex メソッドから取得するデータが頻繁に変わらない場合は、@wire(method, { params }) アダプタで {cachable: true} を指定し、クライアントサイドキャッシュを有効にしましょう。これにより、サーバーへの不要なラウンドトリップが削減されます。
  • データの遅延読み込み (Lazy Loading): 一度に大量のデータを表示するのではなく、ユーザーがスクロールしたタイミングで追加のデータを読み込むなど、遅延読み込みのパターンを実装して初期表示速度を向上させます。

3. LWR (Lightning Web Runtime) サイトの考慮事項

最新の Experience Cloud サイトでは、パフォーマンスに優れた LWR (Lightning Web Runtime) テンプレートが主流になりつつあります。LWR サイトで LWC を使用する場合、従来の Aura ベースのサイトとは異なる点があります。

  • スタイリング: LWR は標準の SLDS スタイリングを自動で適用しません。スタイリングフック (Styling Hooks) やカスタム CSS プロパティを使用して、明示的にスタイルを適用する必要があります。
  • コンポーネントの互換性: 一部の基本コンポーネントや API は、LWR 環境では動作が異なる、またはサポートされていない場合があります。開発前に必ず公式ドキュメントで互換性を確認してください。

4. エラーハンドリング (Error Handling)

Apex 呼び出しや外部 API 連携でエラーが発生した場合に備え、堅牢なエラーハンドリングを実装することが重要です。try-catch ブロックを使用してエラーを捕捉し、lightning-toast などを使ってユーザーに分かりやすいフィードバックを提供しましょう。コンソールにエラーをログ出力するだけでは、エンドユーザーの問題解決にはつながりません。

まとめとベストプラクティス

LWC は、Salesforce Experience Cloud の可能性を飛躍的に高めるための強力なツールです。標準機能の枠を超え、ビジネスニーズに完全に合致した、ユニークで高機能なデジタルエクスペリエンスを構築することができます。

開発を成功させるためのベストプラクティスを以下にまとめます。

  1. 再利用性を意識した設計: コンポーネントを特定の機能に密結合させるのではなく、@api プロパティを活用して汎用的に設計することで、様々なページやサイトで再利用できるようになります。
  2. 管理者フレンドリーな設定: targetConfigs を最大限に活用し、できるだけ多くの設定項目（表示ラベル、クエリの条件、デザインのバリエーションなど）を Experience Builder 上で管理者が変更できるようにします。これにより、開発者の手を離れた後の運用が格段に楽になります。
  3. ユーザーコンテキストを常に意識する: 開発中はシステム管理者権限でテストしがちですが、必ずゲストユーザーやパートナーユーザーなど、実際の利用者プロファイルでテストを行ってください。データが表示されない、ボタンが機能しないといった問題の多くは、権限設定に起因します。
  4. SLDS を尊重する: Salesforce Lightning Design System (SLDS) のガイドラインに従うことで、サイト全体で一貫したルック＆フィールを保ち、ユーザーが直感的に操作できる UI を提供できます。
  5. ドキュメントの参照を習慣づける: Experience Cloud、LWC、LWR は急速に進化しています。Salesforce Developer のドキュメントやリリースノートを定期的に確認し、最新の機能やベストプラクティスを常に把握しておくことが重要です。

本記事で紹介した基本を土台とし、これらのベストプラクティスを実践することで、あなたは Salesforce 開発者として、ビジネス価値を最大化する優れた Experience Cloud サイトを構築できるはずです。

コメント

コメントを投稿