コンポーネントを”つなぐ”時代へ...

岡本 充洋 ディベロッパプログラムマネージャ Salesforce

コンポーネントを”つなぐ”時代へ Web&Mobileアプリ開発最新動向

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

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

@mitsuhiro

Salesforceとはエンタープライズ向け専業のクラウドベンダー 主力SaaSのSales Cloudは世界シェアNo.1 同社サービスにはHerokuやExact Target(現Marketing Cloud)などもある

53 億ドル (2014年度予測)

~8% 売上に占める割合

セールスフォース・ドットコムの歴史

CRM期CRM

営業支援

カスタマーサポート

代理店ポータル

カスタマーポータル

Platform期Platform1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014

顧客社数 1,500 3,500 5,700 8,700 13,900 20,500 29,800 41,000 55,400 72,500 92,300 100,000以上

Social Mobile

？

主力となる２つの開発プラットフォーム

従業員向けアプリを 素早く開発

顧客向けアプリを 素早く開発

Heroku Connect

素早い開発: 80% ポイント & クリック

20% コード

ビジュアル ワークフロー

データ分析Appビルダー

モバイル対応

マルチ通過 マルチ言語

セキュリティ 共有ルール

プログラミング基盤 ソーシャル 基盤

Force.comプラットフォームによる開発

Demo

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

Web開発のスキルが行かせる

ネイティブ機能へのアクセス App Storeによる配布

高度なUI

より良いパフォーマンス App Storeによる配布

Web開発のスキルが活かせる

即時のアップデート 配布に制限無し

モバイルアプリ開発におけるアプローチ方法

HybridHTML5 NativeHTML / Javascript

慣れ親しんだWebのテクノロジーを使ってアプリケーションが開発出来る

Framework JQuery MobileやSenchaなど、実績のあるモバイルに特化したフレー

ムワークを利用可能

Fastest Way 今までと何ら変わりない方法でアプリケーションを構築するだけで良い

ので学習コストが少ない

モバイルアプリ開発におけるアプローチ方法

Native API Wrappers BaaSが用意するSDKを利用してラッパー経由でアクセスするか、自身でネイティブ言語からRESTをCallする必要がある

Authentications ログイン状態を保持するため認証やセキュアトークンの管理が必要

Native Device Functions デバイスネイティブの言語で全ての機

能にアクセスできる

Push Notifications リアルタイムなアラートをモバイルデバイスに送る事ができる

Authentications ログイン状態を保持するため認証やセキュアトークンの管理が必要

HTML / Javascript 慣れ親しんだWebのテクノロジーを使ってアプリケーションが開発出来る

Native Device Functions コンテナを経由してJavascriptでデバイス固有の機能に一部アクセスできる

Push Notifications リアルタイムなアラートをモバイルデバイスに送る事ができる

Container

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

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

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

ひとつの回答 : Hybrid Appコンテナ

• コンポーネントベースの HTML5 フレームワーク • 柔軟性、拡張性を備えたインタラクション • メタデータ駆動型のレイアウト

• 予めマーケットプレイスへ登録済みのコンテナ • 暗号化、キャッシュ • ナビゲーション • デバイスの機能 • Today (カレンダー) • 写真、ファイル • 通知

HTML5でネイティブアプリをカスタマイズ

Javascriptフレームワークを使って画面を開発

APIによって クラウドへ接続

JavaScript SDK から画面遷移を制御

Demo

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

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

DOM

DOM

DOM

Javascript

Javascript

Domの更新

Domの更新

データの入力

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

未来はコンポーネントフレームワークにあり

Polymer FlightLightningReact Brick

主要なクラウドベンダーはコンポーネントフレームワークに投資している

Google Salesforce TwitterFacebook Mozilla

コンポーネントフレームワークでアプリを開発

アプリケーションとは車のようなもの

コンポーネントを組み立てて作る

互いの仕様に沿ってコンポーネントを組み上げる

チームが並行に作業可能

仕様に準拠すれば 製造が高速に行える

コンポーネントは形を変えて再利用

既存のアプリケーションのカスタマイズ

全く新しい アプリケーション

Salesforce1自体もコンポーネントの集合体

Salesforce1はコンポーネントベースのモバイルアプリ

Lightning を使ってビルド

Lightningコンポーネントポータビリティを確保し、再利用性を高める

df:camera

df:cameracamera.cmp

cameraController.js

cameraHelper.js

cameraRenderer.js

camera.css

camera.auradoc

Lightningコンポーネントはマークアップ、ビジネスロジック、スタイルシート、ドキュメントなどを一つにまとめてコンポーネント化する

df:camera

df:qrDecoder

df:qrLookup

Lightningコンポーネント他のコンポーネントと組み合わせるLightningコンポーネントは他のコンポーネントを入れ子にできる

df:camera

df:qrDecoder

df:qrLookup

Lightningコンポーネントコンポーネント間のイベント

df:addImage

df:qrCodeDecoded

ui:pressLightningコンポーネントはLightningイベントによって、通信を行う

Demo

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

コンポーネントは再利用できるコンポーネント間のインタフェース定義があれば、”つなげる”事が可能

SiteA SiteB入力フォーム

結果 ウィンドウ

Google社のPolymerデザイナーコンポーネント間のインタフェース定義があれば、”つなげる”事が可能

https://www.polymer-project.org/tools/designer/

http://html5experts.jp/1000ch/8906/Web Componentsが変えるWeb開発の未来 泉水翔吾（株式会社サイバーエージェント）

Polymer Designer

PolymerGoogle

Salesforceの場合 : アプリケーションビルダーエンタープライズ・アプリケーションをデザインする

拡張可能なデザイン用パレット標準, 自作 , パートナーコンポーネントが表示される

複数のデバイスへ対応レスポンシブデザインによるレイアウトの自動調整

コンポーネントストアマーケットプレイスよりコンポーネントをダウンロード

Demo

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

Webアプリケーションもコンポーネントを”つなげる”時代へ

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

まとめ

Polymer FlightLightningReact BrickGoogle Salesforce TwitterFacebook Mozilla

developer.salesforce.com

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

Thank you