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

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

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

# 実装方法
#### **①画面の作成**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7aa4fdcb-8087-1b64-42c6-854120ccffb5.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**：上の商品が下のカートに吸い込まれるアニメーション
（アニメーションについては[こちら](https://qiita.com/Kony_Team/items/fe366974dd72dc2af345)をみていただけると幸いです）
**imgChange**：カートの画像が入れ替わります（チェックマークのついたカートになります）

#### **③Actionの紐付け**
関数の準備ができたらActionと紐づけていきます。
`btnClickMe`(「カートをいれる」ボタン)を選択 > `Action`タブをクリック > `onClick`のEditをクリック > Action(`onClick`)紐づけ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4175edc4-287f-1e0b-bb02-0aa0614d0993.png) 

iOSでの準備はここまでで完了です！ 
iOSのみを使用する方は、[④実装の確認](https://qiita.com/drafts/17f69a70866cee19d43d/edit#:~:text=%E3%81%8D%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%EF%BC%81-,%E2%91%A3%E5%AE%9F%E8%A3%85%E3%81%AE%E7%A2%BA%E8%AA%8D,-%E6%AE%8B%E5%BF%B5%E3%81%AA%E3%81%8C%E3%82%89%E5%8B%95%E7%94%BB) まで飛ばしてください。

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

１）**Project Setting** をクリック
![image001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e6132750-0c68-384a-7d58-eaf0e1038078.png)

２）**Native** をクリック
![スクリーンショット 2022-04-01 15.48.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/0d772537-b346-971a-f48b-5e66879a5e36.png)


３）**Android Mobile/Tablet** をクリック
![スクリーンショット 2022-04-01 15.48.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f5565e90-d8d6-45ed-b8a1-19ba9f0ea8db.png)


４）一番下までスクロールして、**VIBRATE**をクリック
![スクリーンショット 2022-04-01 15.49.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/45c1e852-9a10-a224-0160-8f435d61ab08.png)


５）**Add**をクリック
![スクリーンショット 2022-04-01 15.50.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/84bd844d-1b2e-650d-83a5-77de157a9454.png)


６）**Done** をクリック
![スクリーンショット 2022-04-01 15.50.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/36f1f544-e856-6c95-05b7-7fcd54b98218.png)



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


#### **④実装の確認**
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/tyyMCBjJWH">pic.twitter.com/tyyMCBjJWH</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1359415879168000004?ref_src=twsrc%5Etfw">February 10, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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