Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@VoltMX_Team(VoltMX)inKony Team

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

Last updated at Posted at 2021-03-08

目次

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

はじめに

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

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

完成イメージ

タイトルなし.gif

実装方法

1. フォームの作成

まずは、"Welcome"と"Form2"という２つのFormを用意します。

image002.png
image003.png

 

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

次に、フォースタッチ時に表示されるポップアップで使用するアイコンを追加する必要があります。アイコン画像は以下のパスに入れてください。
今回は月のアイコン(icon_moon.png)を追加しました。
“resources/mobile/native/iphone/mainbundle/”
スクリーンショット 2021-03-08 13.57.12.png

3. Moduleの作成

フォースタッチ時のアクション処理を行うModuleを追加します。
Moduleを右クリックして、New JS Module > Appinit.jsを作成します。

image005.png

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

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から選択することができます。カスタムアイコンを使用したい場合は、使用するファイル名を文字列として設定してください。
Info クイックアクションに関するアプリ定義の情報。アプリがアクションを実装する際に使用されます

パラメータのquickActionItemsは、
今回のデモでは、HOMEアイコンと**カスタムアイコン(icon_moon.png)**を使用しています。

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

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
このparamsは、"起動モード"と"起動パラメータ"の2つを保持していて、それぞれ "launchmode "と "launchparams "でアクセスできます。

説明
launchmode どこから起動されたかを数値で保持している。
「1」の場合はアプリをデバイスから通常起動
「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

Invoke Function から、_createQuickActionItems_関数を選択します。

image008.png

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

image009.png
スクリーンショット 2021-03-01 16.18.51.png

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

values下にあるEditをクリックして、eventobjectを設定してください。
giif.gif

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

5. 完成

タイトルなし.gif

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

All source

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";
      }
    }
  }
};

まとめ

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


**参考** _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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?