JSでiBeaconを試せるiOSアプリ「BeaconEgg」の使い方

2013年のアドベントカレンダー用に作ったアプリなのですが、紆余曲折あってようやくリリース出来ました。

BeaconEgg - App Store

BeaconEggの簡単な説明

一行で説明すると

BeaconEgg.jsという専用のライブラリを使いWEBコンテンツを制作し

BeaconEggアプリ上でそのコンテンツを開けば、iBeaconの機能にアクセスできるようになるよ！

というものです。（二行）

できること

BeaconEgg.jsで作成したデモがあるので、そちらを見ていただけると理解しやすいと思います。

デモが動いている動画はこちらです。

BeaconEgg - Demo from Naoto Horiguchi on Vimeo.

できないこと

• Backgroundで動作しない（はず）

デモのコードを解説

デモで使用したコードがこちらです。

ざっくり説明していきます。

まず、48行目でBeaconEggのインスタンスを作っています。

var be = new adhr.BeaconEgg,

次に49行目で監視対象のリージョンを指定します。

region = new adhr.Region('jp.adhr.beacon-egg', '1E21BCE0-7655-4647-B492-A3F8DE2F9A02'),

第一引数がid(なんでもいい)、第二引数がリージョンのUUIDです。

最後に100行目で指定リージョンのモニタリングを開始します。

be.startMonitoring(region);

以上で使用準備が整いました。

次にBeaconを見つけた際に呼ばれる各イベントを見ていきます。

58行目から始まるenterRegionは、指定リージョン内に入った際に呼ばれます。ざっくり言うと指定したUUIDを持っているbeaconが発している電波をキャッチしたら呼ばれます。

be.enterRegion(function(region) {
    alert('Enter Region!!')
});

この例ではAlertを表示しているだけです。

65行目はenterRegionの逆で、リージョンから離れた際に呼ばれます。ざっくり言うと、beaconの電波をキャッチできなくなって20−30秒すると呼ばれます。

be.exitRegion(function(region) {
    alert('Exit Region!!')
});

なぜ20-30秒かかるかというと、例えばbeaconの電波が障害物などでブツブツ切れてるだけなのにいちいち接続を切っていたら大変だろ？っていうAppleさんの心遣いだと思います。確実にリージョン外に出たことがわかってから呼ばれます。

72行目からのrengeはenterRegionが呼ばれてからexitRegionが呼ばれる間に電波をキャッチ出来ているbeacon端末の情報が配列で渡されます。

だいたい１秒間隔くらいで更新されるようです。

配列内の各beaconオブジェクトから詳細な情報が取得できます。

be.range(function(beacons) {
    var beacon = beacons[0];
    switch(true) {
        case beacon.isImmediate()://beaconはすごい近い
            document.body.style.backgroundColor = 'rgb(199, 43, 43)';
            break;
        case beacon.isNear()://beaconは割と近い
            document.body.style.backgroundColor = 'rgb(199, 199, 43)';
            break;
        case beacon.isFar()://beaconは遠い
            document.body.style.backgroundColor = 'rgb(74, 199, 43)';
            break;
        case beacon.isUnKnown()://よくわかんなくなっちゃった
            document.body.style.backgroundColor = 'rgb(43, 193, 199)';
            break;
        default:
            document.body.style.backgroundColor = '#ff961f';
    }
    rssiElm.innerHTML     = 'rssi: ' + beacon.rssi;//rssi
    accuracyElm.innerHTML = 'accuracy: ' + beacon.accuracy;//accuracy
    majorElm.innerHTML    = 'major: ' + beacon.major;//major id
    minorElm.innerHTML    = 'minor: ' + beacon.minor;//minor id
});

このように簡単にiBeaconを使ったコンテンツをJSで作ることができます。

あとは、コンテンツを公開し、BeaconEgg上でURLを入力して開くだけです。
アプリ上でURLを入力するのが億劫な人の為にURLSchemebeaconegg://egg/open?url=(URL)も用意していますので、もし良かったらお使いください。

おまけ

iBeaconの端末を持っていない方の為に、BeaconEggにはお使いのiPhoneをiBeacon端末にする機能iBeaconSenderが搭載されています！

BeaconEgg - iBeaconSender from Naoto Horiguchi on Vimeo.

当初予定していない機能だったのですが、いろいろあって実装いたしました。

デモで使っているリージョンのbeaconもプリセットで入っています。

100円です。

他にもiPhoneをiBeacon端末にできるフリーで素晴らしいアプリが色々とストアで公開されていますが、 察してください 。

リージョン毎にbeaconを複数管理できるようになっているので、開発には便利かもしれません。

謝辞（懺悔）

デモコンテンツ開発の際に、iBeacon端末側にクラスメソッド様の Mac を Beacon 端末にするの記事のMacアプリを使わせて頂きました。ありがとうございます。

ここから懺悔なのですが、UUIDを変更したつもりが、うっかりデモコンテンツで同じUUIDを指定してしまいました。大変失礼いたしました、、、

なので、BeaconEggのデモコンテンツは記事で紹介されているMacアプリでそのまま動かすこともできますよ！（ごめんなさいごめんなさい）