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 1 year has passed since last update.

Konyでスマートフォンのバイブレーションを実装してみる

Last updated at Posted at 2021-02-15

目次

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

はじめに

画面上のインターフェースだけでなく、音や振動といったインターフェースもあると、
ユーザーにとってより分かりやすいアプリになるのではないでしょうか?
そこで今回はこの記事ではKonyでスマートフォンを振動させる(バイブレーション)方法をご紹介します。

実装方法

①画面の作成

image.png

下の「カートにいれる」ボタンをタップすると、スマートフォンが振動するイメージです。

②コーディング

frmDemoControllerのコーディングを行います。

frmDemoController.js
define({ 
  onClick: function() {
    const NUM_OF_VIBRATION = 10;
    const NUM_OF_BETWEEN_TWO_VIBRATION = 200;
    
    const NUM_OF_DELAY = 0;
    const NUM_OF_DURATION = 500;
    const NUM_OF_AMPLITUDE = 255;

    var vibrationConfig=[
      {
        "delay": NUM_OF_DELAY,
        "duration": NUM_OF_DURATION,
        "amplitude": NUM_OF_AMPLITUDE
      },
    ];

    var vibrationConfigLoadMore = {
      "delay": NUM_OF_BETWEEN_TWO_VIBRATION,
      "duration": NUM_OF_DURATION,
      "amplitude": NUM_OF_AMPLITUDE
    };

    for (var i = 0; i < NUM_OF_VIBRATION - 1; i++) {
		vibrationConfig.push(vibrationConfigLoadMore);
    }
    
    //#ifdef android
    if(kony.phone.hasVibratorSupport()===true) {
      kony.phone.startVibration(vibrationConfig, false);

    } else{
      alert("The device does not support vibration");  
    }
    //#else
    kony.phone.startVibration(vibrationConfig, false);
    //#endif
 
    this.imgItem1Animation();
  },
  
  // imgItem1のアニメーション
  imgItem1Animation: function(){
    this.view.imgItem1.animate(
    kony.ui.createAnimation({
        "100": {
            "top": "60%",
            "stepConfig": {
                "timingFunction": kony.anim.EASE
            },
            "width": "0px",
            "height": "0px"
        }
    }), {
        "delay": 0,
        "iterationCount": 1,
        "fillMode": kony.anim.FILL_MODE_FORWARDS,
        "duration": 0.5
    }, {"animationEnd": this.imgChange()}
    );
  },
  
  // imgCartをチェンジ
  imgChange: function(){
    this.view.imgCart.src = "shoppingcart_item.png";
  }
});

上を説明します。

kony.phone.hasVibratorSupport:デバイスがバイブレーションをサポートしているかどうか確認(Android,Windowsのみ利用可能、iPhoneは利用不可)
kony.phone.startVibration:デバイスのバイブレーション機能を開始
パラメータは以下の通り

パラメータ値 説明
delay 指定した遅延時間(ミリ秒単位)で振動を一時停止
duration デバイスが振動するミリ秒数
amplitude 振動の強さ。0〜255の値で定義する必要がある。0に設定すると振動オフ、255に設定すると最も強い振動

※iOSでは1回のみの振動となります。そのためiPhoneの振動数を設定することはできません。

imgItem1Animation:上の商品が下のカートに吸い込まれるアニメーション
(アニメーションについてはこちらをみていただけると幸いです)
imgChange:カートの画像が入れ替わります(チェックマークのついたカートになります)

③Actionの紐付け

関数の準備ができたらActionと紐づけていきます。
btnClickMe(「カートをいれる」ボタン)を選択 > Actionタブをクリック > onClickのEditをクリック > Action(onClick)紐づけ
image.png

iOSでの準備はここまでで完了です!
iOSのみを使用する方は、④実装の確認 まで飛ばしてください。

※Androidの場合

Androidでバイブレーションを実装する場合、以下の手順でバイブレーションの許可設定をする必要があります。

1)Project Setting をクリック
image001.png

2)Native をクリック
スクリーンショット 2022-04-01 15.48.42.png

3)Android Mobile/Tablet をクリック
スクリーンショット 2022-04-01 15.48.59.png

4)一番下までスクロールして、VIBRATEをクリック
スクリーンショット 2022-04-01 15.49.28.png

5)Addをクリック
スクリーンショット 2022-04-01 15.50.55.png

6)Done をクリック
スクリーンショット 2022-04-01 15.50.04.png

以上で、Androidでバイブレーションを許可することができます。
それでは、実装の確認をしていきましょう。

④実装の確認

残念ながら動画上では振動しているかどうかわからないのですが、もしよろしければ上を参考にしていただき、
実装後、確認していただけると幸いです!

まとめ

今回は、スマートフォンのバイブレーションを実装する方法について説明しました。
みなさんもぜひ活用してみてくださいね:wave:

参考

kony.phone Namespace:
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.phone_functions.htm

アニメーション:
https://qiita.com/Kony_Team/items/fe366974dd72dc2af345

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
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?