国内初事例に学ぶSAPUI5

技術研究所

国内初事例に学ぶSAPUI5

平成26年2月28日(金)

html5jエンタープライズ部　小川充

All Rights Reserved. Copyright ⓒ

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フレームワークなどのオープンソースドキュメントの翻訳多数


弊社紹介（ちょっとだけ）

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

株式会社クレスコ


構築時の苦労話をふまえて、!SAPユーザがSAPUI5を使うべき理由!についてお話します。

今日は!オープンな立場です


事例紹介


またまた少し宣伝・・・

2014/02/12!プレスリリース

http://www.cresco.co.jp/news/newsr/2014/140212_corp.pdf


事例紹介

システム構成

!SAP NetWeaver !Gateway

クライアントサーバー

SAP CRM

画面イメージ機能!登録、変更、検索、照会

既存SAP CRM!デスクトップ画面をiPadへ移植

外回りの営業担当者が!帰社する時間を省きたい！


開発秘話（苦労話）


実は、SAPUI5はオープンソースの集合体

SAPUI5

様々なオープンソースのプロダクトを統合!プログラム用の統一インターフェースを提供

crossroads.js

jQueryUIDataJSURI.jsD3.js

handlebars.jssinon.js

requireJS

Zynga Scroller

punycode.js

MobiScrollLESS

jQuery

etc…

jQuery Mobile

jQueryベースなので!そこまで難しくない!と思った。!（第一印象）


開発秘話（苦労話１）

できることが!多すぎて迷う

使いこなすまでの!道のりが長い

SAPUI5の!独自の世界観

Javascriptの!実装量が多い


開発秘話（苦労話２）

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

iOS7のため途中で!バージョンアップ！!

1.14▶︎1.18


開発秘話（苦労話３）

公式ドキュメント SCNでの問い合わせ

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


SAPUI5導入時の課題

圧倒的!ボリューム感

発展途上日本語情報!不足

習得コストが高く、扱いも難しい。!扱える技術者が限られているという課題

使いこなせると!いい感じなんだけど・・・

日本語の情報量が増えると!状況が変わると思います！


ここであきらめない！！!SAPUI5を使うと!どんな素晴らしい未来があるのか？

未来の話をしよう


ERP CRM

SAP NetWeaver Gateway

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

様々なWebサービスを組み合わせたマッシュアップ開発が可能となり、!業務アプリケーションに無限の可能性を与える。

クロスデバイス・クロスプラットフォーム対応

SAPUI5

マッシュアップがもたらす無限の可能性


マッシュアップがもたらす無限の可能性

ERP CRM

SAP NetWeaver Gateway

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

様々なWebサービスを組み合わせたマッシュアップ開発が可能となり、!業務アプリケーションに無限の可能性を与える。

クロスデバイス・クロスプラットフォーム対応

SAPUI5

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

実現可能


では、何故!オープンソースの組み合わせではなく!あえてSAPUI5を使うべきなのか？


エンタープライズアプリケーションの特性

バチカンコンクラーベ 8年前と現在の比較（NBC NEWS）

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

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

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

未来は予測できない

今だからこそ、求められるもの!

安定・持続可能


オープンソースはすべて自己責任

ビジネスロジック

オープンソース群!jQuery!

Backbone!etc…

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

Ajaxを使った独自方式

Webアプリケーション





Backbone!etc…



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

HTML5の動き!新デバイスの登場!

クロスデバイス・クロスプラットフォーム

クラウド化!インメモリ化!バージョンアップ!

OS入れ替え




!

自己責任ビジネスロジック


Backbone!etc…







OS入れ替え




!

自己責任ビジネスロジック


Backbone!etc…







OS入れ替え


塩漬け!技術的負債!

見積もりコスト増




Backbone!etc…







OS入れ替え


SAPUI5の場合


SAPUI5の場合



Backbone!etc…







OS入れ替え


SAPUI5

オープンソース群


SAPUI5の場合



Backbone!etc…






OS入れ替え


SAPUI5


バックエンドシステム

Netweaver Gateway



Netweaver Gateway

SAPUI5の場合



Backbone!etc…






OS入れ替え


SAPUI5


OData（標準化）!


SAPUI5の場合

SAPUI5!Netweaver Gateway!

で統合



Backbone!etc…






OS入れ替え


SAPUI5



Netweaver Gateway




SAPUI5の場合

SAPUI5!Netweaver Gateway!

で統合



Backbone!etc…






OS入れ替え


SAPUI5



Netweaver Gateway



本来の!ビジネス課題に!集中できる


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

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

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

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

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

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

SAPUI5なら


バックエンドがSAPなら!

フロント側はSAPUI5で決まり！

だって!楽したいもん！

まとめ

ご静聴ありがとうございました。

Technology

国内初事例に学ぶSAPUI5