この記事の目次
Salesforceにおける静的リソースとは?
![](https://b-engineer-media-cms.s3.amazonaws.com/item/image/user/9e08934fd24485c7d9e691a312f16a4ef7ff96eb/b6583a06-83cc-4fa2-8649-54512fa48c13.jpg)
Salesforceにおける静的リソースの概要
![](https://b-engineer-media-cms.s3.amazonaws.com/item/image/user/9e08934fd24485c7d9e691a312f16a4ef7ff96eb/fb7559f2-4fba-41fc-9245-ce038a9f72c8.jpg)
静的リソースをVisualforceに追加する方法
Salesforceで静的リソースをVisualforceに追加する方法について説明します。具体的には、グローバル変数とドット表記を使って、静的リソースを参照する方法です。 まずは、開発者コンソールを開いて、ファイル、新規、Visualforceページの順でクリックしていきましょう。ページ名を記入して、エディタを使って、マークアップを作成します。最後に変更処理中であっても確認できるページのプレビューで確認しましょう。 サンプルコードでは、VisualforceページにJavaScriptを含めて、焦点を絞っています。グローバル変数を使用して、ドット変数を使用して各タグや変数をリソースの名前でつなぎ合わせ、ページに追加するのです。以下、サンプルコードになります。<apex:page>
<!-- Add the static resource to page's <head> -->
<apex:includeScript value=“{! $Resource.jQuery }”/>
<!-- A short bit of jQuery to test it's there -->
<script type=“text/javascript”>
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(“#message”).html(“Hello from jQuery!”);
});
</script>
<!-- Where the jQuery message will appear -->
<h1 id=“message”></h1>
</apex:page>
圧縮された静的リソースのアップロードについて
圧縮された静的リソースのアップロードについて説明します。圧縮した静的リソースを作り、グループ化して更新する方法です。静的アセットがアプリケーションアイコンやJavaScriptなど一連の関連項目である場合に作成します。 グループ化する際は、すべての要素を含むZipファイルを作ります。作成したZipファイルは、SalesforceのWebサーバ上にアップロードができます。具体的には、「設定」の「クイック検索」に「静的リソース」と入力し、「新規」をクリックしましょう。 Zipファイルを登録には、「名前」や「説明」を入力します。「キャッシュコントロール」を「公開」にして保存すれば完了です。あとはSalesforceのサイトでドメイン名を確認し、ファイルを表示できるか確認しましょう。圧縮された静的リソースをVisualforceに追加する方法
グローバル変数とURLFOR関数を使って、圧縮された静的リソースの項目を参照する方法です。 URLFOR関数で圧縮された静的リソースを参照し、静的リソース内の項目へ相対パスを組み合わせて、静的アセットを参照するVisualforceコンポーネントができるURLを作成します。例としてサンプルコードを用意しました。 サンプルコードでは、URLFOR($Resource.jQueryMobile, ‘images/icons-png/cloud-black.png’)が圧縮された静的リソースの特定の画像アセットのURLを返す仕組みです。返されたURLは、<apex:image>内で使用できます。 <apex:includeScript>や <apex:stylesheet>コンポーネント用にJavasCriptやスタイルシートのURLを作成します。以下、サンプルコードです。<apex:page showHeader=“false” sidebar=“false” standardStylesheets=“false”>
<!-- Add static resources to page's <head> -->
<apex:stylesheet value=“{!
URLFOR($Resource.jQueryMobile,'jquery.mobile-1.4.5.css')}”/>
<apex:includeScript value=“{! $Resource.jQuery }”/>
<apex:includeScript value=“{!
URLFOR($Resource.jQueryMobile,'jquery.mobile-1.4.5.js')}”/>
<div style=“margin-left: auto; margin-right: auto; width: 50%”>
<!-- Display images directly referenced in a static resource -->
<h3>Images</h3>
<p>A hidden message:
url=“{!URLFOR($Resource.jQueryMobile, 'images/icons-png/eye-black.png')}”/>
<apex:image alt=“heart” title=“heart”
url=“{!URLFOR($Resource.jQueryMobile, 'images/icons-png/heart-black.png')}”/>
url=“{!URLFOR($Resource.jQueryMobile, 'images/icons-png/cloud-black.png')}”/>
</p>
<!-- Display images referenced by CSS styles,
all from a static resource. -->
<h3>Background Images on Buttons</h3>
<button class=“ui-btn ui-shadow ui-corner-all
ui-btn-icon-left ui-icon-action”>action</button>
<button class=“ui-btn ui-shadow ui-corner-all
ui-btn-icon-left ui-icon-star”>star</button>
</div>
</apex:page>
Salesforceにおける静的リソースの注意点
![](https://b-engineer-media-cms.s3.amazonaws.com/item/image/user/8c7f204d9ede4027afb1e4450514b993d07cd4a1/8d5c4d1f-0112-417c-9855-0e86b97b2ee7.jpg)
Salesforceの静的リソースを活用しよう
![](https://b-engineer-media-cms.s3.amazonaws.com/item/image/user/8c7f204d9ede4027afb1e4450514b993d07cd4a1/cc5cf742-511e-4170-b2ac-99d2cb2c1d9e.jpg)
この記事の監修者・著者
![株式会社オープンアップITエンジニア](https://tenshoku-careerchange.jp/wp-content/uploads/2023/07/fzxADbr-_400x400-1-150x150.jpg)
-
未経験からITエンジニアへのキャリアチェンジを支援するサイト「キャリアチェンジアカデミー」を運営。これまで4500人以上のITエンジニアを未経験から育成・排出してきました。
・AWS、salesforce、LPICの合計認定資格取得件数:2100以上(2023年6月時点)
・AWS Japan Certification Award 2020 ライジングスター of the Year 受賞
最新の投稿
- 2024年3月26日キャリア・転職保安職(自衛官・警察・消防官など)に向いている人の性格・特徴ランキング【現役保安職(自衛官・警察・消防官など)36人が回答】
- 2024年3月26日キャリア・転職保安職(自衛官・警察・消防官など)に必要なスキルランキング&スキルアップの方法とは?【現役保安職(自衛官・警察・消防官など)36人が回答】
- 2024年3月26日キャリア・転職クリエイター職(ライター・デザイナー・編集)に向いている人の性格・特徴ランキング【現役クリエイター職(ライター・デザイナー・編集)64人が回答】
- 2024年3月26日キャリア・転職クリエイター職(ライター・デザイナー・編集)に必要なスキルランキング&スキルアップの方法とは?【現役クリエイター職(ライター・デザイナー・編集)64人が回答】