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

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

Tuesday, February 18, 14

【14-C-6】
#devsumiC

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 forwardlooking statements.


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

@mitsuhiro

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

売上高

iOS/Android
2億3000万台

PC

Windows/Mac
7600万台

3Q08


2Q09

1Q10

4Q10

3Q11

2Q12

1Q13

2Q13

2017

90%
100
90

20%

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

80
70
60
50
40
30
20
10
0

Source: Gartner, Ian Finley, Research VP; 2010

90%

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

エンタープライズでも
ニーズは確実に増え続けているが


1/2

1

60%

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

返答率

40%

0

20%


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

アプリケーション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 firm 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 flexibility and portability on
where the application can run, whether on premise [sic], public cloud, private cloud, bare metal, etc.”
-- Wikipedia(Docker)


ソフトウェア開発におけるコンテナ
‣ 決められた手順に従ってアプリケーションを構築
‒ 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セット
UIコンテナ
サーバランタイム、開発フレームワーク&ツール
OS,言語ランタイム

SaaS


Salesforce

PaaS,mBaaS

IaaS,Hosting

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


モバイルアプリのバックエンドに必要なもの
データアクセスコントロール
データキャッシング
ユーザ認証

位置情報データの扱い
Push通知コントロール

などなど・・・

モバイルセッション管理
ロードバランシング
サーバサイドロジック


MobileからアクセスするAPI

セキュリティ
ポリシー管理

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

Visualforce
HTMLベースのタグ言語
<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>");
...

Salesforce Database (Database.com)
地理位置情報型など豊富なデータ型 - DISTANCEクエリの例

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;


ApexでREST APIを自動生成
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;
}

ApexでClient Javascriptを自動生成
サーバサイドで定義したメソッドが、自動的にJavascriptメソッドになる
global class InternalEventController{
@remoteAction
global static Task createTaskAndPost(){
Task t = new Task();
t.ActivityDate = System.date.today().adddays(2);
t.Subject = 'この社内行事の参加可否を返事をして下ください';
....
InternalEventController.createTaskAndPost(
function(result, event){
if(event.status){
Sfdc.canvas.publisher.publish({name: "publisher.close", payload:{ refresh:"true"}});


Salesforce1 Platformの機能スタック

API

モバイル
サービス

Tooling
API

Soap API

Rest API

Bulk API

Mobile SDK

開発者向け
Mobile Pack

オフライン
サポート

メタデータ

位置情報

カスタムの
アクション


ソーシャル
API

Streaming
API

アイデンティティ
管理

モバイルでの
通知

Visualforce

API

Chatter

ワークフロー

分析機能

Apex

マルチテナント
インフラストラクチャ

中核
サービス

分析 API

クラウド
データベース

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

スキーマ
ビルダー

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

共有モデル

メール
サービス

検索

Heroku1

モニタリング

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



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を自由に記載



使いどころ


Heroku connect

Postgres と Salesforce を
自動で同期

顧客のアプリケーションのデータ
から Salesforce レポートを作成
煩雑な作業が不要に


エンタープライズモバイル開発を簡単に
他のクラウドとの連携
データAPI, 認証API
パートナー &
ロイヤルカスタマー向け
モバイルアプリ

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

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

従業員向けの

Active Directory

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

既存の
との利用/連携

40

エンタープライズモバイル開発を簡単に
他のクラウドとの連携
データAPI, 認証API
パートナー &
ロイヤルカスタマー向け

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

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

従業員向けの

Active Directory

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

既存の
との利用/連携

41

まとめ
‣ UIコンテナを駆使したアプリケーション開発
‒ 生産性を高める方法の一つ

• アプリケーション開発を “コンテナにはめる”
• 要件をフレームにはめていく
‒ はまらない部分をカスタマイズで開発
‒ パズルを楽しむ

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


Salesforce1 Platform 関連リソース
Developer Force Japan
http://jp.force.com
開発用途のDeveloper Editionは全て無料
今すぐサインアップ
Salesforce1 開発リソース(英語)
http://developer.salesforce.com/
Salesforce1サンプルアプリケーション
https://github.com/DeveloperForceJapan/demos1app-jp


jp.force.com

Salesforce1スタイルガイド

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

Developer Force
@developerforcej / #forcedotcomjp
Developer Force Japan
+Developer Force Japan
Developer Force
Developer Force Group

是非アプリケーションを開発してみて下さい
Salesforce1 Platform
モバイルハックチャレンジ開催中!!!

優勝賞金100 万円
準優勝 50 万円
3等 10万円

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

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


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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

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

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

Mehr von Mitch Okamoto

Mehr von Mitch Okamoto (16)

Kürzlich hochgeladen

Kürzlich hochgeladen (10)