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

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

ただいまの
回答率

90.32%

  • iPhone

    1026questions

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

  • Monaca

    1011questions

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

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 669

tig

score 1

前提・実現したいこと

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

発生している問題・エラーメッセージ

上のテンプレートだと、同じUUID(minor値が異なる)のビーコンに
対応できません。mapに同じキーを設定できないので。

エラーメッセージ

該当のソースコード

JavaScript

試したこと

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

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

より詳細な情報

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

// 修正前
app.service('iBeaconService', function() {
    this.currentBeaconUuid = null;

// 修正後
app.service('iBeaconService', function() {
    this.currentBeaconUuid = null;
    this.currentMinor = null;

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

// 修正前
var beacons = {
    "00000000-EA98-1001-B000-001C4D9C64FA": {icon: 'img/1.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: 'JIBBER', number: '1', id: '000265C9', major: 1, minor: 1},
    "F5A10AF9-A670-4F54-B491-8607393F0DDC": {icon: 'img/2.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: 'BUONO', number: '2', id: '0002D08D', major: 1, minor: 1},
    // 以下略
};

// 修正後
var beacons = {
    "00000000-EA98-1001-B000-001C4D9C64FA": {
        1: { icon: 'img/1.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: 'JIBBER-1', number: '1', id: '000265C9', major: 1, minor: 1 },
        2: { icon: 'img/1.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: 'JIBBER-2', number: '1', id: '000265C9', major: 1, minor: 2 }
    },
    "F5A10AF9-A670-4F54-B491-8607393F0DDC": {
        1: { icon: 'img/2.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: 'BUONO', number: '2', id: '0002D08D', major: 1, minor: 1 }
    }
};

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

// 修正前
delegate.didRangeBeaconsInRegion = function (pluginResult) {
    var beaconData = pluginResult.beacons[0];
    var uuid = pluginResult.region.uuid.toUpperCase();
    if (!beaconData || !uuid) {
        return;
    }

    callback(beaconData, uuid);
    console.log('[DOM] didRangeBeaconsInRegion: ' + JSON.stringify(pluginResult));
};

// 修正後
delegate.didRangeBeaconsInRegion = function (pluginResult) {
    var beaconData = pluginResult.beacons[0];
    var uuid = pluginResult.region.uuid.toUpperCase();
    var minor = pluginResult.region.minor;
    if (!beaconData || !uuid) {
        return;
    }

    callback(beaconData, uuid, minor);
    console.log('[DOM] didRangeBeaconsInRegion: ' + JSON.stringify(pluginResult));
};


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

// 修正前
app.controller('InfoPageCtrl', ['$scope', 'iBeaconService', function ($scope, iBeaconService) {
    $scope.beacon = iBeaconService.beacons[iBeaconService.currentBeaconUuid][iBeaconService.currentBeaconMinor];
    $scope.beaconUuid = iBeaconService.currentBeaconUuid;
}]);

// 修正後
app.controller('InfoPageCtrl', ['$scope', 'iBeaconService', function ($scope, iBeaconService) {
    $scope.beacon = iBeaconService.beacons[iBeaconService.currentBeaconUuid][iBeaconService.currentBeaconMinor];
    $scope.beaconUuid = iBeaconService.currentBeaconUuid;
    $scope.beaconMinor = iBeaconService.currentBeaconMinor;
}]);

 

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

// 修正前
var callback = function (deviceData, uuid) {

// 修正後
var callback = function (deviceData, uuid, minor) {

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

// 修正前
if (iBeaconService.currentBeaconUuid === null && beacon.rssi > -45) {
    $scope.enterInfoPage(uuid);
}

// 修正後
if (iBeaconService.currentBeaconUuid === null && beacon.rssi > -45) {
    $scope.enterInfoPage(uuid, minor);
}

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

// 修正前
$scope.enterInfoPage = function(currentUuid) {
    iBeaconService.currentBeaconUuid = currentUuid;
    $scope.ons.navigator.pushPage('info-page.html');
    $scope.ons.navigator.on("prepop", function() {
    iBeaconService.currentBeaconUuid = null;
    });
};

// 修正後
$scope.enterInfoPage = function (currentUuid, currentMinor) {
    iBeaconService.currentBeaconUuid = currentUuid;
    iBeaconService.currentBeaConMinor = currentMinor;
    $scope.ons.navigator.pushPage('info-page.html');
    $scope.ons.navigator.on("prepop", function () {
        iBeaconService.currentBeaconUuid = null;
        iBeaconService.currentBeaconMinor = null;
    });
};

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

<!-- 修正前 -->
<p style="text-decoration: underline;">UUID</p>
{{beaconUuid}}

<!-- 修正後 -->
<p style="text-decoration: underline;">UUID/Minor</p>
{{beaconUuid}}/{{beaconMinor}}

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/14 11: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))
    });
    });
    }

    キャンセル

  • 2017/02/14 11:29 編集

    その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}
    }
    };

    キャンセル

  • 2017/02/14 13: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];

    キャンセル

  • 2017/02/14 13:56

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

    キャンセル

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

  • ただいまの回答率 90.32%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • iPhone

    1026questions

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

  • Monaca

    1011questions

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