Monaca Docs
検索…
iBeacon
iBeacon ( アイビーコン ) サービスを組み込んだサンプルアプリです。iBeacon 発信機との距離を検知します。こちらの Monaca アプリでは、Onsen UI を使用して、UI を構築しています。iBeacon 発信機の射程内に携帯端末が入ると、発信機の UUID が画面上に表示されます ( このサンプルでは、アプリが起動中であること、発信機は端末側に登録済みであることが必要です )。
サードパーティー製 Cordova プラグインを確認する場合は、カスタムビルドデバッガー ( Android 版 または iOS 版 ) を作成する必要があります。

デモ

テスト環境
  • Android 11.0
  • iOS 14.3

事前準備

  1. 1.
    iBeacon プラグインを こちら からダウンロードして、Monaca クラウド IDE 上にインポートします。詳細は、ユーザー Cordova プラグインのインポートをご確認ください。
  2. 2.
    対象とする iBeacon 発信機を決めます ( 最低限 1 つ )。
  3. 3.
    専用のユーティリティー ソフトウェアを使用して、iBeacon 発信機側の情報を入手します。ここでは、 MyBeacon Tool を使用します。
  4. 4.
    iBeacon 発信機の UUID のメモを取ります。

ファイル構成

ファイル
説明
index.html
スタート画面のページ ( 接続画面で構成 )
top_page.html
アプリのトップページ
info_page.html
iBeacon 発信機側の情報を表示するページ
js/app.js
アプリの動作を制御する JavaScript のファイル
css/style.css
アプリのスタイルシート

必要な JS/CSS コンポーネント

  • Onsen UI

必要な Cordova プラグイン

HTML の解説

ユーザー インターフェースには、Onsen UI を使用しています。 Onsen UI のタグとそのコンポーネントの詳細は、Onsen UI ドキュメント をご確認ください。
index.html ファイル内の次の記述 ( HTML の <body> 内 ) で、 top-page.html ファイルを起動時に読み込みます。
1
...
2
<ons-navigator var="myNavigator" page="top-page.html"></ons-navigator>
3
...
Copied!
top-page.html ファイル内の次の記述 ( HTML の <body> 内 ) で、登録済みの iBeacon 発信機の一覧と距離情報を表示します。
1
<ons-page ng-controller="TopPageCtrl">
2
<ons-toolbar>
3
<div class="center">iBeacon Testing</div>
4
</ons-toolbar>
5
6
<ons-list modifier="inset" style="margin: 10px">
7
<ons-list-item class="list-item-container" ng-repeat="(uuid, beacon) in beacons">
8
<ons-row>
9
<ons-col width="70px">
10
<img ng-src="{{beacon.icon}}" class="top-page-icon">
11
</ons-col>
12
<ons-col>
13
<div class="top-page-name">{{beacon.name}}</div>
14
<div class="top-page-proximity">{{beacon.proximity}}</div>
15
<div class="top-page-proximity">{{beacon.rssi}} dBm</div>
16
</ons-col>
17
</ons-row>
18
</ons-list-item>
19
</ons-list>
20
</ons-page>
Copied!
info-page.html ファイル内の次の記述 ( HTML の <body> 内 ) で、最も近接する iBeacon 発信機の情報 ( UUID ) を表示します。
1
<ons-page ng-controller="InfoPageCtrl">
2
<ons-toolbar>
3
<div class="left"><ons-back-button>Back</ons-back-button></div>
4
<div class="center">{{beacon.name}}</div>
5
</ons-toolbar>
6
7
<ons-list>
8
<ons-list-item class="list-item-container">
9
<ons-row>
10
<ons-col width="110px">
11
<img src="{{beacon.icon}}" class="info-page-img">
12
</ons-col>
13
<ons-col>
14
<div class="info-page-description">
15
<p style="text-decoration: underline;">UUID</p>
16
{{beaconUuid}}
17
</div>
18
19
</ons-col>
20
</ons-row>
21
</ons-list-item>
22
</ons-list>
23
</ons-page>
Copied!

JavaScript の解説

このサンプルアプリの JavaScript には、AngularJS を使用しています。AngularJS では、連携するページのそれぞれに、コントローラー関数を設置します。このサンプルでは、 TopPageCtrlInfoPageCtrl の 2 つのコントローラー関数を使用しており、それぞれ、 top-page.html ページ、 info-page.html ページに紐付けされています。これらのコントローラー関数間で使用するグローバル変数を作成するため、グローバル変数を格納する service 関数を、次のように、1 つ作成します。
1
...
2
app.service('iBeaconService', function() {
3
this.currentBeaconUuid = null;
4
this.onDetectCallback = function(){};
5
6
var beacons = {
7
"00000000-EA98-1001-B000-001C4D9C64FA": {icon: 'img/1.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: 'JIBBER', number: '1', id: '000265C9', major: 1, minor: 1},
8
"F5A10AF9-A670-4F54-B491-8607393F0DDC": {icon: 'img/2.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: 'BUONO', number: '2', id: '0002D08D', major: 1, minor: 1},
9
"ABE425B2-0000-4409-8035-1668AFC7FCFE": {icon: 'img/3.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: 'LION', number: '3', id: '00029BAA', major: 1, minor: 1},
10
"BC564E82-0000-43A3-94E7-1D54EC02622D": {icon: 'img/4.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: 'COMA', number: '4', id: '0003F321', major: 1, minor: 1},
11
"6F29CF85-0000-414A-A7A6-6206A2DA9773": {icon: 'img/5.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: 'GNAR', number: '5', id: '00027EA8', major: 1, minor: 1},
12
"EEB52632-0000-47E2-8C15-897494E12015": {icon: 'img/6.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: 'TEEMO', number: '6', id: '00032449', major: 1, minor: 1}
13
};
14
this.beacons = beacons;
15
16
createBeacons = function() {
17
var result = [];
18
try {
19
angular.forEach(beacons, function(value, key) {
20
result.push(new cordova.plugins.locationManager.BeaconRegion(value.id, key, value.major, value.minor));
21
});
22
} catch (e) {
23
console.log('createBeacon err: ' + e);
24
}
25
return result;
26
};
27
28
this.watchBeacons = function(callback){
29
document.addEventListener("deviceready", function(){
30
var deviceVersion = window.device ? device.version : '';
31
32
var beacons = createBeacons();
33
34
try {
35
var delegate = new cordova.plugins.locationManager.Delegate();
36
37
delegate.didDetermineStateForRegion = function (pluginResult) {
38
39
console.log('[DOM] didDetermineStateForRegion: ' + JSON.stringify(pluginResult));
40
41
cordova.plugins.locationManager.appendToDeviceLog('[DOM] didDetermineStateForRegion: '
42
+ JSON.stringify(pluginResult));
43
};
44
45
delegate.didStartMonitoringForRegion = function (pluginResult) {
46
console.log('didStartMonitoringForRegion:', pluginResult);
47
48
console.log('didStartMonitoringForRegion:' + JSON.stringify(pluginResult));
49
};
50
51
delegate.didRangeBeaconsInRegion = function (pluginResult) {
52
var beaconData = pluginResult.beacons[0];
53
var uuid = pluginResult.region.uuid.toUpperCase();
54
if (!beaconData || !uuid) {
55
return;
56
}
57
58
callback(beaconData, uuid);
59
console.log('[DOM] didRangeBeaconsInRegion: ' + JSON.stringify(pluginResult));
60
};
61
62
cordova.plugins.locationManager.setDelegate(delegate);
63
64
// required in iOS 8+
65
cordova.plugins.locationManager.requestWhenInUseAuthorization();
66
// or cordova.plugins.locationManager.requestAlwaysAuthorization()
67
68
beacons.forEach(function(beacon) {
69
cordova.plugins.locationManager.startRangingBeaconsInRegion(beacon);
70
});
71
72
} catch (e) {
73
console.log('Delegate err: ' + e);
74
}
75
}, false);
76
};
77
});
78
...
Copied!
service 関数内で行っていることを、解説します。
  • 登録済み iBeacon 発信機の情報 ( UUID、距離、名称、アイコンファイルなど ) を格納する配列の作成。
  • 近接する iBeacon 発信機の検知、および、最も近接する発信機の UUID の取得を行う関数の作成。
各コントローラーに関して解説します。

TopPageCtrl

TopPageCtrl は、 top-page.html ファイル内の各種処理を行っています。近接する iBeacon 発信機の検知を、主に行っています。登録済みの iBeacon 発信機が検知された場合、その proximity ( 近接度 ) と rssi ( 受信信号の強度指数 / received signal strength indicator ) が更新されます。検知できない場合、その発信機の proximity 値は ProximityUnknown になり、rssi 値は -63 dBm になります。
この関数の JavaScript コードを、次に記します。
1
...
2
app.controller('TopPageCtrl', ['$scope', 'iBeaconService', function($scope, iBeaconService) {
3
4
$scope.beacons = iBeaconService.beacons;
5
6
var callback = function(deviceData, uuid)
7
{
8
var beacon = $scope.beacons[uuid];
9
$scope.$apply(function()
10
{
11
beacon.rssi = deviceData.rssi;
12
switch (deviceData.proximity)
13
{
14
case PROX_IMMEDIATE:
15
beacon.proximity = 'Immediate';
16
break;
17
case PROX_NEAR:
18
beacon.proximity = 'Near';
19
break;
20
case PROX_FAR:
21
beacon.proximity = 'Far';
22
break;
23
case PROX_UNKNOWN:
24
default:
25
break;
26
}
27
28
if (iBeaconService.currentBeaconUuid === null && beacon.rssi > -45) {
29
$scope.enterInfoPage(uuid);
30
}
31
});
32
};
33
iBeaconService.watchBeacons(callback);
34
35
36
$scope.enterInfoPage = function(currentUuid) {
37
iBeaconService.currentBeaconUuid = currentUuid;
38
$scope.ons.navigator.pushPage('info-page.html');
39
$scope.ons.navigator.on("prepop", function() {
40
iBeaconService.currentBeaconUuid = null;
41
});
42
};
43
44
}]);
45
...
Copied!

InfoPageCtrl

InfoPageCtrl は、 info-page.html ファイル内の各種処理を行っています。このコントローラ関数では、主に、 iBeaconService 経由で渡された UUID 値を使用して、最も近接する iBeacon 発信機の UUID を表示します。この解説で使用している 「 最も近接 」 とは、iBeacon 用語の 「 Immediate 」 ( 3 段階評価の最も近いこと ) を意味します。これ以外の場合には、 info-page.html が表示されません。
この関数の JavaScript コードを、次に記します。
1
...
2
app.controller('InfoPageCtrl', ['$scope', 'iBeaconService', function($scope, iBeaconService) {
3
$scope.beacon = iBeaconService.beacons[iBeaconService.currentBeaconUuid];
4
$scope.beaconUuid = iBeaconService.currentBeaconUuid;
5
}]);
6
...
Copied!
最終更新 5mo ago