Salesforceの静的リソースって何？設定方法や注意点をサンプルを用いてご紹介

Salesforceにおける静的リソースとは？

Salesforceの静的リソースとは、画像やスタイルシート、JavaScript、アーカイブなどzipファイルやjarファイルに値するものをSalesforceのWebサーバにアップロードする機能です。 静的リソースは、コンテンツ配信のネットワークであるCDNとして使用できるファイルで管理や配信ができます。また、キャッシュと配信は自動で処理されるようになっています。Salesforceの静的リソースは、グローバル変数を使って参照可能です。 グローバル変数をVisualforceで直接使う、URLFOR() などの関数でパロメータとして使用できます。サイト作成などSalesforce上で画像やスタイルシートをユーザに見せたいときなど使用可能な機能です。

Salesforceにおける静的リソースの概要

Salesforceで静的リソースを作成する方法を説明します。まず、「設定」から「クイック検索ボックス」に「静的リソース」と入力しましょう。そして、静的リソースの項目を選択します。 次に「新規」を選択します。「名前」と書いてあるテキストボックスにVisualforceで識別されるテキストを入力しましょう。「説明」のテキストエリアでリソースの説明をします。 「ファイル」のテキストボックス横の「参照」をクリックし、アップロードする素材を移動させましょう。1つの静的リソースは、250Mまで可能です。次に、キャッシュロールを設定します。 「非公開」を選択すると、Salesforceサーバでキャッシュ済みの静的リソースが他のユーザと共有されなくなります。反対に「公開」を選択することで、他のユーザとキャッシュ済みの静的リソースを共有できるようになるのです。 最後に保存をします。主にサイト作成で使用します。

静的リソースを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における静的リソースの注意点

Salesforceにおける静的リソースについての注意点を説明します。静的リソースを作成する際、「設定」から「静的リソース」を選択し、「新規」で「名前」というテキストボックスがあります。 名前のテキストボックスには、アンダースコアと英数字以外使用できません。また、最初は文字で入力すること、空白は使用不可、アンダースコアは最後には使用しない、2つ続けてアンダースコアを使用しないようにしましょう。 静的リソースのキャッシュ設定においてもゲストユーザープロトコル設定をしているサイトは、ブラウザ内のみ静的リソースをキャッシュしています。また、無制限だったサイトが制限されてしまうと、45日間静的リソースが解放されないことがあるので、注意が必要です。

Salesforceの静的リソースを活用しよう

今回は、Salesforceにおける静的リソースについて紹介しました。Salesforceの静的リソースは、画像やスタイルシートのアップロード、JavaScriptやCSS、Zipファイルなどをアップロードするのに使うことができます。 サイト作成の際に画像やファイルをアップロードするときに使用することがあるので、ぜひ活用できるようにしましょう。]]>