2019.12.04

「Lightning Message Service（LMS）」を触ってみました

荒内 将多

はじめに

はじめまして。開発を担当している荒内です。
今回は、Winter'20から開発者プレビューが開始された Lightning Message Service について、その機能の一部をご紹介します。

Lightning Message Service（LMS）とは

そもそもLightning Message Service(以下LMS)とはなにか？ですが、

概要としてはLightningコンポーネント、Lightning Webコンポーネント、Visualforce 間の通信を行うことができる機能と捉えてよいかと思います。Winter' 20で開発者プレビュー機能としてDeveloper組織で試用が可能になりました。

方式としてPub-Sub（出版購読型モデル）を採用しており、Publish（出版）側がSubscribe（購読）側のVisualforceやLightningコンポーネントの中身を知ることなく情報を送信することができます。
同じPub-Sub方式の通信を行う類似の機能として、Lightningコンポーネント同士の通信を行うAura Application Eventsがありますが、LMSではVisualforceとの通信も可能となっており、より柔軟な実装が可能になっているようです。

より詳細な情報は、以下のSalesforce公式ページを見てみて下さい。
Winter'20リリースノート（英語）
Salesforce開発者ブログ（英語）

触ってみる

リリースノートなどを参考に実際に動くものを作成してみました。
今回は、以下3つをそれぞれ別の種類のコンポーネントで作成し、LMCで通信ができるか試してみました。

＜作成したコンポーネント＞
出版側：Lightning Webコンポーネント
購読側１：Visualforce
購読側２：Lightning コンポーネント

出版側と購読側という言い方が慣れないのですが、
出版側 = メッセージの送信元、購読側 = メッセージの受信先

と捉えて下さい。
デモ

デモ

１．MessageChannel（メタデータ）を作成する

まずLMCを使用するための「MessageChannel」メタデータを作成します。
現在SalesforceのUI上にはLMC関連メニューが存在しないため、最初に以下のようなメタデータファイルを作成して、直接Developer組織にデプロイする必要があります。

今回はVisual Studio Codeを使用して、force-app/main/default 直下に 「messageChannels」フォルダと、その直下に以下のファイルを保存してデプロイしました。
<!-- LMCメタデータ -->
<?xml version="1.0" encoding="UTF-8"?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
    <isExposed>true</isExposed>
    <lightningMessageFields>
        <fieldName>recordId</fieldName>
    </lightningMessageFields>
    <lightningMessageFields>
        <fieldName>recordData</fieldName>
    </lightningMessageFields>
    <masterLabel>Sample Message Channel</masterLabel>
</LightningMessageChannel>
SampleMessageChannel.meta

２．出版側のコンポーネントでメッセージチャネルをインポートする

Lightning Web コンポーネント側のスクリプトには以下のように記載してLMCを使用できるようにします。
「SampleMessageChannel__c」の部分は、カスタムオブジェクトと同じように作成したLMCメタデータのファイル名 + '__c' となるようです。
import { LightningElement,track  } from 'lwc';
import { publish,createMessageContext,releaseMessageContext } from 'lightning/messageService';
import SAMPLEMC from "@salesforce/messageChannel/SampleMessageChannel__c";
publisherComponent.js

３．Visualforce、Lightning コンポーネント側に購読登録をする

VisualforceとLightning コンポーネントでは、それぞれLMCの受信が行えるよう購読登録と、受信時の処理を実装する必要があります。

Visualforceでの購読登録と受信時の処理実装

Visualforceページ中のスクリプトに以下のようにLMCの取得、購読の登録、メッセージ受信時の処理を記載します。
<script>
    // LMCを取得
    var SAMPLEMC = "{!$MessageChannel.SampleMessageChannel__c}";
    var subscriptionToMC;

    // ページ表示時に購読登録する
    subscribeMC();

    // 購読登録
    function subscribeMC() {
        if (!subscriptionToMC) {
            subscriptionToMC = sforce.one.subscribe(SAMPLEMC, onMCPublished);
        }
    }

    // メッセージ受信時の処理
    function onMCPublished(message) {
        var recordId = message['recordId'];
        pagererender(recordId);
    }

</script>
SubscriberVF.page

Lightning コンポーネントでの購読登録と受信時の処理実装

Lightning コンポーネントも同様に、LMCのインポート、受信時の処理実装します。

controller
     // （Lightning Component）メッセージ受信時の処理
     handleReceiveMessage: function (component, event, helper) {
        console.log('handleReceiveMessage');
        if (event != null) {
            var message = event.getParams();
            component.set("v.recordId", message['recordId']);
            helper.refresh(component,event,helper);
        }
     }
SubscriberLCController.js
コンポーネント(.cmp)には以下のようにLightning:messageChannelタグを登録します。
メッセージ受信時実行するアクションはonMessageに記載します。

component
<!-- LMC購読登録 -->
<lightning:messageChannel type="SampleMessageChannel__c" aura:id="sampleMessageChannel" onMessage="{!c.handleReceiveMessage}"/>
SubscriberLC.cmp

４．アプリケーションに設置する

最後にそれぞれLightning アプリケーションビルダーでアプリケーションに配置して完了です。
想定通り左端のLightning Webコンポーネントで選択した取引先情報を購読側コンポーネントが各々受信し、各取引先の情報を更新することができました。
デモ

デモ

所感

そもそもPub-Sub方式のメッセージやりとり自体に馴染みがなかったため、まずそこの理解に時間がかかりました。機能自体はシンプルなので、サンプルがあったこともあり実装自体はそれほど苦労する部分はありませんでした。

正式リリース前ですが、リリース後のLMC利用シーンとして多くなりそうなのは、既存のVisualforceのLightning Experience移行ではないでしょうか。LMCを活用すれば、既存のVisualforceを最小限の改修で済ませる移行プランが立てられそうです（もとの作りにもよりますが）ので、もしかすると移行時の救世主的な存在になるかもしれないなと感じています。
30 件
    　
  • banner
  • banner

関連する記事

関連するキーワード