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

#forcedotcomjp

Safe HarborSafe 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.

#forcedotcomjp

Speakers

Kazuhiko ImamuraSales Support Engineer@KAZU_200WR

Masashi TsujiSales Support Engineer@h2z

#forcedotcomjp

Developer Force Japanを是非フォロー下さい

Developer Force Japan

+Developer Force Japan

DeveloperForce Japan

@developerforcej / #forcedotcomjp

#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

#forcedotcomjp

http://www2.developerforce.com/ja/mobile

Salesforce Platform Mobile Services 概要

salesforce platform mobile services

#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を提供します。

#forcedotcomjp

Trust Customer Data

Business Logic Identity Offline Social Analytics APIGeolocation

Mobile SDKs Mobile Packs Mobile Design Templates

本セッションで扱うMobile ServicesSalesforce Platform Mobile Serviceにより、顧客データに接続されたエンタープライズモバイルアプリケーションを最小限の工数で開発することが可能に。あらゆるデバイスに対応したアプリケーション開発に必要なツール, フレームワーク, APIを提供します。

#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を使うアプリ

#forcedotcomjp

Mobile Packs Visualforce及びMobile SDKハイブリッドアプリケーションを作成するの為のジャンプスタート

モダンなJavascriptフレームワークを使ったサンプル

Force.com以外のプラットフォームにもデプロイ可能 (例 : Heroku)

クイックスタート & チュートリアル

http://www2.developerforce.com/mobile/services/mobile-packs (英語)

#forcedotcomjp

DemoMobile Packs を使ったVFページ作成

#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技術を利用)

#forcedotcomjp

DemoMobile Design Templates を使ったVFページ作成

#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

‒ プッシュ通知(ロードマップ)

#forcedotcomjp

Mobile SDK 2.0 getting started for iOS 準備

‒ 環境• OS X “Lion”以上• Xcode 4.5以上

‒ Mobile SDK 2.0• npmからインストール

Getting Started with iOS Hybridhttp://www2.developerforce.com/ja/mobile/getting-started/ios#hybrid

#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

#forcedotcomjp

プロジェクトの作成 (2)

コマンドで一気にパラメータを指定

$ forceios create \

--apptype="hybrid_local" \

--appname="SampleApp" \

--companyid="com.developerforce.jp.devcon.bo1" \

--organization="DevCon2013" \

--outputdir=. \

--appid="sample_app" \

--callbackuri="sfdc://success"

#forcedotcomjp

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

#forcedotcomjp

ハイブリッドアプリケーションの作成お題：日本の駅を検索するアプリケーション

駅名、路線名で検索が可能駅名、路線名をリスト表示

検索結果を地図に表示

現現在地から近いものを優先

検索結果に現在地からの距離を表示

元データは駅データ.jpを使用　(http://www.ekidata.jp/)

UIはtwitter bootstrap を適用

現現在地から近いものを優先

#forcedotcomjp

ハイブリッドアプリケーションの作成お題：日本の駅を検索するアプリケーション

駅名、路線名で検索が可能駅名、路線名をリスト表示

検索結果を地図に表示

現現在地から近いものを優先

検索結果に現在地からの距離を表示

元データは駅データ.jpを使用　(http://www.ekidata.jp/)

UIはtwitter bootstrap を適用

現現在地から近いものを優先

技術要素•Mobile SDK 2.0 for iOS (Hybrid)•駅データはSalesforce上 (カスタムオブジェクト Station__c)

•データの取得にはSmartSync Data Frameworkを利用

#forcedotcomjp

SmartSync Data Frameworkについて

Mobile SDK 2.0のHybridアプリケーションに含まれるJavaScriptライブラリ

Backbone.jp (http://backbonejs.org/) を継承している‒ Backbone.Model => Force.SObject

‒ Backbone.Collection => Force.SObjectCollection

オフラインキャッシュに対応‒ SmartStoreを利用している

#forcedotcomjp

ディレクトリ構造

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

#forcedotcomjp

FastClickについて

物理タップしてからクリックイベントが発生するまでの約300msの遅延を回避するたに使用されるライブラリ

約300msでダブルタップとシングルタップを区別 touchstartイベントをclickイベントとして発行 詳しくは https://github.com/ftlabs/fastclick を参照 FastClickデモhttp://ftlabs.github.io/fastclick/examples/layer.html

#forcedotcomjp

Demo:4Hybrid アプリ作成

#forcedotcomjp

GitHub(DeveloperForceJapan)にて公開しましたhttps://github.com/DeveloperForceJapan/StationSearch

Demo:4Hybrid アプリ作成

#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 好きにはたまらないです。• 前のバージョンとあまり変わっていない様に見えるけど、実際にそんなに変わってないです。

#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 好きにはたまらないです。• 前のバージョンとあまり変わっていない様に見えるけど、実際にそんなに変わってないです。

#forcedotcomjp

ブースにお越し下さい！

•本セッションで紹介したアプリのこと•セッションでは紹介しなかったnativeアプリのこと

•mobileに限らずforce.com 開発について

Q & A

#forcedotcomjp

#forcedotcomjp