【第2回】SAPUI5とSAP NetWeaver Gatewayによるマッシュアップ開発入門(Gateway構築編)

 2013.10.22  リアルテックジャパン

前回の記事(【第1回】SAPUI5とSAP NetWeaver Gatewayによるマッシュアップ開発入門(序章) )に引き続き、

実際のアプリケーションの開発方法を書いていこうと思います。

 

まず、今回作りたいWebアプリケーションは以下のようなものになります。

SAPシステムから取得した情報と、Google Mapから取得した情報を一画面で連携させているところがポイントです。

AppSample.png

この記事で書く範囲は以下の図のNetwerver Gatewayの部分となります。

SAPシステム内部のデータをOData形式で公開するところまでの手順を書きます。

NWGW_BLOG_2oveview.png

 

 

システム環境

今回は、SAP Netweaver 7.02 ABAPの上にNetweaver Gatewayを構築しました。

Netweaver Gatewayは通常のインストールに加え、GW_CORE、IW_FNDといった追加モジュールのインストールが必要となります。

本記事の内容はこれらのモジュールがインストール済みである前提で書かせていただきます。

 [SMART_CONTENT]

SAPデータコピーツール Data Sync Manager
SAPユーザー必見!テスト・トレーニング・データ移行時に機密データを守る方法は?

データ格納用アドオンテーブルの作成

まず、以下の画像のようなアドオンテーブルをSAP内部データとして作成しました。

今回は、このアドオンテーブルに得意先情報を格納することとします。

このデータをNetweaver Gatewayを利用してOData形式で公開していこうと思います。

NWGW_BLOG_1.png

テーブルのデータは以下のようになっています。

NWGW_BLOG_26.png

Gateway Serviceの開発

SAP NetWeaver Gateway Service Builderの トランザクションコード:SEGWを実行し、

登録ボタンをクリックします。

NWGW_BLOG_2.png

必要な情報を入力します。今回はLocal Objectで登録するのでLocal Objectボタンをクリックします。

NWGW_BLOG_3.png

Entity Typeを作成します。

今回は、自分で作成したアドオンテーブル:ZKNA1の構造をODataの基として利用するので

Data Modelを右クリック->Import->DDIC Structureを選択します。

NWGW_BLOG_4.png

ABAP Structureに事前に作成したアドオンテーブル:ZKNA1を入力し、

Enterキーで以下のように項目が表示されますので、続行ボタンをクリックします。

NWGW_BLOG_5.png

Entity Typesにアドオンテーブル:ZKNA1の構造が追加されたことを確認し、保存ボタンをクリックします。

NWGW_BLOG_6.png

次に、Entity Setsをダブルクリックし、行追加ボタンをクリックし必要な項目を入力し保存ボタンをクリックします。

ここではEntity Setsの名前をCUSTOMERとします。

NWGW_BLOG_8.png

Service Implementationを右クリックしSynchronize Entity Setsを選択します。

NWGW_BLOG_9.png

作成したEntity Setに対するデータ操作メソッド(Create/Delete/GetEntity/GetEntitySet/Update)が自動で作成されます。

今回はこの中から、GetEntitySetのメソッドを利用する方法を書いていきます。

NWGW_BLOG_10.png

保存ボタンをクリックします。

NWGW_BLOG_11.png

Generate Runtime Objectsボタンをクリックします。

NWGW_BLOG_12.png

生成されるオブジェクト名が提案されます。

続行ボタンをクリックします。

NWGW_BLOG_13.png

右枠の下部分に実行結果が表示されます。

エラーが無いことを確認します。

NWGW_BLOG_14.png

今回利用する、GetEntitySetの中身を実装します。

右クリック->GetEntitySet->Go to Implementationを選択します。

NWGW_BLOG_15.png

メソッド:CUSTOMER_GET_ENTITYSET(<Entity Set名>_GET_ENTITYSET)を選択し、再定義ボタンをクリックします。

NWGW_BLOG_16.png

GetEntitySetの処理の内容として、アドオンテーブル:ZKNA1から値を取得し、その結果をパラメータ:ET_ENTITYSETにセットする処理をコーティングします。

有効化ボタンをクリックします。

これでGetEntitySetの処理がGateway Serviceとして実装されました。

NWGW_BLOG_17.png

次に作成したGateway Serviceを登録/有効化します。

サービスの有効化および更新トランザクションコード:/IWFND/MAINT_SERVICE

サービス追加ボタンをクリックします。

NWGW_BLOG_18.png

技術サービス名にGenerate Runtime Objectsで生成した、Technical Service Nameを入力しEnterキーで下部にサービスが表示されますので、エントリを選択します。

NWGW_BLOG_19.png

続行ボタンをクリックします。

NWGW_BLOG_20.png

正常に登録されたかを確認するためにテスト実行します。

ブラウザ呼出をクリックします。

NWGW_BLOG_21.png

以下のURLにジャンプします。

http://[HOSTNAME]:8000/sap/opu/odata/sap/ZCUSTOMER1_SRV/?$format=xml

ブラウザにXML形式でサービスの定義が表示されていれば成功です。

NWGW_BLOG_24.png

XMLの内容は以下のようになっているはずです。

Gateway Serviceの中にCUSTOMERというEntitySetが定義されているのがわかります。

&lt;app:service     xml:base=&quot;http://[HOSTNAME]:8000/sap/opu/odata/sap/ZCUSTOMER1_SRV/&quot;     xml:lang=&quot;ja&quot; xmlns:app=&quot;http://www.w3.org/2007/app&quot;     xmlns:atom=&quot;http://www.w3.org/2005/Atom&quot; xmlns:m=&quot;http://schemas.microsoft.com/ado/2007/08/dataservices/metadata&quot;     xmlns:sap=&quot;http://www.sap.com/Protocols/SAPData&quot;&gt;    &lt;app:workspace&gt;        &lt;atom:title type=&quot;text&quot;&gt;Data&lt;/atom:title&gt;        &lt;app:collection href=&quot;CUSTOMER&quot; sap:addressable=&quot;false&quot; sap:content-version=&quot;1&quot; sap:pageable=&quot;false&quot;&gt;            &lt;atom:title type=&quot;text&quot;&gt;CUSTOMER&lt;/atom:title&gt;            &lt;sap:member-title&gt;Zkna1&lt;/sap:member-title&gt;        &lt;/app:collection&gt;    &lt;/app:workspace&gt;    &lt;atom:link href=&quot;http://&lt;HOSTNAME&gt;:8000/sap/opu/odata/sap/ZCUSTOMER1_SRV/&quot; rel=&quot;self&quot;/&gt;    &lt;atom:link href=&quot;http://&lt;HOSTNAME&gt;:8000/sap/opu/odata/sap/ZCUSTOMER1_SRV/&quot; rel=&quot;latest-version&quot;/&gt;&lt;/app:service&gt;

次に、実装したGetEntitySetの動作を確認してみましょう。

先ほどのGateway ServiceのURLにEntity Sets名であるCUSTOMERを以下のように追加します。

http://[HOSTNAME]:8000/sap/opu/odata/sap/ZCUSTOMER1_SRV/CUSTOMER/?$format=xml

IEの場合は以下のようにフィード表示されてしまうかもしれません。

NWGW_BLOG_25.png

Chrome等で確認すると実際には以下のようなXML形式のデータが取得できていることがわかります。

&lt;feed xml:base=&quot;http://[HOSTNAME]:8000/sap/opu/odata/sap/ZCUSTOMER1_SRV/&quot;     xmlns=&quot;http://www.w3.org/2005/Atom&quot;     xmlns:d=&quot;http://schemas.microsoft.com/ado/2007/08/dataservices&quot;     xmlns:m=&quot;http://schemas.microsoft.com/ado/2007/08/dataservices/metadata&quot;&gt;    &lt;id&gt;http://[HOSTNAME]:8000/sap/opu/odata/sap/ZCUSTOMER1_SRV/CUSTOMER/&lt;/id&gt;    &lt;title type=&quot;text&quot;&gt;CUSTOMER&lt;/title&gt;    &lt;updated&gt;2013-10-22T08:05:06Z&lt;/updated&gt;    &lt;author&gt;        &lt;name/&gt;    &lt;/author&gt;    &lt;link href=&quot;CUSTOMER/&quot; rel=&quot;self&quot; title=&quot;CUSTOMER&quot;/&gt;    &lt;entry&gt;        &lt;id&gt;http://[HOSTNAME]:8000/sap/opu/odata/sap/ZCUSTOMER1_SRV/CUSTOMER(Kunnr=&#39;1&#39;,Mandt=&#39;100&#39;)&lt;/id&gt;        &lt;title type=&quot;text&quot;&gt;CUSTOMER(Kunnr=&#39;1&#39;,Mandt=&#39;100&#39;)&lt;/title&gt;        &lt;updated&gt;2013-10-22T08:05:06Z&lt;/updated&gt;        &lt;category scheme=&quot;http://schemas.microsoft.com/ado/2007/08/dataservices/scheme&quot; term=&quot;ZCUSTOMER1_SRV.Zkna1&quot;/&gt;        &lt;link href=&quot;CUSTOMER(Kunnr=&#39;1&#39;,Mandt=&#39;100&#39;)&quot; rel=&quot;edit&quot; title=&quot;Zkna1&quot;/&gt;        &lt;content type=&quot;application/xml&quot;&gt;            &lt;m:properties&gt;                &lt;d:Pstlz/&gt;                &lt;d:Ort01&gt;千代田区&lt;/d:Ort01&gt;                &lt;d:Name2/&gt;                &lt;d:Name1&gt;リアルテックジャパン&lt;/d:Name1&gt;                &lt;d:Land1&gt;JP&lt;/d:Land1&gt;                &lt;d:Kunnr&gt;1&lt;/d:Kunnr&gt;                &lt;d:Mandt&gt;100&lt;/d:Mandt&gt;                &lt;d:Regio&gt;13&lt;/d:Regio&gt;                &lt;d:Sortl/&gt;                &lt;d:Stras&gt;九段北1-8-10&lt;/d:Stras&gt;                &lt;d:Telf1/&gt;                &lt;d:Telfx/&gt;                &lt;d:RegioT&gt;東京都&lt;/d:RegioT&gt;            &lt;/m:properties&gt;        &lt;/content&gt;    &lt;/entry&gt;    &lt;entry&gt;        &lt;id&gt;http://[HOSTNAME]:8000/sap/opu/odata/sap/ZCUSTOMER1_SRV/CUSTOMER(Kunnr=&#39;2&#39;,Mandt=&#39;100&#39;)&lt;/id&gt;        &lt;title type=&quot;text&quot;&gt;CUSTOMER(Kunnr=&#39;2&#39;,Mandt=&#39;100&#39;)&lt;/title&gt;        &lt;updated&gt;2013-10-22T08:05:06Z&lt;/updated&gt;        &lt;category scheme=&quot;http://schemas.microsoft.com/ado/2007/08/dataservices/scheme&quot; term=&quot;ZCUSTOMER1_SRV.Zkna1&quot;/&gt;        &lt;link href=&quot;CUSTOMER(Kunnr=&#39;2&#39;,Mandt=&#39;100&#39;)&quot; rel=&quot;edit&quot; title=&quot;Zkna1&quot;/&gt;        &lt;content type=&quot;application/xml&quot;&gt;            &lt;m:properties&gt;                &lt;d:Pstlz/&gt;                &lt;d:Ort01&gt;千代田区&lt;/d:Ort01&gt;                &lt;d:Name2/&gt;                &lt;d:Name1&gt;A社(東京駅前)&lt;/d:Name1&gt;                &lt;d:Land1&gt;JP&lt;/d:Land1&gt;                &lt;d:Kunnr&gt;2&lt;/d:Kunnr&gt;                &lt;d:Mandt&gt;100&lt;/d:Mandt&gt;                &lt;d:Regio&gt;13&lt;/d:Regio&gt;                &lt;d:Sortl/&gt;                &lt;d:Stras&gt;丸の内1丁目&lt;/d:Stras&gt;                &lt;d:Telf1/&gt;                &lt;d:Telfx/&gt;                &lt;d:RegioT&gt;東京都&lt;/d:RegioT&gt;            &lt;/m:properties&gt;        &lt;/content&gt;    &lt;/entry&gt;    &lt;entry&gt;        &lt;id&gt;http://[HOSTNAME]:8000/sap/opu/odata/sap/ZCUSTOMER1_SRV/CUSTOMER(Kunnr=&#39;3&#39;,Mandt=&#39;100&#39;)&lt;/id&gt;        &lt;title type=&quot;text&quot;&gt;CUSTOMER(Kunnr=&#39;3&#39;,Mandt=&#39;100&#39;)&lt;/title&gt;        &lt;updated&gt;2013-10-22T08:05:06Z&lt;/updated&gt;        &lt;category scheme=&quot;http://schemas.microsoft.com/ado/2007/08/dataservices/scheme&quot; term=&quot;ZCUSTOMER1_SRV.Zkna1&quot;/&gt;        &lt;link href=&quot;CUSTOMER(Kunnr=&#39;3&#39;,Mandt=&#39;100&#39;)&quot; rel=&quot;edit&quot; title=&quot;Zkna1&quot;/&gt;        &lt;content type=&quot;application/xml&quot;&gt;            &lt;m:properties&gt;                &lt;d:Pstlz/&gt;                &lt;d:Ort01&gt;港区&lt;/d:Ort01&gt;                &lt;d:Name2/&gt;                &lt;d:Name1&gt;B社(品川駅前)&lt;/d:Name1&gt;                &lt;d:Land1&gt;JP&lt;/d:Land1&gt;                &lt;d:Kunnr&gt;3&lt;/d:Kunnr&gt;                &lt;d:Mandt&gt;100&lt;/d:Mandt&gt;                &lt;d:Regio&gt;13&lt;/d:Regio&gt;                &lt;d:Sortl/&gt;                &lt;d:Stras&gt;高輪3丁目&lt;/d:Stras&gt;                &lt;d:Telf1/&gt;                &lt;d:Telfx/&gt;                &lt;d:RegioT&gt;東京都&lt;/d:RegioT&gt;            &lt;/m:properties&gt;        &lt;/content&gt;    &lt;/entry&gt;    &lt;entry&gt;        &lt;id&gt;http://[HOSTNAME]:8000/sap/opu/odata/sap/ZCUSTOMER1_SRV/CUSTOMER(Kunnr=&#39;4&#39;,Mandt=&#39;100&#39;)&lt;/id&gt;        &lt;title type=&quot;text&quot;&gt;CUSTOMER(Kunnr=&#39;4&#39;,Mandt=&#39;100&#39;)&lt;/title&gt;        &lt;updated&gt;2013-10-22T08:05:06Z&lt;/updated&gt;        &lt;category scheme=&quot;http://schemas.microsoft.com/ado/2007/08/dataservices/scheme&quot; term=&quot;ZCUSTOMER1_SRV.Zkna1&quot;/&gt;        &lt;link href=&quot;CUSTOMER(Kunnr=&#39;4&#39;,Mandt=&#39;100&#39;)&quot; rel=&quot;edit&quot; title=&quot;Zkna1&quot;/&gt;        &lt;content type=&quot;application/xml&quot;&gt;            &lt;m:properties&gt;                &lt;d:Pstlz/&gt;                &lt;d:Ort01&gt;新宿区&lt;/d:Ort01&gt;                &lt;d:Name2/&gt;                &lt;d:Name1&gt;C社(新宿駅前)&lt;/d:Name1&gt;                &lt;d:Land1&gt;JP&lt;/d:Land1&gt;                &lt;d:Kunnr&gt;4&lt;/d:Kunnr&gt;                &lt;d:Mandt&gt;100&lt;/d:Mandt&gt;                &lt;d:Regio&gt;13&lt;/d:Regio&gt;                &lt;d:Sortl/&gt;                &lt;d:Stras&gt;新宿3丁目&lt;/d:Stras&gt;                &lt;d:Telf1/&gt;                &lt;d:Telfx/&gt;                &lt;d:RegioT&gt;東京都&lt;/d:RegioT&gt;            &lt;/m:properties&gt;        &lt;/content&gt;    &lt;/entry&gt;    &lt;entry&gt;        &lt;id&gt;http://[HOSTNAME]:8000/sap/opu/odata/sap/ZCUSTOMER1_SRV/CUSTOMER(Kunnr=&#39;5&#39;,Mandt=&#39;100&#39;)&lt;/id&gt;        &lt;title type=&quot;text&quot;&gt;CUSTOMER(Kunnr=&#39;5&#39;,Mandt=&#39;100&#39;)&lt;/title&gt;        &lt;updated&gt;2013-10-22T08:05:06Z&lt;/updated&gt;        &lt;category scheme=&quot;http://schemas.microsoft.com/ado/2007/08/dataservices/scheme&quot; term=&quot;ZCUSTOMER1_SRV.Zkna1&quot;/&gt;        &lt;link href=&quot;CUSTOMER(Kunnr=&#39;5&#39;,Mandt=&#39;100&#39;)&quot; rel=&quot;edit&quot; title=&quot;Zkna1&quot;/&gt;        &lt;content type=&quot;application/xml&quot;&gt;            &lt;m:properties&gt;                &lt;d:Pstlz/&gt;                &lt;d:Ort01&gt;横浜市西区&lt;/d:Ort01&gt;                &lt;d:Name2/&gt;                &lt;d:Name1&gt;D社(横浜駅前)&lt;/d:Name1&gt;                &lt;d:Land1&gt;JP&lt;/d:Land1&gt;                &lt;d:Kunnr&gt;5&lt;/d:Kunnr&gt;                &lt;d:Mandt&gt;100&lt;/d:Mandt&gt;                &lt;d:Regio&gt;14&lt;/d:Regio&gt;                &lt;d:Sortl/&gt;                &lt;d:Stras&gt;高島2丁目&lt;/d:Stras&gt;                &lt;d:Telf1/&gt;                &lt;d:Telfx/&gt;                &lt;d:RegioT&gt;神奈川県&lt;/d:RegioT&gt;            &lt;/m:properties&gt;        &lt;/content&gt;    &lt;/entry&gt;&lt;/feed&gt;

GetEntitySetの処理でコーディングした通り、アドオンテーブル:ZKNA1のデータがXML形式で取得できていることがわかります。

XML形式は外部のアプリケーションからは扱いやすい形式です。

次回はこのデータと、Google Mapのデータを利用したWebアプリケーションをSAPUI5を利用して開発してみようと思います。

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

 

RECENT POST「技術情報」の最新記事


技術情報

SAP導入を成功させるポイントはこれだ

技術情報

SAPのパフォーマンスに問題が出てきたら?その分析のポイント

技術情報

SAP Business Process Automation(SAP BPA)とは?

技術情報

【祝SAP Tech JAM】NUTANIX環境の実機が見られます!

【第2回】SAPUI5とSAP NetWeaver Gatewayによるマッシュアップ開発入門(Gateway構築編)
New Call-to-action

RECENT POST 最新記事

RANKING人気記事ランキング

ブログ購読のお申込み