Cordovaでは専用のプラグインを使うことでデバイスのAPIへアクセスすることができるようになっています。
これによってJavaScriptでデバイスの機能を扱うことができるだけではなく、プラットフォーム間の差も埋めて(プラグインが対応していれば)くれます。
[JavaScript] → [Cordova Plugin] → [Native APIs] → [Device OS]
といった感じです。
プラグインの探し方
そんな便利なプラグインはnpmで管理されているのでnpmのサイトから探せますが、Cordovaのサイトを使うと対応プラットフォームが確認しやすかったり、プラットフォームでフィルターをかけることができるので便利です。
そもそもプラグインを使ってどんなことができるのかわからない!という場合には、Cordovaのドキュメントを確認しておくといいです。
プラグインの使い方
ということで、バイブレーション機能を扱うプラグインを使ってみます。
インストール
Cordova Pluginsページで「vibration」をキーワードに検索してプラグインを探します。
いくつかヒットした場合にはプラットフォームが対応しているか、バージョンが高いか、ダウンロード数が多いか、更新されているかなどを目安に使うものを決めるといいです。
また、先ほどのCordovaのドキュメントで紹介されているものを使うという手もあります。
使いたいプラグインが決まったらプラグイン名をクリックしてnpmのページにいってインストール方法や使い方を確認します。
今回は一番上にでてきた「cordova-plugin-vibration」を使うことにしました。
1 |
cordova plugin add cordova-plugin-vibration |
インストールコマンドはこのように「cordova plugin add プラグイン名」となっています。
このコマンドはCordovaのプロジェクトルートにいる状態で実行します。他の場所で実行してしまった場合は「Error: Current working directory is not a Cordova-based project.」といったエラーが表示されてインストールされないので注意です。
インストールはCordovaのプロジェクトフォルダにあるpluginsフォルダにされて読み込みは自動的で行われます。
また、各プラットフォームフォルダの設定ファイル(AndroidManifest.xmlやios.json)にこの機能を使うぜ!的な設定が追加されます。
これによりAndroidではアプリをインストールするときに提示される「アプリがアクセスするデバイスの機能」だったり、iPhoneなら「アプリ名が○○へのアクセスを求めています」といったポップアップが表示され、許可された場合にデバイスの機能(今回の場合はバイブレーション機能)が使えるようになります。
アンインストール
アンインストールしたい場合には「cordova plugin remove プラグイン名」を実行します。
1 |
cordova plugin remove cordova-plugin-vibration |
addがremoveに変わっただけなので覚えやすいですね。
なお、「cordova plugin list」というコマンドを実行するとインストールされているプラグインのリストが取得できます。
1 |
cordova plugin list |
使い方
使い方はプラグインのページにちゃんと書いてるので、とりあえず読みましょう。
使用上の注意点としてはデバイスの機能にアクセスするものの場合、devicereadyイベントが発火してから使いましょう。といったところです。
devicereadyイベントはCordovaフレームワークがデバイスの機能へアクセスできるようになった段階で発火するイベントです。
プラグインのページにも書いてますね。
で、どう使うかというと。
「www/js/index.js」にある
1 2 3 |
onDeviceReady: function() { // script }, |
の部分にコードを書いていく形になります。
例えばアプリを起動したときにバイブレーションを鳴らしたい場合はこうなります。
1 2 3 |
onDeviceReady: function() { navigator.vibrate(1000); }, |
ボタンが押されたときに鳴らしたい場合はこんな感じです。
1 2 3 4 5 6 |
onDeviceReady: function() { var vibrate_start_btn = document.getElementById('vibration-start'); vibrate_start_btn.addEventListener('click', function(){ navigator.vibrate(100); }, false); }, |
1 2 3 |
<body> <button id="vibrate-start">バイブレーションを鳴らす</button> </body> |
簡単ですねー。
バイブレーションは機能的にシンプルなので、とりあえずプラグインを使ってみたい場合にはオススメです。
おわり
ということでプラグインの使い方でした。
ではでは ( ͡° ͜ʖ ͡° )ノシ