Jp visualforce in salesforce1
- 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.
- 5. Salesforce1でのVisualforce – アジェンダ § どこで利用できるか? § どうやって利用するか? § どうすればより有効か?
- 6. Salesforce1でのVisualforce – アジェンダ § どこで利用できるか? § どうやって利用するか? § どうすればより有効か?
- 8. Visualforce – パブリッシャアクション パブリッシャアクションとしての Visualforceページ (オブジェクトへのパブリッシャアクションとして利用する には、Visualforceページは標準コントローラを利用する 必要があります) JavaScript Pub-Sub ライブラリを利用して パブリッシャアクションの挙動をコントロール publisher.setValidForSubmit publisher.post publisher.close
- 11. Salesforce1でのVisualforce § <apex:page docType="html-5.0" …> § ‘Salesforce モバイルアプリケーションでの使用が可能’ にチェック § VFページをページレイアウト、モバイルカード、パブリッシャアクションで 利用するには標準コントローラを使用(拡張)する必要がある 考慮しておくべき注意点
- 12. Salesforce1でのVisualforce – アジェンダ § どこで利用できるか? § どうやって利用するか? – UI/UX – ビジネスロジック & データバインディング – ナビゲーション – 複数フォームファクタのサポート – デバイスアクセス § どうすればより有効か?
- 13. Salesforce1でのVisualforce – アジェンダ § どこで利用できるか? § どうやって利用するか? – UI/UX – ビジネスロジック & データバインディング – ナビゲーション – 複数フォームファクタのサポート – デバイスアクセス § どうすればより有効か?
- 15. Salesforce1でのVisualforce – UI/UXを考慮する § VFページをモバイルの限られた画面を考慮してデザインする § どのフォームファクターをサポートするかを決める – 電話, タブレット, 両方 § モバイルのコンテキストに合わせて開発する – 必要に応じて位置情報やカメラ等、デバイスの機能を利用する – モバイルバージョンのページ/アプリがすべての情報へのアクセスのサポートを必要とし ているわけでない – “less is more” – 最も一般的なモバイルでのユースケースに最適化する – 一覧表示, データ入力, 検索 など § <apex:page standardStylesheets="false"> § レスポンシブデザインの手法を利用します (Salesforce1アプリと同一化)
- 17. Visualforceページをモバイルに最適化する Twitter Bootstrap http://www.youtube.com/watch?v=sIWchyCqDa4 Using Visualforce and Bootstrap(英語) - http://bit.ly/VisualStrap Bootstrapのカスタムフォークで、標準の Visualforceのスタイリングに対して動作する (コミュニティが開発)
- 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. Salesforce1での標準Visualforceタグの使用 § 可能であれば標準Visualforceタグの使用は避ける (標準タグはデスクトップに最適化されている) § 標準HTMLマークアップ (<div>, <section>, <p>, <a>, <li> など) + カスタム のモバイルに最適化されたCSSを利用する (例. Bootstrapなど) § もし<apex:pageBlockSection>などの構造化タグを利用している場合は 1カラムレイアウトを利用する
- 23. Salesforce1 スタイルガイド http://sfdc-styleguide.herokuapp.com/ VisualforceページをSalesforce1のルック & フィールと一貫性を持たせる
- 24. Salesforce1 スタイルガイド https://github.com/joshbirk/onestarter OneStarter - VisualforceページをSalesforce1のスタイルにするための オープンソースのjQueryプラグイン
- 25. Salesforce1でのVisualforce – UI/UXまとめ 推奨 非推奨 レスポンシブデザイン デスクトップに最適化されたデザイン 標準HTMLマークアップ 及びカスタムCSS 標準VF構造化タグ及びCSS Less is more すべての機能をサポート モバイルコンテキストを考慮する (例. カメラ, 位置情報) デスクトップでの機能を 再作成する タッチに最適化 (例. 大きなタップエリア, HTML5 フォームインプット) クリックに最適化
- 26. Salesforce1でのVisualforce – アジェンダ § どこで利用できるか? § どうやって利用するか? – UI/UX – ビジネスロジック & データバインディング – ナビゲーション – 複数フォームファクタのサポート – デバイスアクセス § どうすればより有効か?
- 27. § ViewStateの利用を避ける (<apex:form>を使わない) § シングルページアプリケーションとする (ページのフルレンダリングはモバイ ル上ではコストの高い処理) § 構造化を行うためにAngularJS, BackboneなどのJavaScript MV* フレーム ワークの利用を検討する Visualforceでのビジネスロジック & データバインディング 最も重要な3つの注意点….
- 28. Visualforceでのビジネスロジック & データバインディング § JavascriptからApexコントローラ/エクステ ンション上のメソッドを呼び出す § ViewStateを利用しない (パフォーマンス が良い) § ステートレスなビジネスロジック § JavaScriptなどのフロントエンド処理に重 きをおいて開発する JavaScript Remoting
- 29. Visualforceでのビジネスロジック & データバインディング § SObjectに対する基本的なCRUD 処理を 直接Javascriptから行える § ViewStateを利用しない (パフォーマンス が良い) § サーバサイドApexコードを削減できる § Front-end heavy (i.e. JavaScript) development § ForceTk/RemoteTkの代替となる (VFコンテキスト内の) Visualforceリモートオブジェクト (Spring ’14のパイロット)
- 30. Visualforceでのビジネスロジック & データバインディング § <apex:repeat> はリストを表示す る際などに有効 <apex:repeat> は問題なく利用可能
- 31. Visualforceでのビジネスロジック & データバインディング Mobile Pack http://www2.developerforce.com/ja/mobile/services/mobile-packs § 有名なオープンソースの Javascript MV* フレームワークを Visualforce内で利用する § シングルページアプリケーション を作成するのに非常に有用 § モバイルパックがSalesforceとの データバインディングを行う
- 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. Salesforce1でのVisualforce – アジェンダ § どこで利用できるか? § どうやって利用するか? – UI/UX – ビジネスロジック & データバインディング – ナビゲーション – 複数フォームファクタのサポート – デバイスアクセス § どうすればより有効か?
- 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. 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. Salesforce1でのVisualforce – ナビゲーション § window.open の利用は避ける § window.location.href の直接利用は動作しない § target=“_blank” をナビゲーションリンクの中で使用しない § 外部リンク (例 <a href=“www.test.com”>)は新しい子ブラウザで開かれる § 内部リンクは現在のウィンドウで開かれる 考慮しておくべき注意点
- 37. Salesforce1でのVisualforce – アジェンダ § どこで利用できるか? § どうやって利用するか? – UI/UX – ビジネスロジック & データバインディング – ナビゲーション – 複数フォームファクタのサポート – デバイスアクセス § どうすればより有効か?
- 39. Visualforceで複数フォームファクタのサポート オプション1 (既存のページ) : モバイルフレンドリーにリファクタリングする § モバイルに最適化されていない/サポートされていない<apex:pageBlock> や <apex:detail> のようなVFタグの利用を避ける/排除する § 可能な場合<apex:form>を JavaScriptリモーティングもしくはリモートオブ ジェクトを使用して更新する
- 41. Visualforceで複数フォームファクタのサポート オプション3 : フォームファクタごとに別のコンテンツを届ける http://blogs.developerforce.com/developer-relations/2012/05/cross-device-html5-apps-using-visualforce.html Device.js や Modernizr のようなライブラリを使って フォームファクタを判断できる – フォーム・ファクタごとに別のVFページ にリダイレクトさせる • もしくは – フォームファクタごとにページ上のセク ションの表示をコントロールする
- 43. Salesforce1でのVisualforce – アジェンダ § どこで利用できるか? § どうやって利用するか? – UI/UX – ビジネスロジック & データバインディング – ナビゲーション – 複数フォームファクタのサポート – デバイスアクセス § どうすればより有効か?
- 44. Salesforce1でのデバイスアクセス PhoneGap/Cordovaのようなデバイスアクセスは機能は現在Salesforce1アプリ ケーションにはありません ですが…. – 位置情報API (Saleforce1開発者ガイドのサンプ ルを確認してみてください) – <input type=“file” accept=“image/*”/> (カメラへのアクセス)
- 45. Salesforce1でのVisualforce – アジェンダ § どこで利用できるか? § どうやって利用するか? – UI/UX – ビジネスロジック & データバインディング – ナビゲーション – 複数フォームファクタのサポート – デバイスアクセス § どうすればより有効か? – パフォーマンス – デバッグ
- 46. Salesforce1でのVisualforce – アジェンダ § どこで利用できるか? § どうやって利用するか? – UI/UX – ビジネスロジック & データバインディング – ナビゲーション – 複数フォームファクタのサポート – デバイスアクセス § どうすればより有効か? – パフォーマンス – デバッグ
- 47. Salesforce1でのVisualforceのパフォーマンス モバイルでWebページを作成するのに最も重要な3の事というのは パフォーマンスと、パフォーマンス、そしてパフォーマンス である
- 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. Salesforce1でのVisualforceのパフォーマンス § CSSスプライトを使用してHTTPコネクションを最小化する § ページヘのパフォーマンスに影響するドロップシャドウ、グラデーションなどのCSS処理を避け、 フラットデザインを心掛ける § 適切な場合にはCSSのハードウェアアクセラレーションプロパティを利用する § PNG/JPG画像を利用した上 (GIFではなく)、可能な限り画像は避けCSS3をかわりに利用する § CSS transitions を画面遷移に利用したシングルページアプリケーションを作成する § フォームファクタにあったアセット(CSS、画像など)を選んでロードする CSS/画像 VFページでモバイルページをデザインする際にパフォーマンスTips
- 50. Salesforce1でのVisualforceのパフォーマンス ページのパフォーマンスを測るのに有用なツール § WebPageTest § PageSpeed Insights § Chrome Developer Tools - Timeline
- 51. Salesforce1でのVisualforce – アジェンダ § どこで利用できるか? § どうやって利用するか? – UI/UX – ビジネスロジック & データバインディング – ナビゲーション – 複数フォームファクタのサポート – デバイスアクセス § どうすればより有効か? – パフォーマンス – デバッグ
- 54. デバイス上で動作するVisualforceページを デバッグする (例, ハイブリッド版 Salesforce1アプリ) http://people.apache.org/~pmuellr/weinre/docs/latest/ Salesforce1でのVisualforceのデバッグ Weinre – デバイス上で動作するWebページのデバッグ用のオープンソースツール
- 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. Developer Forceをフォローください @developerforcej/ #forcedotcomjp Developer Force Japan +Developer Force Japan Developer Force Japan Developer Force Group