SFDC：Trailheadの『Visualforce Mobile』をやってみました

f:id:tyoshikawa1106:20150321173059p:plain

Trailhead -『Visualforce Mobile』をやってみました。以下の内容が用意されています。

Getting Started with Visualforce in Salesforce1
Adding Visualforce Pages to the Navigation Menu
Implementing Global Actions with Visualforce Pages
Implementing Object-Specific Actions with Visualforce Pages
Using Visualforce Pages in Page Layouts and Mobile Cards
Adopting User Interface Guidelines
Using CSS and JavaScript Mobile Frameworks

Getting Started with Visualforce in Salesforce1

f:id:tyoshikawa1106:20150321173405p:plain

VisualforceページをSalesforce1にで使用することができる3つの場所
VisualforceでSalesforce1にアプリを構築する
Salesforce1に属する携帯アプリを開発する
開発中にブラウザで実行するための「one.app」

Adding Visualforce Pages to the Navigation Menu

f:id:tyoshikawa1106:20150321174252p:plain

ナビゲーションメニューにVisualforceページを追加します。
モバイルフレンドリーにするページにCSSスタイルを追加します。
SalesForce1にページにsforce.oneナビゲーションライブラリを参照。
sforce.oneナビゲーションライブラリを用いて実行することができる少なくとも4つの異なるナビゲーションアクションを記述する。

RemoteObjectsやsforce.one.navigateToSObjectを利用して次のような画面を作れます。
f:id:tyoshikawa1106:20150321180056p:plain:w150

Implementing Global Actions with Visualforce Pages

f:id:tyoshikawa1106:20150321180427p:plain

グローバルアクションとオブジェクト固有のアクション間の2つの違い。
Visualforceページを使用してSalesForce1にグローバルなアクションを実装します。
Publisher SDKについて。
モバイルユーザーインターフェイスのCSSスタイルを追加。

取引先登録を行うVFページを作成してパブリッシャーアクションで使用する方法を確認できます。
f:id:tyoshikawa1106:20150321181606p:plain:w150

Implementing Object-Specific Actions with Visualforce Pages

f:id:tyoshikawa1106:20150321183908p:plain

オブジェクトアクションの二つの最も重要な要件について。
Visualforceページを使用してSalesforce1にオブジェクト処置を実装します。
パブリッシャーを閉じ、オブジェクトページを更新するPublisherSDKを使用。

商談のフェーズ項目を更新するPublisherアクション用のVFページを作ってみることができます。

f:id:tyoshikawa1106:20150321185122p:plain:w150

Using Visualforce Pages in Page Layouts and Mobile Cards

f:id:tyoshikawa1106:20150321191211p:plain

ページレイアウトセクションまたはモバイルカードにVisualforceページを追加する2つの違い
Salesforce1にページレイアウトで使用するVisualforceページを作成
Salesforce1に属するモバイルカード用のVisualforceページを作成

取引先に表示するモバイルカード用のVisualforceページを作成できます。
f:id:tyoshikawa1106:20150321192015p:plain

Adopting User Interface Guidelines

f:id:tyoshikawa1106:20150321194413p:plain

Salesforce1用のVisualforceページを構築するための6つのユーザインターフェースガイドライン
応答性のデザインとモバイル開発におけるその重要性の二つの特徴
CSSを使用した簡単な応答性の高いユーザーインターフェイスを構築
Salesforce1用のVisualforceページで使用してはならない6つのVisualforceコンポーネント一覧

Salesforce1で使われているフォントCSS

p { 
    font-family: "ProximaNovaSoft-Regular", Calibri, 
        "Gill Sans", "Gill Sans MT", Candara, Segoe, "Segoe UI", 
         Arial, sans-serif; 
}

次のスタイルがベースになる

<style>
    html, body, p { 
        font-family: "ProximaNovaSoft-Regular", Calibri, 
            "Gill Sans", "Gill Sans MT", Candara, Segoe, 
            "Segoe UI", Arial, sans-serif; 
        font-size: 110%;
    }
    input { font-size: 95%; }
</style>

注意事項として今後Salesforce1がバージョンアップすることで変更される可能性もありますよ。サポートしているわけではありませんよ。という感じの記載がありました。
f:id:tyoshikawa1106:20150321195026p:plain