企業におけるHTML5を⽤いたスマートデバイス向けアプリ開発

2,460 views

Published on

2014年2月28日
Enterprise x HTML5 Conference 2014

企業におけるHTML5を⽤用いたスマートデバイス向けアプリ開発

Published in: Mobile
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,460
On SlideShare
0
From Embeds
0
Number of Embeds
73
Actions
Shares
0
Downloads
56
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

企業におけるHTML5を⽤いたスマートデバイス向けアプリ開発

  1. 1. 企業におけるHTML5を⽤用いたスマートデバイス向けアプリ 開発 2014年年2⽉月28⽇日 SAPジャパン株式会社  井⼝口和弘
  2. 2. アジェンダ n  エンタープライズアプリケーションを取り巻く環境と SAPの取り組み n  SAPUI5 n  国内初事例例から学ぶSAP    UI5 (株式会社クレスコ  ⼩小川充  様より) n  SAP  Mobile  Platform ©  2013 SAP AG or an SAP affiliate company. All rights reserved. 2
  3. 3. エンタープライズアプリケーションを取り巻く環 境とSAPの取り組み
  4. 4. コンシューマライゼーションの浸透 企業向けソリューションでも消費者向けのエクスペリエンスは当たり前 企業向けエクスペリエンスの変化 複雑で多機能のエクスペリエンスは、シンプルで、直観的で、 モバイルで操作できるものに置き換えるべき ©  2013 SAP AG or an SAP affiliate company. All rights reserved. 4
  5. 5. その⼀一⽅方・・・ 要件と技術要素は複雑になっている n  様々なブラウザとデバイスへの対応 n  バックエンド接続の容易易性、柔軟性 n  オープンソースの台頭 n  スマートフォン・タブレット固有要件への 対応(プッシュ通知、オフライン、セキュリ ティなど) エンタープライズレベルの オープンソース活⽤用が求められる ©  2013 SAP AG or an SAP affiliate company. All rights reserved. 5
  6. 6. SAP Corporate Strategy 2014 ”Mobile First” Mobile First Experience Applications Analytics Partners & Startups SAP HANA Platform 1,200 2,000 3,000 4,000 HANA startups Software & tech partners Service partners Solution resellers ©  2013 SAP AG or an SAP affiliate company. All rights reserved. 6
  7. 7. SAPのUI戦略略 既存アプリケーション 利利⽤用率率率/導⼊入率率率 新規アプリケーション NEW ©  2013 SAP AG or an SAP affiliate company. All rights reserved. SAP Top  use   Fiori scenarios Core   修正 use RENEW ツールで修正 例例:SAP  Personas ENABLE 7
  8. 8. SAPのHTML5への取り組み UI  Development  Toolkit  for  HTML5  (SAPUI5) SAPUI5  はクライアントサイドのHTML5と  JavaScriptベースのSAPシステムのデータ を利利⽤用するために最適化されたライブラリとプログラミングモデルです。 主な機能 Ÿ  デスクトップ、モバイル⽤用のチャートを含む 多様なコントロールセット Ÿ  アプリケーション開発環境 Ÿ  Odataとの連携・統合 Ÿ  カスタムコントロール⽤用の拡張機能 Ÿ  オープンソースフレームワークとWeb標準 技術の採⽤用 Ÿ  Web開発スキル  (HTML,  CSS3,  JS)を持っ た開発者向け     ©  2013 SAP AG or an SAP affiliate company. All rights reserved. 8
  9. 9. SAPUI5ベースのモバイル/PCからアクセスできるWebアプリ SAP  Fiori   課題&要望 Ÿ  SAP  GUI  for  Windowsを利利⽤用しているが、もっと気軽にいつ でもどこでも利利⽤用できるようにしたい Ÿ  SAPシステムをモバイル化したいが、従業員が全員がモバイル を持っていない Ÿ  SAPモバイルアプリケーションをカスタマイズしたいが、ソー スコード⼊入⼿手⼿手続きが煩雑で⾃自社でのカスタマイズも困難 Ÿ  アプリケーションを複数利利⽤用するのではなく、⼀一画⾯面でシンプ ルに利利⽤用したい 導⼊入メリット •  SAPUI5(HTML5)ベースのアプリケーションなので、デスク トップ、タブレット、スマートフォンからアクセス可能 •  ソースコードを提供。EclipseからSAPUI5のプラグインをダ ウンロードして、⾃自由にカスタマイズ、アップロードして利利 ⽤用可能 •  Home画⾯面から、シナリオごとのタイルでアプリを切切り替え ©  2013 SAP AG or an SAP affiliate company. All rights reserved. 9
  10. 10. より包括的なモバイルへの対応〜~SAP  Mobile  Platformとは〜~ エンド・ツー・エンドのモバイルバイルアプリ開発プラットフォーム l  主要なOSやデバイスに対応 l  エンタープライズ向けのセキュリティ 対応 共通フレームワークと開発ツール l  ネイティブ、ハイブリッドWebなど 多様な開発⽅方法に対応 l  オフラインでの同期処理理 SAP  Mobile  Platform l  オンプレミス、クラウドでの展開を サポート コアサービス  /  バックエンド ©  2013 SAP AG or an SAP affiliate company. All rights reserved. l  SAP,  SAP以外システム、クラウドな ど幅広いバックエンドに接続 10
  11. 11. モバイルプラットフォームの価値 Ÿ  ビジネス、コンシューマアプリ Ÿ  デバイスプラットフォーム  (iOS,  Android,   Windows,  Windows  Phone,  BlackBerryなど) Ÿ  ネイティブ/HTML5/UIフレームワーク 20% 80% ©  2013 SAP AG or an SAP affiliate company. All rights reserved. SAP  Mobile  Platformの付加価値 Ÿ  認証機能 Ÿ  ビジネスアプリケーション統合 Ÿ  セキュリティ  –  デバイス,  データ,  コンテ ンツ Ÿ  オフラインアクセスと同期 Ÿ  管理理機能 Ÿ  アプリのバージョン管理理とライフサイクル 管理理 Ÿ  プッシュ通知 Ÿ  プロキシー Ÿ  レポーティングと分析 Ÿ  複数プラットフォームサポート 11
  12. 12. SAPUI5とSAP  Mobile  Platformの位置付け   SAPUI5はSAPアプリ開発のためのHTML5  UI ライブラリ。様々なSAPアプリケーションで利利⽤用 されている。オープンな技術を採⽤用しているので、 SAP以外のデータソースとの連携も可能。 SAP  Mobile  Platformは様々なモバイルアプリを開発、 運⽤用するためのプラットフォーム。HTML5(Cordova) アプリもサポートし、SAPUI5や他社HTMLライブラリ も使⽤用可能。 モバイルデバイス モバイルアプ(Cordova) ブラウザ Webアプリ Webアプリ Webアプリ モバイルアプ(Cordova) 他社ライブラリ SAPUI5ライブラリ SAPUI5ライブラリ Webアプリ SAP  Mobile  Platform Odata Odata Odata SAPUI5ライブラリ SAPシステム (オンプレミス) Webアプリ SAPUI5ライブラリ SAPシステム (クラウド) Webアプリ SAPUI5ライブラリ Gateway/OData Odata Webアプリ 他社ライブラリ Odata Odata,SOAP など Webアプリ SAPUI5ライブラリ Non-‐‑‒SAP システム ©  2013 SAP AG or an SAP affiliate company. All rights reserved. SAPシステム (オンプレミス) SAPシステム (クラウド) Non-‐‑‒SAP システム 12
  13. 13. SAP  UI5
  14. 14. SAP  UI5  の構成 Ÿ  SAP  UI5  アプリケーションはブラウザ もしくはブラウザコンポーネント上で 動作 Browser SAP UI5 Application Ÿ  The  start  page  of  a  SAP  UI5アプリの 開始ページはHTMLページになる   (例例:  index.html) Ÿ  SAP  UI5  アプリはアプリケーションの 画⾯面とロジックに  Model-‐‑‒View-‐‑‒ Controller  コンセプトを採⽤用 Ÿ  SAP  UI5  アプリの構成要素 –       標準SAP  UI5  ライブラリ –       カスタムファイル  (Javascript,  XML,   CSS,..) ©  2013 SAP AG or an SAP affiliate company. All rights reserved. index.html Models Models Controllers Views Views Other components (formatter, app,…) SAP UI5 Libraries 14
  15. 15. UI5  コントロールライブラリ例例 Ÿ sap.ui.commons 入力フィールドやボダンなどのコントロール Ÿ sap.ui.table テーブルコントロール ©  2013 SAP AG or an SAP affiliate company. All rights reserved. Ÿ sap.ui.ux3 UX3フレームワーク Ÿ sap.m モバイルデバイス用のコントロール 15
  16. 16. SAPUI5関連情報の取得 https://tools.hana.ondemand.com/ ©  2013 SAP AG or an SAP affiliate company. All rights reserved. 16
  17. 17. SAPUI5はオープンソース、OpenUI5としても提供されています http://sap.github.io/openui5/index.html ©  2013 SAP AG or an SAP affiliate company. All rights reserved. 17
  18. 18. 国内初事例例から学ぶSAPUI5 株式会社クレスコ  ⼩小川充  様
  19. 19. SAP  Mobile  Platform
  20. 20. SAP  Mobile  Platform  3.0  –  業界標準を採⽤用 HTML5 OSGi  Spring SMP3で利利⽤用できる Webの開発ツールを提供、 サードパーティ開発ツールの サポート Javaモジュールの動的追加や バージョン管理理、実⾏行行を管理理 するための基盤システム OData バックエンドや フロント開発から切切り離離した Webデータプロトコルによる データモデル開発 ©  2013 SAP AG or an SAP affiliate company. All rights reserved. HTTP  REST 標準プロトコルによるSDKと サーバーの通信、サーバー機 能のREST  API提供 Cordova クロスプラットフォーム開発 を 可能にするフレームワーク。 SAP提供のプラグインと 他のサードパーティからの プラグインを結合 20
  21. 21. AppBuilder ブラウザベースのWYSIWYG  HTML5アプリ開発ツール ドラッグ&ドロップ での操作性 1クリックでCordova プロジェクト⽣生成や SMP  へデプロイ 数分のクリックで アプリ開発 事前定義された アプリケーション テンプレート SAPUI5コントロール の活⽤用 オープンなHTML5ツールと使い易易いWebデザインツールの融合 ©  2013 SAP AG or an SAP affiliate company. All rights reserved. 21
  22. 22. AppBuilderはデザインしながら、コード⽣生成/編集が可能 ⽣生成されたイベント ハンドラのコード 簡単に参照できるエン タープライズデータ ユーザが定義し たイベント アプリ管理理のための SMP3サービス ©  2013 SAP AG or an SAP affiliate company. All rights reserved. 22
  23. 23. Cordova対応 SAP  Mobile  Platform機能を利利⽤用できる提供の7個のプラグインを提供 3rd  パーティ  プラグイン 3rdパーティ  プラグイン HTTPS(認証)プロキシー Cordova 暗号化ストレージ ロギング ログオン プッシュ アプリ設定 ©  2013 SAP AG or an SAP affiliate company. All rights reserved. SAP  Mobile  Platform                  プラグ イン アプリ更更新 23
  24. 24. “Kapsel”  –  SAPの独⾃自プラグインを組込んだCordovaベースのHTML5 コンテナ プラグイ 説明 ン Kapselアプリケーションで稼働しているWebアプリケーションコンテンツにサーバベースの更更新を可能にする。HWCによって提供さ アプリ更更新 れていたライフサイクル管理理のいくつかを複製できる。Kapselアプリは現在は単⼀一Webアプリのみ含む。 このプラグインはアプリケーションの代わりにHTTPとHTTPSリクエストのプロキシーとして利利⽤用される。 HTTPS プラグインはユーザが関与することなく、Webリソースを呼び出すことにより返されたSSL証明書を受け⼊入れるプロセスを⾃自動化する。 プロキシー HTTPSリクエストは認証、基本認証、または証明書などを必要とせずに処理理できる。サポートされている証明書ソース:ファイル、シ ロギング ステムキーマネージャー、Afaria SMPログインAPIに関連するCordovaプラグイン  ラッパーを提供する。 ログオン Mobile  Application  Framework  のログオンマネージャーコンポーネントに関連するCordovaプラグイン  ラッパーを取り込める。アプ リケーションログインフォーム⽤用のUIを提供する、またSMPサーバにロギングする時の全ての処理理プロセスを管理理する。 プッシュ SMPサーバベースのプッシュ通知に関連するCordovaプラグイン  ラッパーを提供する。このプラグインにより、アプリケーションを プッシュ通知で登録したり、プッシュ通知を処理理したり、プッシュ通知を受け取ったのをきっかけにして、ローカルのアプリケーショ ンUIを更更新することが可能である。 暗号化 W3C  WebストレージAPIの⾮非同期インターフェースを取り込める。またストレージへ書き込む暗号化データのメカニズムも提供する。 ストレージ アプリケーションがサーバでアプリ設定を配信する機能を提供する。これにより、アプリケーションは後続で利利⽤用するためのデバイス アプリ設定 やユーザ設定を保存できる。 SAP  Mobile  Platform ©  2013 SAP AG or an SAP affiliate company. All rights reserved. 24
  25. 25. ODataによるデータモデリング・異異種バックエンドとの統合 l  SAP  Mobile  Platform  3.0か らバックエンドのデータモデリ ングでoDataをサポート l  SAPシステムなどのoDataの データソースを提供しているシ ステムはSAP  Mobile   Platformへ直接接続 l  oData以外のバックエンド (SOAP,  JDBC,  JPAなど)の場 合は、Gatewayを介してSAP   Mobile  Platformへ接続 OData SAP  Mobile  Platform Gateway  Java* OData以外の JDBC REST  サービス SOAP SAPやSAP以外のバックエンド ©  2013 SAP AG or an SAP affiliate company. All rights reserved. JPA *Gateway  Javaはデータ統合機能を提供 またSAP  Mobile  Platformと同じサーバで実⾏行行 25
  26. 26. Odataを活⽤用して異異なるテクノロジーを橋渡し OData  –  Open  Data  Protocol Ÿ  HTTPベースのデータサービス Ÿ  URIを利利⽤用してリソース(デー タ)を識識別 Ÿ  HTTP動詞を利利⽤用してオペレー ションを実⾏行行 ODataはHTTPを介して、 CRUD(Create,  Read,  Update,  Delete)とクエリを実⾏行行OData   Atom  (XML)  or  JSON  Results Tristen: 最近知識識習得したモバイル開 発者。 ⼤大学を卒業したばかりの若若者。 ©  2013 SAP AG or an SAP affiliate company. All rights reserved. 例例えるならば ODataはODBC の縮⼩小版または Web版のJDBC のようなもの Servic e   Provid er Resource s,  e.g.   SAP  ERP Odata  実⾏行行ランタイ ム Bob: SAPの開発経験者。 20年年間、ABAPの開発を経験。 26
  27. 27. OData  Model  Editor  –  モバイルアプリ⽤用のデータモデルを構築 ©  2013 SAP AG or an SAP affiliate company. All rights reserved. 27
  28. 28. SAP App Builder/ SAP NetWeaver GWPAのダウンロード https://tools.hana.ondemand.com/ ©  2013 SAP AG or an SAP affiliate company. All rights reserved. 28
  29. 29. SAP  Mobile  PlatformとSAPUI5 デモンストレーション SE80/  SAP  NetWeaver   GWPA SAP  Management   Cockpit SAP  AppBuilder   (Cordova)/ サードパーティツール 開 発 oData定義 ラ ン タ イ ム oData接続・アプリ定義 アプリ開発・デプロイ アプリ (HTML5) OData SAP  ERP  +NetWeaver  Gateway ©  2013 SAP AG or an SAP affiliate company. All rights reserved. Connection SAP  Mobile  Platform  3.0 アプリ デバイス(iOS/Android) 29
  30. 30. © 2013 SAP AG or an SAP affiliate company. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. National product specifications may vary. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty. SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries. Please see http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional trademark information and notices. ©  2013 SAP AG or an SAP affiliate company. All rights reserved. 30

×