この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

$Resource

$Resource グローバル値プロバイダにより、静的リソースにアップロードした画像、スタイルシート、JavaScript コードを参照できます。

$Resource を使用すると、正確な URL やファイルパスがわからなくても、名前でアセットを参照できます。$Resource は、Lightning コンポーネントのマークアップおよび JavaScript コントローラやヘルパーコード内で使用できます。

コンポーネントのマークアップでの $Resource の使用

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

1<aura:component>
2    <!-- Stand-alone static resources -->
3    <img src="{!$Resource.generic_profile_svg}"/>
4    <img src="{!$Resource.yourNamespace__generic_profile_svg}"/>
5
6    <!-- Asset from an archive static resource -->
7    <img src="{!$Resource.SLDSv1 + '/assets/images/avatar1.jpg'}"/>
8    <img src="{!$Resource.yourNamespace__SLDSv1 + '/assets/images/avatar1.jpg'}"/>
9</aura:component>

<ltng:require> タグを使用して、CSS スタイルシートまたは JavaScript ライブラリをコンポーネントに含めます。以下に例を示します。

1<aura:component>
2  <ltng:require 
3    styles="{!$Resource.SLDSv1 + '/assets/styles/lightning-design-system-ltng.css'}"
4    scripts="{!$Resource.jsLibraries + '/jsLibOne.js'}"
5    afterScriptsLoaded="{!c.scriptsLoaded}" />
6</aura:component>

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

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

メモ

JavaScript での $Resource の使用

JavaScript コードで静的リソースへの参照を取得するには、$A.get('$Resource.resourceName') を使用します。

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

1({
2    profileUrl: function(component) {
3        var profUrl = $A.get('$Resource.SLDSv1') + '/assets/images/avatar1.jpg';
4        alert("Profile URL: " + profUrl);
5    }
6})

JavaScript で参照される静的リソースは、パッケージに自動的に追加されません。コンポーネントのマークアップで参照されていないリソースに依存している JavaScript は、JavaScript コードが含まれているパッケージに手動で追加します。

メモ

$Resource の考慮事項

Lightning コンポーネントフレームワークのグローバル値プロバイダは、Salesforce のグローバル変数とは大きく異なる形でバックグラウンドで実装されます。$Resource は、Visualforce や数式項目などで使用できる同じ名前のグローバル変数に似ていますが、重要な違いがあります。他のドキュメントを、その使用や動作のガイドラインとして使用しないでください。

Lightning コンポーネントフレームワークの $Resource に特有の、留意すべき事項が 2 つあります。

1 つ目は、$Resource は Lightning コンポーネントフレームワークがクライアントに読み込まれるまで使用できないということです。マークアップのみで構成される一部の非常に単純なコンポーネントは、$Resource を使用できないサーバ側で表示できます。これを回避するには、新しいアプリケーションの作成時にコンポーネントがクライアントで表示されるようにクライアント側コントローラをスタブアウトします。

2 つ目は、Visualforce などの $Resource グローバル変数を操作する場合、特定のリソースの完全な URL を構築するために URLFOR() 数式関数も使用するということです。Lightning コンポーネントフレームワークの URLFOR() とは大きく異なります。こちらでは、前の例のように代わりに単純な文字列の連結を使用します。

Lightning コンポーネント開発者ガイド

$Resource

コンポーネントのマークアップでの $Resource の使用

JavaScript での $Resource の使用

$Resource の考慮事項

関連項目: