Kony でローカル通知を使用する方法


目次
---

1. はじめに<br>
2. 実装方法<br>
3. まとめ<br>


はじめに
---
本記事では、Konyのアプリでローカル通知を使用する方法についてご紹介いたします。
Konyでは通知を設定するために"**kony.localnotifications**”というAPIが用意されているので、今回はそちらを使って実装していきたいと思います。
完成イメージは以下です。

####完成イメージ
![タイトルなし.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/0cd0004d-f82e-aeac-42c9-a1c80d0ab8cb.gif)




































**ローカル通知とは** :astonished:?

>ローカル通知とは一般的なプッシュ通知（リモート通知）と異なり、外部サーバを介する必要がなく、デバイスの内部で完結するプッシュ通知です。 アプリ内にあらかじめ定義されたルールに従い通知がスケジュールされ、そのタイミングになったところでリモート通知と同じように通知が表示されます。
参考：https://repro.io/contents/local-push-notification/



実装方法
---

#### モジュールの作成
まず、通知の制御をするためのコードを記述するjsファイルを作成していきます。 
**Module**を右クリックして、「**New JS Module**」を選択します。
![image004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/73608f38-d2b6-88c3-97d4-87dfd9d7dc5f.png)

 








作成したjsファイルの名前をcreateLocalnotification.js に変更します。こちらは任意で設定してください。
![image006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/13c6195e-9ad6-4a64-9d09-c7b0aed75992.png)


#### 通知の設定 [説明]
コードを書いていく前にローカル通知に必要な**kony.localnotifications.create**について説明します。

```js

kony.localnotifications.create(
    notificationId,
    datetime,
    message,
    title,
    categoryId,
    pspConfig)
```
|パラメータ|説明|
|---|---
|notificationId|どの通知かを判断するために指定するID|
|datetime|通知のトリガーになる日付と時間|
|message|通知のメッセージ内容|
|title|通知のタイトル|
|categoryId|通知のカテゴリーID|
|pspConfig|キーと値のペアで指定する、iOSプラットフォーム固有のオプション設定|
**pspConfig**には、以下の種類のキーがあります。
●	badge: アプリアイコンに通知数を表示するためのキー
●	sound: 再生するサウンドを指定するオプションのキー

※pspConfigはiOSのみのオプションです。

#### 通知の設定 [実装]
それでは実際に、**kony.localnotifications.create**に設定するパラメータを定義していきます。

```js:createLocalnotification.js
function createLocalnotification() {
  var notificationId = "01";
  //#ifdef iphone
  var date = "19 Feb 2021 16:05:00 GMT+9";
  //#endif
  //#ifdef android
  // androidの場合は UTC で指定
  var date = "19 Feb 2021 15:05:00 +0700";
  //#endif
  var format = "dd MMM yyyy HH:mm:ss Z";
  var message = "Local notification Received";
  var title = "Title";
  var categoryId = "calendar";
    kony.localnotifications.create({
    "id": notificationId,
    "dateTime": {
      "date": date,
      "format": format
    },
    "message": message,
    "title": title,
    "categoryId": categoryId,
    "pspConfig": {
      "badge": 1,
      "sound": kony.localnotifications.DEFAULT_SOUND
    }

  });

}
```

id, dataTime, message, title, categoryId, pspConfig を定義して、それぞれにセットしています。

以下で、dataTime と pspConfig について詳しく説明していきます。 

**dateTime**には、日付と時間・そのフォーマットを指定します。
"format"に従った"date"を定義します。
**例：ここでは日本のタイムゾーン(GMT+9)を使用しています。場合に応じて変更してください。**

※ androidの場合は UTC での指定が必要


```
var date = "19 Feb 2021 16:05:00 GMT+9";
var format = "dd MMM yyyy HH:mm:ss Z";
```

**formatの解説 :**
-	dd  : 日付
-	MMM: 月を英語表記で指定
(Jan,Feb,Mar,Apr,May,Jun,July,Agu,Sep,Oct,Nov,Dec)
-	yyyy :  年
-	HH :  時間
-	mm :  分
-	ss : 秒
-	Z : タイムゾーン


**pspConfig**には、アプリアイコンに通知数を表示するための**badge**と、 再生するサウンドを指定する**sound**を設定します。
今回は通知数をカウントするわけでは無いので、1 をセットしておきます。
![スクリーンショット 2021-03-24 18.53.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d8396bcc-d967-c541-dde9-65d09f52961d.png)
サウンドはデフォルトの音を使うように指定しました。(kony.localnotifications.DEFAULT_SOUND)



#### 通知から実行するアクションの設定 [説明]

通知に設定するアクションについて解説していきます。
まずは、アクションの作成に必要な**kony.notificationsettings.createAction**について説明します。**kony.notificationsettings.createAction**には以下のパラメータがあります。

```js

kony.notificationsettings.createAction (
     actionId, 
     label, 
     pspConfig)
```
|パラメータ|説明|
|--|--|
|actionId [String]|アクションを識別するためのID|
|label [String]|アクションを表すラベル|
|**pspConfig** [JSObject]|キーと値のペアで指定するアクションの設定。詳細は以下で説明します。|


**pspConfig**にも、いくつか要素があるので以下で説明します。

|オプション|説明|
|--|--|
|activationMode [Number]|【必須】起動モードを指定することができます。<br>起動モードには、フォアグラウンドでアクションが発生する**kony.notificationsettings.ACTIVATION_MODE_FORWARDS**と、<br>バックグラウンドでアクションが発生する**kony.notificationsettings.ACTIVATION_MODE_BACKWARDS**の２種類があります。<br><font color="red">※ activationModeプロパティは、iOSプラットフォームにのみ適用できます。</font>|
|authenticationRequired [Boolean] |【必須】このパラメータは、activationModeを**kony.notificationsettings.ACTIVATION_MODE_BACKWARDS**と設定した場合にのみ適用されます。デバイスのロックを解除する必要があるかを設定します。|
|destructive [Boolean]|【必須】通知が消えるようにしたいのであれば、この値をtrueに設定します。それ以外の場合は、falseに設定します。|
|visibleOn [String]|【必須】通知をWatchやiPhoneに表示する設定ができます。どれに表示するかを以下のオプションで選択できます。<br>**・kony.notificationsettings.WATCH_ONLY**<br>**・kony.notificationsettings.BOTH**<br>**・kony.notificationsettings.WATCH_ONLY**|



#### 通知から実行するアクションの設定 [実装]
デモでは、「Accept」「Reject」「Decline」の3つのアクションを作成します。
作成したコードは以下です。
![スクリーンショット 2021-03-24 18.58.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/0d1e3714-0b70-9b1e-9062-5063faf37cce.png)

```js:createLocalnotification.js
 var accept = kony.notificationsettings.createAction({
    "id": "Accept",
    "label": "Accept",
    "pspConfig": {
      "authenticationRequired": true,
      "destructive": true,
      "activationMode": kony.notificationsettings.ACTIVATION_MODE_FORWARDS,
     "visibleOn": kony.notificationsettings.BOTH
    }
  });

  var reject = kony.notificationsettings.createAction({
    "id": "Reject",
    "label": "Reject",
    "pspConfig": {
      "authenticationRequired": false,
      "destructive": false,
      "activationMode": kony.notificationsettings.ACTIVATION_MODE_FORWARDS,
      "visibleOn": kony.notificationsettings.BOTH
    }
  });

  var decline = kony.notificationsettings.createAction({
    "id": "Decline",
    "label": "Decline",
    "pspConfig": {
      "activationMode": kony.notificationsettings.ACTIVATION_MODE_BACKWARDS,
      "authenticationRequired": true,
      "destructive": false,
      "visibleOn": kony.notificationsettings.BOTH
    }
  });
```



#### アクションをまとめたカテゴリーの設定 [説明]
次に、作成したアクションを１つのカテゴリーとしてまとめる**_kony.localnotifications.createCategory_**について説明します。

```js
kony.localnotifications.createCategory(
   categoryId,
   actions, 
   pspConfig:{
       minimalActions:[actions],
       presentationOptions
   }
);
```

|パラメータ|説明|
|--|--|
|categoryId[String]|作成したカテゴリーを判別するためのID|
|actions[String]|カテゴリーに紐づくアクションを指定します。アクションがない場合は、nullを渡します。<br><br><font color="red">注意：iOSでは4つ以上のアクション、Androidでは3つ以上のアクションを追加することはできません。</font>|
|pspConfig[JsObject]|キーと値のペアで指定するカテゴリーの設定。詳細は以下です。|

※pspConfigはiOSのみのオプションです。
カテゴリーの**pspConfig**にも、いくつか要素があるので説明していきます。

|オプション|説明|
|---|---|
|minimumActions [array]|【必須】このパラメータは、iOSプラットフォームにのみ適用され、カテゴリの最小限のアクションを指定します。|
|presentoptions [array]|このパラメーターを使用すると、通知の表示オプションを以下から選択できます。<br>UNNotificationPresentationOptionBadge – 0：通知バッジアイコンを追加します。<br>UNNotificationPresentationOptionSound – 1：サウンドを再生します。<br>UNNotificationPresentationOptionAlert – 2：通知バナーを表示します。<br>※このパラメータは、V8SP3以降で使用できます。|


####アクションをまとめたカテゴリーの設定 [実装]
それでは先ほど作成した「Accept」「Reject」「Decline」のアクションを1つのカテゴリーとしてまとめていきます。

```js:createLocalnotification.js

  var defaultActionContextArr = [accept, reject, decline];
  var minimalActionContextArr = [accept, reject];
  var categoryObj = kony.notificationsettings.createCategory({
    "categoryId": categoryId,
    "actions": defaultActionContextArr,
    "pspConfig": {
      "minimalActions": minimalActionContextArr
    }
  });
```
``defaultActionContextArr`` には、「Accept」「Reject」「Decline」の3つを格納します。
最低限のアクションを定義する``minimalActionContextArr``には、「Accept」「Reject」を格納しました。


####カテゴリーの登録 [説明]

カテゴリーの作成が終わったら、通知にカテゴリーを登録する必要があります。登録には**kony.notificationsettings.registerCategory**を使用します。

```js
kony.notificationsettings.registerCategory (
    categories,
    pspConfig)
```

|パラメータ|説明|
|---|---|
|categories [array]|登録するカテゴリーを指定します。|
|pspConfig[JsObject] |通知のオプションを設定します。オプションは以下です。<br>types [String]【必須】<br>通知の種類を決めることができます。<br> 0 - 通知タイプを Badge とする。<br>1 - 通知の種類を Sound とする。<br>2 - 通知の種類を Alert とする。|

####カテゴリーの登録 [実装]
それでは実際にカテゴリーを登録していきます。

```js:createLocalnotification.js

  var categoryArr = [categoryObj];

  var registerCategory = kony.notificationsettings.registerCategory({
    "categories": categoryArr,
    "pspConfig": {
      "types": [0, 1, 2]
    }
  });
```

``categoryArr``には、カテゴリーの設定[実装]で作成した``categoryObj ``を格納しています。

そして、その``categoryArr``を``registerCategory``に登録して、バッジ・音・アラートの3つで通知が来るように設定しました。

<br>

**※ Androidの場合は、以下の設定が必要です。**  
Project Setting > Native > Android > Enable Local Notifications をON

![スクリーンショット 2021-06-17 19.53.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/fe948d1a-6d7c-2774-8d63-181fe83a1ed3.png)




#### ライフサイクルイベントにセットする[説明]
[ライフサイクル](https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/SetAppLifecycleEvents.htm)とは、アプリが起動してデバイスのメモリに入り、終了してメモリから解放されるまでの一連の活動のことです。アプリのライフサイクルには、初期化前、初期化後、App Service、Deeplink、On View State Change、On Searchなどの特定のフェーズがあります。 

通知からのアクションは、アプリがロードされてデータが表示される前（Pre Appinit）のフェーズで設定する必要があります。


#### ライフサイクルイベントにセットする[実装]

1) プロジェクトから、設定したい端末(今回はMobile)を選択

2) 画面右から**Pre Appinit**を選択

3) **Invoke Function**を選択して、作成した**createLocalnotification**を設定

![image009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/12f37378-0007-5544-464e-d785cb90bf49.png)
![image011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c9e4960b-6943-0475-1fc0-07eadf6ead69.png)


####完成
ビルドすると以下を確認することができます。

|iOS|Android|
|--|--|
|![image008.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/1664d7d4-979f-e567-090a-de9847eb1dbe.gif)|![image011.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/788ef146-3710-5768-b06e-cf3b54ef80e6.gif)
|




#### 作成したソースの全体

```js:createLocalnotification.js
function createLocalnotification() {
  var notificationId = "01";
  //#ifdef iphone
  var date = "19 Feb 2021 16:05:00 GMT+9";
  //#endif
  //#ifdef android
  // androidの場合は UTC で指定
  var date = "19 Feb 2021 15:05:00 +0700";
  //#endif
  var format = "dd MMM yyyy HH:mm:ss Z";
  var message = "Local notification Received";
  var title = "Title";
  var categoryId = "calendar";

  var accept = kony.notificationsettings.createAction({
    "id": "Accept",
    "label": "Accept",
    "pspConfig": {
      "authenticationRequired": true,
      "destructive": true,
      "activationMode": kony.notificationsettings.ACTIVATION_MODE_FORWARDS,
      "visibleOn": kony.notificationsettings.BOTH
    }
  });

  var reject = kony.notificationsettings.createAction({
    "id": "Reject",
    "label": "Reject",
    "pspConfig": {
      "authenticationRequired": false,
      "destructive": false,
      "activationMode": kony.notificationsettings.ACTIVATION_MODE_FORWARDS,
      "visibleOn": kony.notificationsettings.BOTH
    }
  });

  var decline = kony.notificationsettings.createAction({
    "id": "Decline",
    "label": "Decline",
    "pspConfig": {
      "activationMode": kony.notificationsettings.ACTIVATION_MODE_BACKWARDS,
      "authenticationRequired": true,
      "destructive": false,
      "visibleOn": kony.notificationsettings.BOTH
    }
  });

  var defaultActionContextArr = [accept, reject, decline];
  var minimalActionContextArr = [accept, reject];
  var categoryObj = kony.notificationsettings.createCategory({
    "categoryId": categoryId,
    "actions": defaultActionContextArr,
    "pspConfig": {
      "minimalActions": minimalActionContextArr
    }
  });

  var categoryArr = [categoryObj];
  var registerCategory = kony.notificationsettings.registerCategory({
    "categories": categoryArr,
    "pspConfig": {
      "types": [0, 1, 2]
    }
  });

  kony.localnotifications.create({
    "id": notificationId,
    "dateTime": {
      "date": date,
      "format": format
    },
    "message": message,
    "title": title,
    "categoryId": categoryId,
    "pspConfig": {
      "badge": 1,
      "sound": kony.localnotifications.DEFAULT_SOUND
    }
  });
}
```

まとめ
---
今回はKonyでローカル通知を使用する方法についてご紹介いたしました。是非試してみてください！

**参考**

https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.localnotifications_functions.htm#kony.loc2

https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.notificationssettings_functions.htm#kony.not2