【第1回】SAPUI5とSAP NetWeaver Gatewayによるマッシュアップ開発入門（序章）

SAPUI5とSAP Netweaver Gatewayを使ったマッシュアップ開発について解説して参ります。

本シリーズは以下のような3部構成となっており、今回は第1回です。

第1回　SAPUI5とSAP Netweaver Gatewayによるマッシュアップ開発入門(序章)

用語の解説とアプリケーション全体像のご説明

第2回　SAPUI5とSAP Netweaver Gatewayによるマッシュアップ開発入門(Gateway編)

SAP Netweaver Gatewayを利用したサービスの開発方法

第3回　SAPUI5とSAP Netweaver Gatewayによるマッシュアップ開発入門(SAPUI5編)

SAPUI5とGoogleMap APIを利用したマッシュアップアプリケーション開発

では早速、用語の解説から入りたいと思います。

SAP Netweaver Gatewayとは？

SAP Netweaver Gatewayに関してはこちらの記事でも書かせていただいております。

SAP NetWeaver Gateway とは?

従来は外部のプログラムからSAP内部の情報にアクセスしたい場合は、SAP社の提供しているSAP接続用API(Java Connectorや.Net Connector)を利用するのが一般的でした。このAPI自体はとても良くできているのですが、SAPならではの仕様があります。

このため、単純にJavaプログラムからSAPシステムのデータに直接アクセスしようとするだけで、Javaもわかり、SAP接続用APIの仕様もわかるという高いスキルを持った技術者が必要になっていました。

また、SAP接続用APIは全てのプラットフォーム、プログラム言語に提供されているわけではありません。例えばiPhoneアプリ、Androidアプリ、Windowsストアアプリを作るにあたって、SAP接続用APIは提供されていません。

SAP Netweaver Gatewayはこれらの課題にも解決策を与えてくれるソリューションです。

SAP Netweaver Gatewayは、SAPシステムの内部データをODataという標準化された形式で公開することで、外部アプリケーションとの情報連携のハブとして機能します。これにより、外部アプリケーションはHTTP通信でXMLやJSONなどの標準的な形式にフォーマットされたSAP内部データにアクセスできるようになります。

SAPUI5とは？

SAP Netweaver Gatewayで標準化された形式（OData)で公開されたデータを有効利用するためのUI技術の一つとしてSAPUI5があります。

SAPUI5は「SAP UI Development Toolkit for HTML5」の略称で、名前の通りHTML5をベースとした主に画面開発用のUIコンポーネント群です。

• HTML5・CSS3・JavaScriptを利用した柔軟な開発が可能です。 
• 共通のデザインテーマやコンポーネントの利用による統一感のあるUIを実現可能です。
• DesktopにもMobileにも対応可能です。
• SAPとの連携がしやすいコンポーネント群(ODataサポート、充実したテーブルコントロール等)

色々書きましたが、イメージがつかない方もいると思うので、実際に触ってみましょう。

以下のサイトから実際の動作を確認してみることができます。

https://sapui5.netweaver.ondemand.com/sdk/#content/Controls/index.html

同様のサイトのHANA版です。(少し早く感じます)

https://sapui5.hana.ondemand.com/sdk/#content/Controls/index.html

SAPUI5を利用して開発することで、これらのUIコンポーネントを利用した画面開発を行うことができます。

マッシュアッププログラム開発入門

用語の解説が続きましたが、本シリーズの趣旨であるSAPUI5とSAP Netweaver Gatewayを利用したマッシュアッププログラムを開発に入っていこうと思います。

まずは、「マッシュアップ」という用語についてWikipediaには以下のようにあります。

Wikipedia：マッシュアップ (Webプログラミング)

マッシュアップ（Mashup）とは、複数の Web サービスの API を組み合わせ、あたかも一つの Web サービスのようにする機能させることを言います。

例えば、電車乗換情報と、降車駅周りのレストラン情報の組み合わせて表示してくれる仕組みや、製品名から複数のWebショッピングサイトの情報を並べて表示するような仕組みなんかがあります。

SAP Netweaver Gatewayを使うことで、SAPシステムの情報をWebサービスとして公開できています。これによりGoogle APIなど同じように他のWebサービスと組み合わせて使うことができます。

今回は入門ということで、皆さんも馴染みのあるGoogle MapのAPIを利用した、シンプルでわかりやすいシナリオを選びました。

アプリケーションの機能的な全体像は以下の通りです。

実際に動いている画面は以下のようになります。

このようにSAPシステム内部の顧客データと、Google Mapから取得したルート情報を一つのアプリケーションとして利用することができるようになります。

次回からは実際の構築方法について書いていこうと思います。

第2回　SAPUI5とSAP Netweaver Gatewayによるマッシュアップ開発入門(Gateway編)

第3回　SAPUI5とSAP Netweaver Gatewayによるマッシュアップ開発入門(SAPUI5編)

最後までお読みいただきありがとうございました。