質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

2011閲覧

Monacaで同一UUIDのビーコンを組み込みたい

tig

総合スコア7

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2017/02/13 11:18

###前提・実現したいこと
Monacaでビーコンを使ったアプリを作っています。
https://docs.monaca.io/ja/sampleapp/samples/ibeacon/
↑こちらのテンプレートで開発しています。

###発生している問題・エラーメッセージ
上のテンプレートだと、同じUUID(minor値が異なる)のビーコンに
対応できません。mapに同じキーを設定できないので。

エラーメッセージ

###該当のソースコード
JavaScript

###試したこと
キーには01,02と固有の値を振り
UUIDをnumberやidの項目で使えないかと試行錯誤しましたが
どうもうまくいきません。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

検証環境持ってないため、ソースコードを眺めての判断ですが、テンプレートのソースいじれば同一uuidでminor違いに対応できそうですが。

サービスにthis.currentMinor = nullの行を追加。

js

1// 修正前 2app.service('iBeaconService', function() { 3 this.currentBeaconUuid = null; 4 5// 修正後 6app.service('iBeaconService', function() { 7 this.currentBeaconUuid = null; 8 this.currentMinor = null;

サービス内で定義されているbeacons連想配列をminorをキーとした2段連想配列に修正。

js

1// 修正前 2var beacons = { 3 "00000000-EA98-1001-B000-001C4D9C64FA": {icon: 'img/1.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: 'JIBBER', number: '1', id: '000265C9', major: 1, minor: 1}, 4 "F5A10AF9-A670-4F54-B491-8607393F0DDC": {icon: 'img/2.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: 'BUONO', number: '2', id: '0002D08D', major: 1, minor: 1}, 5 // 以下略 6}; 7 8// 修正後 9var beacons = { 10 "00000000-EA98-1001-B000-001C4D9C64FA": { 11 1: { icon: 'img/1.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: 'JIBBER-1', number: '1', id: '000265C9', major: 1, minor: 1 }, 12 2: { icon: 'img/1.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: 'JIBBER-2', number: '1', id: '000265C9', major: 1, minor: 2 } 13 }, 14 "F5A10AF9-A670-4F54-B491-8607393F0DDC": { 15 1: { icon: 'img/2.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: 'BUONO', number: '2', id: '0002D08D', major: 1, minor: 1 } 16 } 17};

サービス内のthis.watchBeacons関数内のdelegate.didRangeBeaconsInRegion関数でcallback関数を呼び出すときにminorも渡すように修正

js

1// 修正前 2delegate.didRangeBeaconsInRegion = function (pluginResult) { 3 var beaconData = pluginResult.beacons[0]; 4 var uuid = pluginResult.region.uuid.toUpperCase(); 5 if (!beaconData || !uuid) { 6 return; 7 } 8 9 callback(beaconData, uuid); 10 console.log('[DOM] didRangeBeaconsInRegion: ' + JSON.stringify(pluginResult)); 11}; 12 13// 修正後 14delegate.didRangeBeaconsInRegion = function (pluginResult) { 15 var beaconData = pluginResult.beacons[0]; 16 var uuid = pluginResult.region.uuid.toUpperCase(); 17 var minor = pluginResult.region.minor; 18 if (!beaconData || !uuid) { 19 return; 20 } 21 22 callback(beaconData, uuid, minor); 23 console.log('[DOM] didRangeBeaconsInRegion: ' + JSON.stringify(pluginResult)); 24};

app.controller('InfoPageCtrl'~ないでminorを扱うように修正

js

1// 修正前 2app.controller('InfoPageCtrl', ['$scope', 'iBeaconService', function ($scope, iBeaconService) { 3 $scope.beacon = iBeaconService.beacons[iBeaconService.currentBeaconUuid][iBeaconService.currentBeaconMinor]; 4 $scope.beaconUuid = iBeaconService.currentBeaconUuid; 5}]); 6 7// 修正後 8app.controller('InfoPageCtrl', ['$scope', 'iBeaconService', function ($scope, iBeaconService) { 9 $scope.beacon = iBeaconService.beacons[iBeaconService.currentBeaconUuid][iBeaconService.currentBeaconMinor]; 10 $scope.beaconUuid = iBeaconService.currentBeaconUuid; 11 $scope.beaconMinor = iBeaconService.currentBeaconMinor; 12}]);

app.controller('TopPageCtrl'~内のcallback関数定義のところで、引数にminorを追加

js

1// 修正前 2var callback = function (deviceData, uuid) { 3 4// 修正後 5var callback = function (deviceData, uuid, minor) {

同じくcallback関数定義内で$scope.enterInfoPage関数呼び出し時の引数にminor追加

js

1// 修正前 2if (iBeaconService.currentBeaconUuid === null && beacon.rssi > -45) { 3 $scope.enterInfoPage(uuid); 4} 5 6// 修正後 7if (iBeaconService.currentBeaconUuid === null && beacon.rssi > -45) { 8 $scope.enterInfoPage(uuid, minor); 9}

$scope.enterInfoPage関数内でminorも扱うように修正

js

1// 修正前 2$scope.enterInfoPage = function(currentUuid) { 3 iBeaconService.currentBeaconUuid = currentUuid; 4 $scope.ons.navigator.pushPage('info-page.html'); 5 $scope.ons.navigator.on("prepop", function() { 6 iBeaconService.currentBeaconUuid = null; 7 }); 8}; 9 10// 修正後 11$scope.enterInfoPage = function (currentUuid, currentMinor) { 12 iBeaconService.currentBeaconUuid = currentUuid; 13 iBeaconService.currentBeaConMinor = currentMinor; 14 $scope.ons.navigator.pushPage('info-page.html'); 15 $scope.ons.navigator.on("prepop", function () { 16 iBeaconService.currentBeaconUuid = null; 17 iBeaconService.currentBeaconMinor = null; 18 }); 19};

JSがわの修正箇所これくらいで後はHTML側はinfo-page.htmlでminorも表示するように修正

html

1<!-- 修正前 --> 2<p style="text-decoration: underline;">UUID</p> 3{{beaconUuid}} 4 5<!-- 修正後 --> 6<p style="text-decoration: underline;">UUID/Minor</p> 7{{beaconUuid}}/{{beaconMinor}}

以上の修正で、minorにも対応したものとなると思います。

投稿2017/02/13 12:36

turbgraphics200

総合スコア4267

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tig

2017/02/14 02:27

回答ありがとうございます!2次元配列を使うんですね。 上記方法でやってみましたが、画面表示がうまくいきませんでした。 createBeaconsのfunctionも2次元配列用に変える必要があると思って下記のように書いてみましたが、 やはりうまく表示されない状態です。 Angular初心者なもので自信がないです。 var beacons = { "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX": { 1: {icon: 'img/1.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: '007', number: '1', id: 'beacon#7', major: 1, minor: 7}, 2: {icon: 'img/2.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: '008', number: '2', id: 'beacon#8', major: 1, minor: 8} } }; this.beacons = beacons; createBeacons = function() { var result = []; try { angular.forEach(beacons, function(value, key) { angular.forEach(value, function(childValue, childKey) { result.push(new cordova.plugins.locationManager.BeaconRegion(childValue.id, key, childValue.major, childValue.minor)) }); }); }
turbgraphics200

2017/02/14 02:30 編集

その1: 2;ってところの数字をminorの数字にしてください。連想配列ですのでminorの番号で参照できるようにします。 var beacons = { "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX": { 7: {icon: 'img/1.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: '007', number: '1', id: 'beacon#7', major: 1, minor: 7}, 8: {icon: 'img/2.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: '008', number: '2', id: 'beacon#8', major: 1, minor: 8} } };
tig

2017/02/14 04:52

ありがとうございます。追加で以下の修正をしたらうまくいきました! ①top-page.html部分 // 修正前 <ons-list-item class="list-item-container" ng-repeat="(uuid, beacon) in beacons"> <ons-row> <ons-col width="70px"> <img ng-src="{{childBeacon.icon}}" class="top-page-icon"> </ons-col> <ons-col> <div class="top-page-name">{{childBeacon.name}}</div> <div class="top-page-proximity">{{childBeacon.proximity}}</div> <div class="top-page-proximity">{{childBeacon.rssi}} dBm</div> </ons-col> </ons-row> </ons-list-item> // 修正後 <ons-list-item class="list-item-container" ng-repeat="(uuid, beacon) in beacons"> <ons-list-item class="list-item-container" ng-repeat="(minor, childBeacon) in beacon"> <ons-row> <ons-col width="70px"> <img ng-src="{{childBeacon.icon}}" class="top-page-icon"> </ons-col> <ons-col> <div class="top-page-name">{{childBeacon.name}}</div> <div class="top-page-proximity">{{childBeacon.proximity}}</div> <div class="top-page-proximity">{{childBeacon.rssi}} dBm</div> </ons-col> </ons-row> </ons-list-item> </ons-list-item> ②app.js部分 // 修正前 var callback = function(deviceData, uuid, minor) { var beacon = $scope.beacons[uuid]; // 修正後 var callback = function(deviceData, uuid, minor) { var beacon = $scope.beacons[uuid][minor];
turbgraphics200

2017/02/14 04:56

ありゃ、修正箇所にぬけがありましたか。これは失敬。まあ、動いて何よりです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問