jp visualforce in salesforce1

Salesforce1でのVisualforceベストプラクティス

スピーカー

岡本充洋

ディベロッパープログラムマネージャ

@mitsuhiro

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.

Salesforce1モバイル・アプリケーション

過去の投資がそのまま活かせる…

ドラック & ドロップによ

るUIのカスタマイズ

通知プラットフォーム

パブリッシャアクション

…これからの未来

今すぐSalesforce1アプリをダウンロード

すべてのカスタマイズ

あらゆるデバイスで

すべてのCRMデータ

すべてのアプリケーション

https://yourinstance.salesforce.com/one/one.app

Salesforce1でのVisualforce – アジェンダ

§  どこで利用できるか?

§  どうやって利用するか?

§  どうすればより有効か?

Visualforce – 左ナビゲーション

左ナビゲーション上のVisualforceページ

JavaScriptのナビゲーションライブラリを利用して

画面遷移を行っていく sforce.one.navigateToSObject など

Visualforce – パブリッシャアクション

パブリッシャアクションとしての

Visualforceページ (オブジェクトへのパブリッシャアクションとして利用する

には、Visualforceページは標準コントローラを利用する

必要があります)

JavaScript Pub-Sub ライブラリを利用して

パブリッシャアクションの挙動をコントロール publisher.setValidForSubmit

publisher.post

publisher.close

Visualforce – ページレイアウト

ページレイアウト中のVisualforceページ (Visualforceページは標準コントローラを

拡張する必要があります)

Visualforce – モバイルカード

モバイルカード

Visualforceページをレコード詳細画面に

(Visualforceページは標準コントローラを

拡張する必要があります)

Salesforce1でのVisualforce

§  <apex:page docType="html-5.0" …>

§  ‘Salesforce モバイルアプリケーションでの使用が可能’ にチェック

§  VFページをページレイアウト、モバイルカード、パブリッシャアクションで

利用するには標準コントローラを使用(拡張)する必要がある

考慮しておくべき注意点



§  どうやって利用するか? –  UI/UX

–  ビジネスロジック & データバインディング

–  ナビゲーション

–  複数フォームファクタのサポート

–  デバイスアクセス


Salesforce1でのVisualforce – UI/UXを考慮する

Salesforce1はVisualforceページを

自動的にモバイルに適化させる

ことはできません

Salesforce1でのVisualforce – UI/UXを考慮する

§  VFページをモバイルの限られた画面を考慮してデザインする

§  どのフォームファクターをサポートするかを決める – 電話, タブレット, 両方

§  モバイルのコンテキストに合わせて開発する –  必要に応じて位置情報やカメラ等、デバイスの機能を利用する

–  モバイルバージョンのページ/アプリがすべての情報へのアクセスのサポートを必要とし

ているわけでない – “less is more”

–  も一般的なモバイルでのユースケースに適化する – 一覧表示, データ入力, 検索

など

§  <apex:page standardStylesheets="false">

§  レスポンシブデザインの手法を利用します (Salesforce1アプリと同一化)

Visualforceページをモバイルに適化するモバイルデザインテンプレート

http://www2.developerforce.com/ja/mobile/services/mobile-templates

Visualforceページをモバイルに適化する Twitter Bootstrap

http://www.youtube.com/watch?v=sIWchyCqDa4 Using Visualforce and Bootstrap(英語) -

http://bit.ly/VisualStrap

Bootstrapのカスタムフォークで、標準の

Visualforceのスタイリングに対して動作する

(コミュニティが開発)

Visualforceページをモバイルに適化する Ionic Framework

http://coenraets.org/blog/2014/02/sample-force-com-mobile-application-with-ionic-and-angularjs/

Visualforceページをモバイルに適化する Ratchet

http://coenraets.org/blog/2014/03/building-mobile-apps-for-salesforce-com-with-ratchet-2-0/

Visualforceページをモバイルに適化する jQuery Mobile

http://www.developerforce.com/mobile/getting-started/html5/#jquery

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:*>

動作サポート

サポートしかし可能であれば避けたほうが良い

サポートしない

Salesforce1での標準Visualforceタグの使用

§  可能であれば標準Visualforceタグの使用は避ける (標準タグはデスクトップに適化されている)

§  標準HTMLマークアップ (<div>, <section>, <p>, <a>, <li> など) + カスタム

のモバイルに適化されたCSSを利用する (例. Bootstrapなど)

§  もし<apex:pageBlockSection>などの構造化タグを利用している場合は 1カラムレイアウトを利用する

Salesforce1 スタイルガイド

http://sfdc-styleguide.herokuapp.com/

VisualforceページをSalesforce1のルック & フィールと一貫性を持たせる

Salesforce1 スタイルガイド

https://github.com/joshbirk/onestarter

OneStarter - VisualforceページをSalesforce1のスタイルにするためのオープンソースのjQueryプラグイン

Salesforce1でのVisualforce – UI/UXまとめ

推奨非推奨レスポンシブデザインデスクトップに適化されたデザイン

標準HTMLマークアップ及びカスタムCSS

標準VF構造化タグ及びCSS

Less is more すべての機能をサポート

モバイルコンテキストを考慮する (例. カメラ, 位置情報)

デスクトップでの機能を再作成する

タッチに適化 (例. 大きなタップエリア,

HTML5 フォームインプット)

クリックに適化

§  ViewStateの利用を避ける (<apex:form>を使わない)

§  シングルページアプリケーションとする (ページのフルレンダリングはモバイ

ル上ではコストの高い処理)

§  構造化を行うためにAngularJS, BackboneなどのJavaScript MV* フレーム

ワークの利用を検討する

Visualforceでのビジネスロジック & データバインディング

も重要な3つの注意点….


§  JavascriptからApexコントローラ/エクステ

ンション上のメソッドを呼び出す

§  ViewStateを利用しない (パフォーマンス

が良い)

§  ステートレスなビジネスロジック

§  JavaScriptなどのフロントエンド処理に重

きをおいて開発する

JavaScript Remoting


§  SObjectに対する基本的なCRUD 処理を

直接Javascriptから行える

§  ViewStateを利用しない (パフォーマンス

が良い)

§  サーバサイドApexコードを削減できる

§  Front-end heavy (i.e. JavaScript) development

§  ForceTk/RemoteTkの代替となる (VFコンテキスト内の)

Visualforceリモートオブジェクト (Spring ’14のパイロット)


§  <apex:repeat> はリストを表示す

る際などに有効

<apex:repeat> は問題なく利用可能


Mobile Pack

http://www2.developerforce.com/ja/mobile/services/mobile-packs

§  有名なオープンソースの

Javascript MV* フレームワークを

Visualforce内で利用する

§  シングルページアプリケーション

を作成するのに非常に有用

§  モバイルパックがSalesforceとの

データバインディングを行う

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フレームワーク無し

ステートレス & 非同期サーバサイドステート & 同期

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


メソッド概要

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で指定された編集画⾯面へ遷移


§  window.open の利用は避ける

§  window.location.href の直接利用は動作しない

§  target=“_blank” をナビゲーションリンクの中で使用しない

§  外部リンク (例 <a href=“www.test.com”>)は新しい子ブラウザで開かれる

§  内部リンクは現在のウィンドウで開かれる

考慮しておくべき注意点

Visualforceで複数フォームファクタのサポート

しかし開発しているVisualforceページは Salesforce1(モバイル & タブレット)及びデスクトップで

動作することを求められています…


オプション1 (既存のページ) : モバイルフレンドリーにリファクタリングする

§  モバイルに適化されていない/サポートされていない<apex:pageBlock>や <apex:detail> のようなVFタグの利用を避ける/排除する

§  可能な場合<apex:form>を JavaScriptリモーティングもしくはリモートオブ

ジェクトを使用して更新する


オプション2 : レスポンシブデザイン

おすすめのアプローチ


オプション3 : フォームファクタごとに別のコンテンツを届ける

http://blogs.developerforce.com/developer-relations/2012/05/cross-device-html5-apps-using-visualforce.html

Device.js や Modernizr のようなライブラリを使って

フォームファクタを判断できる –  フォーム・ファクタごとに別のVFページ

にリダイレクトさせる •  もしくは

–  フォームファクタごとにページ上のセク

ションの表示をコントロールする


ナビゲーションのハンドリングも Salesforce1とDesktopで違うことを忘れず考慮する

Salesforce1でのデバイスアクセス

PhoneGap/Cordovaのようなデバイスアクセスは機能は現在Salesforce1アプリ

ケーションにはありません

ですが….

–  位置情報API (Saleforce1開発者ガイドのサンプ

ルを確認してみてください)

–  <input type=“file” accept=“image/*”/> (カメラへのアクセス)








§  どうすればより有効か? –  パフォーマンス

–  デバッグ

Salesforce1でのVisualforceのパフォーマンス

モバイルでWebページを作成するのにも重要な3の事というのは

パフォーマンスと、パフォーマンス、そしてパフォーマンスである

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


§  CSSスプライトを使用してHTTPコネクションを小化する

§  ページヘのパフォーマンスに影響するドロップシャドウ、グラデーションなどのCSS処理を避け、

フラットデザインを心掛ける

§  適切な場合にはCSSのハードウェアアクセラレーションプロパティを利用する

§  PNG/JPG画像を利用した上 (GIFではなく)、可能な限り画像は避けCSS3をかわりに利用する

§  CSS transitions を画面遷移に利用したシングルページアプリケーションを作成する

§  フォームファクタにあったアセット(CSS、画像など)を選んでロードする

CSS/画像

VFページでモバイルページをデザインする際にパフォーマンスTips


ページのパフォーマンスを測るのに有用なツール

§  WebPageTest

§  PageSpeed Insights

§  Chrome Developer Tools - Timeline








§  どうすればより有効か? –  パフォーマンス

–  デバッグ

Salesforce1は2種類のアクセス方法がある

http://yourinstance.salesforce.com/one/one.app

Web版ハイブリット版

Salesforce1でのVisualforceをデバッグする

まずはSalesforce1のWeb版上のVisualforceページでデバッグする

http://yourinstance.salesforce.com/one/one.app

Salesforce1でのVisualforceのデバッグ

Chrome開発ツールやFirebugなどの標準的なwebデバッキングツー

ルを使用する

デバイス上で動作するVisualforceページをデバッグする (例, ハイブリッド版 Salesforce1アプリ)

http://people.apache.org/~pmuellr/weinre/docs/latest/

Salesforce1でのVisualforceのデバッグ

Weinre – デバイス上で動作するWebページのデバッグ用のオープンソースツール

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

Developer Forceをフォローください

@developerforcej/ #forcedotcomjp

Developer Force Japan

+Developer Force Japan

Developer Force Japan

Developer Force Group

jp visualforce in salesforce1

Documents