Webエンジニアがラクして企業向けモバイルアプリを作る方法～Salesforce1モバイルコンテナを使った開発手法～

【14-C-6】#devsumiC～Salesforce1モバイルコンテナを使った開発手法～

Webエンジニアがラクして企業向けモバイルアプリを作る方法

Tuesday, February 18, 14

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.

Safe Harbor


‣名前 : 岡本充洋‣所属 : 株式会社セールスフォース・ドットコム‣経歴 : 元々はJavaEEエンジニア、今はマーケティング‣コミュニティとか : 初期のSpringユーザグループ、Java User Groupの立ち上げサポート、Eclipse Pluginのローカライズとか

自己紹介

@mitsuhiro


エンタープライズ界隈でもモバイルが台頭

3Q08 2Q09 1Q10 4Q10 3Q11 2Q12 1Q13

モバイル端末

PCWindows/Mac7600万台

iOS/Android2億3000万台

売上高

2Q13


2017��90% �%:+;16$*"17�3/$8�

20%のエンタープライズアプリがモバイル対応

90%のエンタープライズアプリがデスクトップおよびモバイル対応

0

10

20

30

40

50

60

70

80

90

100

Source: Gartner, Ian Finley, Research VP; 2010


エンタープライズでも

ニーズは確実に増え続けているが


1

0

3/$8"17(;)5:��

3/$8"17��

3/$8"17!��

60%

40%

20%

"17(;)5:��'4,1

1/2以下

開発されたアプリケーション

返答率

複雑なフォームファクター少ない開発者複数のオペレーティングシステム複数のプラットフォーム


アプリケーションUIコンテナ


コンテナ (Container) ‣内部に物を納めるための容器である


ソフトウェア開発におけるコンテナJava Platform, Enterprise Editionでは、Webコンテナ (web container) は「Java EEアーキテクチャのWebコンポーネント規約を実装」している。この規約はコンピュータセキュリティ、並列性、ライフサイクル管理、トランザクション処理、デプロイやその他のサービスを含むWebコンポーネントの実行環境を規定する。WebコンテナはJava EEプラットフォームAPIを利用したJSPコンテナとしての機能も提供する。

-- Wikipedia(Webコンテナ)

Docker is an open source project that automates the deployment of applications inside software containers.[2] According to an industry analyst !rm 451 Research, "Docker is a tool that can package an application and its dependencies in a virtual container that can run on any Linux server. This helps enable "exibility and portability on where the application can run, whether on premise [sic], public cloud, private cloud, bare metal, etc.”

-- Wikipedia(Docker)


http://ja.wikipedia.org/wiki/Java_Platform,_Enterprise_Edition




http://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3




http://ja.wikipedia.org/wiki/%E4%B8%A6%E5%88%97%E6%80%A7

http://ja.wikipedia.org/wiki/%E4%B8%A6%E5%88%97%E6%80%A7

http://ja.wikipedia.org/w/index.php?title=%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E7%AE%A1%E7%90%86&action=edit&redlink=1

http://ja.wikipedia.org/w/index.php?title=%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E7%AE%A1%E7%90%86&action=edit&redlink=1

http://ja.wikipedia.org/wiki/%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B6%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E5%87%A6%E7%90%86

http://ja.wikipedia.org/wiki/%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B6%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E5%87%A6%E7%90%86

http://ja.wikipedia.org/w/index.php?title=%E5%AE%9F%E8%A1%8C%E7%92%B0%E5%A2%83&action=edit&redlink=1

http://ja.wikipedia.org/w/index.php?title=%E5%AE%9F%E8%A1%8C%E7%92%B0%E5%A2%83&action=edit&redlink=1



http://ja.wikipedia.org/w/index.php?title=Applocation_Programming_Interface&action=edit&redlink=1

http://ja.wikipedia.org/w/index.php?title=Applocation_Programming_Interface&action=edit&redlink=1

http://ja.wikipedia.org/wiki/JavaServer_Pages

http://ja.wikipedia.org/wiki/JavaServer_Pages

‣決められた手順に従ってアプリケーションを構築‒ Servlet API‒ Rack‒ commonsJS‣コンテナが大枠の機能を提供‒ PortのListen‒ HTTPのハンドリング‒ セッション管理‒ クラスタリング

ソフトウェア開発におけるコンテナ


コンテナの考えを

UIにまで持っていく


Netvibes


Alfresco


Salesforce

タブ

検索

コンテンツ

標準コンポーネントコーディングレスクリックでカスタマイズ

カスタムコンポーネントHTML5でカスタマイズ


UIコンテナの考えを

モバイルまで持っていく


Salesforce1 Mobile

ナビゲーションメニュー

メイン画面

全文検索

レコードの詳細

データの概要


パブリッシャーアクション

通知センター

HTML5、JavaScriptを使ってカスタイズする

コンテキストメニュー

基本のコンテナにカスタマイズを施して構成する


Let’s See Action


Salesforce = PaaS(mBaaS) + UIフレーム

業務固有のUIセット

OS,言語ランタイム

UIコンテナ

サーバランタイム、開発フレームワーク&ツール

SaaS Salesforce PaaS,mBaaS IaaS,Hosting


UIコンテナでの開発のアプローチ


モバイルアプリのバックエンドに必要なもの

ユーザ認証

データアクセスコントロール

サーバサイドロジックポリシー管理

Push通知コントロール

位置情報データの扱い

セキュリティ

データキャッシング

ロードバランシング

モバイルセッション管理

などなど・・・MobileからアクセスするAPI


‣ ユーザ認証、認可‒ SAML2, OAuth2, Open ID Connect , ACL‣ データベース‒ Salesforce Database (RESTfulなCloudDB)‣ ソーシャルモデル‒ Chatter (社内向けソーシャルネットワーク)‣ HTMLコードのホスティング‒ Visualforce(HTMLベースタグ言語)‣ サーバサイドロジック、API‒ Apex (Javaに似たプログラミング言語)‣ APIサーバ‒ REST, SOAP , Bulk , Streaming API

Salesforceが提供する機能


Visualforce

<apex:page docType="html-5.0" showHeader="false" standardStylesheets="false"> <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js" />  <c:remoteTK /> <script type="text/javascript"> $j = jQuery.noConflict(); var client = new remotetk.Client();

client.query("SELECT Name FROM Account LIMIT 10", function(response){ for (var i =0;i<10;i++){ $j('#accountname').append("<li>" + response.records[i].Name + "</li>");...

HTMLベースのタグ言語


Salesforce Database (Database.com)

SELECT Id, Warehouse_Location__latitude__s, Warehouse_Location__longitude__s,Street_Address__c, Name FROM Vendor__c WHERE DISTANCE(Warehouse_Location__c, GEOLOCATION(37.794539,-122.394717), 'mi') <= 10;

地理位置情報型など豊富なデータ型 - DISTANCEクエリの例


ApexでREST APIを自動生成

@RestResource(urlMapping='/stockservice/*')global class WarehouseStockRestResource {

@HttpPost global static Product StockCount(Product p) {

/** Businesss Logic */ return p; }

global class Product{String productId;Integer StockCount;

}

REST APIを自分で作成できる


ApexでClient Javascriptを自動生成

global class InternalEventController{

@remoteAction global static Task createTaskAndPost(){ Task t = new Task(); t.ActivityDate = System.date.today().adddays(2); t.Subject = 'この社内行事の参加可否を返事をして下ください';

....

サーバサイドで定義したメソッドが、自動的にJavascriptメソッドになる

InternalEventController.createTaskAndPost( function(result, event){ if(event.status){ Sfdc.canvas.publisher.publish({name: "publisher.close", payload:{ refresh:"true"}});


中核サービス

Chatter トランスレーションワークベンチ

メールサービス分析機能

クラウドデータベース

スキーマビルダー検索

Visualforce

モニタリングマルチテナントインフラストラクチャ

Apex

データレベルのセキュリティ

ワークフロー

API

モバイルサービス

ソーシャル API分析 APIBulk APIRest API メタデータ

APISoap API

カスタムのアクション

アイデンティティ管理

モバイルでの通知

Tooling API

開発者向けMobile Pack

Mobile SDK オフラインサポート

Streaming API

位置情報

Heroku1

共有モデル

Salesforce1 Platformの機能スタック


S1を使ったDemoアプリ


例題 : 社内イベントを管理するアプリケーション‣ 参加対象者や関連する対象者を検索‒ 通知を送信‒ 登録情報を送信‣ 総参加時間や回数など、アクティブな参加者を把握する

‣ 社内行事の情報を更新し、通知する

‣ 社内行事の登録‣ オンサイトでのチェックイン‣ 参加時の写真のアップロード‣ 他の参加者や主催者とのコラボレーション

イベント担当者

従業員


おおまかな機能

参加対象者へ情報を通知

オンサイトチェックイン

結果データを閲覧、共有

各種のイベントを検索する


パブリッシャーアクション‣任意のデータ上にカスタムのアクションを作成‒ パブリッシャーアクション• 宣言的: 作成, 更新, 電話ログ• プログラミング: Visualforce, Canvas

‣パブリッシャーイベント‒ Javascript によってイベント実行時の挙動を制御する• 例 : publisher.setValidForSubmit

参加登録情報を通知





Salesforce1と通知‣通知機能を使って、イベントが起きた事を通知する事が可能‒ アプリケーション内‒ プッシュ通知‣以下で通知が行われる‒ Chatter上でのイベント• @mention• Wallへの書き込み‒ タスクのアサイン‒ 承認ワークフロー






Force.com Canvas‣ Force.com Canvasを利用すると、3rd PartyのiFrameを埋め込む事が出来る‒ Salesforce1側からCanvas側のフレームへ値を渡す事が出来る• APIトークン• 位置情報• ユーザ／組織の情報• アプリケーション固有のパラメータ

‣ Force.com Canvas!0#;."$-2��






Visualforce‣ HTMLベースのタグ言語‒ 開発に便利なタグも提供• 一部はPC画面用の為、注意が必要

‣ Salesforce1Mobile上での画面遷移はJavascriptによって制御‒ Sforce.one.navigateToRelatedList(relatedListId, parentRecordId);

‣サーバサイドロジックを呼び出す仕組みを提供‒ Javascript Remoting






Visualforce‣ カメラや位置情報等のHTML5の機能を利用可能‒ <apex:page docType="html-5.0"｠…>‒ Geolocation API• JSリモートアクション• SOQL DISTANCE クエリ‒ HTML FileReader > Chatter Files

‣ Javascript, CSSを自由に記載






Let’s See Action


使いどころ


Heroku connect

顧客のアプリケーションのデータから Salesforce レポートを作成

Postgres と Salesforce を自動で同期

煩雑な作業が不要に


既存のアイデンティティとの利用/連携

社内システム / 基幹システムAWS(VPC)

従業員向けのモバイルアプリ

Active Directory

他のクラウドとの連携データAPI, 認証API

コンシューマ向けモバイルWeb / アプリ

モバイルで使用するデータの安全な同期セキュリティ権限管理

エンタープライズモバイル開発を簡単に

パートナー &ロイヤルカスタマー向けモバイルアプリ

40Tuesday, February 18, 14

既存のアイデンティティとの利用/連携

社内システム / 基幹システムAWS(VPC)

従業員向けのモバイルアプリ

Active Directory

他のクラウドとの連携データAPI, 認証API

コンシューマ向けモバイルWeb / アプリ

モバイルで使用するデータの安全な同期セキュリティ権限管理

エンタープライズモバイル開発を簡単に

パートナー &ロイヤルカスタマー向けモバイルアプリ

41Tuesday, February 18, 14

まとめ‣UIコンテナを駆使したアプリケーション開発‒ 生産性を高める方法の一つ• アプリケーション開発を “コンテナにはめる”• 要件をフレームにはめていく‒ はまらない部分をカスタマイズで開発‒ パズルを楽しむ

‣ Salesforce1 Platformの場合‒ コンテナをHTML5で拡張‒ モバイル、バックエンドも含めてWebテクノロジのみで完結‒ Herokuと繋ぐケースもアリ


jp.force.com

Salesforce1 Platform 関連リソースDeveloper Force Japan

http://jp.force.com開発用途のDeveloper Editionは全て無料今すぐサインアップ

Salesforce1 開発リソース(英語)

http://developer.salesforce.com/

Salesforce1サンプルアプリケーション

https://github.com/DeveloperForceJapan/demo-

s1app-jp


http://jp.force.com

http://jp.force.com

http://wiki.developerforce.com/page/JP:Mobile_SDK




https://github.com/DeveloperForceJapan/demo-s1app-jp




Salesforce1スタイルガイド

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


http://sfdc-styleguide.herokuapp.com

http://sfdc-styleguide.herokuapp.com

Developer Force!0&9;�� !��

@developerforcej / #forcedotcomjp

Developer Force Japan

+Developer Force Japan

Developer Force

Developer Force Group


是非アプリケーションを開発してみて下さい

Salesforce1 Platform

モバイルハックチャレンジ開催中!!!

優勝賞金100 万円

http://jp.force.com/hack

応募条件１、モバイルアプリである１、Salesforce1 Platformを利用している是非ご参加下さい!!

準優勝 50 万円3等 10万円


ご清聴ありがとうございました

Technology

Webエンジニアがラクして企業向けモバイルアプリを作る方法 ～Salesforce1モバイルコンテナを使った開発手法～

Webエンジニアがラクして企業向けモバイルアプリを作る方法～Salesforce1モバイルコンテナを使った開発手法～