Visualizerを使ってiPhoneのクイックアクションを実装してみた


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

はじめに
---
iPhoneでホーム画面のアプリアイコンをフォースタッチすると、
以下のようにメニューが開いて、すぐに特定の画面にアクセスできる機能をご存知だと思います。
この機能をクイックアクションといいます。
参考：https://support.apple.com/ja-jp/guide/iphone/iphcc8f419db/ios


今回はVisualizerを使って、アプリアイコンをフォースタッチしてアイコンを表示し、
特定のフォームに遷移させるための方法をご紹介します:clap_tone1:

#### 完成イメージ
![タイトルなし.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/dbb098ee-6b3f-6f5a-38a1-eca04389fed4.gif)




実装方法
---
#### 1. フォームの作成
まずは、"Welcome"と"Form2"という２つのFormを用意します。

 
![image002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8fef1ed8-615c-f7ca-3d65-31b7e48ce5e4.png)
![image003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/3809616b-4f78-4b8a-69d2-8afb92edd896.png)


 
#### 2. プロジェクトにアイコンを追加

次に、フォースタッチ時に表示されるポップアップで使用するアイコンを追加する必要があります。アイコン画像は以下のパスに入れてください。
今回は月のアイコン(icon_moon.png)を追加しました。
“resources/mobile/native/iphone/mainbundle/”
![スクリーンショット 2021-03-08 13.57.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/1b8150b3-33f4-d912-df2e-4ee5f212a87b.png)


#### 3. Moduleの作成

フォースタッチ時のアクション処理を行うModuleを追加します。
**Module**を右クリックして、**New JS Module** > ``Appinit.js``を作成します。
 
![image005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ab9ef450-bd95-0145-b19f-b7b5a5d8a72c.png)




それでは中身を追加していきましょう。
iPhoneのホーム画面でクイックアクションを実行し、
アプリアイコンをフォースタッチした時に表示されるアイコンを表示するために、
``createQuickActionItems``を作成します。


```js:Appinit.js
createQuickActionItems = function() {
  var quickActionItems = [{ 
    "id": "first", 
    "title": "Item1", 
    "icon": kony.forcetouch.QUICK_ACTION_ICON_TYPE_HOME, 
    "info": null
  }, 
   { 
     "id": "second", 
     "title": "Item2", 
     "icon": "icon_moon.png", 
     "info": null 
   }];     

  kony.forcetouch.setQuickActionItems(quickActionItems); 
};
```

ここでは、
``kony.forcetouch.setQuickActionItems(quickActionItems)`` というメソッドを使用して、
ホーム画面でアプリアイコンをフォースタッチした時に表示されるアイコンを指定しています。

|パラメータ|説明|
|:--|:--|
|quickActionItems|下で説明するパラメータKeyと値のペアの配列|

|パラメータKey|説明|
|:--|:--|
|**Id**|どのクイックアクションかをアプリ側で判定するときに使うIDです|
|**Title**|クイックアクションのタイトルです|
|**Subtitle**(オプション):|クイックアクションのサブタイトルです|
|**Icon**(オプション):|クイックアクションのアイコンです。システム で提供されているアイコンを使用する場合は、[Force Touch System Icon Constants](https://docs.kony.com/7_3/konylibrary/visualizer/viz_api_dev_guide/content/kony.forcetouch_namespace_constants.htm#top)から選択することができます。カスタムアイコンを使用したい場合は、使用する**ファイル名**を文字列として設定してください。|
|**Info**|クイックアクションに関するアプリ定義の情報。アプリがアクションを実装する際に使用されます|

パラメータの**quickActionItems**は、
今回のデモでは、**HOMEアイコン**と**カスタムアイコン(icon_moon.png)**を使用しています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/71bf1d8e-9abd-19e8-166f-c7c915c6a801.png" width="400px">



次に、クイックアクションメニューを開き、
メニューを選択すると指定したフォームを開く処理を行うために、
**_onAppServiceCallback_**メソッドを追加します。

```js:Appinit.js
onAppServiceCallback = function(params) {
    var quickActionItem = params.launchparams.quickactionitem;
    if (quickActionItem) {
      if (quickActionItem.id == "first") {
        return "Form1";
      } else if (quickActionItem.id == "second") {
        return "Form2";
      }
    }
};
```

この関数では、アプリ起動時にタッチされたアイコンの情報を元にフォームの切り替えをしています。
アプリがフォースタッチ時に表示されるアイコンから起動されると、後ほど設定する**eventObject**に**quickactionitem**が格納され、**eventObject**の値が``params``として**onAppServiceCallback**に渡されます。
![スクリーンショット 2021-03-03 13.35.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ba1c6872-916f-5f13-42df-447c9eadf8fe.png)
この**params**は、"起動モード"と"起動パラメータ"の2つを保持していて、それぞれ "launchmode "と "launchparams "でアクセスできます。

||説明|
|:--|:--|
|launchmode|どこから起動されたかを数値で保持している。<br>「1」の場合はアプリをデバイスから通常起動<br>「3」の場合はサードパーティから起動|
|launchparams|起動時のパラメータを保持している|


今回は、**params.launchparams.quickactionitem**で起動パラメータを参照して、押されたアイコンの**id**と**title**を取得、そのIDに応じてフォームを切り替えています。



 
#### 4. メソッドの紐付け

App Serviceのイベントメニューで、
先ほど定義した関数を呼び出すことによって、クイックアクションを実行することができます。

App Serviceイベントは、アプリと接続されているバックグラウンドサービスの起動を行う際に呼び出されるイベントです。
各イベントについては、以下のような場合に呼び出されます。

| イベント名 |内容 |
|:-----------|:------------|
|Pre Appinit|アプリが起動された後〜アプリが読み込まれる前に呼び出されるイベント|
|Post Appinit|アプリが読み込まれた後〜データが表示される前に呼び出されるイベント|
|App Service|アプリと接続されているバックグラウンドサービスの起動を行う際に呼び出されるイベント|


まず、アプリの初期化時にクイックアクションのアイコンやタイトルをセットしたいので、以下の手順で``createQuickActionItems``を**Pre Appinit**に紐付けます。

**Mobile** > 画面右の**Pre Appinit** > **Edit** を選択

![image007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4ed111b7-016c-877a-88bb-5060bb7e3d31.png)

 

**Invoke Function** から、_createQuickActionItems_関数を選択します。
 
![image008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/db303037-8f51-d483-777c-f930bb902a14.png)

次に、クイックアクションメニューを選択した時のアクションをセットするために、
**App Service**には**_onAppServiceCallback_**を設定します。
 

 ![image009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/961e3d05-b764-bf3c-515c-5822e8b00859.png)
![スクリーンショット 2021-03-01 16.18.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/08376657-da5b-0413-493d-98a1c446869f.png)

次に、フォースタッチアイコンからアプリを起動した時に、
どのアイコンをタップしたか判断するため、**eventobject**でパラメータを指定します。

**values**下にある**Edit**をクリックして、**eventobject**を設定してください。
![giif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/1bfa1e22-94f5-4210-3e37-d5f0ba6b4350.gif)

これで、アプリをフォースタッチアイコンから起動したときに、アイコンの**title**や**id**がパラメータとして渡されるようになりました。


#### 5. 完成
![タイトルなし.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/77b4e23e-baa1-17bb-365f-56c450e3b1cc.gif)


ホームアイコンをタップすると、Welcomeの画面が表示され、
月のアイコンをタップすると、別の画面が表示されたことがわかるかと思います！

#### All source

```js:Appinit.js

//クイックアクションメニューで表示するアイコンを指定
createQuickActionItems = function() {
  var quickActionItems = [{ 
    "id": "first", 
    "title": "Item1", 
    "icon": kony.forcetouch.QUICK_ACTION_ICON_TYPE_HOME, 
    "info": null
  }, 
   { 
     "id": "second", 
     "title": "Item2", 
     "icon": "icon_moon.png", 
     "info": null 
   }];     

  kony.forcetouch.setQuickActionItems(quickActionItems); 
};

//各クイックアクションメニューを選択した時に、開くフォームを指定
onAppServiceCallback = function(params) {
  if (params.launchmode == 3) {
    var quickActionItem = params.launchparams.quickactionitem;
    if (quickActionItem) {
      if (quickActionItem.id == "first") {
        return "Form1";
      } else if (quickActionItem.id == "second") {
        return "Form2";
      }
    }
  }
};
```

まとめ
---

今回はアプリをフォースタッチした時に表示されるアイコンを変更する方法をご紹介しました。
是非お試しください！

<br>
**参考**
_Kony Doc_

https://docs.kony.com/7_3/konylibrary/visualizer/viz_api_dev_guide/content/kony.forcetouch_functions.htm#setQuick
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/content/Application_Events.htm
https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/content/SetAppLifecycleEvents.htm
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/Default.htm#kony.forcetouch_namespace_constants.htm