外部 JavaScript ライブラリの使用

このフレームワークのコンテンツセキュリティポリシーでは、外部 JavaScript ライブラリを Salesforce 静的リソースにアップロードすることが義務付けられています。静的リソースについての詳細は、Salesforce オンラインヘルプの「静的リソース」を参照してください。

1<ltng:require scripts="{!$Resource.resourceName}"
2    afterScriptsLoaded="{!c.afterScriptsLoaded}" />

resourceName は、静的リソースの [名前] です。管理パッケージでは、リソース名にパッケージ名前空間プレフィックス ($Resource.yourNamespace__resourceName など) を含める必要があります。個々のグラフィックやスクリプトなど、スタンドアロンの静的リソースの場合、必要なのはそれだけです。アーカイブ静的リソース内の項目を参照するには、項目へのパスの残りを文字列の連結を使用して含めます。

スクリプトが読み込まれると、クライアント側コントローラの afterScriptsLoaded アクションがコールされます。<ltng:require> によって読み込まれるスクリプトにアクセスするために、init イベントを使用しないでください。こられのスクリプトは非同期に読み込まれるため、init イベントハンドラがコールされるときに使用できない可能性が高くなります。

スクリプトの読み込みに関する考慮事項は次のとおりです。

スクリプトのセットの読み込み

リソースのセットを読み込むときは、scripts 属性にリソースのカンマ区切りリストを指定します。

式で $Resource が解析される方法に予測できない動作があるため、複数の $Resource 参照を 1 つの属性に含めるには join 演算子を使用します。たとえば、コンポーネントに含める JavaScript ライブラリが複数ある場合、scripts 属性は次のようになります。

1scripts="{!join(',', 
2    $Resource.jsLibraries + '/jsLibOne.js', 
3    $Resource.jsLibraries + '/jsLibTwo.js')}"

メモ

読み込み順序

スクリプトはリストに記載された順に読み込まれます。

1 回のみの読み込み

同じコンポーネントまたは異なるコンポーネントの複数の <ltng:require> タグでスタイルが指定されていても、スクリプトが読み込まれるのは 1 回のみです。

並列読み込み

相互に連動していないスクリプトのセットが複数ある場合は、並列読み込み用の <ltng:require> タグを使用します。

カプセル化

カプセル化および再利用を確実に行うには、JavaScript ライブラリを使用する .cmp または .app リソースのそれぞれに <ltng:require> タグを追加します。

<ltng:require> には、CSS リソースのリストを読み込む styles 属性もあります。scripts と styles 属性は 1 つの <ltng:require> タグで設定できます。

1<ltng:require scripts="{!$Resource.chart}" 
2              afterScriptsLoaded="{!c.setup}"/>
3<canvas aura:id="chart" id="myChart" width="400" height="400"/>

1setup : function(component, event, helper) {
2    var data = {
3        labels: ["January", "February", "March"],
4        datasets: [{
5            data: [65, 59, 80, 81, 56, 55, 40]
6        }]
7    };
8    var el = component.find("chart").getElement();
9    var ctx = el.getContext("2d");
10    var myNewChart = new Chart(ctx).Line(data);
11}