[ionic][cordova]バイブレーション機能を利用する

バイブレーション機能を利用して、タップした時のフィードバックとして振動させる方法です。

1.プラグインを取り込む準備をする

bower.json

{
        :
  "dependencies": {
    "angular-translate": "~2.7.2",
    "angular-translate-handler-log": "~2.7.2",
    "angular-translate-loader-static-files": "~2.7.2",
    "ngCordova": "~0.1.23-alpha"  /* ここを追加 */
  }
        :
}

package.json

{
        :
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "com.ionic.keyboard",
    "cordova-plugin-vibration"  /* ここを追加 */
  ],
        :
}

2.プラグインを取り込み、環境を再構築する

npm install
ionic state restore

3.バイブレーション起動用サービスを作成する

ブラウザでテストしている際にエラーにならないように、Android端末でのみバイブレーションが起動するようにします。

hage-services.js

service.factory('HageService', function ($cordovaVibration) {
  return {
    // Android端末でバイブレーションを使用する
    vibration: function(time) {
      if (navigator.userAgent.match(/Android/i)) {
        $cordovaVibration.vibrate(time);
      }
    }
  }
});

4.バイブレーションを起動する

hage-ctrl.js

controller.controller('HageCtrl', function ($scope, HageService) {
  $scope.vibration = function(){
    HageService.vibration(50);
  }
}

hage.html

<div ng-click="vibration()">