Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
コンポーネントを”つなぐ”時代へ 
Web&Mobileアプリ開発最新動向 
岡本 充洋 
ディベロッパプログラムマネージャ 
Salesforce
Safe Harbor 
Safe harbor statement under the Private Securities Litigation Reform Act of 1995: 
! 
This presentation may c...
自己紹介 
名前 : 岡本 充洋 
所属 : 株式会社セールスフォース・ドットコム 
経歴 : JavaEEエンジニア、Eclipseプラグイン翻訳、Springユーザグループなど 
現在の仕事: Salesforce1 Platformの啓蒙...
Salesforceとは 
エンタープライズ向け専業のクラウドベンダー 
主力SaaSのSales Cloudは世界シェアNo.1 
同社サービスにはHerokuやExact Target(現Marketing Cloud)などもある 
53 ...
セールスフォース・ドットコムの歴史 
顧客社数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 ...
主力となる2つの開発プラットフォーム 
従業員向けアプリを 
素早く開発 
顧客向けアプリを 
素早く開発 
Heroku Connect
Force.comプラットフォームによる開発 
素早い開発: 
80% ポイント & クリック 
20% コード 
ビジュアル ワークフローAppビルダーデータ分析 
モバイル対応 
マルチ通過 マルチ言語 
セキュリティ 共有ルール 
プログ...
Demo
次の課題 : モバイル・アプリケーションの開発 
PCとは違ったアプローチが必要 
!
モバイルアプリ開発におけるアプローチ方法 
Web開発のスキルが行かせる 
ネイティブ機能へのアクセス 
App Storeによる配布 
高度なUI 
より良いパフォーマンス 
App Storeによる配布 
Web開発のスキルが活かせる 
即...
モバイルアプリ開発におけるアプローチ方法 
HTML5 Native Hybrid 
HTML / Javascript 
慣れ親しんだWebのテクノロジーを使っ 
てアプリケーションが開発出来る 
Fastest Way 
今までと何ら変わり...
ネイティブアプリケーション 
軽快で高速な動作、よりよいユーザエクスペリエンス 
Swiftなどのモダンプログラミング言語の登場 
CocoaPodsなどの豊富なUIライブラリ群 
Twitter Fabric等の開発をサポートするツール
HTML5 & ハイブリッドアプリケーション 
Javascript MVCフレームワークの台頭 
GUIによるクリエーター等の充実 
慣れ親しんだHTML & Javascriptでの開発 
Cordovaの成熟
課題 
ネイティブアプリケーション 
• 開発、リリースを行うのに時間がかかる 
• 開発者の数が少ない 
HTML5アプリケーション 
• ユーザへの到達率 
• プッシュ通知等のネイティブ系機能へのアクセスが制限される 
ハイブリッド 
•...
ひとつの回答 : Hybrid Appコンテナ 
• コンポーネントベースの 
HTML5 フレームワーク 
• 柔軟性、拡張性を備えた 
インタラクション 
• メタデータ駆動型の 
レイアウト 
• 予めマーケットプレイス 
へ登録済みのコ...
HTML5でネイティブアプリをカスタマイズ 
Javascriptフレームワークを 
使って画面を開発 
APIによって 
クラウドへ接続 
JavaScript SDK 
から画面遷移を制御
Demo
更なる課題 : 開発生産性と再利用性 
Webアプリケーションを新たな領域へ 
!
Webアプリケーションの再利用の課題 
HTMLのコードとJavascriptの分離が難しく、スパゲティ化 
コンポーネント化の決められた仕様も無く、各人が独自に設計 
DOM 
DOM 
DOM 
Javascript 
Javascript...
解決策 : コンポーネントフレームワーク 
Webアプリを部品化し、再利用可能にする
未来はコンポーネントフレームワークにあり 
主要なクラウドベンダーはコンポーネントフレームワークに投資している 
Google Facebook Salesforce Twitter Mozilla 
Polymer React Lightni...
コンポーネントフレームワークでアプリを開発 
アプリケーションとは 
車のようなもの 
コンポーネントを 
組み立てて作る
互いの仕様に沿ってコンポーネントを組み上げる 
チームが並行に 
作業可能 
仕様に準拠すれば 
製造が高速に行える
コンポーネントは形を変えて再利用 
既存のアプリケーション 
のカスタマイズ 
全く新しい 
アプリケーション
Salesforce1自体もコンポーネントの集合体 
Salesforce1は 
コンポーネントベース 
のモバイルアプリ 
Lightning 
を使ってビルド
Lightningコンポーネント 
ポータビリティを確保し、再利用性を高める 
df:camera 
df:camera 
camera.cmp 
cameraController.js 
cameraHelper.js 
cameraRend...
df:camera 
df:qrDecoder 
Lightningコンポーネント 
他のコンポーネントと組み合わせる 
Lightningコンポーネントは他のコン 
ポーネントを入れ子にできる 
df:qrLookup
df:camera 
df:qrDecoder 
Lightningコンポーネント 
コンポーネント間のイベント 
df:qrLookup 
df:addImage 
ui:press 
df:qrCodeDecoded 
Lightningコ...
Demo
コンポーネント化が進むとどうなるか?
コンポーネントは再利用できる 
コンポーネント間のインタフェース定義があれば、”つなげる”事が可能 
SiteA 入力フォームSiteB 
結果 
ウィンドウ
Google社のPolymerデザイナー 
コンポーネント間のインタフェース定義があれば、”つなげる”事が可能 
Polymer Designer 
https://www.polymer-project.org/tools/designer/...
Salesforceの場合 : アプリケーションビルダー 
エンタープライズ・アプリケーションをデザインする 
拡張可能なデザイン用パレット 
標準, 自作 , パートナーコンポーネントが表示される 
複数のデバイスへ対応 
レスポンシブデザイ...
Demo
コンポーネント + レスポンシブ = Lightning UI 
次世代のWebのユーザ・インタフェース構築方法
まとめ 
Webアプリケーションもコンポーネントを”つなげる”時代へ 
次世代Webフレームワークでは、Webのコンポーネント化に力を入れている 
Webは”作る” から “組み立てる” へ変貌を遂げている 
これからは、”部品を作る” “つな...
developer.salesforce.com 
Salesforce 開発者向けリソース 
Salesforce Developers 
http://develper.salesforce.com/jp/ 
Developer Editi...
Thank you
コンポーネントを”つなぐ”時代へ Web&Mobileアプリ開発最新動向
コンポーネントを”つなぐ”時代へ Web&Mobileアプリ開発最新動向
Upcoming SlideShare
Loading in …5
×

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

1,182 views

Published on

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

Published in: Technology

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

  1. 1. コンポーネントを”つなぐ”時代へ Web&Mobileアプリ開発最新動向 岡本 充洋 ディベロッパプログラムマネージャ Salesforce
  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 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.
  3. 3. 自己紹介 名前 : 岡本 充洋 所属 : 株式会社セールスフォース・ドットコム 経歴 : JavaEEエンジニア、Eclipseプラグイン翻訳、Springユーザグループなど 現在の仕事: Salesforce1 Platformの啓蒙、ブランディングやイベントプランニング @mitsuhiro
  4. 4. Salesforceとは エンタープライズ向け専業のクラウドベンダー 主力SaaSのSales Cloudは世界シェアNo.1 同社サービスにはHerokuやExact Target(現Marketing Cloud)などもある 53 億ドル (2014年度予測) ~8% 売上に 占める割合
  5. 5. セールスフォース・ドットコムの歴史 顧客社数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 ?
  6. 6. 主力となる2つの開発プラットフォーム 従業員向けアプリを 素早く開発 顧客向けアプリを 素早く開発 Heroku Connect
  7. 7. Force.comプラットフォームによる開発 素早い開発: 80% ポイント & クリック 20% コード ビジュアル ワークフローAppビルダーデータ分析 モバイル対応 マルチ通過 マルチ言語 セキュリティ 共有ルール プログラミング基盤ソーシャル 基盤
  8. 8. Demo
  9. 9. 次の課題 : モバイル・アプリケーションの開発 PCとは違ったアプローチが必要 !
  10. 10. モバイルアプリ開発におけるアプローチ方法 Web開発のスキルが行かせる ネイティブ機能へのアクセス App Storeによる配布 高度なUI より良いパフォーマンス App Storeによる配布 Web開発のスキルが活かせる 即時のアップデート 配布に制限無し
  11. 11. モバイルアプリ開発におけるアプローチ方法 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 リアルタイムなアラートをモバイル デバイスに送る事ができる
  12. 12. ネイティブアプリケーション 軽快で高速な動作、よりよいユーザエクスペリエンス Swiftなどのモダンプログラミング言語の登場 CocoaPodsなどの豊富なUIライブラリ群 Twitter Fabric等の開発をサポートするツール
  13. 13. HTML5 & ハイブリッドアプリケーション Javascript MVCフレームワークの台頭 GUIによるクリエーター等の充実 慣れ親しんだHTML & Javascriptでの開発 Cordovaの成熟
  14. 14. 課題 ネイティブアプリケーション • 開発、リリースを行うのに時間がかかる • 開発者の数が少ない HTML5アプリケーション • ユーザへの到達率 • プッシュ通知等のネイティブ系機能へのアクセスが制限される ハイブリッド • 開発、リリースを行うのに時間がかかる
  15. 15. ひとつの回答 : Hybrid Appコンテナ • コンポーネントベースの HTML5 フレームワーク • 柔軟性、拡張性を備えた インタラクション • メタデータ駆動型の レイアウト • 予めマーケットプレイス へ登録済みのコンテナ • 暗号化、キャッシュ • ナビゲーション • デバイスの機能 • Today (カレンダー) • 写真、ファイル • 通知
  16. 16. HTML5でネイティブアプリをカスタマイズ Javascriptフレームワークを 使って画面を開発 APIによって クラウドへ接続 JavaScript SDK から画面遷移を制御
  17. 17. Demo
  18. 18. 更なる課題 : 開発生産性と再利用性 Webアプリケーションを新たな領域へ !
  19. 19. Webアプリケーションの再利用の課題 HTMLのコードとJavascriptの分離が難しく、スパゲティ化 コンポーネント化の決められた仕様も無く、各人が独自に設計 DOM DOM DOM Javascript Javascript データの入力 Domの更新 Domの更新
  20. 20. 解決策 : コンポーネントフレームワーク Webアプリを部品化し、再利用可能にする
  21. 21. 未来はコンポーネントフレームワークにあり 主要なクラウドベンダーはコンポーネントフレームワークに投資している Google Facebook Salesforce Twitter Mozilla Polymer React Lightning Flight Brick
  22. 22. コンポーネントフレームワークでアプリを開発 アプリケーションとは 車のようなもの コンポーネントを 組み立てて作る
  23. 23. 互いの仕様に沿ってコンポーネントを組み上げる チームが並行に 作業可能 仕様に準拠すれば 製造が高速に行える
  24. 24. コンポーネントは形を変えて再利用 既存のアプリケーション のカスタマイズ 全く新しい アプリケーション
  25. 25. Salesforce1自体もコンポーネントの集合体 Salesforce1は コンポーネントベース のモバイルアプリ Lightning を使ってビルド
  26. 26. Lightningコンポーネント ポータビリティを確保し、再利用性を高める df:camera df:camera camera.cmp cameraController.js cameraHelper.js cameraRenderer.js camera.css camera.auradoc Lightningコンポーネントはマークアップ、ビジネスロ ジック、スタイルシート、ドキュメントなどを一つにま とめてコンポーネント化する
  27. 27. df:camera df:qrDecoder Lightningコンポーネント 他のコンポーネントと組み合わせる Lightningコンポーネントは他のコン ポーネントを入れ子にできる df:qrLookup
  28. 28. df:camera df:qrDecoder Lightningコンポーネント コンポーネント間のイベント df:qrLookup df:addImage ui:press df:qrCodeDecoded Lightningコンポーネント はLightningイベントによっ て、通信を行う
  29. 29. Demo
  30. 30. コンポーネント化が進むとどうなるか?
  31. 31. コンポーネントは再利用できる コンポーネント間のインタフェース定義があれば、”つなげる”事が可能 SiteA 入力フォームSiteB 結果 ウィンドウ
  32. 32. Google社のPolymerデザイナー コンポーネント間のインタフェース定義があれば、”つなげる”事が可能 Polymer Designer https://www.polymer-project.org/tools/designer/ http://html5experts.jp/1000ch/8906/ Web Componentsが変えるWeb開発の未来 泉水翔吾(株式会社サイバーエージェント) Google Polymer
  33. 33. Salesforceの場合 : アプリケーションビルダー エンタープライズ・アプリケーションをデザインする 拡張可能なデザイン用パレット 標準, 自作 , パートナーコンポーネントが表示される 複数のデバイスへ対応 レスポンシブデザインによるレイアウトの自動調整 コンポーネントストア マーケットプレイスよりコンポーネントをダウンロード
  34. 34. Demo
  35. 35. コンポーネント + レスポンシブ = Lightning UI 次世代のWebのユーザ・インタフェース構築方法
  36. 36. まとめ Webアプリケーションもコンポーネントを”つなげる”時代へ 次世代Webフレームワークでは、Webのコンポーネント化に力を入れている Webは”作る” から “組み立てる” へ変貌を遂げている これからは、”部品を作る” “つなげる”を意識してシステムを作っていくことになる Salesforceを利用する場合、エンタープライズアプリ開発に必要な全てを用意 Google Facebook Salesforce Twitter Mozilla Polymer React Lightning Flight Brick
  37. 37. developer.salesforce.com Salesforce 開発者向けリソース Salesforce Developers http://develper.salesforce.com/jp/ Developer Editionは全て無料 今すぐサインアップ!! Heroku http://www.heroku.com/
  38. 38. Thank you

×