EngagementServiceを使いiOSデバイスでPush通知を送信 Part1

##目次
1. はじめに
2. 実装方法
3. 感想

##はじめに
今回はモバイルアプリにPush通知を送信するための方法を紹介したいと思います！
Push通知を利用することで、アプリを利用しているユーザーにお得な情報の配信や
イベントの情報などをお知らせすることができアプリの利用促進のためのきっかけとなるので、
是非Push機能を利用してみてくださいね！

##実装方法
###①Push通知の証明書を用意
Push通知の機能を実装するには、証明書が必要となります。
こちらは、Apple Developerに登録することで証明書を作成することができるので、
そちらから証明書の作成を行ってください。

###②Engagement Serverに証明書をアップロード
①で作成した証明書をKony FabricのEngagement Serviceにアップロードします。
ファイルを選択から、作成した証明書を選択するとパスワードが求められますので、
作成した際に設定したパスワードを入力してください。

完了したらSaveで保存をします。
![スクリーンショット 2020-09-28 13.32.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f7357734-7467-25ec-6066-8b286c56c32b.png)

証明書の保存が完了したらEngagement Serverを作成するために、
アプリのPublishを行ってください。

Publishが完了して、しばらくするとEngagement Serverにアプリが表示されるようになります。

Kony Fabricの左メニューから`Environments`をクリックし、
![environments.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a9e82eb0-fe83-1b1e-07aa-69e5695197fc.png)

Publishした環境の`Engagement Services`を開きます。
![スクリーンショット 2020-09-28 15.26.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/da150c65-1cc1-42d0-3983-d4a65fd2a8d5.png)


`Engagement Services`を開くと、先程Publishしたアプリが一覧に表示されます。
<font color="Red">※Publish後すぐに表示されない場合がありますが、時間が経つと表示されるようになるのでご安心ください。</font>

![スクリーンショット 2020-09-28 13.43.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/32491f26-b17d-5873-0bec-1c11736c9ee5.png)

アプリでPush通知が許可されると、ユーザー情報がこのEngagement Serverに保存されていきます。
アプリを選択すると、以下のような画面が開き
デバイスの登録数やどこの地域で利用されているか、どんなデバイスが登録されているかを一覧で見ることが可能です。

![スクリーンショット 2020-09-28 13.51.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/88474428-3f27-7289-3bca-5e3bdef15cde.png)
このアプリは、77のデバイスが登録されていることがわかりますね。

Engagement Serverを作成することができたので、次はアプリ側から
サーバーに登録するための処理を追加していきます。

###③Kony Visualiserでサーバーに登録するための処理を追加
konyには、Pushサーバーに登録するためのAPIが標準で用意されていますので、
それぞれのAPIを使いPushサーバーへのデバイス登録を行うことが可能です。

サーバーにデバイス登録を行うための、ソースコードは以下になります。

```push.js

pushNotificationManager.pushRegister = function() {
  kony.print("***** START PUSH REGISTER");
  let config;
  //#ifdef iphone
  // Apple Notification Server
  config = [0, 1, 2];
  //#endif
  kony.push.register(config); 
};

/**
 * プッシュ通知コールバックを登録する
 */
pushNotificationManager.setupCallbacks = function(reloadcallback) {
  kony.print("***** START SET UP PUSH CALLBACKS");
  reloadDataCallback = reloadcallback;
  let callbacks = {
    onsuccessfulregistration: pushNotificationManager.onSuccessfulRegistration,
    onfailureregistration: pushNotificationManager.onFailureRegistration,
    onlinenotification: pushNotificationManager.onlineNotification,
    offlinenotification: pushNotificationManager.offlineNotification,
    onsuccessfulderegistration: pushNotificationManager.onSuccessfulDeregistration,
    onfailurederegistration: pushNotificationManager.onFailureDeregistration
  };
  kony.push.setCallbacks(callbacks);
};

/**
 * Registration成功コールバック
 */
pushNotificationManager.onSuccessfulRegistration = function(identifier) {
  kony.print("***** SUCCESS PUSH REGISTRATION:"+identifier);
  pushNotificationManager.subscribe(identifier);
};

/**
 * Registration
 */
pushNotificationManager.subscribe = function(identifier) {
  kony.print("***** START PUSH SUBSCRIBE:"+identifier);
  var serviceParameter = {};
  serviceParameter.osType = kony.os.deviceInfo().name.toLowerCase();
  serviceParameter.deviceID = kony.os.deviceInfo().deviceid;
  serviceParameter.sID = identifier;
  serviceParameter.ufID = CmnLoginUserInfo.get().login_id;
  var messageClient = KNYMobileFabric.getMessagingService();
  messageClient.register(
    serviceParameter.osType, 
    serviceParameter.deviceID, 
    serviceParameter.sID, 
    serviceParameter.ufID, 
    function(results) {},
    function(error) {}
  );
};

/**
 * オンライン受信コールバック
 */
pushNotificationManager.onlineNotification = function(payload) {
  // アプリ起動時に呼び出される
  kony.print('onlineNotification:' + JSON.stringify(payload));
  var x = new kony.mvc.Navigation("frmLogin");
  x.navigate();
};
/**
 * オフライン受信コールバック
 */
pushNotificationManager.offlineNotification = function(payload) {
  // 通知タップで呼び出される
  kony.print('offlineNotification:' + JSON.stringify(payload));
  var x = new kony.mvc.Navigation("frmLogin");
  x.navigate(params);
};
```
それぞれのAPIについて、簡単にご説明します。

**①kony.push.register(config)**
は、デバイスとPush通知に登録するための処理で、
それぞれのデバイスごとに引数に以下のパラメーターを渡す必要があります。
上記のコードでは、iOSのみ登録をしています。

| デバイス | パラメーター |
|:-----------|:------------|
| iOS       |[次のいずれかor全てが必要] 0-通知タイプをバッジ、1-通知タイプをサウンド、2-通知タイプをアラートで表示| 
| Android       |[必須] senderid（FCMを使用するために登録されたアカウントのプロジェクトID）| 
※その他のデバイスについては、[こちら](https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.push_functions.htm)をご確認ください。

registerが成功すると、`onsuccessfulregistration`、
失敗すると、`onfailureregistration`を呼び出します。


**②kony.push.subscribe()** 
パラメーターにデバイスIDやOSのタイプを渡すことで、サーバーにデバイス情報を登録します。
ここで登録することによって、どのデバイスにPushを送信すれば良いかを判別します。
UFIDはユニークな情報を設定する必要があるので、ここでは、一意の社員番号を設定しています。

**③onlinenotification** 
iOS、Android、およびWindowsでは必須です。
アプリケーションの実行中にデバイスがメッセージを受信したときに実行される機能を指定します。
ここでは、ログイン画面に遷移するよう指定しています。

**④onlinenotification** 
iOS、Android、およびWindowsでは必須です。
アプリケーションが実行されているときにデバイスがメッセージを受信したときに実行される機能を指定します。
ここでは、ログイン画面に遷移するよう指定しています。

###④postAppinitでアクション設定

KonyVisualizerの左メニューから`Mobile`をクリックし、
右メニューのアクションで`Post Appinit`を選択します。
ここで、  `pushNotificationManager.setupCallbacks();`を設定すると、
アプリ表示後にそれぞれのコールバックが呼び出されPushの登録ができるようになります。

![スクリーンショット 2020-09-28 14.56.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c2334aa2-9605-ef5f-7721-0921bf9230cc.png)

ここまでの実装で、
デバイスを管理するためのEngagement Serverを作成し、
Engagement Serverにデバイスを登録するまでの実装が完了しました！

アプリをBuildしてみると、
アプリ起動後にPushの許可ポップアップが表示されたことが確認できました。
![img_push.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e86b2894-4b20-1ccb-20e4-99b28b140546.png)


また、ここで許可を選択すると、
対象のデバイスがEngagement ServiceのSubscriberに登録されます。
![IMG_1756.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a33a8def-aebe-f16f-706e-854dfe22bb55.png)


これでPushサーバーへのデバイス登録は完了です！
長くなってしまうため、次の記事でPushのメッセージ文の設定方法についてご説明します。

##まとめ
今回はPush送信のための実装方法をご説明しました。
記載すべきコードが多くとっつきにくいかと思いますが、
はじめは上記コードを真似して使ってみると、動きがわかってくるかと思います。
是非ご自分のアプリでも活用してみてくださいね！


##参考

[Subscribe API](https://docs.kony.com/konylibrary/messaging/engagement_api_guide/Content/Deprecated_APIs/Subscription_API.htm)

[Kony Push API](https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.push_functions.htm)