公司における贬罢惭尝5を?いたスマートデバイス向けアプリ开発
- 2. アジェンダ n?? エンタープライズアプリケーションを取り巻く環境と SAPの取り組み n?? SAPUI5 n?? 国内初事例例から学ぶSAP ? ?UI5 （株式会社クレスコ ??小川充 ?様より） n?? SAP ?Mobile ?Platform ?? 2013 SAP AG or an SAP affiliate company. All rights reserved. 2
- 4. コンシューマライゼーションの浸透 企業向けソリューションでも消費者向けのエクスペリエンスは当たり前 企業向けエクスペリエンスの変化 複雑で多機能のエクスペリエンスは、シンプルで、直観的で、 モバイルで操作できるものに置き換えるべき ?? 2013 SAP AG or an SAP affiliate company. All rights reserved. 4
- 5. その?一?方??? 要件と技術要素は複雑になっている n?? 様々なブラウザとデバイスへの対応 n?? バックエンド接続の容易易性、柔軟性 n?? オープンソースの台頭 n?? スマートフォン?タブレット固有要件への 対応（プッシュ通知、オフライン、セキュリ ティなど） エンタープライズレベルの オープンソース活?用が求められる ?? 2013 SAP AG or an SAP affiliate company. All rights reserved. 5
- 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. 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. 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. 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. より包括的なモバイルへの対応?～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. モバイルプラットフォームの価値 ??? ビジネス、コンシューマアプリ ??? デバイスプラットフォーム ?(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. 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. SAP ?UI5
- 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. 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. SAPUI5関連情報の取得 https://tools.hana.ondemand.com/ ?? 2013 SAP AG or an SAP affiliate company. All rights reserved. 16
- 17. SAPUI5はオープンソース、OpenUI5としても提供されています http://sap.github.io/openui5/index.html ?? 2013 SAP AG or an SAP affiliate company. All rights reserved. 17
- 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. AppBuilder ブラウザベースのWYSIWYG ?HTML5アプリ開発ツール ドラッグ＆ドロップ での操作性 1クリックでCordova プロジェクト?生成や SMP ?へデプロイ 数分のクリックで アプリ開発 事前定義された アプリケーション テンプレート SAPUI5コントロール の活?用 オープンなHTML5ツールと使い易易いWebデザインツールの融合 ?? 2013 SAP AG or an SAP affiliate company. All rights reserved. 21
- 22. AppBuilderはデザインしながら、コード?生成/編集が可能 ?生成されたイベント ハンドラのコード 簡単に参照できるエン タープライズデータ ユーザが定義し たイベント アプリ管理理のための SMP3サービス ?? 2013 SAP AG or an SAP affiliate company. All rights reserved. 22
- 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. “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. 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. 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. OData ?Model ?Editor ?– ?モバイルアプリ?用のデータモデルを構築 ?? 2013 SAP AG or an SAP affiliate company. All rights reserved. 27
- 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. 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. ? 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