進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

ページレイアウトとモバイルカードでの Visualforce ページの使用

学習の目的

この単元を完了すると、次のことができるようになります。
  • Visualforce ページをページレイアウトのセクションに追加する場合と、モバイルカードに追加する場合の違いを 2 つ挙げて説明する。
  • Salesforce アプリケーションページレイアウトで使用する Visualforce ページを作成する。
  • Salesforce アプリケーションのモバイルカードで使用する Visualforce ページを作成する。

ページレイアウトとモバイルカードでの Visualforce ページの使用

Visualforce のページをページレイアウトに埋め込むかモバイルカードとして追加することで、レコードの詳細ページをカスタマイズします。

ページのセクションに Visualforce を埋め込んでページレイアウトをカスタマイズする機能は、以前から Salesforce にありました。この機能は、通常の Salesforce と同様に、Salesforce アプリケーションでも動作します。この方法でレイアウトに追加されたページは、標準デスクトップバージョンの Salesforce と Salesforce アプリケーションの両方に表示されます。

一方、モバイルカードでは、Visualforce ページをモバイルユーザ専用のレイアウトに追加できます。モバイルカードは、短い情報を追加したり、それらをモバイル使用に特化して書式設定したりするのに適しています。たとえば、取引先責任者を訪問する道順を示すモバイルカードや、会社の重要なデータを要約したモバイルカードなどが考えられます。

ページレイアウトで、またはモバイルカードとして使用される Visualforce ページは、特定のレコードのコンテキストで実行されます。オブジェクト固有のアクションと同様に、特定のレコード ID がページに関連付けられ、ページではそのオブジェクトに対して標準コントローラを使用する必要があります。

ページレイアウトで使用する Visualforce ページの作成

標準コントローラを使用して埋め込み可能な Visualforce ページを設計します。その際、理想的には常にページの内容を 1 つのタスクか 1 種類の情報に絞ります。

選択された取引先の株価情報を提供する Visualforce ページを作成しましょう。

  1. 開発者コンソールを開き、[File (ファイル)] | [New (新規)] | [Visualforce Page (Visualforce ページ)] をクリックします。ページ名に「StockQuote」と入力します。
  2. エディタで、任意のマークアップを次のように置き換えます。
    <apex:page docType="html-5.0" standardController="Account">
        <style>
            .mypage .quote {
                margin: 12px 0;
                font-size: 64px;
                text-align: center;
            }
            .mypage .delta {
                font-size: 24px;
                text-align: center;
                color: green;
            }
        </style>
        
        <div class="mypage">
            Stock:
            <div class="quote">$42.00</div>
            <div class="delta">+1.32%</div>
        </div>
        
    </apex:page>
これは理解しやすいページです。ほとんどが静的で簡単な HTML です。取引先で標準コントローラが使用されており、このページを取引先レイアウトに埋め込みページまたはモバイルカードとして追加できます。
メモ

メモ

ここで、SLDS ではなく、静的 HTML を使用しているのはなぜでしょうか? 静的スタイルの場合は、埋め込みページが端的かつ軽量な状態で維持されます。もちろん、その代償として、ページが Salesforce アプリケーションの UI と自動的に一致することがありません。

ここで重要なのは、特定のプログラムテクニックではなく、埋め込みページとモバイルカードの最適な使用法を理解することです。特にモバイル環境では、常に Visualforce の内容をユーザが特定のタスクを遂行するのに必要とする重要な情報に絞ってください。単純なモバイルアプリケーションの方がパフォーマンスがよく、ユーザは行っている作業に集中し続けることができます。

機内や訪問先に向かう途中、行列での待ち時間など、ユーザがアプリケーションを使用するであろうコンテキストを念頭に置きます。「万一に備えて」項目や情報を追加しておきたいという誘惑にかられることもありますが、やめておきましょう。集中するのです。ユーザが詳細を必要としているのなら、別のページで詳細を確認できるようにします。

ページレイアウトまたはモバイルカードでのページの使用

Visualforce ページをページレイアウトのセクションに追加すると、全ユーザ向けに追加されます。モバイルカードとしてページレイアウトに追加すると、Salesforce アプリケーションにのみ追加されます。

この手順は、ページをページレイアウトのセクションとして追加する場合でも、モバイルカードとして追加する場合でも似ています。

  1. [設定] から、[クイック検索] ボックスに「Visualforce ページ」と入力し、[Visualforce ページ] を選択して、モバイルアプリケーションのページを有効にします。
    モバイルアプリケーションのページを有効にする方法については、前の単元で説明しました。
  2. Visualforce ページをページレイアウトに追加します。
    1. [設定] から、[クイック検索] ボックスに「オブジェクトマネージャ」と入力し、[オブジェクトマネージャ] | [取引先] | [ページレイアウト] をクリックします。
    2. [取引先レイアウト] の右にあるドロップダウン矢印から [編集] を選択します。
    3. [Visualforce ページ] を選択し、[StockQuote] ページをページ上の表示する位置にドラッグします。
      商談レイアウトへのアクションの追加
      [モバイルカード] セクションに追加したページは Salesforce アプリケーションにのみ表示されます。ページレイアウトの別のセクションに追加したページは、モバイルクライアントとデスクトップクライアントの両方に表示されます。
    4. [保存] をクリックします。
新しいモバイルカードをテストするには、Salesforce アプリケーションを強制的に再読み込みします。次に、取引先レコードに移動し、[関連] パネルにスワイプします。次のような画面が表示されます。
[Close Opportunity (商談の完了)] アクションページ

この株価ウィジェットはハードコード化されていますが、Apex で作成された株価検索サービス、Web サービスコールアウト、その他のデータソースに簡単に接続できます。複数のモバイルカードをレイアウトに追加できます。それらはすべて [関連] パネルに表示されます。