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

ユーザインターフェースのガイドラインの採用

学習の目的

この単元を完了すると、次のことができるようになります。
  • Salesforce アプリケーションで実行される Visualforce ページを開発するためのユーザインターフェースのガイドラインを 6 つ以上挙げる。
  • 反応型設計の 2 つの特性とモバイル環境におけるその重要性について説明する。
  • Salesforce Lightning Design System を使用してシンプルな反応型ユーザインターフェースを作成する。
  • Salesforce アプリケーション向けの Visualforce ページを作成するときに使用してはならない Visualforce コンポーネントを 6 つ以上挙げる。

ユーザインターフェースのガイドライン

Salesforce アプリケーションで実行される Visualforce ページがモバイルデバイス向けに自動的に最適化されることはありません。開発者には、優れたユーザエクスペリエンスをモバイルユーザに提供するために適切なベストプラクティスを実装する責任があります。
Salesforce アプリケーションで実行される Visualforce ページの開発では、次のような原則に従う必要があります。
  • 小さい画面に合わせて設計します。モバイルデバイスでは、少ない方が効果的です。表示または取得するデータの量を本当に必要なものに制限します。モバイルページでは、必須ではない機能をすべてサポートする必要はありません。
  • 反応型設計を使用して、ページレイアウトをさまざまな画面サイズに自動的に適応させます。
  • タッチ操作を想定して設計します。キーボードまたはマウス中心のユーザインターフェースコンポーネントやメタファーを避けます。大きなタップ領域を指定します。
  • キーボード入力を制限します。
  • 適宜、使用可能なデバイスセンサ (地理位置情報やカメラなど) を使用します。
  • Salesforce フルサイトを模倣した Visualforce コンポーネントを避けます。一般に、簡素な HTML コンポーネントの方を使用します。
  • SLDS (Salesforce Lightning Design System) を使用して、Lightning Experience とデザインを一致させます。
  • 複数ページプロセスよりも JavaScript 単一ページアプリケーションパターンを使用します。単一ページアプリケーションは、1 ページに収まり、ネイティブアプリケーションに似た滑らかなユーザインターフェースを提供するアプリケーションです。ビューは JavaScript で動的に作成され、ユーザがアプリケーションの機能を操作すると DOM に挿入されます。
  • JavaScript フレームワークを使用します。単一ページアプリケーションの作成は難しい作業ですが、既存の JavaScript フレームワークによってその複雑さのほとんどに対処できます。

あるいは、アプリケーションの実装に、Visualforce ではなく、最新の Lightning プラットフォーム JavaScript ベースの UI フレームワークである Lightning コンポーネントを使用することを検討します。「Lightning Web Components Basics (Lightning Web コンポーネントの基本)」モジュールと「Aura コンポーネントの基本」とモジュールを参照してください。

Salesforce アプリケーションのビジュアルデザインとの一致

Salesforce Lightning Design System (SLDS) を使用すると、Salesforce アプリケーションのデザインに一致させることができます。Lightning Design System は CSS フレームワークで、Salesforce のこの新しいデザインを創出するために当社の開発者が使用しているアイコンやカラーパレット、フォントなどを利用できます。
SLDS は、Salesforce Lightning の原則やベストプラクティスと一貫するユーザインターフェースを作成する最適な方法です。また、継続的に更新されるため、SLDS の最新バージョンを使用している限り、ページが常に Lightning Experience と一貫したものになります。
メモ

メモ

SLDS については、Salesforce アプリケーションの単元の「Visualforce ページでの SLDS の使用」ですでに詳しく説明しています。

反応型設計の使用

反応型設計は、さまざまな画面サイズでの読みやすさや操作のしやすさを含む、最適な表示操作を提供する Web ユーザインターフェースを作成するための Web 設計方式です。

反応型ユーザインターフェースは、流動的なアスペクト比ベースのグリッド、柔軟な画像、CSS3 メディアクエリを使用して、レイアウトを画面サイズに適応させます。反応型設計を使用して、携帯電話やタブレットでも見やすく滑らかに動作する Visualforce ページを作成できます。

標準の Salesforce モバイルページでは、反応型設計技法を使用してデバイスに合わせて最適化されたレイアウトを提供します。主な技法として、携帯電話には縦並びの 1 列レイアウト、タブレットには横並びの 2 列レイアウトが使用されます。ページはすべてのデバイスで同じであり、表示される実際の画面サイズに適応します。
反応型設計のビジュアル例

Lightning Design System は Flexbox に基づくグリッドを使用して、デバイスに依存しない柔軟でモバイルファーストのスキャフォールディングシステムを提供します。このグリッドシステムを使用すると、ページを行や列に分割し、異なる画面サイズに応じたレイアウトのバリエーションを定義できます。

グリッドシステムは、グリッドラッパー (slds-grid クラス) とラッパー内の列 (slds-col クラス) の 2 つで構成されます。デフォルトで列はそのコンテンツに応じてサイズ設定されます。

SLDS サイズ設定ヘルパーを使用して列のサイズを手動で指定することもできます。サイズ設定ヘルパーでは、slds-size--X-of-Y 形式を使用します。X は合計スペース Y に対する割合を表します。たとえば、slds-size--1-of-2 は、使用可能なスペースの 50% の幅であることを表します。

メモ

メモ

ここでは反応型ページの調整を事細かに説明しません。詳細は、Lightning Design System に関するリファレンスサイトを確認することをお勧めします。

グリッドシステムの簡単な例を見てみましょう。

  1. 開発者コンソールを開き、[File (ファイル)] | [New (新規)] | [Visualforce Page (Visualforce ページ)] をクリックします。ページ名に「ResponsivePage」と入力します。
  2. エディタで、任意のマークアップを次のように置き換えます。
    <apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
    
      <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
        <head>
          <meta charset="utf-8" />
          <meta http-equiv="x-ua-compatible" content="ie=edge" />
          <title>SLDS ResponsiveDesign Visualforce Page in Salesforce Mobile</title>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
    
           <!-- Import the Design System style sheet -->
           <apex:slds />
        </head>
        <body>
    
          <!-- REQUIRED SLDS WRAPPER -->
          <div class="slds-scope">
    
            <!-- PRIMARY CONTENT WRAPPER -->
    
              <!-- RESPONSIVE GRID EXAMPLE -->
    
              <!-- / RESPONSIVE GRID EXAMPLE -->
          </div>
        </body>
      </html>
    </apex:page>
  3. 次のコードを <!-- RESPONSIVE GRID EXAMPLE --> セクションに追加します。
    <div class="myapp">
      <div class="slds-grid slds-wrap">
        <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--1-of-4">
          <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small">Box 1</div>
        </div>
        <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--3-of-4">
          <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small">Box 2</div>
        </div>
      </div>
    </div>
    このコードは、次のような 2 列グリッドを作成します。
    • モバイル画面上に全幅で縦並び
    • 小さな画面上 (480 ピクセル超) に 1:1 のサイズで横並び
    • 大きな画面上 (768 ピクセル超) に 3:1 のサイズで横並び
    各サイズの画面に対応する Lightning Design System のグリッドシステム

    ブラウザで Visualforce ページを表示し、ブラウザウィンドウの角をドラッグしてレイアウトの反応を確認します。次に、Visualforce ページを Salesforce アプリケーションに追加しましょう。

  4. Visualforce ページを Salesforce モバイルアクセスで有効にします。
    1. [設定] から、[クイック検索] ボックスに「Visualforce ページ」と入力し、[Visualforce ページ] を選択して、モバイルアプリケーションのページを有効にします。
      モバイルアプリケーションのページを有効にする方法については、前の単元で説明しました。
  5. Visualforce ページのタブを作成します。
    1. [設定] から、[クイック検索] ボックスに「タブ」と入力し、[タブ] を選択します。
    2. [Visualforce タブ] セクションで、[新規] をクリックします。
    3. [Visualforce ページ] ドロップダウンリストで、[ResponsivePage] を選択します。
    4. [タブの表示ラベル] 項目に、「Responsive Page (反応型ページ)」と入力します。
    5. [タブスタイル] 項目をクリックして [Apple] スタイルを選択します。
    6. [次へ] をクリックし、[次へ] をクリックしてから [保存] をクリックします。
  6. タブを Salesforce アプリケーションナビゲーションメニューに追加します。
    1. [設定] から、[クイック検索] ボックスに「モバイルアプリケーション」と入力し、[Salesforce ナビゲーション] を選択します。
    2. [Responsive Page (反応型ページ)] タブを選択し、[追加] をクリックします。
    3. [保存] をクリックします。
反応型設計を使用した Salesforce アプリケーション向けの Visualforce ページ。

Salesforce アプリケーションに Visualforce ページを表示します。全幅で縦並びの場合にボックスが自動的にどのように配置されるかを確認します。

Salesforce アプリケーションで避けるべき Visualforce のコンポーネントおよび機能

Visualforce のコアコンポーネント (apex の名前空間にあるコンポーネント) の大半は、Salesforce アプリケーションで正常に機能します。ただし、モバイル向けに最適化されていたり、すべての機能がアプリケーションで動作したりするわけではありません。次の簡単なルールに従うと、Visualforce ページのモバイルユーザの操作性が向上します。

一般に、<apex:pageBlock> および子コンポーネントのような構造上のコンポーネントや、<apex:pageBlockTable> のような Salesforce のデザインを模倣するその他のコンポーネントは回避します。これらのコンポーネントを使用する必要がある場合は、デフォルトの 2 列ではなく、<apex:pageBlockSection columns="1"> を使用して 1 列に設定します。

折り返されず、横に広がるコンポーネントは避けます。特に、<apex:detail><apex:enhancedList><apex:listViews><apex:relatedList> はいずれもサポートされていません。<apex:dataTable> を使用してテーブルを作成するときに、デバイスの幅を考慮します。

<apex:inlineEditSupport> の使用を回避します。インライン編集は、マウスベースのデスクトップアプリケーションでは適切に機能するユーザインターフェースパターンですが、特に画面の小さい電話端末など、タッチベースのデバイスでは使いにくくなります。

<apex:inputField> は、テキスト、メール、電話番号のような基本的な入力項目として表示される項目には使用できますが、日付項目や参照項目など入力ウィジェットを使用する項目種別では回避します。

Salesforce アプリケーションのページでは、<apex:page>renderAs="PDF" を設定して PDF を表示することはできません。

retargeting