1. Salesforce Platform Mobile Serviceを使ったアプリ開発
Sep 6, 2013

2. #forcedotcomjp
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.

3. #forcedotcomjp
Speakers
Kazuhiko Imamura
Sales Support Engineer
@KAZU_200WR
Masashi Tsuji
Sales Support Engineer
@h2z

4. #forcedotcomjp
Developer Force Japanを是非フォロー下さい
Developer Force Japan
+Developer Force Japan
DeveloperForce Japan
@developerforcej / #forcedotcomjp

5. #forcedotcomjp
 Salesforce Platform Mobile Services 概要
 Mobile Packs を使ったVFページ作成
 Mobile Design Templates を使ったVFページ作成
 Mobile SDK 2.0 getting started
 Mobile SDK 2.0 を使った hybrid アプリ作成
Agenda
Demo
Demo
Demo
Demo

6. #forcedotcomjp
http://www2.developerforce.com/ja/mobile
Salesforce Platform Mobile Services 概要
salesforce platform mobile services

7. #forcedotcomjp
Trust Customer Data
Business Logic Identity Offline Social Analytics APIGeolocation
Mobile SDKs Mobile Packs Mobile Design Templates
Salesforce Platform Mobile Services 概要
Salesforce Platform Mobile Serviceにより、顧客データに接続されたエンタープライズモバイルアプリ
ケーションを最小限の工数で開発することが可能に。
あらゆるデバイスに対応したアプリケーション開発に必要なツール, フレームワーク, APIを提供します。

8. #forcedotcomjp
Trust Customer Data
Business Logic Identity Offline Social Analytics APIGeolocation
Mobile SDKs Mobile Packs Mobile Design Templates
本セッションで扱うMobile Services
Salesforce Platform Mobile Serviceにより、顧客データに接続されたエンタープライズモバイルアプリ
ケーションを最小限の工数で開発することが可能に。
あらゆるデバイスに対応したアプリケーション開発に必要なツール, フレームワーク, APIを提供します。

9. #forcedotcomjp
モバイルアプリ開発のパターンとMobile Services
iOSやAndroidなどのデバイス
ネイティブなプログラムでアプリ
ケーションを作成する
例 :
HTML5とデバイスのプログラムを
使い分けてアプリケーション作成
する
例：
ブラウザベースでスマートフォンや
タブレット向けのWebアプリケー
ションを作成する
 Mobile Design Templates を使
ったVFページ作成
Mobile SDKs
Mobile Packs
Mobile Design Templates
 Mobile Packs を使ったVFページ
作成
 Mobile SDK 2.0 getting started
 Mobile SDK 2.0 を使った hybrid
アプリ作成
Demo
モバイルアプリ
開発パターン
デモのお題： Geolocationを使うアプリ

10. #forcedotcomjp
Mobile Packs
 Visualforce及びMobile SDKハイブリッドアプリケ
ーションを作成するの為のジャンプスタート
 モダンなJavascriptフレームワークを使ったサンプル
 Force.com以外のプラットフォームにもデプロイ可能
(例 : Heroku)
 クイックスタート & チュートリアル
 http://www2.developerforce.com/mobile/
services/mobile-packs (英語)

11. #forcedotcomjp
Demo
Mobile Packs を使ったVFページ作成

12. #forcedotcomjp
Mobile Design Templates
ビジネスの典型的なMicro-Momentシナリオに対応する、20
以上のアプリケーションのHTML5/CSSデザインテンプレート
 モバイル向けの UI/UX を実現することができ
る、カスタマイズ可能なオープンソースのCSS3
とHTML5のマークアップ
 JavaScript(ForceTKや
Backbone,Angular,Knockout のMobile
Packs)と組み合わせることで、Salesforceのバ
ックエンドとライブデータバインディングを提供
 標準 / カスタムオブジェクト対応
 クロスプラットフォーム対応(HTML5、CSS3や
JavaScriptのような標準的なWeb技術を利用)

13. #forcedotcomjp
Demo
Mobile Design Templates を使ったVFページ作成

14. #forcedotcomjp
Salesforce Mobile SDK 2.0
Touch Platform
Cloud Application Platform
Multi-tenant Cloud Database
Identity
Apache Cordova (PhoneGap) ベース
 ユーザ管理 , 認証 (SAML2 ,OAuth2)
 オフラインデータの格納
 (ネイティブアプリ)REST APIのラッパー
 (ハイブリッドアプリ)アプリケーションコンテナ
‒ iOS ,Android
‒ プッシュ通知(ロードマップ)

15. #forcedotcomjp
Mobile SDK 2.0 getting started for iOS
 準備
‒ 環境
• OS X Lion 以上
• Xcode 4.5以上
‒ Mobile SDK 2.0
• npmからインストール
 Getting Started with iOS Hybrid
http://www2.developerforce.com/ja/mobile/getting-started/ios#hybrid

16. #forcedotcomjp
プロジェクトの作成 (1)
 対話型で作成
$ forceios create
Enter your application type (native, hybrid_remote, or hybrid_local): hybrid_local
Enter your application name: SampleApp
Enter your company identifier (com.mycompany): com.mycompany
Enter your organization name (Acme, Inc.): MyCompany
Enter the output directory for your app (defaults to the current directory): .
Enter your Connected App ID (defaults to the sample app's ID): sample_app
Enter your Connected App Callback URI (defaults to the sample app's URI): sfdc://success

17. #forcedotcomjp
プロジェクトの作成 (2)
 コマンドで一気にパラメータを指定
$ forceios create
--apptype="hybrid_local"
--appname="SampleApp"
--companyid="com.developerforce.jp.devcon.bo1"
--organization="DevCon2013"
--outputdir=.
--appid="sample_app"
--callbackuri="sfdc://success"

18. #forcedotcomjp
Demo:3
force.com側の設定 ∼ プロジェクト作成 ∼ 実行

19. #forcedotcomjp
ハイブリッドアプリケーションの作成
お題：日本の駅を検索するアプリケーション
駅名、路線名で検索が可能
駅名、路線名をリスト表示
検索結果を地図に表示
現現在地から近いものを優先
検索結果に現在地からの距離を表示
 元データは駅データ.jpを使用 (http://www.ekidata.jp/)
UIはtwitter bootstrap を適用
現現在地から近いものを優先

20. #forcedotcomjp
ハイブリッドアプリケーションの作成
お題：日本の駅を検索するアプリケーション
駅名、路線名で検索が可能
駅名、路線名をリスト表示
検索結果を地図に表示
現現在地から近いものを優先
検索結果に現在地からの距離を表示
 元データは駅データ.jpを使用 (http://www.ekidata.jp/)
UIはtwitter bootstrap を適用
現現在地から近いものを優先
技術要素
•Mobile SDK 2.0 for iOS (Hybrid)
•駅データはSalesforce上
(カスタムオブジェクト Station__c)
•データの取得にはSmartSync Data Frameworkを利用

21. #forcedotcomjp
SmartSync Data Frameworkについて
 Mobile SDK 2.0のHybridアプリケーションに含まれる
JavaScriptライブラリ
 Backbone.jp (http://backbonejs.org/) を継承している
‒ Backbone.Model => Force.SObject
‒ Backbone.Collection => Force.SObjectCollection
 オフラインキャッシュに対応
‒ SmartStoreを利用している

22. #forcedotcomjp
ディレクトリ構造
 編集を行うのはほぼ www 内のみ
 利用する html は index.htmlのみ
 主な処理は js/index.js
 認証関連は js/salesforce_oauth.js
 backbone.js や underscore.js と
いったサードパーティーの
JavaScript は lib/の中

23. #forcedotcomjp
FastClickについて
 物理タップしてからクリックイベントが発生するまでの
約300msの遅延を回避するたに使用されるライブラリ
 約300msでダブルタップとシングルタップを区別
 touchstartイベントをclickイベントとして発行
 詳しくは https://github.com/ftlabs/fastclick を参照
 FastClickデモ
http://ftlabs.github.io/fastclick/examples/layer.html

24. #forcedotcomjp
Demo:4
Hybrid アプリ作成

25. #forcedotcomjp
GitHub(DeveloperForceJapan)にて公開しました
https://github.com/DeveloperForceJapan/StationSearch
Demo:4
Hybrid アプリ作成

26. #forcedotcomjp
まとめ
 どのserviceを使っても大抵のことはできるので、用途に合わせて使いましょう
‒ VFで、得意なJavaScript フレームワークを使って開発をしたい！ => Mobile Packs
‒ 業務に利用するアプリのイメージがTemplateのものと近い！ => Mobile Templates
‒ アプリケーションとして配布したい！ => Mobile SDKでハイブリッド or Native開発
 デモを作成した感想
‒ Mobile Packs
• force.com開発を始める開発者がとりあえず使ってみると、外部ライブラリの使い方や
forceTKの使い方などよい勉強になると思います。
‒ Mobile Template
• 少ないコーディングで機能を持ったモバイルに最適化されたページを作ることができるので便利でした。
‒ Mobile SDK 2.0を使ったハイブリット開発
• backbone.js 好きにはたまらないです。
• 前のバージョンとあまり変わっていない様に見えるけど、実際にそんなに変わってないです。

27. #forcedotcomjp
まとめ
※SmartSync が使える様になったのと、いろいろシンプルになって使いやすくなってます
 どのserviceを使っても大抵のことはできるので、用途に合わせて使いましょう
‒ VFで、得意なJavaScript フレームワークを使って開発をしたい！ => Mobile Packs
‒ 業務に利用するアプリのイメージがTemplateのものと近い！ => Mobile Templates
‒ アプリケーションとして配布したい！ => Mobile SDKでハイブリッド or Native開発
 デモを作成した感想
‒ Mobile Packs
• force.com開発を始める開発者がとりあえず使ってみると、外部ライブラリの使い方や
forceTKの使い方などよい勉強になると思います。
‒ Mobile Template
• 少ないコーディングで機能を持ったモバイルに最適化されたページを作ることができるので便利でした。
‒ Mobile SDK 2.0を使ったハイブリット開発
• backbone.js 好きにはたまらないです。
• 前のバージョンとあまり変わっていない様に見えるけど、実際にそんなに変わってないです。

28. #forcedotcomjp
ブースにお越し下さい！
•本セッションで紹介したアプリのこと
•セッションでは紹介しなかったnativeアプリのこと
•mobileに限らずforce.com 開発について
Q & A

29. #forcedotcomjp

30. #forcedotcomjp