Salesforce1モバイル・アプリケーション
開発概要
2
Safe Harbor
Safe harbor statement under the Private Securities Litigation Reform Act of 1995:
This presentation may cont...
3
アジェンダ
•  Salesforce1 背景、概要
•  開発
1.  ポイント&クリックでの開発
2.  Visualforce開発
•  3種類のアプローチ
•  画面遷移
•  イベント処理
3.  Flexible ページ開発
•...
4
モバイルコンピューティングの台頭
Source: Strategy Analytics. “Global Smartphone Shipments Hit Record 230 Million Units in Q2 2013.” July...
5
2017  年年には業務アプリケーションの90%  がモバイル化
20%
Source: Gartner, Ian Finley, Research VP; 2010
モバイルに対応する
アプリケーション
2013 2017
90%
デスク...
6
モバイルアプリ開発と展開の困難さ
Mobile Apps
Are Critical
Mobile Apps
Deployed
60%
40%
20%
App Gap
PercentofRespondents
2013 Study of
1,...
7
以前のモバイルアプリのポートフォリオ
Salesforce Platform
Content CompensationCollaborationDashboards
Digital Sales
Aid Customer AppLog a C...
8
Salesforce1によるモバイルアプリのポートフォリオ
Digital Sales
Aid
Customer
App
企業のモバイルアプ
リのコストを⾰革命的
に激減
Content CompensationCollaborationD...
9
Salesforceモバイル・アプリケーション
Digital Sales
Aid
Customer
App
企業のモバイルアプ
リのコストを⾰革命的
に激減
Salesforce  
Classic
Salesforce
Touch
Ch...
10
DB
ネイティブコード
(Java,  Objective  C)
DBDB
モバイルからコー
ルされるWeb
サービス
モバイルからコー
ルされるWeb
サービス
モバイルから呼ば
れるWebアプリ
ケーションコード
ただし、このコー
...
11
Salesforce1  アプリケーション
最近   アプリケーション アクション
12
シンプルで汎⽤用的な画⾯面遷移
13
Salesforce1開発特徴
ü  簡単な画⾯面ならポイント&クリックで開発
ü  レイアウト編集は標準機能のドラッグ&ドロップ
ü  デバイスへコードをダウンロードする必要がないため、最⼩小開発環境はブラ
ウザーのみ
ü  ネ...
14
Salesforce1を触ってみましょう
1
環境によってはhttps://
ap.salesforce.comではありませ
ん。https://<server_̲name>/
one/one.app  でアクセスして下
さい
2
15
S1⽤用ユーザフェース
16
開発可能な場所
ナビゲーションメニュー
専⽤用オブジェクトアクション
グローバルアクション
VFページタブ、Flexible  ページタブ  
をメニューに追加可能
ポイント&クリックで並び替え可能
ポイント&クリックでアク
ション作成可...
17
ナビゲーションメニュー
最近使⽤用したレコー
ド •  Flexibleページタブ、Visualforce
タブをナビゲーションメニューに
追加可能
•  最近使⽤用したレコード以外は並び
替え可能
•  最近使⽤用したレコードの並び替え...
18
ナビゲーションメニュー
1.  標準、カスタムオブジェクト
2.  Visualforce  ページ
3.  Flexi  ページ
VisualforceページとApexを使ってページを作成す
るため、外部へのAPI接続など様々なことが可...
19
グローバルアクション
グローバルアクションは特定の
レコードを⾃自動的に関連させる
ことはできません。アクション
には4つのタイプがあります。
アクションタイプ 実装⽅方法 備考
Create  a  Record ポイント&クリック 現...
20
オブジェクト専⽤用アクション
アクションタイプ 実装⽅方法 備考
Create a Record ポイント&クリック 作成できるオブジェクトは専用アクションが設定されているオブジェクトに
依存します。例えば、Account 専用アクション...
21
レコード詳細
モバイルカード:
拡張ルックアップ、Visualforceページを埋め込むことができます。  
Visualforceページを作成する場合は必ずStandardContollerを使⽤用する必要があ
ります。また、拡張ルック...
22
Salesforce1対応  appexchangeアプリ
23
Salesforce1対応  appexchangeアプリ
24
ポイント&クリック
開発
25
●ナビゲーションメニュー変更更
スマート検索索項⽬目要素よりも下に配
置すると、ナビゲーションメニュー
の  [アプリケーション]  セクション
に表⽰示されます。
1
2
26
●グローバルアクション登録
1
デフォルトで下記アクション群が⽤用
意されています。新規ケースアク
ションを独⾃自に新規作成することも
可能です。
2
27
アクション種別(4種類)
28
グローバルアクション登録
1
2
29
●オブジェクト専⽤用アクション登録
1
取引先詳細画⾯面にこのアクションを
登録します
3
2
30
オブジェクト専⽤用アクション登録
1
選択した取引先に紐紐づく商談を作成
するアクションを登録
2
商談新規画⾯面のレイアウト編集
Salesforce1実際の画⾯面レイアウト
31
アクションをパブリッシャアクションへ登録
1
取引先のレイアウトエディタ
Salesforce1実際のパブリッシャアク
ション
ファイルアクションはネイティブ
アプリにしか表⽰示されません。こ
の画⾯面はブラウザでの表⽰示です。
32
オブジェクト専⽤用アクション  画⾯面遷移
33
●コンパクトレイアウト変更更
1
ロングテキストエリア、リッ
チテキストエリア、複数選択
リスト以外のタイプをサポー
ト
3
2
34
●モバイルカード変更更
1
拡張ルックアップを選択し、
対象項⽬目をドラッグしてモバ
イルカード領領域へドロップし
ます
3
2
35
Visualforce
Salesforce1
基礎
36
Visualforceアプローチ
1.  Visualforce単独
•  Visualforceタグライブラリを使⽤用してページを作成
2.  Visualforce  +  HTML
•  pageBlock,  pageBlockB...
37
1. Visualforce単独
メリット
•  通常のVisualforce開発のため新しい知識識必要なし
•  デスクトップ、モバイル共有ページ
デメリット
•  ボタン、リンクなどの部品はデスクトップ⽤用に最適
化されているため指で...
38
Visualforce作成
1	
3	
2
39
ソースコード
<apex:page standardController="Account">
<apex:form>
<apex:pageBlock title="{!Account.Name}">
<apex:pageBlockSec...
40
Visualforceタブ作成
1	
3	
2
41
Visualforceタブ作成
1	
2
42
モバイルナビゲーションへ追加
1	
3	
2
43
Visualforce単独での実装
1	
2
44
2. Visualforce + HTML
メリット
•  Visualforce単独での開発と違ってSalesforce1デザイ
ンに近い実装が可能
•  データの受け渡しは通常のVisualforce開発と同じ
デメリット
•  デス...
45
Visualforce作成
1	
3	
2
46
ソースコード
<apex:page standardController="Account">
<style> html, body, p { font-family: sans-serif; } </style>
<apex:form ...
47
Visualforceタブの作成
1	
3	
2
48
Visualforceタブの作成
1	
2
49
ナビゲーションメニューへ追加
1	
2
50
Visualforce + HTMLでの実装
1	
2
51
3. JavaScript Remoting & Static HTML
メリット
•  Salesforce1にマッチした最善なアプローチ
•  JavaScriptでのデータへのCRUD操作を⾏行行うためパフ
ォーマンス向上
デメリッ...
52
モバイルパックインストール
1	
2	
http://www2.developerforce.com/en/mobile/services/mobile-packs
53
モバイルパックインストール
1	
3	
2
54
モバイルパックインストール
1	
2
55
モバイルパックインストール
56
Apex作成
1	
3	
2
57
ソースコード
global with sharing class AccountEditor{
public AccountEditor(ApexPages.StandardController ctl){ }
@RemoteAction...
58
Visualforce作成
1	
3	
2
59
ソースコード
<apex:page standardController="Account" extensions="AccountEditor"
showHeader="false" standardStylesheets="false...
60
Visualforceタブ作成
1	
3	
2
61
Visualforceタブの作成
1	
2
62
ナビゲーションメニューに追加
1	
3	
2
63
JavaScript Remoting & Static HTMLでの実装
1	
2
64
Visualforce
画⾯面遷移
65
sforce.one JavaScript object
•  Salesforce1⽤用ナビゲーションフレームワーク
•  Salesforce1で動作しているVisualforceページには⾃自
動的にsforce.oneオブジェクト...
66
提供されている画⾯面遷移メソッド
メソッド コメント
navigateToSObject(recordId,  view) recordIdの詳細ページへ遷移、viewはオプショ
ンでchatter,  related,  detailを...
67
navigateToSObject(recordId,  view)
recordIdで指定したレコードの詳細ページへ遷移。viewパラメータは
chatter,  related,  detailが選択できるが現時点では未実装。Summ...
68
navigateToURL(url)
urlは絶対パス、あるいは相対パスをサポート。絶対パスが選択された
場合のみ、⼦子供ウィンドウで表⽰示
urlパラメータに'/
0011000000k8T1j'としてメ
ソッドコールをすると右図の詳細...
69
navigateToFeed(subjectId,  type)
特定のFeedへ遷移、typeはNEWS、RECORDは確認済み。subjectId
にユーザレコードID、typeにNEWSを設定すると特定のユーザ
NewFeed画⾯面...
70
navigateToFeedItemDetail(feedItemId)
特定のFeedItemへ遷移。
feedItemId
71
navigateToRelatedList(relatedListId,  
parentRecordId)
特定レコードの関連リストに遷移
relatedListId
に'RelatedCaseList'、
parentRecordId...
72
navigateToList(listViewId,  listViewName,  
scope)
listViewIdとlistViewNameで指定されたList  viewへ遷移
listViewIdに  '00B10000003...
73
createRecord(entityName,  recordTypeId)
entityNameで指定された新規レコード作成画⾯面へ遷移、
recordTypeIdは任意
entityNameに  'Account'  に設定してメソ...
74
editRecord(recordId)
recordIdで指定された編集画⾯面へ遷移
recordIdに  '0011000000k8T1j'を設定
75
Test them
取引先レコードIDを⼊入⼒力力
Feed  Item  IDを⼊入⼒力力
ListView  IDを⼊入⼒力力
次のスライドにあるVisualforcePageをコピー
し、⾃自分の組織で新規VisualforcePa...
76
Visualforceページ
<apex:page standardController="Account" extensions="AccountEditor"
showHeader="false" standardStylesheet...
77
Visualforce
イベント処理理
78
Canvas イベント
publisher.setupPanel
publisher.showPanel
publisher.clearPanelState
Cancel  /  Close
close
publisher.post
79
Subscribe
Sfdc.canvas.publisher.subscribe(
{ name : "publisher.post", onData:function(e) {} }
);
Sfdc.canvas.publisher....
80
Publish
Sfdc.canvas.publisher.publish({ name : "publisher.setValidForSubmit", payload:"true"});
Sfdc.canvas.publisher.p...
81
オブジェクト専⽤用アクションでテストしてみよう
82
テスト⽤用サンプルVisualforce
•  <apex:page docType="html-5.0" showHeader="false" sidebar="false" standardController="Account" s...
83
Flexible Page
開発
84
Flexible Pageとは
•  Flexible Pageとは、ページレイアウトとVisualforce
ページの中間的なページです。ページレイアウトの
ようにカスタムアイテムを追加することが可能とな
っていますが、Flexible...
85
どんなデータが表⽰示可能?
カスタムオブジェクトの最
近使⽤用したデータを表⽰示
リストビューを表⽰示、但
しサポートされていない
オブジェクトあり
グローバルアクションの追加
86
Flexible Page開発ステップ
1.  開発する前に
•  どのリストビューを表⽰示させるか?
•  何の「最近使ったデータ」を表⽰示させるか?
•  どのグローバルアクションを追加するのか?(任意)
2.  XmlベースのFle...
87
Flexible Pageファイルについて
カスタムオブジェクトの最
近使⽤用したデータを表⽰示
リストビューを表⽰示
Region名は必ずmainとする
パブリッシャアクションアイ
コンの追加
88
Flexible Pageファイルについて
•  flexiPageRegionsエレメントは1つだけ
•  ComponentInstanceは2種類
•  filterListCard: リストビューを表⽰示、但しそのビューから最初
...
89
1. Flexible Page作成 Package.xml
FlexiblePage_̲_̲cと
FlexiblePage2_̲_̲cという
カスタムオブジェクトを組
織に作成する必要がありま
す
90
2. package.xml作成 Package.xml
91
3. Salesforceへ配置 Zipファイル作成
1
2
92
3. Salesforceへ配置
1
2
3
4
成功を確認する
93
4. Flexibleタブ作成
1
2
3
94
4. Flexibleタブ作成
1
2 3
作成されていることを確認する
95
5. 確認作業
96
サンプルコード
FlexiblePage_̲_̲cとFlexiblePage2_̲_̲cというカ
スタムオブジェクトを組織に作成する必要がありま
す
97
技術情報
98
情報
•  Salesforce1 App スタイルガイドライン
•  Salesforce1 App開発ガイド
•  Salesforce1 Cheetsheet
•  ISV向けSalesforce1 Webinar by Nakaj...
Upcoming SlideShare
Loading in...5
×

Salesforce1モバイルアプリケーション開発概要

5,258

Published on

Salesforce1でアプリケーションを作成するにあたって必要な知識を簡単にまとめました。
サンプルコードがついており、この資料だけで簡単に開発方法を学べます。

Published in: Technology

Salesforce1モバイルアプリケーション開発概要

  1. 1. Salesforce1モバイル・アプリケーション 開発概要
  2. 2. 2 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 any litigation, risks associated with completed and any 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-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These 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.
  3. 3. 3 アジェンダ •  Salesforce1 背景、概要 •  開発 1.  ポイント&クリックでの開発 2.  Visualforce開発 •  3種類のアプローチ •  画面遷移 •  イベント処理 3.  Flexible ページ開発 •  技術情報
  4. 4. 4 モバイルコンピューティングの台頭 Source: Strategy Analytics. “Global Smartphone Shipments Hit Record 230 Million Units in Q2 2013.” July 2013. Source. Gartner. July 2013. 社員、顧客 企業 iOS/Androidデバイス 2億3,000万台 販売台数 2008 Q3 2009 Q2 2010 Q1 2010 Q4 2011 Q3 2012 Q2 2013 Q1 PC 7,600万台 2013 Q2
  5. 5. 5 2017  年年には業務アプリケーションの90%  がモバイル化 20% Source: Gartner, Ian Finley, Research VP; 2010 モバイルに対応する アプリケーション 2013 2017 90% デスクトップ、モバイルの両⽅方に 対応するアプリケーション
  6. 6. 6 モバイルアプリ開発と展開の困難さ Mobile Apps Are Critical Mobile Apps Deployed 60% 40% 20% App Gap PercentofRespondents 2013 Study of 1,300 Global Executives “The State of the Customer-Led Economy” Complexity of Form Factors Limited Number of Developers Multiple Operating Systems Multiple Platforms
  7. 7. 7 以前のモバイルアプリのポートフォリオ Salesforce Platform Content CompensationCollaborationDashboards Digital Sales Aid Customer AppLog a Call Content CompensationCollaborationDashboardsLog a Call
  8. 8. 8 Salesforce1によるモバイルアプリのポートフォリオ Digital Sales Aid Customer App 企業のモバイルアプ リのコストを⾰革命的 に激減 Content CompensationCollaborationDashboardsLog a Call
  9. 9. 9 Salesforceモバイル・アプリケーション Digital Sales Aid Customer App 企業のモバイルアプ リのコストを⾰革命的 に激減 Salesforce   Classic Salesforce Touch Chatter   Mobile Logger  と   Forcepad
  10. 10. 10 DB ネイティブコード (Java,  Objective  C) DBDB モバイルからコー ルされるWeb サービス モバイルからコー ルされるWeb サービス モバイルから呼ば れるWebアプリ ケーションコード ただし、このコー ドはモバイル側に 配置することも可 能 DB モバイルから呼ば れるWebアプリ ケーションコード HTML5の localStorageで javascriptから アクセスできる DB使⽤用可能 DB ネイティブアプリ ハイブリッドアプリ HTML5  アプリ モバイルアプリケーションとは Salesforce  1 ネイティブコード (Java,  Objective  C)
  11. 11. 11 Salesforce1  アプリケーション 最近   アプリケーション アクション
  12. 12. 12 シンプルで汎⽤用的な画⾯面遷移
  13. 13. 13 Salesforce1開発特徴 ü  簡単な画⾯面ならポイント&クリックで開発 ü  レイアウト編集は標準機能のドラッグ&ドロップ ü  デバイスへコードをダウンロードする必要がないため、最⼩小開発環境はブラ ウザーのみ ü  ネイティブ(JavaやObjectiveC)⾔言語の開発は不不必要 ü  Android,  iOSに対してシングルソースで対応 ü  VisualforceとApexでの画⾯面開発  但しレスポンシブル対応を推奨しているの でVisualforceタグライブラリは使⽤用せず、⼀一般技術(CSS,  Javascript,   HTML)での画⾯面開発 ü  Canvasアプリケーションのインテグレーション可能なので、既 存サービス、Heroku上でのアプリケーションの統合が可能
  14. 14. 14 Salesforce1を触ってみましょう 1 環境によってはhttps:// ap.salesforce.comではありませ ん。https://<server_̲name>/ one/one.app  でアクセスして下 さい 2
  15. 15. 15 S1⽤用ユーザフェース
  16. 16. 16 開発可能な場所 ナビゲーションメニュー 専⽤用オブジェクトアクション グローバルアクション VFページタブ、Flexible  ページタブ   をメニューに追加可能 ポイント&クリックで並び替え可能 ポイント&クリックでアク ション作成可能、またVF、 Canvasを使⽤用してアクショ ンを作成することもできま す ポイント&クリックでアク ション作成可能、またVFを 使⽤用してアクションを作成 することもできます ポイント&クリックで表⽰示 内容の変更更可能 ポイント&クリックで表⽰示 内容の変更更可能、VFを追加 することもできる
  17. 17. 17 ナビゲーションメニュー 最近使⽤用したレコー ド •  Flexibleページタブ、Visualforce タブをナビゲーションメニューに 追加可能 •  最近使⽤用したレコード以外は並び 替え可能 •  最近使⽤用したレコードの並び替え はある程度度可能。PC画⾯面の検索索結 果で上位に表⽰示させたいオブジェ クトに「最上部に固定」と設定す る •  カスタムオブジェクトは最近使⽤用 したレコード領領域に表⽰示される
  18. 18. 18 ナビゲーションメニュー 1.  標準、カスタムオブジェクト 2.  Visualforce  ページ 3.  Flexi  ページ VisualforceページとApexを使ってページを作成す るため、外部へのAPI接続など様々なことが可能で す。ただし、モバイルアプリのためパフォーマンス には気をつけて下さい。画⾯面遷移は専⽤用のjsオブ ジェクトを使⽤用してSalesforce1の標準画⾯面にも遷 移可能です ビュー、最近参照したレコード が表⽰示されますが、レイアウト の変更更はできません。 Flexibleページは複数オブジェク ト⼀一覧を表⽰示するのに優れていま す。また、アクションを追加する ことも簡単です。コードでの実装 ではなく、XMLでの作成となり ます。
  19. 19. 19 グローバルアクション グローバルアクションは特定の レコードを⾃自動的に関連させる ことはできません。アクション には4つのタイプがあります。 アクションタイプ 実装⽅方法 備考 Create  a  Record ポイント&クリック 現時点ではAccount,  Campaign,  Case,  Contact,  Contract,  Event,   Custom  Object,  Lead,  Note,  Opportunity,  Taskしか作成できません。 Log  a  Call ポイント&クリック Visualforce Apex,  VF Canvas なんでもOK Herokuのような外部プラットフォームが必要
  20. 20. 20 オブジェクト専⽤用アクション アクションタイプ 実装⽅方法 備考 Create a Record ポイント&クリック 作成できるオブジェクトは専用アクションが設定されているオブジェクトに 依存します。例えば、Account 専用アクションではaccount, case, contact, contract, event, note, opp, or task のレコードを作成できます。 また Caseの場合いには, case, event, or task レコードを作成できます Log a Call ポイント&クリック Visualforce Apex, VF Visualforceページのコントローラは必ずそのオブジェ クトのStandardControllerを使⽤用しなければいけませ ん Update a Record ポイント&クリック オブジェクト専⽤用アクションは 特定のレコードを⾃自動的に関連 させることはできます。アク ションには4つのタイプがあり ます。
  21. 21. 21 レコード詳細 モバイルカード: 拡張ルックアップ、Visualforceページを埋め込むことができます。   Visualforceページを作成する場合は必ずStandardContollerを使⽤用する必要があ ります。また、拡張ルックアップの種類は選択したオブジェクトによって変わり ます。例例えばAccountʼ’のレコード詳細での拡張ルックアップはAccount  Owner,   Created  By,  Last  Modified  By,  and  Parent  Accountです。また、Opportunitiyでは   Account  Name,  Created  By,  Last  Modified  By,  Opportunity  Owner,  Primary   Campaignです。 コンパクトレイアウト: レコード詳細ページ上部に表⽰示される注⽬目エリア です。ポイント&クリックで表⽰示項⽬目を変更更でき ます。
  22. 22. 22 Salesforce1対応  appexchangeアプリ
  23. 23. 23 Salesforce1対応  appexchangeアプリ
  24. 24. 24 ポイント&クリック 開発
  25. 25. 25 ●ナビゲーションメニュー変更更 スマート検索索項⽬目要素よりも下に配 置すると、ナビゲーションメニュー の  [アプリケーション]  セクション に表⽰示されます。 1 2
  26. 26. 26 ●グローバルアクション登録 1 デフォルトで下記アクション群が⽤用 意されています。新規ケースアク ションを独⾃自に新規作成することも 可能です。 2
  27. 27. 27 アクション種別(4種類)
  28. 28. 28 グローバルアクション登録 1 2
  29. 29. 29 ●オブジェクト専⽤用アクション登録 1 取引先詳細画⾯面にこのアクションを 登録します 3 2
  30. 30. 30 オブジェクト専⽤用アクション登録 1 選択した取引先に紐紐づく商談を作成 するアクションを登録 2 商談新規画⾯面のレイアウト編集 Salesforce1実際の画⾯面レイアウト
  31. 31. 31 アクションをパブリッシャアクションへ登録 1 取引先のレイアウトエディタ Salesforce1実際のパブリッシャアク ション ファイルアクションはネイティブ アプリにしか表⽰示されません。こ の画⾯面はブラウザでの表⽰示です。
  32. 32. 32 オブジェクト専⽤用アクション  画⾯面遷移
  33. 33. 33 ●コンパクトレイアウト変更更 1 ロングテキストエリア、リッ チテキストエリア、複数選択 リスト以外のタイプをサポー ト 3 2
  34. 34. 34 ●モバイルカード変更更 1 拡張ルックアップを選択し、 対象項⽬目をドラッグしてモバ イルカード領領域へドロップし ます 3 2
  35. 35. 35 Visualforce Salesforce1 基礎
  36. 36. 36 Visualforceアプローチ 1.  Visualforce単独 •  Visualforceタグライブラリを使⽤用してページを作成 2.  Visualforce  +  HTML •  pageBlock,  pageBlockButtons,   pageBlockSectionItem,pageBlockTableは使⽤用しない •  デザインにはCSSを使⽤用 3.  JavaScript  remoting  +  Static  HTML •  Salesforce1にマッチした最善なアプローチ •  JavaScriptでのデータへのCRUD操作を⾏行行うためパフォーマ ンス向上
  37. 37. 37 1. Visualforce単独 メリット •  通常のVisualforce開発のため新しい知識識必要なし •  デスクトップ、モバイル共有ページ デメリット •  ボタン、リンクなどの部品はデスクトップ⽤用に最適 化されているため指でのタッチが難しい •  レスポンシブルデザインに対応していないため、 Salesforce1デザインに最適化されていない
  38. 38. 38 Visualforce作成 1 3 2
  39. 39. 39 ソースコード <apex:page standardController="Account"> <apex:form> <apex:pageBlock title="{!Account.Name}"> <apex:pageBlockSection title= "Warehouse Details" columns= "1"> <apex:inputField value="{!Account.Name}" /> </apex:pageBlockSection> <apex:pageBlockButtons location="bottom"> <apex:commandButton action="{!quickSave}" value="Save" /> </apex:pageBlockButtons> </apex:pageBlock> </apex:form> </apex:page>
  40. 40. 40 Visualforceタブ作成 1 3 2
  41. 41. 41 Visualforceタブ作成 1 2
  42. 42. 42 モバイルナビゲーションへ追加 1 3 2
  43. 43. 43 Visualforce単独での実装 1 2
  44. 44. 44 2. Visualforce + HTML メリット •  Visualforce単独での開発と違ってSalesforce1デザイ ンに近い実装が可能 •  データの受け渡しは通常のVisualforce開発と同じ デメリット •  デスクトップで⾏行行われるrequest-responseサイクルの ため⼤大量量データのやりとりが発⽣生される(ViewState) •  デザインを統⼀一するためCSSの実装必修
  45. 45. 45 Visualforce作成 1 3 2
  46. 46. 46 ソースコード <apex:page standardController="Account"> <style> html, body, p { font-family: sans-serif; } </style> <apex:form > <h1>{!Account.Name}</h1> <h2>Account Details</h2> <div id="theForm"> <div> <apex:outputLabel for="Name" value="Name"/> <apex:inputField id="name" value="{! Account.Name}"/> </div> </div> <div id="formControls"> <apex:commandButton action="{!quickSave}" value="Save"/> </div> </apex:form> </apex:page>
  47. 47. 47 Visualforceタブの作成 1 3 2
  48. 48. 48 Visualforceタブの作成 1 2
  49. 49. 49 ナビゲーションメニューへ追加 1 2
  50. 50. 50 Visualforce + HTMLでの実装 1 2
  51. 51. 51 3. JavaScript Remoting & Static HTML メリット •  Salesforce1にマッチした最善なアプローチ •  JavaScriptでのデータへのCRUD操作を⾏行行うためパフ ォーマンス向上 デメリット •  コード量量の増⼤大 •  CSS, JavaScript, Apex, HTML5でのWebアプリケー ション開発知識識が必修
  52. 52. 52 モバイルパックインストール 1 2 http://www2.developerforce.com/en/mobile/services/mobile-packs
  53. 53. 53 モバイルパックインストール 1 3 2
  54. 54. 54 モバイルパックインストール 1 2
  55. 55. 55 モバイルパックインストール
  56. 56. 56 Apex作成 1 3 2
  57. 57. 57 ソースコード global with sharing class AccountEditor{ public AccountEditor(ApexPages.StandardController ctl){ } @RemoteAction global static Boolean saveAccount(String name) { Account acc = new Account(); acc.Name = name; upsert acc; return true; } }
  58. 58. 58 Visualforce作成 1 3 2
  59. 59. 59 ソースコード <apex:page standardController="Account" extensions="AccountEditor" showHeader="false" standardStylesheets="false" docType="html-5.0" applyHtmlTag="false" applyBodyTag="false"> <apex:stylesheet value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'jquery.mobile-1.3.0.min.css')}"/> <apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'jquery-1.9.1.min.js')}"/> <apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'jquery.mobile-1.3.0.min.js')}"/> <head> <style> html, body, p { font-family: sans-serif; } input { display: block; } </style> <script> function saveAccount() { // Call the remote action to save the record data Visualforce.remoting.Manager.invokeAction( '{!$RemoteAction.AccountEditor.saveAccount}', $('#account_name_value').val(), function(result, event){; if(event.status){ console.log(accountId); $('#action_status').text('Record updated.'); } else if (event.type === 'exception'){ console.log(result); $('#action_status').text( 'Problem saving record.'); } else { // unexpected problem... } }); } </script> </head> <body> <div id="detailPage"> <div class="list-view-header" id="account_name"></div> <div id="action_status"></div> <section> <div class="content"> <h3>取引先</h3> <div class="form-control-group"> <div class="form-control form-control-text"> <label for="account_name"> Name</label> <input type="text" id="account_name_value" /> </div> </div> </div> </section> <section class="data-capture-buttons one-buttons"> <div class="content"> <section class="data-capture-buttons one-buttons"> <a href="#" id="updateAccount" onClick="saveAccount();">save</a> </section> </div> </section> </div> <!-- end detail page --> </body> </apex:page>
  60. 60. 60 Visualforceタブ作成 1 3 2
  61. 61. 61 Visualforceタブの作成 1 2
  62. 62. 62 ナビゲーションメニューに追加 1 3 2
  63. 63. 63 JavaScript Remoting & Static HTMLでの実装 1 2
  64. 64. 64 Visualforce 画⾯面遷移
  65. 65. 65 sforce.one JavaScript object •  Salesforce1⽤用ナビゲーションフレームワーク •  Salesforce1で動作しているVisualforceページには⾃自 動的にsforce.oneオブジェクトが追加されるため、特定 のJavaScriptライブラリをインクルードする必要なし
  66. 66. 66 提供されている画⾯面遷移メソッド メソッド コメント 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で指定した関連リストに遷移、 parentId navigateToList(listViewId,  listViewName,   scope) listViewIdとlistViewNameで指定されたList   viewへ遷移 createRecord(entityName,  recordTypeId) entityNameで指定された新規レコード作成画⾯面 へ遷移、recordTypeIdは任意 editRecord(recordId) recordIdで指定された編集画⾯面へ遷移
  67. 67. 67 navigateToSObject(recordId,  view) recordIdで指定したレコードの詳細ページへ遷移。viewパラメータは chatter,  related,  detailが選択できるが現時点では未実装。Summer   '14で実装予定 これがrecrodId
  68. 68. 68 navigateToURL(url) urlは絶対パス、あるいは相対パスをサポート。絶対パスが選択された 場合のみ、⼦子供ウィンドウで表⽰示 urlパラメータに'/ 0011000000k8T1j'としてメ ソッドコールをすると右図の詳細 ページへ遷移する
  69. 69. 69 navigateToFeed(subjectId,  type) 特定のFeedへ遷移、typeはNEWS、RECORDは確認済み。subjectId にユーザレコードID、typeにNEWSを設定すると特定のユーザ NewFeed画⾯面に遷移する。他のTypeの値は調査中。 subjectId に'0011000000k8T1j'と type='RECORD'を指定
  70. 70. 70 navigateToFeedItemDetail(feedItemId) 特定のFeedItemへ遷移。 feedItemId
  71. 71. 71 navigateToRelatedList(relatedListId,   parentRecordId) 特定レコードの関連リストに遷移 relatedListId に'RelatedCaseList'、 parentRecordId に'0011000000k8T1j'
  72. 72. 72 navigateToList(listViewId,  listViewName,   scope) listViewIdとlistViewNameで指定されたList  viewへ遷移 listViewIdに  '00B10000003hT4l' listViewNameに  'You  can  set  title  here' scopeに  'Account'
  73. 73. 73 createRecord(entityName,  recordTypeId) entityNameで指定された新規レコード作成画⾯面へ遷移、 recordTypeIdは任意 entityNameに  'Account'  に設定してメソッドを実 ⾏行行するとAccountの新規作成ページに遷移
  74. 74. 74 editRecord(recordId) recordIdで指定された編集画⾯面へ遷移 recordIdに  '0011000000k8T1j'を設定
  75. 75. 75 Test them 取引先レコードIDを⼊入⼒力力 Feed  Item  IDを⼊入⼒力力 ListView  IDを⼊入⼒力力 次のスライドにあるVisualforcePageをコピー し、⾃自分の組織で新規VisualforcePageを作成、 VisualforceTab作成、Salesforce1にタブ追加 すると https://ap.salesforce.com/one/one.appか ら動作確認ができます。
  76. 76. 76 Visualforceページ <apex:page standardController="Account" extensions="AccountEditor" showHeader="false" standardStylesheets="false" docType="html-5.0" applyHtmlTag="false" applyBodyTag="false"> <head> <script> function createRecord() { sforce.one.createRecord("Account"); } function navigateToSObject() { // http://salesforce.stackexchange.com/questions/22246/salesforce1-javascript-method-navigatetosobjectrecordid-view-not-changing-tab // view parameter is not supported yet sforce.one.navigateToSObject(getAccount(), 'related'); } function navigateToAbsoluteURL() { sforce.one.navigateToURL('http://www.google.com'); } function navigateToRelativeURL() { sforce.one.navigateToURL('/'+getAccount()); } function navigateToFeed() { sforce.one.navigateToFeed(getAccount(), 'RECORD'); //sforce.one.navigateToFeed('005100000021nht', 'NEWS'); } function navigateToFeedItemDetail() { var feed_item_id = getFeedItemId(); sforce.one.navigateToFeedItemDetail(feed_item_id); } function navigateToRelatedList() { sforce.one.navigateToRelatedList('RelatedCaseList', getAccount()); } function navigateToList() { sforce.one.navigateToList(getListViewId(), 'You can set title here', 'Account'); } function editRecord() { sforce.one.editRecord(getAccount()); } function back() { sforce.one.back(true); } function getAccount() { return document.getElementById('account_id').value } function getFeedItemId() { return document.getElementById('feed_item_id').value } function getListViewId() { return document.getElementById('list_view_id').value } </script> </head> <body> <p> 1. You do not need to enter any value<br/> <a href="#" onClick="navigateToAbsoluteURL();">navigateToURL(absolute url)</a><br/> <a href="#" onClick="createRecord();">createRecord(recordId, view)</a><br/> </p> <hr/> <p> 2. Enter Account Record ID : <input type="text" id="account_id" /> <br/> <a href="#" onClick="navigateToSObject();">navigateToSObject(recordId, view)</a><br/> <a href="#" onClick="navigateToRelativeURL();">navigateToURL(relative url)</a><br/> <a href="#" onClick="navigateToRelatedList();">navigateToRelatedList(relatedListId, parentRecordId)</a><br/> <a href="#" onClick="editRecord();">editRecord(recordId)</a><br/> <a href="#" onClick="navigateToFeed();">navigateToFeed(subjectId, type)</a><br/> </p> <hr/> <p> 3. Enter Feed Item ID : <input type="text" id="feed_item_id" /> <br/> <a href="#" onClick="navigateToFeedItemDetail();">navigateToFeedItemDetail(feedItemId)</a><br/> </p> <hr/> <p> 4. Enter ListView ID of Account : <input type="text" id="list_view_id" /> <br/> <a href="#" onClick="navigateToList();">navigateToList(listViewId, listViewName, scope)</a><br/> </p> </body> </apex:page> 上記Visualforceを自分の組織へコピーして
  77. 77. 77 Visualforce イベント処理理
  78. 78. 78 Canvas イベント publisher.setupPanel publisher.showPanel publisher.clearPanelState Cancel  /  Close close publisher.post
  79. 79. 79 Subscribe Sfdc.canvas.publisher.subscribe( { name : "publisher.post", onData:function(e) {} } ); Sfdc.canvas.publisher.subscribe( { name : "publisher.setupPanel", onData:function(e) { }} ); Sfdc.canvas.publisher.subscribe( { name : "publisher.showPanel", onData:function(e) {}} ); Sfdc.canvas.publisher.subscribe( { name : "publisher.clearPanelState", onData:function(e) {}} );
  80. 80. 80 Publish Sfdc.canvas.publisher.publish({ name : "publisher.setValidForSubmit", payload:"true"}); Sfdc.canvas.publisher.publish({ name : "publisher.setValidForSubmit", payload:"false"}); Sfdc.canvas.publisher.publish({ name : "publisher.close", payload : { refresh:"true" }}); Sfdc.canvas.publisher.publish({ name : "publisher.refresh", payload : { feed:true }});
  81. 81. 81 オブジェクト専⽤用アクションでテストしてみよう
  82. 82. 82 テスト⽤用サンプルVisualforce •  <apex:page docType="html-5.0" showHeader="false" sidebar="false" standardController="Account" standardStylesheets="false"> •  <meta charset="UTF-8" /> •  <apex:includeScript value="/canvas/sdk/js/publisher.js" /> •  <script> •  function setValidForSubmitTrue() { •  Sfdc.canvas.publisher.publish({ name : "publisher.setValidForSubmit", payload:"true" }); •  } •  •  function setValidForSubmitFalse() { •  Sfdc.canvas.publisher.publish({ name : "publisher.setValidForSubmit", payload:"false" }); •  } •  •  function publisher_close() { •  Sfdc.canvas.publisher.publish({ name : "publisher.close", payload : { refresh:"true" }}); •  } •  •  function publisher_refresh() { •  Sfdc.canvas.publisher.publish({ name : "publisher.refresh", payload : { feed:true }}); •  } •  •  Sfdc.canvas.publisher.subscribe( •  { name : "publisher.post", onData:function(e) { alert('Post Event'); } } •  ); •  Sfdc.canvas.publisher.subscribe( •  { name : "publisher.setupPanel", onData:function(e) { alert('SetupPanel Event'); }} •  ); •  •  Sfdc.canvas.publisher.subscribe( •  { name : "publisher.showPanel", onData:function(e) { alert('ShowPanel Event'); }} •  ); •  Sfdc.canvas.publisher.subscribe( •  { name : "publisher.clearPanelState", onData:function(e) { alert('ClearPanelState Event'); }} •  ); •  •  </script> •  •  <a href="#" onClick="setValidForSubmitTrue()">setValidForSubmit payload: true</a><br/> •  <a href="#" onClick="setValidForSubmitFalse()">setValidForSubmit payload: false</a><br/> •  <a href="#" onClick="publisher_close()">publisher.close</a><br/> •  <a href="#" onClick="publisher_refresh()">publisher.refresh</a><br/> •  </apex:page>
  83. 83. 83 Flexible Page 開発
  84. 84. 84 Flexible Pageとは •  Flexible Pageとは、ページレイアウトとVisualforce ページの中間的なページです。ページレイアウトの ようにカスタムアイテムを追加することが可能とな っていますが、Flexible Pageはページレイアウトと は違う構造となっています。 •  Flexible Pageでアプリケーションのホームページを 作成、Salesforce1のナビゲーションに追加できます。 •  グローバルアクションをFlexible Pageに割り当てが 可能。Flexible Page上にある+ボタンを選択すると あなたが割り当てたグローバルアクションが表⽰示さ れます
  85. 85. 85 どんなデータが表⽰示可能? カスタムオブジェクトの最 近使⽤用したデータを表⽰示 リストビューを表⽰示、但 しサポートされていない オブジェクトあり グローバルアクションの追加
  86. 86. 86 Flexible Page開発ステップ 1.  開発する前に •  どのリストビューを表⽰示させるか? •  何の「最近使ったデータ」を表⽰示させるか? •  どのグローバルアクションを追加するのか?(任意) 2.  XmlベースのFlexible Pageの作成 グローバルアクションを追加する場合にはXMLに記述する必要があ ります。記述していないとFlexible Pageにはパブリッシャアク ションアイコン(+)が表⽰示されません。 3.  Force.com Migration Tool、Force.com IDE、Workbenchのいず れかのツールを使⽤用してファイルを⾃自分の組織へデプロイする 4.  Flexible Pageカスタムタブの作成 5.  Salesforce1のナビゲーションタブへFlexible Pageを追加する
  87. 87. 87 Flexible Pageファイルについて カスタムオブジェクトの最 近使⽤用したデータを表⽰示 リストビューを表⽰示 Region名は必ずmainとする パブリッシャアクションアイ コンの追加
  88. 88. 88 Flexible Pageファイルについて •  flexiPageRegionsエレメントは1つだけ •  ComponentInstanceは2種類 •  filterListCard: リストビューを表⽰示、但しそのビューから最初 の数レコードしか表⽰示しない、またサポートしているのは、 Custom Objects, Account, Campaign, Case, CollablrationGroup, Contact, Contract, Lead, LiveChatTransript, Opportunityのみ •  recentItems: propertyで指定したカスタムオブジェクトの最 近しようしたデータを表⽰示 詳細はこちらで確認ください
  89. 89. 89 1. Flexible Page作成 Package.xml FlexiblePage_̲_̲cと FlexiblePage2_̲_̲cという カスタムオブジェクトを組 織に作成する必要がありま す
  90. 90. 90 2. package.xml作成 Package.xml
  91. 91. 91 3. Salesforceへ配置 Zipファイル作成 1 2
  92. 92. 92 3. Salesforceへ配置 1 2 3 4 成功を確認する
  93. 93. 93 4. Flexibleタブ作成 1 2 3
  94. 94. 94 4. Flexibleタブ作成 1 2 3 作成されていることを確認する
  95. 95. 95 5. 確認作業
  96. 96. 96 サンプルコード FlexiblePage_̲_̲cとFlexiblePage2_̲_̲cというカ スタムオブジェクトを組織に作成する必要がありま す
  97. 97. 97 技術情報
  98. 98. 98 情報 •  Salesforce1 App スタイルガイドライン •  Salesforce1 App開発ガイド •  Salesforce1 Cheetsheet •  ISV向けSalesforce1 Webinar by Nakajima Kazuki •  Using Visualforce in Salesforce1
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×