Salesforce1でのVisualforceベストプラクティス
スピーカー
岡本 充洋
ディベロッパープログラムマネージャ
@mitsuhiro
Safe Harbor
Safe harbor statement under the Private Securities Litigation Reform Act of 1995:
This presentation may contai...
Salesforce1モバイル・アプリケーション
過去の投資がそのまま活かせる…
ドラック & ドロップによ
るUIのカスタマイズ
通知
プラットフォーム
パブリッシャ
アクション
…これからの未来
今すぐSalesforce1アプリをダウンロ...
Salesforce1でのVisualforce – アジェンダ
§  どこで利用できるか?
§  どうやって利用するか?
§  どうすればより有効か?
Salesforce1でのVisualforce – アジェンダ
§  どこで利用できるか?
§  どうやって利用するか?
§  どうすればより有効か?
Visualforce – 左ナビゲーション
左ナビゲーション上のVisualforceページ
JavaScriptのナビゲーションライブラリを利用して
画面遷移を行っていく
sforce.one.navigateToSObject など
Visualforce – パブリッシャアクション
パブリッシャアクションとしての
Visualforceページ
(オブジェクトへのパブリッシャアクションとして利用する
には、Visualforceページは標準コントローラを利用する
必要があり...
Visualforce – ページレイアウト
ページレイアウト中のVisualforceページ
(Visualforceページは標準コントローラを
拡張する必要があります)
Visualforce – モバイルカード
モバイルカード
Visualforceページをレコード詳細画面に
(Visualforceページは標準コントローラを
拡張する必要があります)
Salesforce1でのVisualforce
§  <apex:page docType="html-5.0" …>
§  ‘Salesforce モバイルアプリケーションでの使用が可能’ にチェック
§  VFページをページレイアウ...
Salesforce1でのVisualforce – アジェンダ
§  どこで利用できるか?
§  どうやって利用するか?
–  UI/UX
–  ビジネスロジック & データバインディング
–  ナビゲーション
–  複数フォームファクタ...
Salesforce1でのVisualforce – アジェンダ
§  どこで利用できるか?
§  どうやって利用するか?
–  UI/UX
–  ビジネスロジック & データバインディング
–  ナビゲーション
–  複数フォームファクタ...
Salesforce1でのVisualforce – UI/UXを考慮する
Salesforce1はVisualforceページを
自動的にモバイルに最適化させる
ことはできません
Salesforce1でのVisualforce – UI/UXを考慮する
§  VFページをモバイルの限られた画面を考慮してデザインする
§  どのフォームファクターをサポートするかを決める – 電話, タブレット, 両方
§  モバイ...
Visualforceページをモバイルに最適化する
モバイルデザインテンプレート
http://www2.developerforce.com/ja/mobile/services/mobile-templates
Visualforceページをモバイルに最適化する
Twitter Bootstrap
http://www.youtube.com/watch?v=sIWchyCqDa4
Using Visualforce and Bootstrap(英語)...
Visualforceページをモバイルに最適化する
Ionic Framework
http://coenraets.org/blog/2014/02/sample-force-com-mobile-
application-with-ioni...
Visualforceページをモバイルに最適化する
Ratchet
http://coenraets.org/blog/2014/03/building-mobile-apps-for-
salesforce-com-with-ratchet-...
Visualforceページをモバイルに最適化する
jQuery Mobile
http://www.developerforce.com/mobile/getting-started/
html5/#jquery
Salesforce1での標準Visualforceタグの使用
<apex:repeat> <apex:outputPanel>
注意: 代表的なモノのみ。
これは包括的なリストではありません
<apex:pageBlock> <apex:pa...
Salesforce1での標準Visualforceタグの使用
§  可能であれば標準Visualforceタグの使用は避ける
(標準タグはデスクトップに最適化されている)
§  標準HTMLマークアップ (<div>, <section>...
Salesforce1 スタイルガイド
http://sfdc-styleguide.herokuapp.com/
VisualforceページをSalesforce1のルック & フィールと一貫性を持たせる
Salesforce1 スタイルガイド
https://github.com/joshbirk/onestarter
OneStarter - VisualforceページをSalesforce1のスタイルにするための
オープンソースのjQue...
Salesforce1でのVisualforce – UI/UXまとめ
推奨 非推奨
レスポンシブデザイン デスクトップに最適化されたデザイン
標準HTMLマークアップ
及びカスタムCSS
標準VF構造化タグ及びCSS
Less is more...
Salesforce1でのVisualforce – アジェンダ
§  どこで利用できるか?
§  どうやって利用するか?
–  UI/UX
–  ビジネスロジック & データバインディング
–  ナビゲーション
–  複数フォームファクタ...
§  ViewStateの利用を避ける (<apex:form>を使わない)
§  シングルページアプリケーションとする (ページのフルレンダリングはモバイ
ル上ではコストの高い処理)
§  構造化を行うためにAngularJS, Bac...
Visualforceでのビジネスロジック & データバインディング
§  JavascriptからApexコントローラ/エクステ
ンション上のメソッドを呼び出す
§  ViewStateを利用しない (パフォーマンス
が良い)
§  ス...
Visualforceでのビジネスロジック & データバインディング
§  SObjectに対する基本的なCRUD 処理を
直接Javascriptから行える
§  ViewStateを利用しない (パフォーマンス
が良い)
§  サーバ...
Visualforceでのビジネスロジック & データバインディング
§  <apex:repeat> はリストを表示す
る際などに有効
<apex:repeat> は問題なく利用可能
Visualforceでのビジネスロジック & データバインディング
Mobile Pack
http://www2.developerforce.com/ja/mobile/services/mobile-packs
§  有名なオープンソ...
Salesforce1上のVisualforce – データバインドまとめ
推奨 非推奨
JavaScript Remoting <apex:form>
Visualforce Remote Objects <apex:form>
HTML5 ...
Salesforce1でのVisualforce – アジェンダ
§  どこで利用できるか?
§  どうやって利用するか?
–  UI/UX
–  ビジネスロジック & データバインディング
–  ナビゲーション
–  複数フォームファクタ...
Salesforce1でのVisualforce – ナビゲーション
Salesforce1 では sforce.one オブジェクトを利用した
Javascriptのナビゲーションライブラリを提供
sforce.one.navigateToS...
Salesforce1でのVisualforce – ナビゲーション
メソッド 概要
navigateToSObject(recordId,  view) recordIdの詳細ページへ遷移、viewはオプションでchatter,  
rela...
Salesforce1でのVisualforce – ナビゲーション
§  window.open の利用は避ける
§  window.location.href の直接利用は動作しない
§  target=“_blank” をナビゲーシ...
Salesforce1でのVisualforce – アジェンダ
§  どこで利用できるか?
§  どうやって利用するか?
–  UI/UX
–  ビジネスロジック & データバインディング
–  ナビゲーション
–  複数フォームファクタ...
Visualforceで複数フォームファクタのサポート
しかし開発しているVisualforceページは
Salesforce1(モバイル & タブレット)及びデスクトップで
動作することを求められています…
Visualforceで複数フォームファクタのサポート
オプション1 (既存のページ) : モバイルフレンドリーにリファクタリングする
§  モバイルに最適化されていない/サポートされていない<apex:pageBlock>
や <apex:...
Visualforceで複数フォームファクタのサポート
オプション2 : レスポンシブデザイン
おすすめのアプローチ
Visualforceで複数フォームファクタのサポート
オプション3 : フォームファクタごとに別のコンテンツを届ける
http://blogs.developerforce.com/developer-relations/2012/05/cr...
Visualforceで複数フォームファクタのサポート
ナビゲーションのハンドリングも
Salesforce1とDesktopで違うことを忘れず考慮する
Salesforce1でのVisualforce – アジェンダ
§  どこで利用できるか?
§  どうやって利用するか?
–  UI/UX
–  ビジネスロジック & データバインディング
–  ナビゲーション
–  複数フォームファクタ...
Salesforce1でのデバイスアクセス
PhoneGap/Cordovaのようなデバイスアクセスは機能は現在Salesforce1アプリ
ケーションにはありません
ですが….
–  位置情報API (Saleforce1開発者ガイドのサンプ...
Salesforce1でのVisualforce – アジェンダ
§  どこで利用できるか?
§  どうやって利用するか?
–  UI/UX
–  ビジネスロジック & データバインディング
–  ナビゲーション
–  複数フォームファクタ...
Salesforce1でのVisualforce – アジェンダ
§  どこで利用できるか?
§  どうやって利用するか?
–  UI/UX
–  ビジネスロジック & データバインディング
–  ナビゲーション
–  複数フォームファクタ...
Salesforce1でのVisualforceのパフォーマンス
モバイルでWebページを作成するのに最も重要な3の事というのは
パフォーマンスと、パフォーマンス、そしてパフォーマンス
である
Salesforce1でのVisualforceのパフォーマンス
VFページでモバイルページをデザインする際にパフォーマンスTips
§  Viewstateを利用しない (<apex:form>を利用しない)
§  <apex:page ...
Salesforce1でのVisualforceのパフォーマンス
§  CSSスプライトを使用してHTTPコネクションを最小化する
§  ページヘのパフォーマンスに影響するドロップシャドウ、グラデーションなどのCSS処理を避け、
フラットデ...
Salesforce1でのVisualforceのパフォーマンス
ページのパフォーマンスを測るのに有用なツール
§  WebPageTest
§  PageSpeed Insights
§  Chrome Developer Tools ...
Salesforce1でのVisualforce – アジェンダ
§  どこで利用できるか?
§  どうやって利用するか?
–  UI/UX
–  ビジネスロジック & データバインディング
–  ナビゲーション
–  複数フォームファクタ...
Salesforce1は2種類のアクセス方法がある
http://yourinstance.salesforce.com/one/one.app
Web版 ハイブリット版
Salesforce1でのVisualforceをデバッグする
まずはSalesforce1のWeb版上のVisualforceページでデバッグする
http://yourinstance.salesforce.com/one/one.app
Salesforce1でのVisualforceのデバッグ
Ch...
デバイス上で動作するVisualforceページを
デバッグする (例, ハイブリッド版 Salesforce1アプリ)
http://people.apache.org/~pmuellr/weinre/docs/latest/
Salesfo...
Salesforce1開発者向けリソース
§  Webinar: Salesforce1モバイルアプリ開発入門
–  コーディング
•  http://events.developerforce.com/en/events/webinars/...
Developer Forceをフォローください
@developerforcej/ #forcedotcomjp
Developer Force Japan
+Developer Force Japan
Developer Force Jap...
Jp visualforce in salesforce1
Upcoming SlideShare
Loading in …5
×

Jp visualforce in salesforce1

4,144 views

Published on

Jp visualforce in salesforce1

  1. 1. Salesforce1でのVisualforceベストプラクティス
  2. 2. スピーカー 岡本 充洋 ディベロッパープログラムマネージャ @mitsuhiro
  3. 3. Safe Harbor Safe harbor statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of intellectual property and other litigation, risks associated with possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non- salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-Q for the most recent fiscal quarter ended July 31, 2012. This documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.
  4. 4. Salesforce1モバイル・アプリケーション 過去の投資がそのまま活かせる… ドラック & ドロップによ るUIのカスタマイズ 通知 プラットフォーム パブリッシャ アクション …これからの未来 今すぐSalesforce1アプリをダウンロード すべての カスタマイズ あらゆるデバイスで すべてのCRM データ すべてのアプリケーション https://yourinstance.salesforce.com/one/one.app
  5. 5. Salesforce1でのVisualforce – アジェンダ §  どこで利用できるか? §  どうやって利用するか? §  どうすればより有効か?
  6. 6. Salesforce1でのVisualforce – アジェンダ §  どこで利用できるか? §  どうやって利用するか? §  どうすればより有効か?
  7. 7. Visualforce – 左ナビゲーション 左ナビゲーション上のVisualforceページ JavaScriptのナビゲーションライブラリを利用して 画面遷移を行っていく sforce.one.navigateToSObject など
  8. 8. Visualforce – パブリッシャアクション パブリッシャアクションとしての Visualforceページ (オブジェクトへのパブリッシャアクションとして利用する には、Visualforceページは標準コントローラを利用する 必要があります) JavaScript Pub-Sub ライブラリを利用して パブリッシャアクションの挙動をコントロール publisher.setValidForSubmit publisher.post publisher.close
  9. 9. Visualforce – ページレイアウト ページレイアウト中のVisualforceページ (Visualforceページは標準コントローラを 拡張する必要があります)
  10. 10. Visualforce – モバイルカード モバイルカード Visualforceページをレコード詳細画面に (Visualforceページは標準コントローラを 拡張する必要があります)
  11. 11. Salesforce1でのVisualforce §  <apex:page docType="html-5.0" …> §  ‘Salesforce モバイルアプリケーションでの使用が可能’ にチェック §  VFページをページレイアウト、モバイルカード、パブリッシャアクションで 利用するには標準コントローラを使用(拡張)する必要がある 考慮しておくべき注意点
  12. 12. Salesforce1でのVisualforce – アジェンダ §  どこで利用できるか? §  どうやって利用するか? –  UI/UX –  ビジネスロジック & データバインディング –  ナビゲーション –  複数フォームファクタのサポート –  デバイスアクセス §  どうすればより有効か?
  13. 13. Salesforce1でのVisualforce – アジェンダ §  どこで利用できるか? §  どうやって利用するか? –  UI/UX –  ビジネスロジック & データバインディング –  ナビゲーション –  複数フォームファクタのサポート –  デバイスアクセス §  どうすればより有効か?
  14. 14. Salesforce1でのVisualforce – UI/UXを考慮する Salesforce1はVisualforceページを 自動的にモバイルに最適化させる ことはできません
  15. 15. Salesforce1でのVisualforce – UI/UXを考慮する §  VFページをモバイルの限られた画面を考慮してデザインする §  どのフォームファクターをサポートするかを決める – 電話, タブレット, 両方 §  モバイルのコンテキストに合わせて開発する –  必要に応じて位置情報やカメラ等、デバイスの機能を利用する –  モバイルバージョンのページ/アプリがすべての情報へのアクセスのサポートを必要とし ているわけでない – “less is more” –  最も一般的なモバイルでのユースケースに最適化する – 一覧表示, データ入力, 検索 など §  <apex:page standardStylesheets="false"> §  レスポンシブデザインの手法を利用します (Salesforce1アプリと同一化)
  16. 16. Visualforceページをモバイルに最適化する モバイルデザインテンプレート http://www2.developerforce.com/ja/mobile/services/mobile-templates
  17. 17. Visualforceページをモバイルに最適化する Twitter Bootstrap http://www.youtube.com/watch?v=sIWchyCqDa4 Using Visualforce and Bootstrap(英語) - http://bit.ly/VisualStrap Bootstrapのカスタムフォークで、標準の Visualforceのスタイリングに対して動作する (コミュニティが開発)
  18. 18. Visualforceページをモバイルに最適化する Ionic Framework http://coenraets.org/blog/2014/02/sample-force-com-mobile- application-with-ionic-and-angularjs/
  19. 19. Visualforceページをモバイルに最適化する Ratchet http://coenraets.org/blog/2014/03/building-mobile-apps-for- salesforce-com-with-ratchet-2-0/
  20. 20. Visualforceページをモバイルに最適化する jQuery Mobile http://www.developerforce.com/mobile/getting-started/ html5/#jquery
  21. 21. Salesforce1での標準Visualforceタグの使用 <apex:repeat> <apex:outputPanel> 注意: 代表的なモノのみ。 これは包括的なリストではありません <apex:pageBlock> <apex:pageBlockButtons> <apex:pageBlockSection> <apex:pageBlockSectionItem> <apex:pageBlockTable> <apex:inlineEditSupport> <apex:detail> <apex:inputField>** <apex:enhancedList> <apex:listViews> <apex:relatedList> <chatter:*> <liveagent:*> 動作 サポート サポート しかし可能で あれば避けた ほうが良い サポート しない
  22. 22. Salesforce1での標準Visualforceタグの使用 §  可能であれば標準Visualforceタグの使用は避ける (標準タグはデスクトップに最適化されている) §  標準HTMLマークアップ (<div>, <section>, <p>, <a>, <li> など) + カスタム のモバイルに最適化されたCSSを利用する (例. Bootstrapなど) §  もし<apex:pageBlockSection>などの構造化タグを利用している場合は 1カラムレイアウトを利用する
  23. 23. Salesforce1 スタイルガイド http://sfdc-styleguide.herokuapp.com/ VisualforceページをSalesforce1のルック & フィールと一貫性を持たせる
  24. 24. Salesforce1 スタイルガイド https://github.com/joshbirk/onestarter OneStarter - VisualforceページをSalesforce1のスタイルにするための オープンソースのjQueryプラグイン
  25. 25. Salesforce1でのVisualforce – UI/UXまとめ 推奨 非推奨 レスポンシブデザイン デスクトップに最適化されたデザイン 標準HTMLマークアップ 及びカスタムCSS 標準VF構造化タグ及びCSS Less is more すべての機能をサポート モバイルコンテキストを考慮する (例. カメラ, 位置情報) デスクトップでの機能を 再作成する タッチに最適化 (例. 大きなタップエリア, HTML5 フォームインプット) クリックに最適化
  26. 26. Salesforce1でのVisualforce – アジェンダ §  どこで利用できるか? §  どうやって利用するか? –  UI/UX –  ビジネスロジック & データバインディング –  ナビゲーション –  複数フォームファクタのサポート –  デバイスアクセス §  どうすればより有効か?
  27. 27. §  ViewStateの利用を避ける (<apex:form>を使わない) §  シングルページアプリケーションとする (ページのフルレンダリングはモバイ ル上ではコストの高い処理) §  構造化を行うためにAngularJS, BackboneなどのJavaScript MV* フレーム ワークの利用を検討する Visualforceでのビジネスロジック & データバインディング 最も重要な3つの注意点….
  28. 28. Visualforceでのビジネスロジック & データバインディング §  JavascriptからApexコントローラ/エクステ ンション上のメソッドを呼び出す §  ViewStateを利用しない (パフォーマンス が良い) §  ステートレスなビジネスロジック §  JavaScriptなどのフロントエンド処理に重 きをおいて開発する JavaScript Remoting
  29. 29. Visualforceでのビジネスロジック & データバインディング §  SObjectに対する基本的なCRUD 処理を 直接Javascriptから行える §  ViewStateを利用しない (パフォーマンス が良い) §  サーバサイドApexコードを削減できる §  Front-end heavy (i.e. JavaScript) development §  ForceTk/RemoteTkの代替となる (VFコンテキスト内の) Visualforceリモートオブジェクト (Spring ’14のパイロット)
  30. 30. Visualforceでのビジネスロジック & データバインディング §  <apex:repeat> はリストを表示す る際などに有効 <apex:repeat> は問題なく利用可能
  31. 31. Visualforceでのビジネスロジック & データバインディング Mobile Pack http://www2.developerforce.com/ja/mobile/services/mobile-packs §  有名なオープンソースの Javascript MV* フレームワークを Visualforce内で利用する §  シングルページアプリケーション を作成するのに非常に有用 §  モバイルパックがSalesforceとの データバインディングを行う
  32. 32. Salesforce1上のVisualforce – データバインドまとめ 推奨 非推奨 JavaScript Remoting <apex:form> Visualforce Remote Objects <apex:form> HTML5 Input Elements (tel, email, date etc.) <apex:inputField> <apex:input type=“tel/email/…”/> <apex:inputField> シングルページアプリケーション マルチページアプリケーション JavaScript MV* Frameworks like AngularJS, Backbone etc. JavaScriptフレームワーク無し ステートレス & 非同期 サーバサイドステート & 同期
  33. 33. Salesforce1でのVisualforce – アジェンダ §  どこで利用できるか? §  どうやって利用するか? –  UI/UX –  ビジネスロジック & データバインディング –  ナビゲーション –  複数フォームファクタのサポート –  デバイスアクセス §  どうすればより有効か?
  34. 34. Salesforce1でのVisualforce – ナビゲーション Salesforce1 では sforce.one オブジェクトを利用した Javascriptのナビゲーションライブラリを提供 sforce.one.navigateToSObject sforce.one.navigateToURL sforce.one.navigateToFeed sforce.one.navigateToFeedItemDetail sforce.one.navigateToRelatedList sforce.one.navigateToList sforce.one.editRecord sforce.one.createRecord
  35. 35. Salesforce1でのVisualforce – ナビゲーション メソッド 概要 navigateToSObject(recordId,  view) recordIdの詳細ページへ遷移、viewはオプションでchatter,   related,  detailを選択できる。 (viewパラメータはSummer '14で実装予定) navigateToURL(url) urlは絶対パス、相対パスをサポート。絶対パスが選択された場 合のみ、⼦子供ウィンドウで表⽰示 navigateToFeed(subjectId,  type) 特定のFeedへ遷移、現状対応しているtypeはNEWS,RECORD navigateToFeedItemDetail(feedItemId) 特定のFeedItemへ遷移 navigateToRelatedList(relatedListId,   parentRecordId) relatedListIdで指定した関連リストに遷移 navigateToList(listViewId,  listViewName,   scope) listViewIdとlistViewNameで指定されたList  viewへ遷移 createRecord(entityName,  recordTypeId) entityNameで指定された新規レコード作成画⾯面へ遷移 recordTypeIdは任意 editRecord(recordId) recordIdで指定された編集画⾯面へ遷移
  36. 36. Salesforce1でのVisualforce – ナビゲーション §  window.open の利用は避ける §  window.location.href の直接利用は動作しない §  target=“_blank” をナビゲーションリンクの中で使用しない §  外部リンク (例 <a href=“www.test.com”>)は新しい子ブラウザで開かれる §  内部リンクは現在のウィンドウで開かれる 考慮しておくべき注意点
  37. 37. Salesforce1でのVisualforce – アジェンダ §  どこで利用できるか? §  どうやって利用するか? –  UI/UX –  ビジネスロジック & データバインディング –  ナビゲーション –  複数フォームファクタのサポート –  デバイスアクセス §  どうすればより有効か?
  38. 38. Visualforceで複数フォームファクタのサポート しかし開発しているVisualforceページは Salesforce1(モバイル & タブレット)及びデスクトップで 動作することを求められています…
  39. 39. Visualforceで複数フォームファクタのサポート オプション1 (既存のページ) : モバイルフレンドリーにリファクタリングする §  モバイルに最適化されていない/サポートされていない<apex:pageBlock> や <apex:detail> のようなVFタグの利用を避ける/排除する §  可能な場合<apex:form>を JavaScriptリモーティングもしくはリモートオブ ジェクトを使用して更新する
  40. 40. Visualforceで複数フォームファクタのサポート オプション2 : レスポンシブデザイン おすすめのアプローチ
  41. 41. Visualforceで複数フォームファクタのサポート オプション3 : フォームファクタごとに別のコンテンツを届ける http://blogs.developerforce.com/developer-relations/2012/05/cross-device-html5-apps-using-visualforce.html Device.js や Modernizr のようなライブラリを使って フォームファクタを判断できる –  フォーム・ファクタごとに別のVFページ にリダイレクトさせる •  もしくは –  フォームファクタごとにページ上のセク ションの表示をコントロールする
  42. 42. Visualforceで複数フォームファクタのサポート ナビゲーションのハンドリングも Salesforce1とDesktopで違うことを忘れず考慮する
  43. 43. Salesforce1でのVisualforce – アジェンダ §  どこで利用できるか? §  どうやって利用するか? –  UI/UX –  ビジネスロジック & データバインディング –  ナビゲーション –  複数フォームファクタのサポート –  デバイスアクセス §  どうすればより有効か?
  44. 44. Salesforce1でのデバイスアクセス PhoneGap/Cordovaのようなデバイスアクセスは機能は現在Salesforce1アプリ ケーションにはありません ですが…. –  位置情報API (Saleforce1開発者ガイドのサンプ ルを確認してみてください) –  <input type=“file” accept=“image/*”/> (カメラへのアクセス)
  45. 45. Salesforce1でのVisualforce – アジェンダ §  どこで利用できるか? §  どうやって利用するか? –  UI/UX –  ビジネスロジック & データバインディング –  ナビゲーション –  複数フォームファクタのサポート –  デバイスアクセス §  どうすればより有効か? –  パフォーマンス –  デバッグ
  46. 46. Salesforce1でのVisualforce – アジェンダ §  どこで利用できるか? §  どうやって利用するか? –  UI/UX –  ビジネスロジック & データバインディング –  ナビゲーション –  複数フォームファクタのサポート –  デバイスアクセス §  どうすればより有効か? –  パフォーマンス –  デバッグ
  47. 47. Salesforce1でのVisualforceのパフォーマンス モバイルでWebページを作成するのに最も重要な3の事というのは パフォーマンスと、パフォーマンス、そしてパフォーマンス である
  48. 48. Salesforce1でのVisualforceのパフォーマンス VFページでモバイルページをデザインする際にパフォーマンスTips §  Viewstateを利用しない (<apex:form>を利用しない) §  <apex:page cache="true" expires="600"> §  CSS及びJavaScriptを(YUI Compressorのようなツールで)圧縮し、イメージも圧縮する §  画像の遅延ロード やインフィニティスクロールなどの最適化テクニックを使用する §  DOMツリーの挿入/更新を一括で行う場合、ブラウザの再描画を避ける (例. 個々の<li> セク ションを挿入する代わりに <ul> セクション全体を挿入する) 一般 §  FastClick のようなモバイルブラウザの300msのタップ遅延を避けるライブラリを利用する §  Jquery よりもZepto.js のようなより軽量なJavascriptライブラリを利用する §  <script>ステートメントをVisualforceページの最後に記述する JavaScript
  49. 49. Salesforce1でのVisualforceのパフォーマンス §  CSSスプライトを使用してHTTPコネクションを最小化する §  ページヘのパフォーマンスに影響するドロップシャドウ、グラデーションなどのCSS処理を避け、 フラットデザインを心掛ける §  適切な場合にはCSSのハードウェアアクセラレーションプロパティを利用する §  PNG/JPG画像を利用した上 (GIFではなく)、可能な限り画像は避けCSS3をかわりに利用する §  CSS transitions を画面遷移に利用したシングルページアプリケーションを作成する §  フォームファクタにあったアセット(CSS、画像など)を選んでロードする CSS/画像 VFページでモバイルページをデザインする際にパフォーマンスTips
  50. 50. Salesforce1でのVisualforceのパフォーマンス ページのパフォーマンスを測るのに有用なツール §  WebPageTest §  PageSpeed Insights §  Chrome Developer Tools - Timeline
  51. 51. Salesforce1でのVisualforce – アジェンダ §  どこで利用できるか? §  どうやって利用するか? –  UI/UX –  ビジネスロジック & データバインディング –  ナビゲーション –  複数フォームファクタのサポート –  デバイスアクセス §  どうすればより有効か? –  パフォーマンス –  デバッグ
  52. 52. Salesforce1は2種類のアクセス方法がある http://yourinstance.salesforce.com/one/one.app Web版 ハイブリット版 Salesforce1でのVisualforceをデバッグする
  53. 53. まずはSalesforce1のWeb版上のVisualforceページでデバッグする http://yourinstance.salesforce.com/one/one.app Salesforce1でのVisualforceのデバッグ Chrome開発ツールやFirebugなど の標準的なwebデバッキングツー ルを使用する
  54. 54. デバイス上で動作するVisualforceページを デバッグする (例, ハイブリッド版 Salesforce1アプリ) http://people.apache.org/~pmuellr/weinre/docs/latest/ Salesforce1でのVisualforceのデバッグ Weinre – デバイス上で動作するWebページのデバッグ用のオープンソースツール
  55. 55. Salesforce1開発者向けリソース §  Webinar: Salesforce1モバイルアプリ開発入門 –  コーディング •  http://events.developerforce.com/en/events/webinars/jp- intros1mobiledev –  コーディングレス •  http://successjp.salesforce.com/blogs/2014/02/salesforce1-6e87.html §  Salesforce1サンプルデモアプリケーション –  https://github.com/DeveloperForceJapan/demo-s1app-jp §  S1開発者ガイド(翻訳中) –  英語版 : bit.ly/s1-dev-guide
  56. 56. Developer Forceをフォローください @developerforcej/ #forcedotcomjp Developer Force Japan +Developer Force Japan Developer Force Japan Developer Force Group

×