iBeaconは何ですか？

iBeaconとは、iPhoneのiOS7に標準搭載されたことで、いま注目を集めているBluetooth Low Energy（BLE）を使った新技術です。
従来オンラインの告知から実際に店舗に誘導するO2O施策を行う場合、NFCが使われることが多くありました。しかし、NFCはiPhoneが対応していないためO2O全体が伸びやんでいる状況となっています。

しかし、iBeaconはiPhoneが標準対応しBLEという汎用技術を使っています。そして、iBeaconはApple社の商標ですがAndroid端末にも同様の技術を適用することが可能であり、スマートフォン全体で使う事ができると期待されているのです。

このような経緯からiBeaconは、O2Oの切り札として注目を集めています。

細かいことはここのサイトで見るとよいかもです。

 

PhoneGapでiBeaconは利用できるの？

iBeaconをPhoneGapで使用する場合、プラグインを利用することでiBeaconを活用することはできます。

今のところ、2つのプラグインがあるみたいです。

petermetz – サンプルがほとんどないので最初は悩みましたが、実際使ってみると結構便利な気がします。Androidにも対応してたりします。

https://github.com/petermetz/cordova-plugin-ibeacon

jumbo-in-Jap – サンプルはいろいろと転がっていますが、ちょっと機能的に物足りない気がします。

https://github.com/jumbo-in-jap/phonegap-ibeacon-plugin

 

実装の概要

アプリの実装はこちらのサイトを参考に実装してみました。

参考にしたソースコードもここからダウンロードしてテストしました。

ファイルのindex.htmlは、アプリケーションのinfoページのHTMLデータが含まれています。

iBeaconのセットアップとロジックを含むJavaScriptコードは、ファイル内にあるapp.js。

 

iBeaconの追跡

iBeaconを追跡するには、あなたが通知を取得したいのビーコンのUUIDを指定します。

ここで、idは、ビーコンに関連するページを識別するために使用され、ページのための領域を定義するコードは次のようになります。

// Regions that define which page to show for each beacon.
app.beaconRegions =
[
 {
 id: 'page-feet',
 uuid:'A4950001-C5B1-4B44-B512-1370F02D74DE',
 major: 1,
 minor: 1
 },
 {
 id: 'page-shoulders',
 uuid:'A4950001-C5B1-4B44-B512-1370F02D74DE',
 major: 1,
 minor: 2
 },
 {
 id: 'page-face',
 uuid:'A4950001-C5B1-4B44-B512-1370F02D74DE',
 major: 1,
 minor: 3
 }
]

追跡したいビーコンのUUIDが必要になります。

同じUIIDはあなたが一意にビーコンを識別するために、メジャーとマイナー整数を使用することができ、その場合、複数のビーコンで共有することができます。

ビーコンを追跡するときにメジャー/マイナー番号を指定することは必須ではありません。

 

iBeaconの監視

次に、追跡ビーコン用のコードを見ていきます。

追跡の2種類のiBeaconsのために使用されていることに注意してください。

** startMonitoringForRegionで有効になって監視は、開始と終了領域を追跡します。

モニタリングは、両方実行できるアプリはフォアグラウンドおよびバックグラウンドにあるとき、低い更新レートを有することができ、近接情報が含まれていない。レンジングは、のみフォアグラウンドで動作し、** startRangingBeaconsInRegionでは有効になって、速い更新速度を持ち、近接情報（ProximityImmediate、ProximityNear、ProximityFar）があります。

iBeacons前景モード対バックグラウンドについての詳細は、[半径からこのレポートを探る

サンプルアプリは緩和ビーコンの近接性を判断するために至るまで使用しています。

ただし、コードも実演目的のためにビーコンの監視を可能にします。領域上のコードを反復処理の次の作品と監視し、各地域の範囲のを可能にします。

// Start monitoring and ranging our beacons.
for (var r in app.beaconRegions)
{
    var region = app.beaconRegions[r]

    var beaconRegion = new cordova.plugins.locationManager.BeaconRegion(
        region.id, region.uuid, region.major, region.minor)

    // Start monitoring.
    cordova.plugins.locationManager.startMonitoringForRegion(beaconRegion)
        .fail(console.error)
        .done()

    // Start ranging.
    cordova.plugins.locationManager.startRangingBeaconsInRegion(beaconRegion)
        .fail(console.error)
        .done()
}

 

iBeaconへの応答

次のコードの示すように、ビーコンイベントを行うには、コールバック関数を持つデリゲートオブジェクトが使用されます。

// The delegate object contains iBeacon callback functions.
var delegate = locationManager.delegate.implement(
{
    didDetermineStateForRegion: function(pluginResult)
    {
        //console.log('didDetermineStateForRegion: ' + JSON.stringify(pluginResult))
    },

    didStartMonitoringForRegion: function(pluginResult)
    {
        //console.log('didStartMonitoringForRegion:' + JSON.stringify(pluginResult))
    },

    didRangeBeaconsInRegion: function(pluginResult)
    {
        //console.log('didRangeBeaconsInRegion: ' + JSON.stringify(pluginResult))
        app.didRangeBeaconsInRegion(pluginResult)
    }
})

pluginResultオブジェクトがあったビーコン（複数可）に関する情報が含まれています。

ファイル内のコードを調べるためのログを有効にするには、app.jsのconsole.logの呼び出しのコメントを解除。

ログ出力はEvothingsワークベンチの「ツール」ウィンドウに表示されます。

 

サンプルアプリを実行

サンプルアプリについては以下のサイトからダウンロードできます。

こちらの記事も下記サイトを翻訳したものです。

http://evothings.com/quick-guide-to-writing-mobile-ibeacon-applications-in-javascript/

Thank You.