More than 1 year has passed since last update.

LightningMessage Service

Salesforce

Last updated at 2022-10-03Posted at 2022-02-13

Aura Webコンポーネント（AWC）やLightning Webコンポーネント（LWC）などのVisualforceとLightningコンポーネント間の通信を可能にするすぐに使用できる機能です。

Winter '20 リリースで Salesforce によって導入された Lightning Message Service は、Visualforce と Lightning コンポーネント (Aura Web コンポーネント (AWC) や Lightning Web コンポーネント (LWC) など) の間の通信を可能にするすぐに使える機能です。

LMS は、シンプルな API を使用して、Visualforce ページ、Aura コンポーネント、Lightning Web コンポーネント (LWC) など、Salesforce UI 技術スタック全体で DOM との迅速かつシームレスな通信を可能にする標準のパブリッシュ/サブスクライブライブラリとして定義されています。Salesforce のこの独自の機能を使用すると、メッセージを公開して、ライトニングページ内の任意の場所にサブスクライブできます。Lightning Message Service 機能は、コンポーネント間のシームレスな通信を可能にする Aura アプリケーションイベントに似ています。

Lightning Message Service は、新しいメタデータ型である Lightning Message Channels に基づいています。Lightning Message Channel は、範囲指定されたモジュール @salesforce/messageChannel を介して LWC の Lightning Message Service API および Lightning Message Channel にアクセスするために使用されます。Visualforce に関しては、グローバル変数 $MessageChannel を使用できます。Aura では、コンポーネントで lightning:messageChannel を使用できます。

Lightning メッセージサービスの使用

Visualforce ページ、Lightning Web コンポーネント、および Aura コンポーネント間の通信を有効にするには、
Lightning Experience 全体でメッセージを公開するための Lightning Message Service API にアクセスします。また、Lightning メッセージチャネルを介して Lightning Experience 内の任意の場所から発信されたメッセージを購読するのにも役立ちます。
特定の名前空間が Lightning メッセージチャネルに関連付けられています。開発者は、メッセージチャネルを他の名前空間で使用できるようにするかどうかを選択して、Lightning Message Service での通信のセキュリティを確保できます。

Lightning メッセージサービスの利点

大きな利点の 1 つは、開発時間の増加です。たとえば、Visualforce ページまたは Lightning コンポーネントが使用できないメッセージチャネルを参照しようとし、そのメッセージチャネルが公開されていない場合、コードはコンパイルされません。
このメッセージングサービスは、それらを参照するコードとメッセージチャネルとの間の参照整合性を提供します。他のコードによって参照されるメッセージチャネルの削除を制限します。さらに、Lightning Message Service は、パッケージへのメッセージチャネルの自動追加をサポートしています。
メタデータ型はパッケージ化できるため、メッセージチャネルを特定の名前空間に関連付けて、他の名前空間で使用可能/使用不可にすることができます。

Lightning メッセージサービスの使用方法

Lightning Message Service は、Lightning Message Channels と呼ばれる新しいタイプのメタデータに基づいています。これは、軽量でパッケージ化可能なコンポーネントであり、実行時に組織で作成してメッセージを公開および購読できます。

Lightning メッセージチャネルの構造

<?xml version=”1.0″ encoding=”UTF-8″?>
<LightningMessageChannel xmlns=”http://soap.sforce.com/2006/04/metadata”>
    <description>This is a sample Lightning Message Channel.</description>
    <isExposed>true</isExposed>
    <lightningMessageFields>
        <description>This is the data</description>
        <fieldName>data</fieldName>
    </lightningMessageFields>
    <masterLabel>SampleMessageChannel</masterLabel>
</LightningMessageChannel>

masterLabel は、さまざまな UI でメッセージチャネルを識別する唯一の必須フィールドです。
Exposed は、指定しない場合に false を宣言するオプションのブールフィールドです。また、このフィールドは、特定のメッセージチャネルが他の名前空間のコンポーネントで利用できるかどうかをシステムに伝えます。

組織のどこに Lightning メッセージチャネルを作成しますか?

VsCode を使用してから、Salesforce CLI と SFDX プロジェクトを使用します。
「force-app\main\default\」に「messageChannels」フォルダを作成します。
「messageChanel」ディレクトリ内 .messageChannel-meta.xml 例: SampleMessageChannel.messageChannel-meta.xml。
メッセージチャネルを組織にデプロイして、メッセージチャネルについて把握し、それをコードで使用します。
名前空間の後に 2 つのアンダースコアを付けて使用できる別の名前空間のメッセージチャネル。したがって、SampleMessageChannel が example 名前空間からのものである場合、example__SampleMessageChannel__c となります。

Lightning メッセージサービスを実装するには?

Visualforce の場合、グローバル変数 $MessageChannel を使用できます

var SAMPLEMC = “{!$MessageChannel.SampleMessageChannel__c}”;

        var subscriptionToMC;
        function onMCPublished(message) {
            var textArea = document.querySelector(“#MCMessageTextArea”);
            textArea.innerHTML = message ? JSON.stringify(message, null, ‘\t’) : ‘no message payload’;
        }

        function subscribe_Message_Channel() {
            if (!subscriptionToMC) {
                subscriptionToMC = sforce.one.subscribe(SAMPLEMC, onMCPublished);
                var divAr = document.querySelector(“#subscMessage”);
                divAr.innerHTML = ‘Subscribed : True!’;
                var divAr = document.querySelector(“#unsubscMessage”);
                divAr.innerHTML = ”;
            }
        }

        function unsubscribe_Message_Channel() {
            if (subscriptionToMC) {
                sforce.one.unsubscribe(subscriptionToMC);
                subscriptionToMC = null;
                var divAr = document.querySelector(“#unsubscMessage”);
                divAr.innerHTML = ‘Subscribed : False! ‘;
                var divAr = document.querySelector(“#subscMessage”);
                divAr.innerHTML = ”;
            }
        }

        function publishMC() {
            const payload = {
                Data: { value: “Sample Message”,
                channel: ‘SampleChannel’,
                source: ‘VF’ }
            };

            sforce.one.publish(SAMPLEMC, payload);

        }

コード内のメッセージチャネル名の末尾にある __c 規則は、プラットフォームで作成されたカスタムメッセージチャネルを示しますが、カスタムオブジェクトへのその他の接続はありません。

Aura コンポーネントでの Lightning Message Service の使用:

Aura コンポーネントの場合、コンポーネントで lightning:messageChannel を使用し、

アプリケーションの任意の場所からメッセージチャネルでメッセージを受信するには、lightning:messageChannel のオプションパラメータであるスコープを使用します。スコープを値「APPLICATION」に設定します。

属性 scope= “APPLICATION” で lightning:messageChannel を使用すると、同じコンポーネントでメッセージを公開およびサブスクライブすることもできます。

handleMessage : function(component, message, helper) {
        try{     
        if(message.getParam(‘Data’)){
            component.set(‘v.messageFromPublisher’,JSON.stringify(message.getParam(‘Data’)));
        }
    }
        catch(exp){
            console.log(exp.message);
        }
    },

    publishMC: function(component, event, helper) {
        try{
            let payload = {
                Data: { value: “Sample Message”,
                channel: ‘SampleChannel’,
                source: ‘Aura’ }
            };

        component.find(“sampleMessageChannel”).publish(payload);  
        } catch (error) {
            console.log(`Error—${error}`);
        }
    }

LWC の場合、LWC でメッセージチャネルを参照するには、新しい @salesforce/messageChannel スコープモジュールからインポートします。LMS API を使用するには、目的の関数 (発行、購読、購読解除など) を lightning/messageService からインポートします。

パブリッシュ、サブスクライブ、およびサブスクライブ解除を使用した例を次に示します。以下の publishMC、subscribeMC、および unsubscribeMC 関数はテンプレートのボタンクリックにバインドされており、receivedMessage プロパティはテキストエリアにバインドされていると想定できます。

import { createMessageContext, releaseMessageContext,
     subscribe, unsubscribe,publish } from ‘lightning/messageService’     
import SAMPLEMC from “@salesforce/messageChannel/SampleMessageChannel__c”;
export default class LMS_DEMO_LWC extends LightningElement {
    context = createMessageContext();
    subscription = null;
    @track receivedMessage = ”;
         publishMC() {
        let message = {
            Data: { value: “Sample Message”,
            channel: ‘SampleChannel’,
            source: ‘LWC’ }
        };
        publish(this.context, SAMPLEMC, message);
    }

    subscribeMC() {
        if (this.subscription) {
            return;
        }
        this.subscription = subscribe(this.context, SAMPLEMC, (message) => {
            this.handleMessage(message);
        });
     }
         unsubscribeMC() {
         unsubscribe(this.subscription);
         this.subscription = null;
     }
       handleMessage(message) {
         this.receivedMessage = message ? JSON.stringify(message, null, ‘\t’) : ‘no message payload’;
     }
         disconnectedCallback() {
        releaseMessageContext(this.context);
    }
}

createMessageContext および releaseMessageContext 関数は、LWC に固有のものです。context オブジェクトは、LMS を使用して Lightning Web コンポーネントに関するコンテキスト情報を提供します。disconnectedCallback では、 releaseMessageContext を呼び出すことをお勧めします。これにより、コンテキストに関連付けられているサブスクリプションがすべて登録解除されます。

Lightning メッセージサービスの制限事項

Lightning Message Service は、次のエクスペリエンスのみをサポートします。

Lightning Experience の標準ナビゲーション。
Lightning Experience コンソールのナビゲーション。
Aura および Lightning Web コンポーネント用の Salesforce モバイルアプリケーション。Visualforce ページ用ではありません。
Experience Builder サイトで使用される Lightning コンポーネント。Experience Builder サイトのサポートはベータ版です

レンダリングしない Aura コンポーネントはサポートされていません

Lightning Message Service は、レンダリングされた Aura コンポーネントのみをサポートします。バックグラウンドユーティリティ項目インターフェースを使用する Aura コンポーネントでは lightning:messageChannel を使用できません。同様に、 lightning:messageChannel を使用する Aura コンポーネントは、コンポーネントが表示されていないため、init ライフサイクルハンドラで Lightning Message Service メソッドを呼び出すことができません。

lightning:messageChannel は aura:component の子である必要があります

カスタム Aura コンポーネントでは、 lightning:messageChannel は aura:component タグの直接の子である必要があります。HTML タグまたは別のコンポーネントにネストすることはできません。

たとえば、次のコードは問題なくレンダリングされます。

<aura:component>
 <lightning:messageChannel type=”myMessageChannel__c” />
 <lightning:card>…</lightning:card>
</aura:component>

このコードは、Aura コンポーネントがレンダリングを試みるときにエラーをスローします。

<aura:component>
 <lightning:card>
   <lightning:messageChannel type=”myMessageChannel__c” />
 </lightning:card>
</aura:component>

Aura、LWC、Visualforce ページ間で動作する LMS のビデオへのリンクは次のとおりです。

ファイナルラップ

Salesforce のフロントエンドソリューションである LMS は、クライアント側の UI で動作し、親/子の iFrame ウィンドウ (Visualforce に関連) を備えたポップアップユーティリティバー項目ウィンドウをサポートします。Lightning Message Service(LWS)を利用することで、基本的なコンポーネントを作成できます。同じアプローチを使用して、コンポーネント間でデータを渡すことができます。Lightning Message Service を使用すると、異なるコンポーネント間でデータを渡すために Sub-Pub モジュールを設定する必要がなくなりました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up