読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

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


apex:pageBlockなどサポートされないapexタグがあります。という説明があります。
f:id:tyoshikawa1106:20150321195228p:plain


こんな感じに表示できます。
f:id:tyoshikawa1106:20150321200027p:plain

Using CSS and JavaScript Mobile Frameworks

f:id:tyoshikawa1106:20150321201227p:plain

  • Salesforce1アプリ開発を簡単にするフレームワークの紹介
    • Bootstrap
    • Ionic
    • Ratchet
    • AngularJS
    • Backbone
    • Knockout
    • React


ionicで次の画面を作れます。

f:id:tyoshikawa1106:20150321202323p:plain


BootstrapをつかったContactリストです。

f:id:tyoshikawa1106:20150321203420p:plain


全部終わるとバッチが貰えます。
f:id:tyoshikawa1106:20150321203628p:plain