Skip to main content
From 16:00 UTC on January 17, 2026, to 20:00 UTC on January 17, 2026, we will perform planned maintenance on the Trailhead, myTrailhead, and Trailblazer Community sites. During the maintenance, these sites will be unavailable, and users won't be able to access them. Please plan your activities around this required maintenance.

静的リソースの使用

学習の目的

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

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

メモ

日本語で受講されている方へChallenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で 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 ヘルプ] サイトから新しいフィードバックフォームにいつでもアクセスできるようになりました。

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