MonacaでiBeaconを試す

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のリポジトリ

 

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

 

 

Monaca IDEでアップロード

 

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

 


設定メニューを開く

 

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

 


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

 

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

 


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

 

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

 


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

 

テストコード

 

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

 


var logToDom = function (message) {
  var e = document.createElement('label');
  e.innerText = message;
  var br = document.createElement('br');
  var br2 = document.createElement('br');
  document.body.appendChild(e);
  document.body.appendChild(br);
  document.body.appendChild(br2);
  window.scrollTo(0, window.document.height);
};
var delegate = new cordova.plugins.locationManager.Delegate();
delegate.didDetermineStateForRegion = function (pluginResult) {
    logToDom('[DOM] didDetermineStateForRegion: ' + JSON.stringify(pluginResult));
};
delegate.didStartMonitoringForRegion = function (pluginResult) {
    console.log('didStartMonitoringForRegion:', pluginResult);
    logToDom('didStartMonitoringForRegion:' + JSON.stringify(pluginResult));
};
delegate.didRangeBeaconsInRegion = function (pluginResult) {
    logToDom('[DOM] didRangeBeaconsInRegion: ' + JSON.stringify(pluginResult));
    cordova.plugins.locationManager.appendToDeviceLog('[DOM] didRangeBeaconsInRegion: '
        + JSON.stringify(pluginResult));
};
var uuid = '1E21BCE0-7655-4647-B492-A3F8DE2F9A02';
var identifier = 'Sample Beacon1';
var minor = 1;
var major = 1;
var beaconRegion = new cordova.plugins.locationManager.BeaconRegion(identifier, uuid, major, minor);
cordova.plugins.locationManager.setDelegate(delegate);
// required in iOS 8+
cordova.plugins.locationManager.requestWhenInUseAuthorization(); 
// cordova.plugins.locationManager.requestAlwaysAuthorization()
cordova.plugins.locationManager.startMonitoringForRegion(beaconRegion)
    .fail(console.error)
    .done();
cordova.plugins.locationManager.startRangingBeaconsInRegion(beaconRegion)
    .fail(console.error)
    .done();

 

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

 

iOSアプリとしてビルド

 

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

 

Xcode6でビルド

 

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

 


Xcode6に変更

 

実行

 


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

 

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

 

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

 


iBeaconに反応している状態

 

まとめ

 

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

 

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