LightningMessage Service

[まとめページに戻る](https://qiita.com/Keiji_otsubo/items/60afc2a8d211b6f7d89f)
[まとめA～M](https://qiita.com/Keiji_otsubo/items/f3ddedee6793bf1576f8)


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

https://blog.cloudanalogy.com/everything-you-need-to-know-about-salesforce-lightning-message-servicelms/

--------------------------------------
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 メッセージ サービスの使用

1. Visualforce ページ、Lightning Web コンポーネント、および Aura コンポーネント間の通信を有効にするには、 

2. Lightning Experience 全体でメッセージを公開するための Lightning Message Service API にアクセスします。また、Lightning メッセージチャネルを介して Lightning Experience 内の任意の場所から発信されたメッセージを購読するのにも役立ちます。 

3. 特定の名前空間が Lightning メッセージチャネルに関連付けられています。開発者は、メッセージチャネルを他の名前空間で使用できるようにするかどうかを選択して、Lightning Message Service での通信のセキュリティを確保できます。 

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

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

# 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>
```

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

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

1. VsCode を使用してから、Salesforce CLI と SFDX プロジェクトを使用します。
2. 「force-app\main\default\」に「messageChannels」フォルダを作成します。
3. 「messageChanel」ディレクトリ内 <channelName>.messageChannel-meta.xml 例: SampleMessageChannel.messageChannel-meta.xml。
4. メッセージ チャネルを組織にデプロイして、メッセージ チャネルについて把握し、それをコードで使用します。
5.  名前空間の後に 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 は、次のエクスペリエンスのみをサポートします。

1. Lightning Experience の標準ナビゲーション。
2. Lightning Experience コンソールのナビゲーション。
3. Aura および Lightning Web コンポーネント用の Salesforce モバイルアプリケーション。Visualforce ページ用ではありません。
4. 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 のビデオへのリンクは次のとおりです。

https://drive.google.com/file/d/1eYC2sFUagAuzAnp8Ric_AO-mkylMNIlH/view?usp=sharing

# ファイナルラップ

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