Skip to main content

静的リソースの使用

学習の目的

この単元を完了すると、次のことができるようになります。

  • 静的リソースとは何か、使用する理由は何かを説明する。
  • 個別の静的リソースと圧縮された静的リソースの違いを説明する。
  • 静的リソースを作成してアップロードする。
  • 静的リソースを Visualforce ページに追加する。
メモ

メモ

日本語で受講されている方へChallenge は日本語の Trailhead Playground で開始し、日本との値をコピーして貼り付けます。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

静的リソースの概要 

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

静的リソースでは、コンテンツ配信ネットワーク (CDN) として機能する Lightning Platform によってファイルが管理および配信されます。キャッシュと配信は自動的に処理されます。

静的リソースは $Resource グローバル変数を使用して参照されます。この変数は Visualforce で直接使用するか、URLFOR() などの関数のパラメーターとして使用できます。

単純な静的リソースの作成とアップロード 

個別の静的アセット用の単純なスタンドアロン静的リソースを作成します。

静的アセットがその他のアセットには関連していない場合、つまり、アイコングループなどの類似する一連のアセットの一部ではない場合、最も簡単な作成方法はスタンドアロン静的リソースを作成することです。

  1. http://jquery.com/download/ から jQuery JavaScript ライブラリの最新バージョンをダウンロードします。 
  2. [設定] から、[クイック検索] ボックスに「静的リソース」と入力し、[静的リソース] を選択して、[New (新規)] をクリックします。
  3. [名前] に「jQuery」と入力します。
  4. [Choose File (ファイルを選択)] をクリックし、これまでにダウンロードした jQuery JavaScript ファイルを選択します。単純な静的リソースの作成
  5. [キャッシュコントロール] メニューが表示される場合は、[公開] を選択します。この項目は一部の組織には表示されません。
  6. [Save (保存)] をクリックします。

これで、静的リソースバージョンの jQuery を、{!$Resource.jQuery } などの式で参照することで Visualforce ページで使用できるようになります。この優れた点は、Visualforce ページを変更することなく、静的リソースを編集して jQuery 3.1.2 などに更新できることです。静的リソースの参照で詳細を処理します。

静的リソースの Visualforce ページへの追加 

$Resource グローバル変数とドット表記を使用して、スタンドアロン静的リソースを参照します。

  1. 新しい Visualforce ページを作成するには、開発者コンソールを開き、[File (ファイル)] | [New (新規)] | [Visualforce Page (Visualforce ページ)] をクリックします。ページ名に「HelloJQuery」と入力します。
  2. エディターで、任意のマークアップを次のように置き換えます。
    <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>
  3. [Preview (プレビュー)] をクリックして、変更処理中に確認できるページのプレビューを開きます。新しいウィンドウが開き、jQuery の短いメッセージが表示されます。

このページは、Visualforce ページに JavaScript リソースを含める方法を示すことに焦点を絞っています。重要な点は、$Resource グローバル変数を使用することです。ドット表記を使用して <apex:includeScript> (JavaScript ファイルの場合)、<apex:stylesheet> (CSS スタイルシートの場合)、<apex:image> (画像ファイルの場合) タグでこの変数とリソース名を結合し、ページに追加します。

圧縮された静的リソースの作成とアップロード 

圧縮された静的リソースを作成して、通常まとめて更新される関連ファイルをグループ化します。

静的アセットが一連の関連項目 (一連のアプリケーションアイコンや複雑な JavaScript ライブラリなど) である場合、圧縮された静的リソースを作成すると便利です。グループ化するすべての要素を含む ZIP ファイルを作成し、1 つの ZIP ファイルのみを Lightning Platform にアップロードします。

  1. http://jquerymobile.com/download/ から jQuery Mobile JavaScript ライブラリの最新バージョンを ZIP 形式でダウンロードします。
  2. zip ファイルを開いて /demos/ ディレクトリとその内容を削除します。
  3. フォルダーを圧縮して「jquery.zip」という名前を付けます。
  4. [設定] から、[クイック検索] ボックスに「静的リソース」と入力し、[静的リソース] を選択して、[New (新規)] をクリックします。
  5. [名前] に「jQueryMobile」と入力します。
  6. [ファイルを選択] をクリックして、jquery.zip ファイルを選択します。
  7. [キャッシュコントロール] メニューが表示される場合は、[公開] を選択します。この項目は一部の組織には表示されません。
  8. [Save (保存)] をクリックします。

これで、静的リソースバージョンの jQuery Mobile を Visualforce ページで使用できるようになります。圧縮された静的リソース内の個々のファイルの参照方法については、この次に学習します。

圧縮された静的リソースの Visualforce ページへの追加

$Resource グローバル変数と URLFOR() 関数を使用して、圧縮された静的リソース内の項目を参照します。

URLFOR() 関数により、圧縮された静的リソースへの参照と、そのリソース内の項目への相対パスを組み合わせて、静的アセットを参照する Visualforce コンポーネントで使用可能な URL を作成できます。たとえば、URLFOR($Resource.jQueryMobile, 'images/icons-png/cloud-black.png') は圧縮された静的リソース内の特定の画像アセットの URL を返し、この URL を <apex:image> コンポーネントで使用できます。<apex:includeScript> および <apex:stylesheet> コンポーネント用に、同様の JavaScript およびスタイルシートファイルの URL を作成できます。

  1. 現在のバージョンの jQuery Mobile JavaScript ライブラリをまだダウンロードしていない場合は、「圧縮された静的リソースの作成とアップロード」セクションの手順に従ってダウンロードし、静的リソースとして追加します。
  2. 新しい Visualforce ページを作成するには、開発者コンソールを開き、[File (ファイル)] | [New (新規)] | [Visualforce Page (Visualforce ページ)] をクリックします。ページ名に「jQueryMobileResources」と入力します。

エディターで、任意のマークアップを次のように置き換えます。

<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
  <!-- Add static resource to page’s <head> -->
  <apex:stylesheet value="{!
    URLFOR($Resource.jQueryMobile,'jquery.mobile-1.4.5.css')}"/>
  <apex:includeScript value="{!$Resource.jQueryMobile }"/>
  <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:
      <apex:image alt="eye" title="eye"
        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')}"/>
      <apex:image alt="cloud" title="cloud"
        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>
メモ

この例では、jQuery Mobile JavaScript ライブラリのバージョン 1.4.5 を使用しています。これより新しいバージョンを使用している場合は、コードの 4 行目と 7 行目のバージョン番号を更新します。

[Preview (プレビュー)] をクリックして、変更処理中に確認できるページのプレビューを開きます。新しいウィンドウに、jQuery Mobile 静的リソースからのいくつかの画像が表示されます。

静的リソース経由の jQuery ボタン

分かりやすくするため、このページは Visualforce ページで圧縮された静的リソースを参照する方法のみを示しています。たとえば、Visualforce と jQuery Mobile などの JavaScript ライブラリを組み合わせる方法について学習する場合は、その他のリソースを参照してください。

リソース 

Salesforce ヘルプで Trailhead のフィードバックを共有してください。

Trailhead についての感想をお聞かせください。[Salesforce ヘルプ] サイトから新しいフィードバックフォームにいつでもアクセスできるようになりました。

詳細はこちら フィードバックの共有に進む