2014年2月28日 Enterprise x HTML5 Conference 2014 企業におけるHTML5を⽤用いたスマートデバイス向けアプリ開発

1. 企業におけるHTML5を⽤用いたスマートデバイス向けアプリ
開発
2014年年2⽉月28⽇日
SAPジャパン株式会社 井⼝口和弘

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. エンタープライズアプリケーションを取り巻く環
境とSAPの取り組み

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

18. 国内初事例例から学ぶSAPUI5
株式会社クレスコ ⼩小川充 様

19. SAP Mobile Platform

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