とりあえず「アイーン」とPush通知してくれるiOSアプリをSAP CP Mobile Service (Cloud Foundry) を活用して構築してみた

# はじめに

Mona Lisacoです。SAP TechEdもDemo Jam Tokyoもあっというまに過ぎ去ってついにSAPアドベントカレンダーの季節となりました。
今回も懲りずに思わず大爆笑せざるを得ないアプリケーションを実装し、とある雑貨屋の麹町一丁目店の業務改善に取り組んでいきたいと思います。

（※ この記事は [SAP Advent Calendar 2019](https://adventar.org/calendars/3908) の12月18日分の記事として執筆しています。）
（※ この記事は[「SAP S/4HANAで購買発注が登録されるたびiPhoneに「アイーン」とPush通知が来たらぜったいどきどきしちゃう」シリーズ](https://qiita.com/monamona/items/0e4c38ce315282e73b96)の1つ目の記事でもあります。）

## あらすじ（？）

※諸事情あってストーリーを変更しました

2018年末から吹き荒れる「ドリフ大爆笑」ブームが冷めやらぬ中、
麹町1丁目付近のとある雑貨店では「ドリフ大爆笑DVD」の調達に大忙し！

調達業務への愛が高じた店舗スタッフは業務システムへの愛までもが止まらなくなってしまい、**「SAP S/4HANAで購買発注伝票が登録されるたびにiPhoneに通知が来たらぜったいどきどきしちゃう！」**と思うに至ったようです。

ということで、奇特なスタッフが甘酸っぱくもほろ苦いSAPライフを送ることができるように、今回の記事では初めの第一歩としてあい〜〜〜んPush通知を実装していきます。

## 今回の目標

今回の記事でやりたいことはすごくシンプルです。
これ！
<img width="375" alt="IMG_5437.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/dc93b899-6e9f-8602-d0da-807b06c699a3.png">

また、これまでのブログ記事ではNeoのMoble Serviceを使用していたのですが、今回初めてCloud FoundryのMobile Serviceに挑戦します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/b53ed28d-c54b-08c8-7e7d-c283e467bc00.png)

# 前提条件

## 開発実行環境

- フロントエンド実行環境: iPhone11 pro iOS 13.3
- フロントエンド開発環境: macOS Mojave 10.14.6 / Xcode 11.3 ※ Apple Developer Account(有料)を取得していること。
- クラウド開発実行環境: SAP Cloud Platform (Cloud Foundry trial account) Mobile Services

# 構築手順

## SAP CP Mobile Servicesの初期設定
それでは記念すべき生まれて初めてのCloud Foundry環境 Mobile Serviceを使い始めてみましょう。
日本語でも英語でもドキュメントがかなり少ないので、主に[ヘルプ文書](https://help.sap.com/viewer/468990a67780424a9e66eb096d4345bb/Cloud/en-US/a8ad2154513f4da9bf47051d653f0052.html)などを頼りに進めていきます。

### インスタンス生成

まずCloud Foundry環境のspaceにMobile Servicesのインスタンスを立てます。
space内でService Marketplace > Mobile Service > Instances > New Instancesを順に選択し、表示されたポップアップからインスタンスを生成します。

とりあえず`firstmobileservice`という名前にしてみました。

<img width="1436" alt="スクリーンショット 2019-12-15 5.27.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/686d21e7-0ee0-bb69-e512-4f27dd6cb0c7.png">

生成されたインスタンスの右側のボタンを押下してダッシュボードに行くと、Neoのときと似たような見た目の画面となっています。

<img width="1434" alt="スクリーンショット 2019-12-15 5.58.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/7a7e399b-f221-0ee5-966f-4610ba4a1fca.png">

### アプリケーションインスタンス生成

Mobile Application > Native Hybrid > New ボタンでアプリケーションのインスタンスを作ります。

<img width="1435" alt="スクリーンショット 2019-12-15 5.27.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/8e521129-e915-5ba9-da83-5d98499d9e02.png">

アプリケーションの名前は特にこだわりなく`notifyaiiiiin`にしてみました。

<img width="1437" alt="スクリーンショット 2019-12-15 5.28.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/e72ece36-f951-3224-8012-bfee65907e54.png">

新しいアプリケーション用のインスタンスが生成されました。

### Feature追加

"Assigned Feature"の欄からいくつかアプリケーションの設定をしていきます。

<img width="1438" alt="スクリーンショット 2019-12-15 5.17.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/7c8c24f3-b65a-8f17-50fa-e0530a2ba434.png">

#### Mobile Connectivity

まずはMobile Connectivityの設定をします(今回の実装の本筋には関係ないのですが、設定しておかないと後続の手順でエラーになります)。

<img width="1435" alt="スクリーンショット 2019-12-15 5.29.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/1ff4aa64-4c88-2875-e2ff-d904c07a3581.png">

<img width="1438" alt="スクリーンショット 2019-12-15 5.23.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/365fbcd1-cbe6-757f-d0bb-194ef31bc62b.png">

#### Mobile Sample OData ESPM

次にMobile Sample OData ESPM(モックサービス)の設定をします（こちらも今回の実装の本筋には関係ありませんが、後続の手順でエラーにならないように設定します）。

<img width="1436" alt="スクリーンショット 2019-12-15 5.19.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/c5fb45ac-dfaf-495e-34b4-2b5dce80cde2.png">

<img width="1436" alt="スクリーンショット 2019-12-15 5.30.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/832b9598-f2c2-ba18-02e1-86d23427e601.png">

#### Mobile Push Notification

さらに、Push通知のFeatureも追加しておきます。

<img width="1434" alt="スクリーンショット 2019-12-15 5.46.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/b609241d-02af-f62a-5091-061bc159dd10.png">

<img width="1436" alt="スクリーンショット 2019-12-15 5.46.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/e509b6cf-7c71-873f-fc5d-e03fe74a04ca.png">

これで一旦SAP CP上でのアプリケーション初期設定は完了しました。

## iOSアプリ自動生成

上記で作成したアプリケーションを元に、SAP CP SDK for iOSを用いてXCodeプロジェクトを生成していきます。Neoの時とだいたい同じ手順です。

まず、Cloud FoundryのMobile Serviceの環境と、ローカルPCのSDK for iOSを紐づけます。
Mobile Serviceの下記の部分をクリックすると、勝手にSAP CP SDK for iOSが起動して、この紐付けの設定がわりあい簡単に行えます。

<img width="1433" alt="mobile connect.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/47fde51f-1575-4d26-75cb-e82e1e44d07f.png">

<img width="981" alt="mobile service account.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/6ccb7f25-bf82-d584-9ff1-39f343943edd.png">

ローカルPCとMobile Serviceの環境が繋がったので、上記で作成したアプリケーションの設定を元に、SDKを用いてXCodeプロジェクトを生成していきます。
上記での設定さえうまくいっていればとても簡単です。

<img width="980" alt="スクリーンショット 2019-12-15 5.44.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/021106d7-3b46-cd78-40d4-424ce1298067.png">

<img width="981" alt="スクリーンショット 2019-12-15 5.44.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/d4e6fbea-bba9-7945-f20e-be6ab6664381.png">

<img width="978" alt="スクリーンショット 2019-12-15 5.44.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/36e9bc3f-462e-1013-1f23-d8a0ae20f7e4.png">

<img width="979" alt="スクリーンショット 2019-12-15 5.45.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/98d1ae9c-5479-752a-1ddc-f2fac3699b8f.png">

最後にテンプレートの形式を選べるのですが、試してみたところ、Push Notification関連のソースコードが自動生成されるのは「Onboarding」および「Master/Detail Screen with Onboarding for Destination」のみのようです。
今回はシンプルに「Onboarding」を選択しました。

<img width="982" alt="スクリーンショット 2019-12-15 16.18.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/c9cf0dda-24b9-b67d-c860-de349f099158.png">

## Push通知関連設定

次にpush通知を行うための証明書関連設定を粛々と行なっていきます。
[こちら](https://developers.sap.com/tutorials/fiori-ios-hcpms-push-notifications.html)で紹介されている手順はNeo環境を前提としていますが、ほとんど同様の方法でCFでも設定を終えることができました。

上記の手順をもろもろ一通り終えると、Push通知の設定画面は下記のような見た目になります。
<img width="1434" alt="スクリーンショット 2019-12-15 16.06.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/55265975-3b57-31aa-5136-e57b076d82e7.png">

また、上記の手順のうち、ロールの設定方法だけNeo環境と勝手が違うので、手順を簡単に示します。

Space内のRole Collectionに`Mobile Service Notification`が追加されていることを確認します。
<img width="1677" alt="スクリーンショット 2019-12-17 1.46.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/a367d899-1773-8d0a-6c66-810921f22bcd.png">

Trust Configuration > SAP ID Serviceを押下します。
<img width="1675" alt="スクリーンショット 2019-12-17 1.46.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/21179d78-6a39-4345-5fcd-d833a7484bee.png">

メールアドレスを入力してShow Assignmentを押下すると、そのメールアドレスに紐づけられているRole Collectionが見られます。
Assign Role Collectionを押下すると、紐付けを追加できます。
<img width="1677" alt="スクリーンショット 2019-12-17 1.46.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/dad2ddc4-bd7d-c6e2-d197-d66c6d38ae51.png">

`Mobile Service Notification`を選択し、Assign Role Collectionを押下します。
<img width="1672" alt="スクリーンショット 2019-12-17 1.46.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/f5466c24-dced-1987-2902-a7e2e18e6354.png">

Role Collectionがメールアドレスに対して紐づけられました。
<img width="1673" alt="スクリーンショット 2019-12-17 1.47.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/5e43f429-cb1b-9cac-70e4-a0a71a21efc1.png">


## アプリが起動しない…？

以上の設定を終えてアプリケーションを実機ビルドしても、アプリ起動時に通信エラーとなり先に進めないという悲しい事態に遭遇しました。
結論としてはSpace > Applicationにて確認できる`BindMobileApplicationRouteToMe`というインスタンスがなぜか落ちており、Statusが`Stopped`となっていたので、「▷」ボタンを押下してStatusを`Started`に変更すると解決しました。よかった…！

<img width="1674" alt="スクリーンショット 2019-12-17 1.55.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/d4bb6f32-8514-b128-226c-05b47fb2ee32.png">

## Push通知テスト

それでは、設定がうまくいっているかどうかテストしてみましょう！

アプリを実機ビルドし、認証情報を入力します。
<img width="375" alt="IMG_5435.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/41f103a7-e586-e326-1d89-001e107239f3.png">

するとPush通知を許可しますか？という内容のダイアログが出てくるので、OKを押下します。
<img width="375" alt="IMG_5436.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/8ea036fa-ef5b-cdf6-beb3-bb31cb231abd.png">

上記でOKボタンを押下すると、ついにMobile Serviceにデバイスが登録されました！！！！！！
<img width="1674" alt="スクリーンショット 2019-12-17 2.22.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/d5b68c10-5409-889b-140a-e4d32e3141d7.png">

それでは早速試しにテスト実行してみましょう。Send Notirficationボタンを押下します。
<img width="1678" alt="スクリーンショット 2019-12-17 2.29.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/175b325d-04f7-ec74-25e6-1a0b8e8795f1.png">

あい〜〜〜〜〜ん
<img width="1674" alt="スクリーンショット 2019-12-17 2.23.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/4438ce1b-5e60-9658-a6a5-7868ffa8fb9a.png">

おお……！！！！！
<img width="375" alt="IMG_5437.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/067a7807-01b1-c299-7084-0b2de1b82dd1.png">

あい〜〜〜〜〜ん
<img width="1674" alt="スクリーンショット 2019-12-17 2.23.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/4438ce1b-5e60-9658-a6a5-7868ffa8fb9a.png">

おおおお…………！！！！！！！！！
<img width="375" alt="IMG_5438.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320955/d314e7c3-1e58-fe5e-897b-c6b2b4ac815a.png">

# 次回は・・・

というわけで、今回はとりあえずPush通知のテスト実行まで行うことができました。

まだまだ実装すべき部分はたくさん残っているので、次回以降の記事で引き続きいろいろと実装をがんばっていきたいと思います。