AuraでもSalesforce Canvasが使いたい

はじめに

これまで、Canvas系の記事を何個か上げてきましたが
Visualforceを中心としたものでした。
今回は、Auraを使って基本的な読み込みを試していこうと思います。

検証につかう環境は、trailheadのハンズオン環境です。
出てくるデータも初期のデモデータになります。

なぜ、Auraで読み込みたいのか？

Visualforceでキャンバスアプリケーションを読み込むのに遅いと感じたから。

なぜ、遅いと感じたのか？

https://trailhead.salesforce.com/ja/content/learn/modules/lex_dev_lc_vf_concepts/lex_dev_lc_vf_concepts_basics

Visualforceはサーバー側でレンダリングされてからクライアントにHTMLを届ける。その後キャンバスの読みこみが走るため遅いもしくは、遅いと感じやすい。
Auraはアプリケーションまたはコンポーンネントバンドルをクライアントに返し、そこからJavaScriptでUIの生成が始まるので
初期読み込み分ユーザ体験がよい。
速度に関しては、キャンバス以外の処理が増えれば増えるほど如実に現れると思う

LWCを使用したかったが、キャンバスアプリケーションに非対応なためAuraで実装する

Visualforceから変更することによって大きく変わること

entityFieldsがない

Visualforceでは、キャンバスアプリケーションに表示しているオブジェクトページの項目の値を渡すことができる
entityFieldsというものがあったが、Auraにはない。
これは予想でしかないが、サーバー側でレンダリングされるVisualforceだからこそあったものなのではないだろうか？

<apex:page>
  <apex:canvasApp developerName="canvasAppTest"
    height="1000px" width="100%"
    entityFields="Phone, Name" />
</apex:page>

entityFieldsの代用

Auraでは、Visualforceでも使用できたparametersを使ってキャンバスアプリケーションに値を渡すことになる。

<aura:component>
    <force:canvasApp developerName="MyCanvasApp"
      namespacePrefix="myNamespace"
      parameters="{param1:'value1',param2:'value2'}" />
</aura:component>

実装する

アプリケーションは別の記事で作成したものを使います。

Auraコンポーネントの作成

parametersを渡してみる

canvasAppTest

<aura:component
  implements="flexipage:availableForRecordHome"
  access="global"
>
  <force:canvasApp
    developerName="canvasAppTest"
    maxHeight="infinite"
    width="100%"
    parameters="{param1:'value1',param2:'value2'}"
  />
</aura:component>

コンポーネントを作成できましたので、検証してみましょう。
問題なく表示されました。見た目に関しても今のLightningページにあっていてかっこいいですね！

パラメータも問題なく取得できました。

レコード情報をparametersにつける

parameters="{param1:'value1',param2:'value2'}"このような静的なパラメータは問題なく利用できましたが、
キャンバスアプリケーションにレコードの情報を渡したいというケースがあるともいます。

表示した後、イベント送信で渡してもいいかもですが

今回は、キャンバスアプリケーションを表示時に渡してみます。

1. 表示しているレコードページのIDを取得できるようにする

canvasAppTest

<aura:component
+  implements="flexipage:availableForRecordHome, force:hasRecordId"
   access="global"
>
+ <aura:attribute name="recordId" type="String" />
  <force:canvasApp
    developerName="canvasAppTest"
    maxHeight="infinite"
    width="100%"
    parameters="{param1:'value1',param2:'value2'}"
  />
</aura:component>

2. force:recordDataでレコードを読み込む

canvasAppTest

<aura:component
   implements="flexipage:availableForRecordHome, force:hasRecordId"
   access="global"
>
  <aura:attribute name="recordId" type="String" />
+ <aura:attribute name="record" type="Object" />
+ <aura:attribute name="account" type="Object" />
+ <aura:attribute name="recordError" type="String" />
+ <force:recordData aura:id="record"
+     fields="Name"
+     recordId="{!v.recordId}"
+     targetError="{!v.recordError}"
+     targetRecord="{!v.record}"
+     targetFields ="{!v.account}"
+     mode="VIEW"/>
+  取引先：{!v.account.Name}
  <force:canvasApp
    developerName="canvasAppTest"
    maxHeight="infinite"
    width="100%"
    parameters="{param1:'value1',param2:'value2'}"
  />
+ <aura:if isTrue="{!not(empty(v.recordError))}">
+   <div class="recordError">
+       {!v.recordError}
+   </div>
+ </aura:if>
</aura:component>

無事取引先名がAuraで取得できました。

3. 取得したレコード情報をparametersに渡す

<aura:component
  implements="flexipage:availableForRecordHome,force:hasRecordId"
  access="global"
>
  <aura:attribute name="recordId" type="String" />
  <aura:attribute name="record" type="Object" />
  <aura:attribute name="account" type="Object" />
  <aura:attribute name="recordError" type="String" />
  <force:recordData aura:id="record"
      fields="Name"
      recordId="{!v.recordId}"
      targetError="{!v.recordError}"
      targetRecord="{!v.record}"
      targetFields ="{!v.account}"
      mode="VIEW"/>
  取引先：{!v.account.Name}

+ <aura:attribute name="jf" type="String" default='{"Name":"' />
+ <aura:attribute name="je" type="String" default='"}' />
  <force:canvasApp
    developerName="canvasAppTest"
    maxHeight="infinite"
    width="100%"
+   parameters="{!v.jf + v.account.Name + v.je}"
  />
  <aura:if isTrue="{!not(empty(v.recordError))}">
    <div class="recordError">
        {!v.recordError}
    </div>
  </aura:if>
</aura:component>

取得することができました！

Visualforceと同時に開いてみる

用意したVisualforce

AuraでentityFieldsの代わりに、parametersで取引先名を渡しました。
Visualforceでは、entityFieldsをNameにして比較します。

<apex:page>
  <apex:canvasApp developerName="canvasAppTest"
    maxHeight="infinite" width="100%" entityFields="Name" />
</apex:page>

どちらもレコード情報が渡せていますね

表示はどうなるかというと左がAura 右がVisualforceです。
左の方が若干早いのと、読み込み時の体験的にもAuraの方が優れていますね。

さいごに

今回は、Auraでキャンバスアプリケーションを読み込んでみました。
多少の差ですが速度も改善しそうです　速度もそうですが読み込み時の体験も含めて基本はAuraで実装をしようかなと思いました。
ただ、Visualforceの方がentityFieldsが便利なので初期表示系のキャンバスはAura、タブの中にあるようなキャンバスはVisualforceみたいに実装コストを加味してどっちを使うか決めてもいいかもですね。

Salesforceを長く使ってくれるのは社内の人なので、少しでも少しでも今後体験を良くしていきたいですね。

Aura自体は、ほとんど書いたことがないので何かアドバイスがあればコメントでいただけると助かります。

参考