国内初事例に学ぶSAPUI5

平成26年2月28日(金)

技術研究所
html5jエンタープライズ部 小川充
自己紹介

小川 充(おがわ みつる)!
フロントエンジニア!
株式会社クレスコ 技術研究所
プロフィール

2012年よりHTML5の可能性に魅了されてフロントエンジニアへ転身。それ以来、エン
タープライズ領域でのHTML5本格適用を見据えて、システム開発の現場と進化するフロ
ントエンド技術をいかに融合させるかをテーマに社内外で活動している。
html5jエンタープライズ部!
参加!
コミュニティ

• 5,500名を有する国内最大のオープンWeb技術者コミュニティ(html5j)の中から、高い知識を有したSI所属のフロントエンジニ
アが集結したサブグループ!
• 2013年は、Microsoft、Oracle、XenophyなどWeb技術の発展に貢献する団体/企業などと巻き込み10回以上のイベントを開催、高
い集客力と3割近いリピータ率を誇る。

•2013年11月 JJUG(日本Javaユーザグループ)CCC Fall 2013!

講演、その他

• 2014年2月 Developer Summit 2014 Enterprise TED!
• その他、Javascriptフレームワークなどのオープンソースドキュメントの翻訳多数

All Rights Reserved. Copyright ⓒ
弊社紹介(ちょっとだけ)
株式会社クレスコ

SIerです。最近にわかにBTL(Beacon)で注目されています。

All Rights Reserved. Copyright ⓒ
構築時の苦労話をふまえて、!
SAPユーザがSAPUI5を使うべき理由!
についてお話します。
今日は!
オープンな立場です

All Rights Reserved. Copyright ⓒ
事例紹介

All Rights Reserved. Copyright ⓒ
またまた少し宣伝・・・

2014/02/12!
プレスリリース
http://www.cresco.co.jp/news/newsr/2014/140212_corp.pdf

All Rights Reserved. Copyright ⓒ
事例紹介
システム構成
クライアント

サーバー

SAP
NetWeaver !
Gateway

!

SAP CRM

外回りの営業担当者が!
帰社する時間を省きたい!
既存SAP CRM!
デスクトップ画面をiPadへ移植

画面イメージ

機能!
登録、変更、検索、照会

All Rights Reserved. Copyright ⓒ
開発秘話(苦労話)

All Rights Reserved. Copyright ⓒ
実は、SAPUI5はオープンソースの集合体
様々なオープンソースのプロダクトを統合!

jQueryベースなので!

プログラム用の統一インターフェースを提供

そこまで難しくない!
と思った。!
(第一印象)

SAPUI5

jQuery
D3.js

URI.js

jQuery Mobile

jQueryUI

requireJS

handlebars.js

DataJS

Zynga Scroller
punycode.js

sinon.js

crossroads.js
MobiScroll

LESS
etc…

All Rights Reserved. Copyright ⓒ
開発秘話(苦労話1)

できることが!

SAPUI5の!

多すぎて迷う

独自の世界観

Javascriptの!

使いこなすまでの!

実装量が多い

道のりが長い

All Rights Reserved. Copyright ⓒ
開発秘話(苦労話2)

iOS7のため途中で!
バージョンアップ!!
1.14▶︎1.18

バグもそれなりに!
踏みました

All Rights Reserved. Copyright ⓒ
開発秘話(苦労話3)

公式ドキュメント

SCNでの問い合わせ

答えが見つからないこともしばしば・・・

All Rights Reserved. Copyright ⓒ
SAPUI5導入時の課題
日本語の情報量が増えると!
状況が変わると思います!

圧倒的!
ボリューム感
使いこなせると!
いい感じなんだけど・・・

発展途上

日本語情報!
不足

習得コストが高く、扱いも難しい。!
扱える技術者が限られているという課題
All Rights Reserved. Copyright ⓒ
ここであきらめない!!!
SAPUI5を使うと!
どんな素晴らしい未来があるのか?
未来の話をしよう

All Rights Reserved. Copyright ⓒ
マッシュアップがもたらす無限の可能性
クロスデバイス・クロスプラットフォーム対応

訪問先
案内してくれる!
なんて安心

SAPUI5
SAP NetWeaver Gateway

ERP

CRM

様々なWebサービスを組み合わせたマッシュアップ開発が可能となり、!
業務アプリケーションに無限の可能性を与える。
All Rights Reserved. Copyright ⓒ
マッシュアップがもたらす無限の可能性
クロスデバイス・クロスプラットフォーム対応

訪問先
案内してくれる!
なんて安心

オープンソース!
の組み合わせでも!

実現可能

SAPUI5
SAP NetWeaver Gateway

ERP

CRM

様々なWebサービスを組み合わせたマッシュアップ開発が可能となり、!
業務アプリケーションに無限の可能性を与える。
All Rights Reserved. Copyright ⓒ
では、何故!
オープンソースの組み合わせではなく!
あえてSAPUI5を使うべきなのか?

All Rights Reserved. Copyright ⓒ
エンタープライズアプリケーションの特性
未来は予測で
きない

• エンタープライズアプリ
ケーションは使用期間が
長い!

!

• その間に様々な環境の変
化に対応する必要がある。

!
!

• もちろん安定稼働するこ
とは必須。!

!
今だからこそ、求められるもの!
バチカンコンクラーベ 8年前と現在の比較(NBC NEWS)

安定・持続可能
All Rights Reserved. Copyright ⓒ
オープンソースはすべて自己責任
Webアプリケーション

ビジネスロジック

オープンソース群!
jQuery!
Backbone!
etc…
Ajaxを使った独自方式

バックエンドシステム!
JAX-RS!
Struts!
etc…

All Rights Reserved. Copyright ⓒ
オープンソースはすべて自己責任
Webアプリケーション

ビジネス環境の変化!
法改正

ビジネスロジック

HTML5の動き!

オープンソース群!

新デバイスの登場!
クロスデバイス・クロス
プラットフォーム

jQuery!
Backbone!
etc…
Ajaxを使った独自方式

クラウド化!
インメモリ化!
バージョンアップ!
OS入れ替え

バックエンドシステム!
JAX-RS!
Struts!
etc…

All Rights Reserved. Copyright ⓒ
オープンソースはすべて自己責任
Webアプリケーション

自己責任

ビジネス環境の変化!
法改正

ビジネスロジック

HTML5の動き!

オープンソース群!

新デバイスの登場!
クロスデバイス・クロス
プラットフォーム

!

jQuery!
Backbone!
etc…
Ajaxを使った独自方式

クラウド化!
インメモリ化!
バージョンアップ!
OS入れ替え

バックエンドシステム!
JAX-RS!
Struts!
etc…

All Rights Reserved. Copyright ⓒ
オープンソースはすべて自己責任
Webアプリケーション

自己責任

ビジネス環境の変化!
法改正

ビジネスロジック

塩漬け!
技術的負債!

HTML5の動き!
新デバイスの登場!
クロスデバイス・クロス
プラットフォーム

オープンソース群!

!

見積もりコスト増

jQuery!
Backbone!
etc…
Ajaxを使った独自方式

クラウド化!
インメモリ化!
バージョンアップ!
OS入れ替え

バックエンドシステム!
JAX-RS!
Struts!
etc…

All Rights Reserved. Copyright ⓒ
SAPUI5の場合
Webアプリケーション

ビジネス環境の変化!
法改正

ビジネスロジック

HTML5の動き!

オープンソース群!

新デバイスの登場!
クロスデバイス・クロス
プラットフォーム

jQuery!
Backbone!
etc…
Ajaxを使った独自方式

クラウド化!
インメモリ化!
バージョンアップ!
OS入れ替え

バックエンドシステム!
JAX-RS!
Struts!
etc…

All Rights Reserved. Copyright ⓒ
SAPUI5の場合
Webアプリケーション

ビジネス環境の変化!
法改正

ビジネスロジック

HTML5の動き!

SAPUI5
オープンソース群!

新デバイスの登場!
クロスデバイス・クロス
プラットフォーム

jQuery!
Backbone!
オープンソース群
etc…
Ajaxを使った独自方式

クラウド化!
インメモリ化!
バージョンアップ!
OS入れ替え

バックエンドシステム!
JAX-RS!
Struts!
etc…

All Rights Reserved. Copyright ⓒ
SAPUI5の場合
Webアプリケーション

ビジネス環境の変化!
法改正

ビジネスロジック

HTML5の動き!

SAPUI5
オープンソース群!

新デバイスの登場!
クロスデバイス・クロス
プラットフォーム

jQuery!
Backbone!
オープンソース群
etc…
Ajaxを使った独自方式

クラウド化!
インメモリ化!

Netweaver Gateway

バージョンアップ!
OS入れ替え

バックエンドシステム

All Rights Reserved. Copyright ⓒ
SAPUI5の場合
Webアプリケーション

ビジネス環境の変化!
法改正

ビジネスロジック

HTML5の動き!

SAPUI5
オープンソース群!

新デバイスの登場!
クロスデバイス・クロス
プラットフォーム

jQuery!
Backbone!
オープンソース群
etc…
Ajaxを使った独自方式
OData(標準化)!

クラウド化!
インメモリ化!

Netweaver Gateway

バージョンアップ!
OS入れ替え

バックエンドシステム

All Rights Reserved. Copyright ⓒ
SAPUI5の場合
Webアプリケーション

ビジネス環境の変化!
法改正

ビジネスロジック

HTML5の動き!

SAPUI5
オープンソース群!

新デバイスの登場!
クロスデバイス・クロス
プラットフォーム

jQuery!
Backbone!
オープンソース群
etc…
Ajaxを使った独自方式
OData(標準化)!

クラウド化!
インメモリ化!

Netweaver Gateway

バージョンアップ!
OS入れ替え

SAPUI5!
Netweaver Gateway!
で統合

バックエンドシステム

All Rights Reserved. Copyright ⓒ
SAPUI5の場合
Webアプリケーション

本来の!
ビジネス課題に!
ビジネス環境の変化!
法改正

HTML5の動き!

SAPUI5
オープンソース群!

新デバイスの登場!
クロスデバイス・クロス
プラットフォーム

集中できる

ビジネスロジック
ビジネスロジック

jQuery!
Backbone!
オープンソース群
etc…
Ajaxを使った独自方式
OData(標準化)!

クラウド化!
インメモリ化!
バージョンアップ!
OS入れ替え

バックエンドシステム!
Netweaver Gateway
JAX-RS!
Struts!
バックエンドシステム
etc…

SAPUI5!
Netweaver Gateway!
で統合

All Rights Reserved. Copyright ⓒ
まとめ
•

HTML5時代のWebアプリケーション構築においてオープンソースの活用は必須。!

•

オープンソースはすべて自己責任であることを意識するべき。

エンタープライズレベルでは!
安定・持続可能なオープンソース活用が求められる

SAPUI5なら
•

オープンソースのメリットを最大限享受しながら、フロント側はSAPUI5で統合されて
いる。!

•

SAPUI5とバックエンドのやりとりはOdataを仲介して行うため、粗結合にできる。さ
らにSAPUI5はOdataとの相互連携性が高い。!

•

SAP Netweaver Gatewayであれば、OdataのWebAPIを簡単に作成可能。SAPUI5と組
み合わせることで、バックエンドとも統合される。

All Rights Reserved. Copyright ⓒ
まとめ

だって!
楽したいもん!

バックエンドがSAPなら!
フロント側はSAPUI5で決まり!

ご静聴ありがとうございました。
All Rights Reserved. Copyright ⓒ

国内初事例に学ぶSAPUI5