Recommended Salesforce1モバイルアプリケーション開発概要
Salesforce1モバイルアプリ開発入門Webinar
Salesforce1 Platformモバイル開発Tips Webinar
Salesforce1 で始めるモバイルアプリ開発
Jp visualforce in salesforce1
Salesforce1 Platform 入門 2014 〜改めて基本から理解するforce.com〜
食わず嫌いの為のSalesforce1 Platform入門
Salesforce1 PlatformアーキテクチャWebinar
Salesforce1 platformで爆速モバイル開発
Spring16 リリース開発者向け新機能Webセミナー
Go Faster with Lightning : Salesforce Lightning 概要Webinar
Salesforce Platform Mobile Serviceを使ったアプリ開発
絶賛活躍中のモバイルアプリに学ぶモバイルならではのアイデア
Salesforce.comの情報セキュリティについて
Lightning App Builder による ビジュアルアプリケーション開発
Spring '15 開発者向け新機能Webinar
コンポーネントを”つなぐ”時代へ Web&Mobileアプリ開発最新動向
More Related Content Salesforce1モバイルアプリケーション開発概要
Salesforce1モバイルアプリ開発入門Webinar
Salesforce1 Platformモバイル開発Tips Webinar
Salesforce1 で始めるモバイルアプリ開発
Jp visualforce in salesforce1
Salesforce1 Platform 入門 2014 〜改めて基本から理解するforce.com〜
食わず嫌いの為のSalesforce1 Platform入門
What's hot (20)
Salesforce1 PlatformアーキテクチャWebinar
Salesforce1 platformで爆速モバイル開発
Spring16 リリース開発者向け新機能Webセミナー
Go Faster with Lightning : Salesforce Lightning 概要Webinar
Salesforce Platform Mobile Serviceを使ったアプリ開発
絶賛活躍中のモバイルアプリに学ぶモバイルならではのアイデア
Salesforce.comの情報セキュリティについて
Lightning App Builder による ビジュアルアプリケーション開発
Similar to Salesforce1開発(s1 tour) (19) Spring '15 開発者向け新機能Webinar
コンポーネントを”つなぐ”時代へ Web&Mobileアプリ開発最新動向
Salesforce開発プロジェクトの進め方とアプリケーションライフサイクルマネジメント
Lightning Process Builder で ビジネス・プロセスを自動化
さあ、はじめよう。Application Partner
実践！カスタマー エクスペリエンス 向上のためのアプリ開発 後編
Lightning Components で 次世代のアプリケーション開発
Lightning Experience 時代のフロー開発
実践！カスタマー エクスペリエンス向上のためのアプリ開発 前編
Salesforce DX & GitHub Deep Dive
Lightning アプリケーション開発 - Visualforce ページの移行
ビジネスアイデアを最速で形にできるApp exchange
Lightning を利用した開発とケーススタディ
初めてのWave Analyticsデータセット作成
やれる Heroku - Java アプリケーション開発編
Lightning コンポーネント Deep Dive
Einstein Next Best Action を試してみよう
More from Akihiro Iwaya (20)
Wt11 writing dataweave transformations
Wt8 consuming web services
Wt7 structuring mule applications
Wt6 accessing and modifying mule event
Wt5 deploying and managing ap is
Iot explore demo for cross clouds
Iot explorer デモ (MC, CC, Heroku, Core)
Salesforce X AWS Machine Learning
Soracom X AWS Iot X Salesforce
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.
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
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
13. 13
Salesforce1開発特徴
簡単な画面ならポイント＆クリックで開発
レイアウト編集は標準機能のドラッグ＆ドロップ
デバイスへコードをダウンロードする必要がないため、最小開発環境はブラウ
ザーのみ
ネイティブ（JavaやObjectiveC)言語の開発は不必要
Android, iOSに対してシングルソースで対応
VisualforceとApexでの画面開発 但しレスポンシブル対応を推奨しているの
でVisualforceタグライブラリは使用せず、一般技術（CSS, Javascript,
HTML)での画面開発
Canvasアプリケーションのインテグレーション可能なので、既存
サービス、Heroku上でのアプリケーションの統合が可能
18. 18
ナビゲーションメニュー
1
2
3
1. 標準、カスタムオブジェクト
2. Visualforce ページ
3. Flexi ページ
VisualforceページとApexを使ってページを作成す
るため、外部へのAPI接続など様々なことが可能で
す。ただし、モバイルアプリのためパフォーマンス
には気をつけて下さい。画面遷移は専用のjsオブ
ジェクトを使用してSalesforce1の標準画面にも遷
移可能です
ビュー、最近参照したレコード
が表示されますが、レイアウト
の変更はできません。
Flexibleページは複数オブジェク
ト一覧を表示するのに優れていま
す。また、アクションを追加する
ことも簡単です。コードでの実装
ではなく、XMLでの作成となりま
す。
19. 19
グローバルアクション
グローバルアクションは特定の
レコードを自動的に関連させる
ことはできません。アクション
には４つのタイプがあります。
アクションタイプ 実装方法 備考
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
オブジェクト専用アクション
アクションタイプ 実装方法 備考
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 ポイント＆クリック
オブジェクト専用アクションは
特定のレコードを自動的に関連
させることはできます。アク
ションには４つのタイプがあり
ます。
44. 44
2. Visualforce + HTML
メリット
• Visualforce単独での開発と違ってSalesforce１デザイン
に近い実装が可能
• データの受け渡しは通常のVisualforce開発と同じ
デメリット
• デスクトップで行われるrequest-responseサイクルのた
め大量データのやりとりが発生される（ViewState)
• デザインを統一するためCSSの実装必修
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>
51. 51
3. JavaScript Remoting & Static HTML
メリット
• Salesforce1にマッチした最善なアプローチ
• JavaScriptでのデータへのCRUD操作を行うためパフォ
ーマンス向上
デメリット
• コード量の増大
• CSS, JavaScript, Apex, HTML5でのWebアプリケーシ
ョン開発知識が必修
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;
}
}
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>
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で指定された編集画面へ遷移
75. 75
Test them
取引先レコードIDを入力
Feed Item IDを入力
ListView IDを入力
次のスライドにあるVisualforcePageをコピー
し、自分の組織で新規VisualforcePageを作成、
VisualforceTab作成、Salesforce1にタブ追加
すると
https://ap.salesforce.com/one/one.appから
動作確認ができます。
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());
}
functionback() {
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を自分の組織へコピーして
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
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 }});
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>
84. 84
Flexible Pageとは
• Flexible Pageとは、ページレイアウトとVisualforceペ
ージの中間的なページです。ページレイアウトのよう
にカスタムアイテムを追加することが可能となってい
ますが、Flexible Pageはページレイアウトとは違う構
造となっています。
• Flexible Pageでアプリケーションのホームページを作
成、Salesforce1のナビゲーションに追加できます。
• グローバルアクションをFlexible Pageに割り当てが可
能。Flexible Page上にある＋ボタンを選択するとあな
たが割り当てたグローバルアクションが表示されます
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を追加する
88. 88
Flexible Pageファイルについて
• flexiPageRegionsエレメントは１つだけ
• ComponentInstanceは２種類
• filterListCard: リストビューを表示、但しそのビューから最初の
数レコードしか表示しない、またサポートしているのは、
Custom Objects, Account, Campaign, Case,
CollablrationGroup, Contact, Contract, Lead, LiveChatTransript,
Opportunityのみ
• recentItems: propertyで指定したカスタムオブジェクトの最近
しようしたデータを表示
詳細はこちらで確認ください
98. 98
情報
• Salesforce1 App スタイルガイドライン
• Salesforce1 App開発ガイド
• Salesforce1 Cheetsheet
• ISV向けSalesforce1 Webinar by Nakajima Kazuki
• Using Visualforce in Salesforce1
Editor's Notes #3: Before I begin, just a word from our lawyers. This is our safe harbor statement which if you cannot read, you can find on our website. Any purchasing decisions you make should be made based on currently available technology. #6: And two-thirds of companies feel unprepared for this new social and mobile world. They're not ready. They don't know what to do. #12: A key part of the Salesforce1 app is the Publisher which is basically the users launchpad to taking action in Salesforce. With the publisher you can create global actions for users to take anywhere like posting a file, a link or a poll. Or more contextual actions like creating a contact on an account or a DSR on an opportunity. Any business processes and workflows associated with creating these records are instantly kicked off. Admins can create standard actions like creating a task, event, or account or some more custom actions like logging an IT ticket, creating an invoice, or submitting an order. Additionally there are Salesforce partners that have built custom actions as well to allow customers to interact with information from other apps or take actions specific to an ISV app.
![25
●ナビゲーションメニュー変更
スマート検索項目要素よりも下に配
置すると、ナビゲーションメニュー
の [アプリケーション] セクション
に表示されます。
1
2](https://image.slidesharecdn.com/salesforce1s1tour-140417214243-phpapp02/85/Salesforce1-s1-tour-25-320.jpg)
