2014年10月31日札幌DeveloperFestaでの公演資料

2. コンポーネントを”つなぐ”時代へ
Web&Mobileアプリ開発最新動向
岡本 充洋
ディベロッパプログラムマネージャ
Salesforce

3. 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 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, 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, 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-K for the most
recent fiscal quarter. This document and others 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 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.

4. 自己紹介
名前 : 岡本 充洋
所属 : 株式会社セールスフォース・ドットコム
経歴 : JavaEEエンジニア、Eclipseプラグイン翻訳、Springユーザグループなど
現在の仕事: Salesforce1 Platformの啓蒙、ブランディングやイベントプランニング
@mitsuhiro

5. Salesforceとは
エンタープライズ向け専業のクラウドベンダー
主力SaaSのSales Cloudは世界シェアNo.1
同社サービスにはHerokuやExact Target(現Marketing Cloud)などもある
53 億ドル
(2014年度予測)
~8%
売上に
占める割合

6. セールスフォース・ドットコムの歴史
顧客社数1,500 3,500 5,700 8,700 13,900 20,500 29,800 41,000 55,400 72,500 92,300 100,000以上
1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014
CCRRMM期
営業支援
カスタマーサポート
代理店ポータル
カスタマーポータル
PlaPtlafotfromrm期
Social Mobile
？

7. 主力となる２つの開発プラットフォーム
従業員向けアプリを
素早く開発
顧客向けアプリを
素早く開発
Heroku Connect

8. Force.comプラットフォームによる開発
素早い開発:
80% ポイント & クリック
20% コード
ビジュアル ワークフローAppビルダーデータ分析
モバイル対応
マルチ通過 マルチ言語
セキュリティ 共有ルール
プログラミング基盤ソーシャル 基盤

9. Demo

10. 次の課題 : モバイル・アプリケーションの開発
PCとは違ったアプローチが必要
!

11. モバイルアプリ開発におけるアプローチ方法
Web開発のスキルが行かせる
ネイティブ機能へのアクセス
App Storeによる配布
高度なUI
より良いパフォーマンス
App Storeによる配布
Web開発のスキルが活かせる
即時のアップデート
配布に制限無し

12. モバイルアプリ開発におけるアプローチ方法
HTML5 Native Hybrid
HTML / Javascript
慣れ親しんだWebのテクノロジーを使っ
てアプリケーションが開発出来る
Fastest Way
今までと何ら変わりない方法でアプ
リケーションを構築するだけで良い
ので学習コストが少ない
Framework
JQuery MobileやSenchaなど、実
績のあるモバイルに特化したフレー
ムワークを利用可能
Native API Wrappers
BaaSが用意するSDKを利用してラッパー
経由でアクセスするか、自身でネイティ
ブ言語からRESTをCallする必要がある
Authentications
ログイン状態を保持するため認証やセ
キュアトークンの管理が必要
Native Device Functions
デバイスネイティブの言語で全ての機
能にアクセスできる
Push Notifications
リアルタイムなアラートをモバイル
デバイスに送る事ができる
Container
Authentications
ログイン状態を保持するため認証やセ
キュアトークンの管理が必要
HTML / Javascript
慣れ親しんだWebのテクノロジーを使っ
てアプリケーションが開発出来る
Native Device Functions
コンテナを経由してJavascriptでデバ
イス固有の機能に一部アクセスできる
Push Notifications
リアルタイムなアラートをモバイル
デバイスに送る事ができる

13. ネイティブアプリケーション
軽快で高速な動作、よりよいユーザエクスペリエンス
Swiftなどのモダンプログラミング言語の登場
CocoaPodsなどの豊富なUIライブラリ群
Twitter Fabric等の開発をサポートするツール

14. HTML5 & ハイブリッドアプリケーション
Javascript MVCフレームワークの台頭
GUIによるクリエーター等の充実
慣れ親しんだHTML & Javascriptでの開発
Cordovaの成熟

15. 課題
ネイティブアプリケーション
• 開発、リリースを行うのに時間がかかる
• 開発者の数が少ない
HTML5アプリケーション
• ユーザへの到達率
• プッシュ通知等のネイティブ系機能へのアクセスが制限される
ハイブリッド
• 開発、リリースを行うのに時間がかかる

16. ひとつの回答 : Hybrid Appコンテナ
• コンポーネントベースの
HTML5 フレームワーク
• 柔軟性、拡張性を備えた
インタラクション
• メタデータ駆動型の
レイアウト
• 予めマーケットプレイス
へ登録済みのコンテナ
• 暗号化、キャッシュ
• ナビゲーション
• デバイスの機能
• Today (カレンダー)
• 写真、ファイル
• 通知

18. HTML5でネイティブアプリをカスタマイズ
Javascriptフレームワークを
使って画面を開発
APIによって
クラウドへ接続
JavaScript SDK
から画面遷移を制御

19. Demo

20. 更なる課題 : 開発生産性と再利用性
Webアプリケーションを新たな領域へ
!

21. Webアプリケーションの再利用の課題
HTMLのコードとJavascriptの分離が難しく、スパゲティ化
コンポーネント化の決められた仕様も無く、各人が独自に設計
DOM
DOM
DOM
Javascript
Javascript
データの入力
Domの更新
Domの更新

22. 解決策 : コンポーネントフレームワーク
Webアプリを部品化し、再利用可能にする

23. 未来はコンポーネントフレームワークにあり
主要なクラウドベンダーはコンポーネントフレームワークに投資している
Google Facebook Salesforce Twitter Mozilla
Polymer React Lightning Flight Brick

24. コンポーネントフレームワークでアプリを開発
アプリケーションとは
車のようなもの
コンポーネントを
組み立てて作る

25. 互いの仕様に沿ってコンポーネントを組み上げる
チームが並行に
作業可能
仕様に準拠すれば
製造が高速に行える

26. コンポーネントは形を変えて再利用
既存のアプリケーション
のカスタマイズ
全く新しい
アプリケーション

27. Salesforce1自体もコンポーネントの集合体
Salesforce1は
コンポーネントベース
のモバイルアプリ
Lightning
を使ってビルド

28. Lightningコンポーネント
ポータビリティを確保し、再利用性を高める
df:camera
df:camera
camera.cmp
cameraController.js
cameraHelper.js
cameraRenderer.js
camera.css
camera.auradoc
Lightningコンポーネントはマークアップ、ビジネスロ
ジック、スタイルシート、ドキュメントなどを一つにま
とめてコンポーネント化する

29. df:camera
df:qrDecoder
Lightningコンポーネント
他のコンポーネントと組み合わせる
Lightningコンポーネントは他のコン
ポーネントを入れ子にできる
df:qrLookup

30. df:camera
df:qrDecoder
Lightningコンポーネント
コンポーネント間のイベント
df:qrLookup
df:addImage
ui:press
df:qrCodeDecoded
Lightningコンポーネント
はLightningイベントによっ
て、通信を行う

31. Demo

32. コンポーネント化が進むとどうなるか？

33. コンポーネントは再利用できる
コンポーネント間のインタフェース定義があれば、”つなげる”事が可能
SiteA 入力フォームSiteB
結果
ウィンドウ

34. Google社のPolymerデザイナー
コンポーネント間のインタフェース定義があれば、”つなげる”事が可能
Polymer Designer
https://www.polymer-project.org/tools/designer/
http://html5experts.jp/1000ch/8906/
Web Componentsが変えるWeb開発の未来 泉水翔吾（株式会社サイバーエージェント）
Google
Polymer

35. Salesforceの場合 : アプリケーションビルダー
エンタープライズ・アプリケーションをデザインする
拡張可能なデザイン用パレット
標準, 自作 , パートナーコンポーネントが表示される
複数のデバイスへ対応
レスポンシブデザインによるレイアウトの自動調整
コンポーネントストア
マーケットプレイスよりコンポーネントをダウンロード

36. Demo

37. コンポーネント + レスポンシブ = Lightning UI
次世代のWebのユーザ・インタフェース構築方法

38. まとめ
Webアプリケーションもコンポーネントを”つなげる”時代へ
次世代Webフレームワークでは、Webのコンポーネント化に力を入れている
Webは”作る” から “組み立てる” へ変貌を遂げている
これからは、”部品を作る” “つなげる”を意識してシステムを作っていくことになる
Salesforceを利用する場合、エンタープライズアプリ開発に必要な全てを用意
Google Facebook Salesforce Twitter Mozilla
Polymer React Lightning Flight Brick

39. developer.salesforce.com
Salesforce 開発者向けリソース
Salesforce Developers
http://develper.salesforce.com/jp/
Developer Editionは全て無料
今すぐサインアップ!!
Heroku
http://www.heroku.com/

40. Thank you