Developer

VisualforceとLightningでの静的リソースの使用【セールスフォース】

Developer
この記事は約3分で読めます。

こんにちは、アンダーソンです。
今回は静的リソースのお勉強です。自分自身あまり使うことがなく、
概念的な覚え方しかしてなかったので、今回は実際に手を動かして
やってみました。

スポンサーリンク

静的リソースとは

静的リソースとは何でしょうか。
公式のHelpによると次の説明がありました。

静的リソースにより、アーカイブ (.zip や .jar ファイルなど)、画像、スタイルシート、JavaScript、その他のファイルなど、Visualforce ページ内で参照できるコンテンツをアップロードできます。

静的リソース

んん?『Visualforceページ内』でと指定がありますね。
これについては後ほどみていきます。

上記のようなファイル等にアクセスする場合にコンテンツにUPする方法もありますが、
静的リソースの方を使う利点は下記になります。

  • 関連ファイルをディレクトリ階層にパッケージ化でき、階層自体を.zipや.jarとしてアップロードできる。
  • ドキュメントだとIdのハードコードやSOQLを使用する必要があるが、
    静的リソースはグローバル変数でのアクセスが可能。

この2点を抑えておきましょう。
また静的リソースには制限もありますのでそこも試験対策として抑えておきましょう。

  • 1つの静的リソースのサイズは5MBまで
  • 1組織で使える静的リソースの要領は250MBまで
  • 静的リソースはデータストレージの容量にカウントされる

この3つは前回上級試験を受験した際に出た内容なので抑えておくといいと思います。

静的リソースの設定の仕方

設定→静的リソースと検索すると出てきます。

こんな感じでOKです。
これをVFやコンポーネントで表示させていきます。

Visualforceでの使い方

VFでの取得の仕方は下記の書き方でOKです。

<apex:image url="{!$Resource.Keneloper}" width="250" height="250"/>

これでOKです。さらにディレクトリ階層になっているファイルの取得は下記になります。

<apex:image url="{!URLFOR($Resource.KeneloperZip,'images/Keneloper.png'}" width="250" height="250"/>

第一引数にリソース名、第二引数には相対パスをいれてあげればOKです。

Lightningコンポーネントでの使い方

Lightningコンポーネントでも基本的に使い方は同じです。
グローバル変数からアクセスしたいファイル名を記述します

<aura:component>
    <img src="{!$Resource.Keneloper}"/>
</aura:component>

これでOKです。

まとめ

今回は画像を表示させるために、静的リソースを使いましたが、他にもスタイルシート、JavaScript コードなどを読み込ませるのにも使えます。
企業のロゴや共通のスタイルシートなどをあらかじめ静的リソースに登録することで一気に汎用性があがると思います。

その他の開発に関する記事はこちらです。

Developerも含めた試験問題にチャレンジしてみましょう。

コメント