MonacaでiBeaconを試す
iOS7の新機能として登場したiBeaconですが、対応のデバイスも販売され始めており、徐々に広がりを見せています。そしてiBeaconに対応したアプリはMonacaでも開発が可能です。今回はiBeacon導入までのレクチャー記事になります。
iBeacon端末の用意
今回はiOSをiBeacon化するBeaconEggを使いました。iBeacon端末にするためにはアプリ内課金でiBeacon Senderを購入する必要があります。Mac OSX 10.9であれば、mttrb/BeaconOSXやXBeaconが利用できます。
Cordovaプラグインのインポート
iBeaconは標準のMonacaだけでは利用できません。petermetz/cordova-plugin-ibeaconというCordovaプラグインを使います。
Gitリポジトリをcloneするか、Zipファイルとしてダウンロードします。Zipでダウンロードした場合、一旦解凍して中のフォルダやファイルをすべて選択してZip圧縮する必要があります。cloneした場合も同じくcordova-plugin-ibeacon以下のファイルとフォルダをすべて選択してZip圧縮してください。
Monaca IDEでアップロード
iBeaconを試したいプロジェクトをMonaca IDEで開いて、設定メニューのCordovaプラグインの管理を選択します。
開いた画面の中で、Cordovaプラグインのインポートをクリックします。
そして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」にしてください。
実行
実際にアプリを立ち上げた所です。別なiOSデバイスでBeaconEggを実行し、iBeacon化しています。
その状態でMonacaアプリを立ち上げると、beaconsというデータに該当のiBeaconデータが入ってきます。rssiという強度部分が変化しています。距離もとれるので、それによって別な処理を実行すると言ったトリガーに使えると思います。ただし継続的にデータが送られ続けてくるので、一定のフィルタリング処理は必要そうです。
まとめ
Cordovaプラグインを使うことでiBeaconも簡単に実装ができます。今後さらに注目が高まるであろうIoT、O2O分野においてもMonacaアプリを活用するためにもぜひiBeaconと合わせてご利用ください！
