この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。
英語に切り替える

効果的なページレイアウトの選択

使用されるコンテキストに適したページレイアウトを使用して、Salesforce アプリケーション内で見栄えの良い、機能的な Visualforce ページを設計します。メインナビゲーションのタブまたはアクションバーのカスタムアクションとして追加されるページは、デバイスのほぼ全画面を使用でき、垂直にスクロールできます。一方、オブジェクトのページレイアウトに追加される Visualforce は、指定の限定された空間に合わせる必要があります。

通常、Visualforce をページレイアウトに追加すると、参照のみになっている場合は一目で情報を把握でき、機能性が最も高まります。複数項目のフォームのようなユーザの操作を必要とする機能は、メインナビゲーションのタブとして、またはアクションバーのカスタムアクションとして追加することにより、全画面ページに配置します。

モバイルカードレイアウト

モバイルカードのレイアウトは、サイズと配置の両方で最も制限されます。オブジェクトのページレイアウトにモバイルカードとして追加される Visualforce ページは、Salesforce アプリケーションのオブジェクトの関連リストページで、ページの最初の項目としてヘッダーの下に表示されます。
Visualforce モバイルカードの配置
  1. レコードヘッダーはレコードが読み込まれたときに表示されますが、ユーザが上にスクロールすれば画面には表示されなくなります。画面上にあるときは、すべてのデバイスで高さが 158 ピクセルで、画面全体の幅が使用されます。レコードヘッダーの表示は制御できません。
  2. モバイルカードはレコードのすべての関連項目の上に表示されます。
  3. 幅を 100% に設定します。要素は両側のパディングを差し引いて自動的にサイズ変更されます。モバイルカードのコンテンツはスクロールできないため、指定した範囲にフィットすることを確認してください。
  4. ページレイアウトエディタでピクセル単位で高さを設定して、モバイルカードの高さを制御します。設定した高さよりモバイルカードのコンテンツが短い場合でも、モバイルカードの領域は設定された高さをそのまま使用します。その場合、余分な領域は空白になります。設定した高さよりカードのコンテンツが長い場合、コンテンツは切り捨てられます。サポートする予定のデバイスの中の最小のデバイスで画面の高さを超えないようにモバイルカードを作成することをお勧めします。環境に適した画面要素の高さを設定してください。
  5. レコードの関連項目はすべてのモバイルカードの後に表示されます。

複数のモバイルカードを追加できますが、これらを通り越して関連リストまでスクロールするのは、ユーザの操作性ですぐに問題になります。1 つか 2 つのみ追加することをお勧めします。ページを表示するのに全画面が必要な場合は、代わりにオブジェクトのカスタムアクションにページを移動することを検討してください。

通常の Salesforce ヘッダーおよびサイドバーは、モバイルカードとして追加された Visualforce ページから自動的に削除されます。ページの開発中は、それらと Salesforce フルサイトのスタイルシートを明示的に無効にすると便利な場合があります。さらに、ページで Google Maps API を使用する場合、Google は HTML5 docType の使用を勧めています。これらをすべて実行する <apex:page> タグを次に示します。

ページレイアウトでの Visualforce

オブジェクトのページレイアウトに追加された Visualforce ページはレコード詳細ページに表示されます。モバイルカードと異なり、モバイルレコード詳細画面上の Visualforce 要素とその上下に置く項目や他のレコード詳細の配置は、オブジェクトのページレイアウトで配置を変更することにより制御できます。この方法で追加された Visualforce ページは、項目およびその他の要素の順番と同じ規則に従います。
Salesforce アプリケーションレイアウトでのインラインの Visualforce ページ
  1. レコードヘッダーはレコードが読み込まれたときに表示されますが、ユーザが上にスクロールすれば画面には表示されなくなります。画面上にあるときは、すべてのデバイスで高さが 158 ピクセルで、画面全体の幅が使用されます。レコードヘッダーの表示は制御できません。
  2. Salesforce アプリケーションによって自動的に生成されるレコードコントロールと詳細。
  3. オブジェクトのページレイアウトに追加される Visualforce ページ。
  4. 幅を 100% に設定します。要素は両側のパディングを差し引いて自動的にサイズ変更されます。
  5. ページレイアウトエディタで項目の高さをピクセル単位で設定して、Visualforce ページの領域の高さを制御します。コンテンツがそれより短い場合でも、Visualforce 要素では厳密にこの高さが使用されます。その場合、余分な領域は空白になります。ページのコンテンツがそれより高い場合、コンテンツは切り抜かれて表示されます。サポート対象の最小のデバイス画面の高さの範囲内でインラインの Visualforce ページを設定することをお勧めします。

複数のカードがある場合と同様に、複数のインラインの Visualforce ページをページレイアウトに追加することはできますが、この後のページの残り部分にスクロールするユーザの操作性にすぐに問題が生じます。Visualforce ページ要素を 1 行に 3 つ以上追加しないことをお勧めします。Visualforce 要素は、項目などの通常のページ要素で区切ってください。ページを表示するのに全画面が必要な場合は、代わりにオブジェクトのカスタムアクションにページを移動することを検討してください。

ページレイアウトに追加された Visualforce ページでは、通常の Salesforce ヘッダーおよびサイドバーが自動的に削除されます。ページの開発中は、それらと Salesforce フルサイトのスタイルシートを明示的に無効にすると便利な場合があります。さらに、ページで Google Maps API を使用する場合、Google は HTML5 docType の使用を勧めています。これらをすべて実行する <apex:page> タグを次に示します。

全画面レイアウト

Salesforce アプリケーションナビゲーションメニューに、またはカスタムアクションとしてアクションバーに追加された Visualforce ページでは、画面全体のほとんどを使用でき、より多くの情報を表示し、複雑なインターフェースを使用できます。
Salesforce アプリケーションの全画面の Visualforce ページ
  1. Salesforce ヘッダーからメインナビゲーションメニューへのアクセスが可能です。このヘッダーの高さは 42 ピクセルです。ヘッダーのコンテンツは変更できません。
  2. デバイス画面の残りは、Visualforce ページに使用されます。

Salesforce アプリケーションに表示されたとき、Salesforce の標準のヘッダーおよびサイドバーは、モバイルカードとして使用されたり、ページレイアウトに追加されたりする Visualforce ページと同様に、自動的に削除されます。ただし、アクションバーのカスタムアクションとして使用される Visualforce ページは Salesforce フルサイトと共有されますが、ナビゲーションに追加されたページは共有される場合も共有されない場合もあります。Salesforce フルサイトと共有されるページでは、Salesforce の標準のヘッダーとサイドバーの明示的な削除は、サイトのすべての Visualforce の標準動作である場合を除き、行わないようにしてください。