SAP S/4HANAのデータをiPhoneでAR表示してみた(1/2)

商品をiPhoneのカメラで写すと、SAP S/4HANAから取得した在庫情報がARで浮かび上がるアプリを作ってみました。この記事ではデータ取得〜AR実装の詳細手順を紹介します。
![ar.gif](https://qiita-image-store.s3.amazonaws.com/0/320429/1c79c408-03c8-9f39-7c9e-759a4d4d519f.gif)
（※ この記事は [SAP Advent Calendar 2018](https://qiita.com/monamona/private/c55435580eaad482c7f7) の12月15日分の記事として執筆しています）

## アーキテクチャ
全体構成は下記の図のとおり。フロントエンドのiOSアプリから、クラウド上のSAP Cloud Platformを経由して、バックエンドのSAP S/4HANAとデータ連携を行う構成となっています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/66f3c98f-ec63-1b9f-0697-ef9bad665bdd.png)

※SAP Cloud Platform Mobile ServiceとSDK for iOSについては、[SAP社ブログ](https://www.sapjp.com/blog/archives/17837)に分かりやすい解説記事があります。

## 構築手順
大きく下記の流れで構築しています。
**1. SAP S/4HANA上でデータ取得処理（OData）を実装**
**2. SDK for iOS AssistantでXcodeプロジェクトを生成**
3. XcodeでAR機能を追加実装

記事は長くなるので全2回に分けて書いていこうと思います。
1回目の今回は上記1～2のトピックまで書きます。

## 前提

#### バックエンド環境
- SAP S/4HANA環境（オンプレミス）
    - SCPとSAP HANA Cloud Connector(SCC)で連携されていること。
    - ※SAP HANA Cloud Connectorについては[こちらの記事](https://www.sapjp.com/blog/archives/13289)などを参照。

#### クラウド環境
- SAP Cloud Platform（NEO）
    - [SAP Cloud Platformのページ](https://cloudplatform.sap.com/try.html)から無料でトライアル使用も可能です！

#### フロントエンド環境
- iPhone7 Plus
-  iOS12.1

## 開発環境

#### バックエンド環境
- SAP GUI for Windows 750

#### フロントエンド環境
-  Xcode10.1

## 1. S/4HANAのデータ取得処理を実装する
まずはバックエンド（SAP S/4HANA）での実装から始めます。S4HANAのデータを取得するプロトコル（OData）の処理を実装します。

ODataは標準で多くのサービスが事前に用意されていますし、また自作したデータモデルから自動生成をしてくれるなど便利な実装手法などが存在していますが、今回はあえてフルアドオンで1から作ってみたいと思います。

#### ODataの実装を行う
トランザクションコード SEGW からODataプロジェクトを作成します。
今回はS/4内の商品の店舗在庫データを取得する想定で実装してみます。

画面左上の[CreateProject]ボタンを押下。
Project名とDescriptionを入力して[Continue]ボタンを押下します。
（パッケージやユーザ名は環境に応じて適切な値を入れてください。）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/39fb07b7-6f9c-e224-3342-a9d8534b7b95.png)
エンティティタイプを作成します。
右クリックからData Model>Create>Entity Type。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/4a75ebfd-3ab6-ecc1-fb7a-2c78d42fb483.png)
EntityType名（今回は"StockInfo"）を入力。
EntitySetも同時に作るため[Create Related Entity Set]をオンにて[Continue]を押下。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/31a31164-c950-d208-dbef-249a01fd1fd5.png)
EntityTypeのPropertyを登録します。これがフロントエンドと連携される項目になります。
（今回は品目コードとその店舗在庫数（数量＆単位）を返す簡単な構造にします。）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/e21a65b1-40ca-02fa-2427-479e5c98778b.png)

|Name|Key|EdmCoreType|Prec|Scale|Max|Label|ABAP型|
|:-----------|:-----------:|:---------|--------:|--------:|---------:|:--------|:--------|
|Matnr|X|Edm.String|0|0|40|品目|MATNR|
|Quan|| Edm.Decimal|13|0|0|在庫数量|QUAN|
|Unit|| Edm.String|0|0|3|単位|UNIT|
EntitySetのAddrableをオンにしておきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/094e885a-d95d-0957-2184-e71d3eb146ac.png)
有効化ボタンを押下しODataProjectを有効化します。
Model Provider ClassとData Provier Classの名前を指定して[Continue]を押下すると各クラスが自動生成されます。（クラス名は自動提案された名前のままで問題ないです。）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/73a7c7fc-bb1d-a89b-a3e2-979bbc6b8abd.png)
データモデルが定義できたら、続いて取得メソッドの実装を行います。
Service ImplementationからEntitySetのGetEntitySetメソッドを右クリックし[Go to ABAP workbench]を選択。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/c978fe88-2423-5203-e76c-caf7aee4b5f1.png)
変更モードに切り替え、実装を行うメソッド[STOCKINFOSET_GET_ENTITTYSET]にカーソルを合わせて、リストの右上[再定義]ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/32bbbb77-7bd1-e88a-d629-503152edc072.png)
ABAPでデータ取得処理を実装します。
今回は簡単のため、ダミーのアドオンテーブル（YTEST0001）にiOS連携用の在庫情報を格納し、そこからデータを取得するだけの処理を実装しています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/0aa80e5d-50e6-4ccf-6fda-18625346fa12.png)
※↓今回のデータ取得元（ダミーテーブル）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/455ab4be-3f74-b54c-6f32-1117fab8ddd1.png)


#### OData Serviceを有効化する
次に、実装したODataをサービス登録します。
トランザクションコード/IWFND/MAINT_SERVICE からサービスの追加を行いましょう。「サービスの追加」を押下します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/20e12c7b-017e-da58-3b11-3ee90869e0c4.png)
実装したODataがリストにあるので探して選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/46162b6e-1cc9-5ffc-bf3c-d5bb66a91319.png)
技術サービス名などを入力します。（基本自動提案されたもので問題なし）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/1acc154c-daca-c927-c9eb-607402d53f96.png)
成功すると下記メッセージが表示されます。[続行]を押下しましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/2843db7a-63d6-2435-a44e-6ec66db41b14.png)
これでODataサービスが登録されました。

## 2. Xcodeプロジェクトを生成する
次にSCP SDK for iOSを使用して、S/4で実装したODataのEntitySet（在庫情報）をリスト表示するiOSアプリを生成します。

#### SCPアカウントの設定
まず事前にSCPのアカウントを設定しておきましょう。[Manage Accounts]をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/be62521b-1eda-03c2-364c-c1cbfaf9065d.png)

[Add New..]ボタンを押下してSCP Mobile ServiceのURL情報を入力します。
入力する値はブラウザからSCP Mobile Serviceを開き、メニュー[重要なリンク]に記載されているURLを参照しましょう。（また[URLの直接インポート]をクリックすると自動的に入力してくれます。）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/003c4842-26b6-ec4f-a607-cdc1e53cd942.png)
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3332303432392f35636336646361632d386465322d366261342d313632642d3662643038316132633639622e706e67.png](https://qiita-image-store.s3.amazonaws.com/0/320429/5f1ef9d1-9de8-6f67-594c-9f1aa084afe1.png)

#### Xcodeプロジェクトの生成
次にXcodeプロジェクトを作ります。[Create New]ボタンから遷移。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/60826d25-399e-4747-3558-e2197349ff25.png)
[Create new Application]ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/4adeaa47-09d5-60b4-bc9d-0e4dfea18554.png)
SCPアカウントの選択画面が出てきますので、先程設定したアカウント情報を選択します。（ポップアップでログイン画面が出てくるのでSCPの認証情報を入力してください。）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/24c810b5-af84-c980-24fc-0389fbb888ce.png)
アプリケーション名＆Identifierなどを入力しましょう（お好きな名前を）。これらはSCP Mobile Service上に登録されるアプリケーション情報になります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/10eabddb-4b17-1a1d-6396-5fef80686f30.png)
次にバックエンドの接続先情報を作成します。[Add New...]をクリック。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/5d506520-8c5b-c88c-b52c-54be2a1238c2.png)
BackEndURLに先で作成したODataサービスのURLを入力します。
[AuthentificationType]にバックエンド接続で使う認証情報を入力します。今回は"BasicAuthentification（基本認証）"を選択しS4 HANAのログインユーザ＆パスを入力します。（Cloud Connecterの認証設定などに応じて設定する必要があります）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/11aa5719-1244-de38-47ef-6f8f8ddbeaaa.png)
作成した接続情報を選択して次へ。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/55975240-9648-22ea-02ee-1c992bea8a5b.png)
生成するアプリの設定を行います。今回は初期設定そのままとします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/ce0bdccb-f31e-dd6b-6424-6b6ced78ae03.png)
プロジェクト名や組織名などを入力します（お好きな名前を）。これらはこれから生成されるXcodeプロジェクトの情報になります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/4c19e8ed-65e5-7da5-66e9-d8f7696d923f.png)
ProxyClassを作成するために、先程作成したバックエンド接続情報を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/7819a704-77fb-b698-8673-fc157fb8b05c.png)
アプリのUIタイプを選択します。今回はMasterDetail画面を生成するようにします。
これで設定は終わりです[Finish]ボタンを押下。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/486f3825-d67e-4ced-c661-ec72bce746bb.png)
成功するとXcodeが起動して生成されたプロジェクトが開かれます。
クラウドを経由してバックエンドまでつながったiOSアプリが一気に自動作成されました（素晴らしい）。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/e5abf36f-f49e-1ee3-da7e-17d9baafc46a.png)

#### 動作確認
生成されたXcodeプロジェクトの動作確認をしましょう。
自動生成された段階ではTeam情報がブランクなので、各自のチーム情報を設定し、左上のビルドボタンを押します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/b8f481da-ccf9-b0c8-c2cd-d75f26be18b0.png)
シュミレータが立ち上がりました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/8aff2fdf-8949-b913-dc7c-ecadcb88c051.png)
認証設定などを進め切ると、一覧画面が表示されます。
ODataのEntitySet名（StockInfoSet）が表示されている事が確認できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/7a332547-d727-3afb-5260-e62f3a1b133f.png)
StockInfoSetを選択するとS/4上のテーブルレコード（在庫情報 in ダミーテーブル）が取得され表示されていることが確認できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/320429/1f608a56-7555-a470-cad1-d75ffef3b11b.png)

## まとめ
SCP SDK for iOSを使うことで、クラウドサービス〜バックエンドの基幹システムまでつながったiOSアプリを一気に生成することができました。フルスクラッチで作ると大変な実装も簡単に作ることができて素晴らしいですね。
[次回](https://qiita.com/zukahira/items/d8fedb18b109f77a5283)は今回生成したXcodeプロジェクトを元に、S/4から持ってきた情報をAR表示させてみようと思います。