Salesforce1 モバイルアプリケーション開発者ガイド
jビジュアルデザインの考慮事項
作成する Visualforce ページの外観を Salesforce1 に近づけるには、CSS スタイル設定や、応答性の高い設計を使用して、HTML を最小限に抑えます。
フォントとスタイル
Salesforce1 のビジュアルデザインには、Salesforce1 に特別ライセンスが供与されている、Proxima Nova というサンセリフ書体が使用されています。組織の各ユーザのデバイスにこのフォントがインストールされていないことがありますが、次の CSS フォントスタックは利用可能な中で最も近いフォントを使用します。
また、通常のテキスト要素やフォーム要素に使用するフォントサイズを若干大きくすることもお勧めします。フォントが大きいと文字が読みやすくなり、フォーム要素をタップしやすくなります。最初に記述する完全なスタイルブロックを次に示します。
HTML マークアップ
組織の Visualforce ページを Salesforce フルサイトのデザインと一致させる場合は、多くのケースで、Salesforce のヘッダー、サイドバー、スタイル設定や、<apex:pageBlock> および子コンポーネントが使用されています。<apex:page showHeader="false" standardStylesheets="false" ...> を設定してこれらの要素を明示的に無効にしないでください。これらの要素は、Salesforce1 内でページを実行するときに自動的に無効になります。
ただし、<apex:pageBlock> および子コンポーネントの使用は見直すことをお勧めします。これを使用すると、Salesforce フルサイトのデザインに一致させることを明示的に指示することになるため、標準のスタイルシートがオフの場合でも、これらが生成するマークアップが Salesforce1 に引き継がれます。この場合は、マークアップがさらに複雑になり、Salesforce1 と一致するスタイル設定を適用することが難しくなります。
代わりに、シンプルな静的 HTML マークアップ、または選択したモバイルツールキットで必要なマークアップを使用します。次のセクションでマークアップのサンプルを示します。
応答性の高い設計
Salesforce1 ページでは、応答性の高い設計技法を使用して、デバイスに合わせてレイアウトを最適化します。たとえば、携帯電話端末には縦並びの 1 列レイアウト、タブレットには横並びの 2 列レイアウトを使用します。Salesforce1 で使用する Visualforce ページにも同様の技法を使用できます。
最初に、ページにデフォルトのレイアウトを��成します。
次に、CSS スタイル設定およびメディアクエリを使用して、応答性を備えたレイアウトにします。
次の HTML を実際に Visualforce ページで試してみます。上記の CSS スニペットを、HTML と同じ Visualforce ページ上の <style> タグ間に配置し、続いてブラウザウィンドウの角をドラッグしてレイアウトの応答性を確認します。