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 contai...
自己紹介
‣ 名前 : 岡本 充洋
‣ 所属 : 株式会社セールスフォース・ドットコム
‣ 経歴 : 元々はJavaEEエンジニア、今はマーケティング
‣ コミュニティとか : 初期のSpringユーザグループ、Java
User Groupの...
エンタープライズ界隈でもモバイルが台頭
モバイル端末

売上高

iOS/Android
2億3000万台

PC

Windows/Mac
7600万台

3Q08

Tuesday, February 18, 14

2Q09

1Q10
...
2017

90%
100
90

20%

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

80
70
60
50
40
30
20
10
0

Source: Gartner, Ian Finley, Research VP; 2010
Tue...
エンタープライズでも
ニーズは確実に増え続けているが

Tuesday, February 18, 14
1/2

1

60%

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

返答率

40%

0

20%

Tuesday, February 18, 14

複雑なフォームファクター
少ない開発者
複数のオペレーティングシステム
複数のプラットフォー...
アプリケーションUIコンテナ

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

Tuesday, February 18, 14
ソフトウェア開発におけるコンテナ
Java Platform, Enterprise Editionでは、Webコンテナ (web container) は 「Java EEアーキテクチャのWebコンポーネント規約を実装」している。この規約はコ...
ソフトウェア開発におけるコンテナ
‣ 決められた手順に従ってアプリケーションを構築
‒ Servlet API
‒ Rack
‒ commonsJS

‣ コンテナが大枠の機能を提供
‒
‒
‒
‒

Tuesday, February 18,...
コンテナの考えを
UIにまで持っていく

Tuesday, February 18, 14
Netvibes

Tuesday, February 18, 14
Alfresco

Tuesday, February 18, 14
Salesforce
検索
タブ
標準コンポーネント
コーディングレス
クリックでカスタマイズ

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

Tuesday, February 18, 14
UIコンテナの考えを
モバイルまで持っていく

Tuesday, February 18, 14
Salesforce1 Mobile
全文検索

データの概要

メイン画面
レコードの詳細
ナビゲーション
メニュー

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

コンテキスト

通知センター

メニュー

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

Tuesday, February 18, 14

パブリッシャー
アクション
Let’s See Action

Tuesday, February 18, 14
Salesforce = PaaS(mBaaS) + UIフレーム

業務固有のUIセット
UIコンテナ
サーバランタイム、開発フレームワーク&ツール
OS,言語ランタイム

SaaS

Tuesday, February 18, 14

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

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

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

などなど・・・

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

Tu...
Salesforceが提供する機能
‣ ユーザ認証、認可
‒ SAML2, OAuth2, Open ID Connect , ACL
‣ データベース
‒ Salesforce Database (RESTfulなCloudDB)
‣ ソーシ...
Visualforce
HTMLベースのタグ言語
<apex:page docType="html-5.0" showHeader="false" standardStylesheets="false">
<script type="text/...
Salesforce Database (Database.com)
地理位置情報型など豊富なデータ型 - DISTANCEクエリの例

SELECT Id,
Warehouse_Location__latitude__s,
Warehouse...
ApexでREST APIを自動生成
REST APIを自分で作成できる
@RestResource(urlMapping='/stockservice/*')
global class WarehouseStockRestResource {...
ApexでClient Javascriptを自動生成
サーバサイドで定義したメソッドが、自動的にJavascriptメソッドになる
global class InternalEventController{
@remoteAction
glo...
Salesforce1 Platformの機能スタック

API

モバイル
サービス

Tooling
API

Soap API

Rest API

Bulk API

Mobile SDK

開発者向け
Mobile Pack

オフラ...
S1を使ったDemoアプリ

Tuesday, February 18, 14
例題 : 社内イベントを管理するアプリケーション
イベント担当者

‣ 参加対象者や関連する対象者を検索
‒ 通知を送信
‒ 登録情報を送信

‣ 総参加時間や回数など、アクティブな参
加者を把握する
‣ 社内行事の情報を更新し、通知する
従業...
おおまかな機能
各種のイベントを検索する

参加対象者へ情報を通知

オンサイトチェックイン

結果データを閲覧、共有

Tuesday, February 18, 14
パブリッシャーアクション
‣ 任意のデータ上にカスタムの
アクションを作成
‒ パブリッシャーアクション

• 宣言的: 作成, 更新, 電話ログ
• プログラミング: Visualforce, Canvas

‣ パブリッシャーイベント

‒...
Salesforce1と通知
‣ 通知機能を使って、イベントが起
きた事を通知する事が可能
‒ アプリケーション内
‒ プッシュ通知

‣ 以下で通知が行われる
‒ Chatter上でのイベント
• @mention
• Wallへの書き込み
...
Force.com Canvas
‣ Force.com Canvasを利用すると、3rd
PartyのiFrameを埋め込む事が出来る
‒ Salesforce1側からCanvas側のフレーム
へ値を渡す事が出来る
• APIトークン

• ...
Visualforce
‣ HTMLベースのタグ言語
‒ 開発に便利なタグも提供

• 一部はPC画面用の為、注意が必要

‣ Salesforce1Mobile上での画面
遷移はJavascriptによって制御
‒ Sforce.one.na...
Visualforce
‣ カメラや位置情報等のHTML5の機能を利用
可能
‒ <apex:page docType="html-5.0" …>
‒ Geolocation API
• JSリモートアクション
• SOQL DISTANCE ...
Let’s See Action

Tuesday, February 18, 14
使いどころ

Tuesday, February 18, 14
Heroku connect

Postgres と Salesforce を
自動で同期

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

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

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

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

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

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

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

‣ Sale...
Salesforce1 Platform 関連リソース
Developer Force Japan
http://jp.force.com
開発用途のDeveloper Editionは全て無料
今すぐサインアップ
Salesforce1 開発...
Salesforce1スタイルガイド

http://sfdc-styleguide.herokuapp.com/
Tuesday, February 18, 14
Developer Force
@developerforcej / #forcedotcomjp
Developer Force Japan
+Developer Force Japan
Developer Force
Developer F...
是非アプリケーションを開発してみて下さい
Salesforce1 Platform
モバイルハックチャレンジ開催中!!!

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

応募条件
1、モバイルアプリである
1、Salesforce...
ご清聴ありがとうございました

Tuesday, February 18, 14
Upcoming SlideShare
Loading in …5
×

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

1,577 views

Published on

2014年2月14日に開催された翔泳社Developer Summit 2014でのセッション資料。

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,577
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
35
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. Webエンジニアがラクして企業向け モバイルアプリを作る方法 ∼Salesforce1モバイルコンテナを使った開発手法∼ Tuesday, February 18, 14 【14-C-6】 #devsumiC
  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 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. Tuesday, February 18, 14
  3. 3. 自己紹介 ‣ 名前 : 岡本 充洋 ‣ 所属 : 株式会社セールスフォース・ドットコム ‣ 経歴 : 元々はJavaEEエンジニア、今はマーケティング ‣ コミュニティとか : 初期のSpringユーザグループ、Java User Groupの立ち上げサポート、Eclipse Pluginの ローカライズとか @mitsuhiro Tuesday, February 18, 14
  4. 4. エンタープライズ界隈でもモバイルが台頭 モバイル端末 売上高 iOS/Android 2億3000万台 PC Windows/Mac 7600万台 3Q08 Tuesday, February 18, 14 2Q09 1Q10 4Q10 3Q11 2Q12 1Q13 2Q13
  5. 5. 2017 90% 100 90 20% のエンタープライズアプリ がモバイル対応 80 70 60 50 40 30 20 10 0 Source: Gartner, Ian Finley, Research VP; 2010 Tuesday, February 18, 14 90% のエンタープライズアプリ がデスクトップおよびモバイル対応
  6. 6. エンタープライズでも ニーズは確実に増え続けているが Tuesday, February 18, 14
  7. 7. 1/2 1 60% 以下 開発された アプリケーション 返答率 40% 0 20% Tuesday, February 18, 14 複雑なフォームファクター 少ない開発者 複数のオペレーティングシステム 複数のプラットフォーム
  8. 8. アプリケーションUIコンテナ Tuesday, February 18, 14
  9. 9. コンテナ (Container) ‣ 内部に物を納めるための容器である Tuesday, February 18, 14
  10. 10. ソフトウェア開発におけるコンテナ 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) Tuesday, February 18, 14
  11. 11. ソフトウェア開発におけるコンテナ ‣ 決められた手順に従ってアプリケーションを構築 ‒ Servlet API ‒ Rack ‒ commonsJS ‣ コンテナが大枠の機能を提供 ‒ ‒ ‒ ‒ Tuesday, February 18, 14 PortのListen HTTPのハンドリング セッション管理 クラスタリング
  12. 12. コンテナの考えを UIにまで持っていく Tuesday, February 18, 14
  13. 13. Netvibes Tuesday, February 18, 14
  14. 14. Alfresco Tuesday, February 18, 14
  15. 15. Salesforce 検索 タブ 標準コンポーネント コーディングレス クリックでカスタマイズ コンテンツ カスタムコンポーネント HTML5でカスタマイズ Tuesday, February 18, 14
  16. 16. UIコンテナの考えを モバイルまで持っていく Tuesday, February 18, 14
  17. 17. Salesforce1 Mobile 全文検索 データの概要 メイン画面 レコードの詳細 ナビゲーション メニュー Tuesday, February 18, 14
  18. 18. 基本のコンテナにカスタマイズを施して構成する コンテキスト 通知センター メニュー HTML5、JavaScript を使ってカスタイズする Tuesday, February 18, 14 パブリッシャー アクション
  19. 19. Let’s See Action Tuesday, February 18, 14
  20. 20. Salesforce = PaaS(mBaaS) + UIフレーム 業務固有のUIセット UIコンテナ サーバランタイム、開発フレームワーク&ツール OS,言語ランタイム SaaS Tuesday, February 18, 14 Salesforce PaaS,mBaaS IaaS,Hosting
  21. 21. UIコンテナでの開発のアプローチ Tuesday, February 18, 14
  22. 22. モバイルアプリのバックエンドに必要なもの データアクセスコントロール データキャッシング ユーザ認証 位置情報データの扱い Push通知コントロール などなど・・・ モバイルセッション管理 ロードバランシング サーバサイドロジック Tuesday, February 18, 14 MobileからアクセスするAPI セキュリティ ポリシー管理
  23. 23. Salesforceが提供する機能 ‣ ユーザ認証、認可 ‒ SAML2, OAuth2, Open ID Connect , ACL ‣ データベース ‒ Salesforce Database (RESTfulなCloudDB) ‣ ソーシャルモデル ‒ Chatter (社内向けソーシャルネットワーク) ‣ HTMLコードのホスティング ‒ Visualforce(HTMLベースタグ言語) ‣ サーバサイドロジック、API ‒ Apex (Javaに似たプログラミング言語) ‣ APIサーバ ‒ REST, SOAP , Bulk , Streaming API Tuesday, February 18, 14
  24. 24. 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>"); ... Tuesday, February 18, 14
  25. 25. 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; Tuesday, February 18, 14
  26. 26. 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; } Tuesday, February 18, 14
  27. 27. 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"}}); Tuesday, February 18, 14
  28. 28. Salesforce1 Platformの機能スタック API モバイル サービス Tooling API Soap API Rest API Bulk API Mobile SDK 開発者向け Mobile Pack オフライン サポート メタデータ 位置情報 カスタムの アクション Tuesday, February 18, 14 ソーシャル API Streaming API アイデンティティ 管理 モバイルでの 通知 Visualforce API Chatter ワークフロー 分析機能 Apex マルチテナント インフラストラクチャ 中核 サービス 分析 API クラウド データベース データレベルの セキュリティ スキーマ ビルダー トランスレーション ワークベンチ 共有モデル メール サービス 検索 Heroku1 モニタリング
  29. 29. S1を使ったDemoアプリ Tuesday, February 18, 14
  30. 30. 例題 : 社内イベントを管理するアプリケーション イベント担当者 ‣ 参加対象者や関連する対象者を検索 ‒ 通知を送信 ‒ 登録情報を送信 ‣ 総参加時間や回数など、アクティブな参 加者を把握する ‣ 社内行事の情報を更新し、通知する 従業員 Tuesday, February 18, 14 ‣ ‣ ‣ ‣ 社内行事の登録 オンサイトでのチェックイン 参加時の写真のアップロード 他の参加者や主催者とのコラボレーション
  31. 31. おおまかな機能 各種のイベントを検索する 参加対象者へ情報を通知 オンサイトチェックイン 結果データを閲覧、共有 Tuesday, February 18, 14
  32. 32. パブリッシャーアクション ‣ 任意のデータ上にカスタムの アクションを作成 ‒ パブリッシャーアクション • 宣言的: 作成, 更新, 電話ログ • プログラミング: Visualforce, Canvas ‣ パブリッシャーイベント ‒ Javascript によってイベント実行時の挙 動を制御する • 例 : publisher.setValidForSubmit Tuesday, February 18, 14 各種のイベントを検索する 参加登録情報を通知 オンサイトチェックイン 結果データを閲覧、共有
  33. 33. Salesforce1と通知 ‣ 通知機能を使って、イベントが起 きた事を通知する事が可能 ‒ アプリケーション内 ‒ プッシュ通知 ‣ 以下で通知が行われる ‒ Chatter上でのイベント • @mention • Wallへの書き込み ‒ タスクのアサイン ‒ 承認ワークフロー Tuesday, February 18, 14 各種のイベントを検索する 参加登録情報を通知 オンサイトチェックイン 結果データを閲覧、共有
  34. 34. Force.com Canvas ‣ Force.com Canvasを利用すると、3rd PartyのiFrameを埋め込む事が出来る ‒ Salesforce1側からCanvas側のフレーム へ値を渡す事が出来る • APIトークン • 位置情報 • ユーザ/組織の情報 • アプリケーション固有のパラメータ ‣ Force.com Canvas Tuesday, February 18, 14 各種のイベントを検索する 参加登録情報を通知 オンサイトチェックイン 結果データを閲覧、共有
  35. 35. Visualforce ‣ HTMLベースのタグ言語 ‒ 開発に便利なタグも提供 • 一部はPC画面用の為、注意が必要 ‣ Salesforce1Mobile上での画面 遷移はJavascriptによって制御 ‒ Sforce.one.navigateToRelatedList( relatedListId, parentRecordId); ‣ サーバサイドロジックを呼び出す 仕組みを提供 ‒ Javascript Remoting Tuesday, February 18, 14 各種のイベントを検索する 参加登録情報を通知 オンサイトチェックイン 結果データを閲覧、共有
  36. 36. Visualforce ‣ カメラや位置情報等のHTML5の機能を利用 可能 ‒ <apex:page docType="html-5.0" …> ‒ Geolocation API • JSリモートアクション • SOQL DISTANCE クエリ ‒ HTML FileReader > Chatter Files ‣ Javascript, CSSを自由に記載 Tuesday, February 18, 14 各種のイベントを検索する 参加登録情報を通知 オンサイトチェックイン 結果データを閲覧、共有
  37. 37. Let’s See Action Tuesday, February 18, 14
  38. 38. 使いどころ Tuesday, February 18, 14
  39. 39. Heroku connect Postgres と Salesforce を 自動で同期 顧客のアプリケーションのデータ から Salesforce レポートを作成 煩雑な作業が不要に Tuesday, February 18, 14
  40. 40. エンタープライズモバイル開発を簡単に 他のクラウドとの連携 データAPI, 認証API パートナー & ロイヤルカスタマー向け モバイルアプリ モバイルで使用するデータの 安全な同期 セキュリティ 権限管理 社内システム / 基幹システム AWS(VPC) 従業員向けの モバイルアプリ Active Directory コンシューマ向け モバイルWeb / アプリ 既存の アイデンティティ との利用/連携 40 Tuesday, February 18, 14
  41. 41. エンタープライズモバイル開発を簡単に 他のクラウドとの連携 データAPI, 認証API パートナー & ロイヤルカスタマー向け モバイルアプリ モバイルで使用するデータの 安全な同期 セキュリティ 権限管理 社内システム / 基幹システム AWS(VPC) 従業員向けの モバイルアプリ Active Directory コンシューマ向け モバイルWeb / アプリ 既存の アイデンティティ との利用/連携 41 Tuesday, February 18, 14
  42. 42. まとめ ‣ UIコンテナを駆使したアプリケーション開発 ‒ 生産性を高める方法の一つ • アプリケーション開発を “コンテナにはめる” • 要件をフレームにはめていく ‒ はまらない部分をカスタマイズで開発 ‒ パズルを楽しむ ‣ Salesforce1 Platformの場合 ‒ コンテナをHTML5で拡張 ‒ モバイル、バックエンドも含めてWebテクノロジのみで完結 ‒ Herokuと繋ぐケースもアリ Tuesday, February 18, 14
  43. 43. Salesforce1 Platform 関連リソース Developer Force Japan http://jp.force.com 開発用途のDeveloper Editionは全て無料 今すぐサインアップ Salesforce1 開発リソース(英語) http://developer.salesforce.com/ Salesforce1サンプルアプリケーション https://github.com/DeveloperForceJapan/demos1app-jp Tuesday, February 18, 14 jp.force.com
  44. 44. Salesforce1スタイルガイド http://sfdc-styleguide.herokuapp.com/ Tuesday, February 18, 14
  45. 45. Developer Force @developerforcej / #forcedotcomjp Developer Force Japan +Developer Force Japan Developer Force Developer Force Group Tuesday, February 18, 14
  46. 46. 是非アプリケーションを開発してみて下さい Salesforce1 Platform モバイルハックチャレンジ開催中!!! 優勝賞金100 万円 準優勝 50 万円 3等 10万円 応募条件 1、モバイルアプリである 1、Salesforce1 Platformを利用している 是非ご参加下さい!! http://jp.force.com/hack Tuesday, February 18, 14
  47. 47. ご清聴ありがとうございました Tuesday, February 18, 14

×