SalesforceのLightningコンポーネント・Visualforceの通信方法

SalesforceのLightningコンポーネントとVisualforce間で通信するには？

SalesforceではLightningコンポーネントからiframeを使って、Visualforceページを読み込むことがあります。その際にLightningコンポーネントとVisualforceページの間で通信するには、window.postMessage()を利用します。 window.postMessage()はSalesforceが提供するAPIではなく、ブラウザが標準で提供するJavaScript APIです。windowオブジェクトにメッセージを送信するため、誰でもアクセス可能です。そのため、個人情報など機密性の高い情報の通信では利用しない方がいいでしょう。

LightningコンポーネントとVisualforce間で通信する方法

ここからはSalesforceのLightningコンポーネントとVisualforceページの間で通信する方法を紹介します。

LightningコンポーネントからVisualforceページにメッセージを送信する方法

ここでは、Lightningコンポーネントからiframeで読み込んだVisualforceページにメッセージを送信する方法を実装例とともに紹介します。

【Step1】LightningコンポーネントのComponentを実装する

メッセージを送るLightningコンポーネントのComponentを実装します。

<aura:component implements=""flexipage:availableForAllPageTypes"" access=""global"">

  <aura:attribute name=""message"" type=""String""/>
  <!-- Visualforceページの読み込み元ホスト名. -->
  <aura:attribute name=""vfHost"" type=""String""
    default=""testdomain-dev-ed--c.visual.force.com""/>

  <lightning:input type=""text"" label=""メッセージ："" value=""{!v.message}""/>
  <lightning:button label=""Visualforceページへ送信"" onclick=""{!c.sendToVF}""/>

  <iframe aura:id=""vfFrame"" src=""{!'https://' + v.vfHost + '/apex/myvfpage'}""/>

</aura:component>

【Step2】メッセージ送信ボタンクリック時のControllerを実装する

メッセージ送信ボタンクリック時のControllerでVisualforceページにメッセージを送るよう実装します。

({
  sendToVF: function (component, event, helper) {
    var message = component.get(""v.message"");

    // Visualforceページの読み込み元ホスト名を取得し、
    // 「プロトコル+ホスト名」のURLを生成
    var vfOrigin = ""https://"" + component.get(""v.vfHost"");

    // VisualforceページのWindow オブジェクトを取得
    var vfWindow = component.find(""vfFrame"").getElement().contentWindow;

    // window.postMessage()でVisualforceページにメッセージを送る
    // 第1引数は送信メッセージを指定
    // 第2引数は送信先Visualforceページを指定
    vfWindow.postMessage(message, vfOrigin);
  }
})

【Step3】Visualforceページでメッセージの受信処理を実装する

Visualforceページでメッセージ受信処理を実装します。

<apex:page>
<script>
  // Lightningコンポーネントの読み込み元の「プロトコル＋ホスト名（＋ポート番号）」
  var lexOrigin = ""https://testdomain-dev-ed.lightning.force.com"";
  // メッセージを受信した時のイベントを追加
  window.addEventListener(""message"", function(event) {
    // メッセージ受信イベントの発生元を判定
    if (event.origin !== lexOrigin) {
      // セキュリティを考慮し、メッセージ受信イベントの発生元が
      // Lightningコンポーネントの読み込み元と一致しない場合は処理を中断
      return;
    }
    // コンソールにメッセージを出力
    console.log(event.data);
  }, false);
</script>
</apex:page>

VisualforceページからLightningコンポーネントへメッセージを送信する方法

ここでは、VisualforceページからLightningコンポーネントにメッセージを送信する方法を実装例とともに紹介します。

【Step1】Visualforceページを実装する

メッセージを送信するVisualforceページを実装します。

<apex:page>
  <input id=""message"" type=""text""/>
  <button onclick=""sendToLC()"">Lightningコンポーネントへ送信</button>

  <script>
    // Lightningコンポーネントの読み込み元の「プロトコル＋ホスト名（＋ポート番号）」
    var lcOrigin = ""https://testdomain-dev-ed.lightning.force.com"";

    function sendToLC() {
       var message = document.getElementById(""message"").value;
       // 親windowであるLightningコンポーネントにメッセージを送信
       // 第1引数は送信メッセージを指定
       // 第2引数は送信先のLightningコンポーネントを指定
       parent.postMessage(message, lcOrigin);
    }
  </script>
</apex:page>

【Step2】メッセージを受信するComponentを実装する

メッセージを受信するComponentを実装します。

<aura:component implements=""flexipage:availableForAllPageTypes"" access=""global"">
  <!-- Visualforceページの読み込み元ホスト名. -->
  <aura:attribute name=""vfHost"" type=""String""
    default=""testdomain-dev-ed--c.visual.force.com""/>

  <!-- メッセージを受信する関数を設定 -->
  <aura:handler name=""init"" value=""{!this}"" action=""{!c.doInit}""/>

  <iframe aura:id=""vfFrame"" src=""{!'https://' + v.vfHost + '/apex/myvfpage'}"" />
</aura:component>

【Step3】メッセージを受信するControllerを実装する

Visualforceページからのメッセージを受信するControllerを実装します。

({
  doInit: function (component) {
    // Visualforceページの読み込み元の「プロトコル＋ホスト名（＋ポート番号）」
    var vfOrigin = ""https://"" + component.get(""v.vfHost"");

    // メッセージを受信した時のイベントを追加
    window.addEventListener(""message"", $A.getCallback(function (event) {
      // メッセージ受信イベントの発生元を判定
      if (event.origin !== vfOrigin) {
        // セキュリティを考慮し、メッセージ受信イベントの発生元が
        // Visualforceページの読み込み元と一致しない場合は処理を中断
        return;
      }
      // コンソールにメッセージを出力
      console.log(event.data);
    }), false);
  }
})

window.postMessage()を利用して、機能間でのメッセージの送受信を実装してみよう

今回は、SalesforceでLightningコンポーネントとVisualforce間でのメッセージを送受信する方法を紹介しました。window.postMessage()を利用することで気軽に送受信可能です。 Salesforceで画面を開発されている方は、window.postMessage()を利用して機能間でのメッセージの送受信を実装してみましょう。]]>