アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

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ハイブリッドアプリでアプリ開発を加速します