Asial Blog

Recruit! Asialで一緒に働きませんか?

MonacaでiBeaconを試す

カテゴリ :
Monaca
タグ :
JavaScript
Monaca
プラグイン

iOS7の新機能として登場したiBeaconですが、対応のデバイスも販売され始めており、徐々に広がりを見せています。そしてiBeaconに対応したアプリはMonacaでも開発が可能です。今回はiBeacon導入までのレクチャー記事になります。



iBeacon端末の用意



今回はiOSをiBeacon化するBeaconEggを使いました。iBeacon端末にするためにはアプリ内課金でiBeacon Senderを購入する必要があります。Mac OSX 10.9であれば、mttrb/BeaconOSXXBeaconが利用できます。



Cordovaプラグインのインポート



iBeaconは標準のMonacaだけでは利用できません。petermetz/cordova-plugin-ibeaconというCordovaプラグインを使います。




cordova-plugin-ibeaconのリポジトリ

cordova-plugin-ibeaconのリポジトリ



Gitリポジトリをcloneするか、Zipファイルとしてダウンロードします。Zipでダウンロードした場合、一旦解凍して中のフォルダやファイルをすべて選択してZip圧縮する必要があります。cloneした場合も同じくcordova-plugin-ibeacon以下のファイルとフォルダをすべて選択してZip圧縮してください。







Monaca IDEでアップロード



iBeaconを試したいプロジェクトをMonaca IDEで開いて、設定メニューのCordovaプラグインの管理を選択します。




設定メニューを開く

設定メニューを開く



開いた画面の中で、Cordovaプラグインのインポートをクリックします。




Cordovaプラグインのインポートをクリック

Cordovaプラグインのインポートをクリック



そしてZIP形式のプラグインをアップロードを選択して、ファイルダイアログで先ほど作成したZipファイルを選択、アップロードしてください。




Zipファイルをアップロード

Zipファイルをアップロード



無事完了するとプラグイン一覧の一番上に Proximity Beacon Plugin が表示されます。




プラグインがインストールされた状態

プラグインがインストールされた状態



テストコード



例えば次のようなコードを記述します。



  1. var logToDom = function (message) {
  2.   var e = document.createElement('label');
  3.   e.innerText = message;
  4.  
  5.   var br = document.createElement('br');
  6.   var br2 = document.createElement('br');
  7.   document.body.appendChild(e);
  8.   document.body.appendChild(br);
  9.   document.body.appendChild(br2);
  10.  
  11.   window.scrollTo(0, window.document.height);
  12. };
  13.  
  14. var delegate = new cordova.plugins.locationManager.Delegate();
  15.  
  16. delegate.didDetermineStateForRegion = function (pluginResult) {
  17.  
  18.     logToDom('[DOM] didDetermineStateForRegion: ' + JSON.stringify(pluginResult));
  19.  
  20. };
  21.  
  22. delegate.didStartMonitoringForRegion = function (pluginResult) {
  23.     console.log('didStartMonitoringForRegion:', pluginResult);
  24.     logToDom('didStartMonitoringForRegion:' + JSON.stringify(pluginResult));
  25. };
  26.  
  27. delegate.didRangeBeaconsInRegion = function (pluginResult) {
  28.  
  29.     logToDom('[DOM] didRangeBeaconsInRegion: ' + JSON.stringify(pluginResult));
  30.     cordova.plugins.locationManager.appendToDeviceLog('[DOM] didRangeBeaconsInRegion: '
  31.         + JSON.stringify(pluginResult));
  32. };
  33.  
  34. var uuid = '1E21BCE0-7655-4647-B492-A3F8DE2F9A02';
  35. var identifier = 'Sample Beacon1';
  36. var minor = 1;
  37. var major = 1;
  38. var beaconRegion = new cordova.plugins.locationManager.BeaconRegion(identifier, uuid, major, minor);
  39.  
  40. cordova.plugins.locationManager.setDelegate(delegate);
  41.  
  42. // required in iOS 8+
  43. cordova.plugins.locationManager.requestWhenInUseAuthorization(); 
  44. // cordova.plugins.locationManager.requestAlwaysAuthorization()
  45.  
  46. cordova.plugins.locationManager.startMonitoringForRegion(beaconRegion)
  47.     .fail(console.error)
  48.     .done();
  49.  
  50. cordova.plugins.locationManager.startRangingBeaconsInRegion(beaconRegion)
  51.     .fail(console.error)
  52.     .done();


uuid、identifier、minorおよびmajorはBeaconEggのデフォルトのものに合わせています。DeviceReadyになってから実行してください。



iOSアプリとしてビルド



Cordovaプラグインを使っている機能は、Monacaデバッガーで試すことはできません。そこでiOSアプリとしてビルド、インストールします。下記に注意して行ってください。



Xcode6でビルド



cordova-plugin-ibeaconはXcode6のみ対応となっています。デフォルトのままビルドしようとしても失敗します。そこでiOSアプリ設定(設定メニューの中)のその他にあるXcodeバージョンを「バージョン6」にしてください。




Xcode6に変更

Xcode6に変更



実行




立ち上げ時に位置情報取得について確認が出ます

立ち上げ時に位置情報取得について確認が出ます



実際にアプリを立ち上げた所です。別なiOSデバイスでBeaconEggを実行し、iBeacon化しています。



その状態でMonacaアプリを立ち上げると、beaconsというデータに該当のiBeaconデータが入ってきます。rssiという強度部分が変化しています。距離もとれるので、それによって別な処理を実行すると言ったトリガーに使えると思います。ただし継続的にデータが送られ続けてくるので、一定のフィルタリング処理は必要そうです。




iBeaconに反応している状態

iBeaconに反応している状態



まとめ



Cordovaプラグインを使うことでiBeaconも簡単に実装ができます。今後さらに注目が高まるであろうIoT、O2O分野においてもMonacaアプリを活用するためにもぜひiBeaconと合わせてご利用ください!



Monaca - HTML5ハイブリッドアプリでアプリ開発を加速します