IonicでiBeaconを利用したアプリを作るためにはCordovaのibeaconプラグイン(cordova-plugin-ibeacon)をtypescriptでラップしたモジュールを利用する必要がある。
詳細はionicの下記ページに記載してある。
https://ionicframework.com/docs/native/ibeacon/
-
プロジェクト配下で以下のコマンドを実行する
ionic cordova plugin add cordova-plugin-ibeacon npm install --save @ionic-native/ibeacon
-
app.module.tsに以下を追加
... import { IBeacon } from '@ionic-native/ibeacon'; ... providers: [ StatusBar, SplashScreen, IBeacon, {provide: ErrorHandler, useClass: IonicErrorHandler} ] ...
-
対象のクラスのimportとConstructorとmethodを追加
... import { IBeacon } from '@ionic-native/ibeacon'; ... export class ConfigPage { delegate:any; region:any; constructor(public navCtrl: NavController, private ibeacon: IBeacon) { } startScan(){ console.log("initScanner!"); this.ibeacon.requestAlwaysAuthorization() this.ibeacon.requestWhenInUseAuthorization() this.delegate = this.ibeacon.Delegate() this.delegate.didChangeAuthorizationStatus().subscribe(data=>console.log('didChangeAuthorizationStatus has completed', JSON.stringify(data))) this.delegate.didRangeBeaconsInRegion().subscribe(data => { console.log('didRangeBeaconsInRegion:', JSON.stringify(data,null,4)) // console.log(data.beacons[0].rssi); }, error=> console.log('didRangeBeaconsInRegion Error: ', error)) this.delegate.didStartMonitoringForRegion().subscribe(data=>console.log('didStartMonitoringForRegion:',JSON.stringify(data),error=>console.log(error))) this.region = this.ibeacon.BeaconRegion('test.beacon','B9407F30-F5F8-466E-AFF9-25556B57FE6D'); this.ibeacon.startMonitoringForRegion(this.region).then( () => console.log('Native layer received the request to monitoring:',JSON.stringify(this.region)), error => console.log('Native layer failed to begin monitoring: ', error)) this.delegate.didEnterRegion().subscribe(data => { console.log('didEnterRegion: ', data); }); this.delegate.didExitRegion().subscribe(data => { console.log('didExitRegion: ', data); }); } }
-
実行する
ionic cordova run android --device
-
methodを実行するとdidEnterRegionとdidExitRegionがバックグラウンドから呼ばれるようになる。
デバッグをするときは、実行中にchromeのアドレス欄にchrome://inspect/#devicesを入れて画面下部のinspectボタンを押すとchrome上でできるようになる。