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

コメント

  • m.n

    テストコードはどこに記述したらよいのでしょうか?
    また、iOSアプリ設定にX-codeのバージョンの項目がありませんが、
    無くなってしまったのでしょうか。
    できましたら、サンプルプログラムをアップロードしていただけますか。

    お忙しいところ、恐縮ですが、
    よろしくお願いいたします。

  • MOONGIFT 中津川篤司

    こちらにアップロードしてあります。Cordovaプラグインを使っているのでGoldプラン以上が対象になります。

    https://github.com/moongift/Monaca-iBeacon-Demo

    Xcodeの設定は既に64bitオンリーになったのでないかも知れません。なければ気にせずとも大丈夫です。

  • まこと

    良くあるアプリを起動しない状態でビーコンが近くなったら広告やクーポンをプッシュ通知する様な事はできますでしょうか?
    調べても見つからなかったのですがmonacaだと難しいのでしょうか?

  • MOONGIFT 中津川篤司

    まことさん>
    Cordova(Monaca含む)だとバックグラウンドからJavaScriptのコードを呼び出すことができないので、プラグイン内部で独自に実装する必要があります。

  • yusuke

    こんにちは。
    参考になるブログありがとうございます。
    先ほど試していたのですが、Cordova Pluginを入れるとiOSのビルドが失敗してしまいます。
    Pluginを外すと成功します。
    ブログの内容をみると、Xcodeのバージョンを指定する必要が有るように見えたのですがMonacaのUIには該当するものがありません。
    なにを直せばよいのでしょうか・・?よろしくお願いします。

  • yusuke

    こんにちは。
    参考になるブログありがとうございます。
    先ほど試していたのですが、Cordova Pluginを入れるとiOSのビルドが失敗してしまいます。
    Pluginを外すと成功します。
    ブログの内容をみると、Xcodeのバージョンを指定する必要が有るように見えたのですがMonacaのUIには該当するものがありません。
    なにを直せばよいのでしょうか・・?よろしくお願いします。

コメントフォーム



captcha_key

アシアルの会社情報

アシアル株式会社はPHP、HTML5、JavaScriptに特化したWebエンジニアリング企業です。ユーザーエクスペリエンス設計から大規模システム構築まで、アシアルメンバーが各々の専門性を通じてインターネットの進化に貢献します。

会社情報詳細

最近の記事