はじめに

クロスプラットフォームのアプリ開発にとても便利なMonacaですが、ネイティブの機能を使いたい場合、特にプラットフォームによって仕様が異なるものについては、ちょっと扱いにくい印象があります。
その一つとして、Beacon技術の一種で、Appleが提供している「iBeacon」が挙げられると思います。
そこで今回は、JMASが提供している「Beacapp」を使って、MonacaからBeaconを扱う方法をまとめてみたいと思います。

Beaconとは

アプリエンジニアであれば、どこかで一度は聞いたことがあるかと思います。
仕組みは単純で、Bluetoothの仕様を使って、スマートフォンに位置情報を伝えるというものです。

Bluetoothの電波を発信する側を、Beacon端末と呼びます。

電波には、Beacon端末を識別する、UUID, majorコード, minorコード, proximty（接近度）を設定することができます。
これらの値を使って、Beacon端末と、スマートデバイスとのおおよその距離を測定することができます。

特徴として、アプリがバックグラウンドにいても、通知を受け取ることができます。
また、30m程度の範囲内で距離の判定が行われるため、GPSよりも狭い範囲の位置測位が可能です。
電池の消費も少なく、Beacon端末にはボタン電池で数年動き続けるものもあります。

設置工事や、複雑な知識がなくても、それなりに精度の高い位置情報を扱うことができるのが、Beaconだと考えています。

使い道

B to C

よくある使い道として、コンビニやスーパーなどの店舗近くを通りかかった人に、キャンペーンの情報などを通知するシステムが挙げられます。
通知をきっかけとしてアプリを起動してもらい、クーポンを配信したり、さらに詳細なキャンペーン情報を見てもらったりするなど、来店誘導につなげます。

B to B

Beaconは業務でも使われるケースが増えています。
工場などにBeacon端末を設置して、きちんと工場の巡回をしているか、業務に偏りがないか、といった業務の「見える化」をしたり、簡易的な見守りとして使われたりすることもあります。
また、トラックの位置情報を取得して積み込みの時間を測定したり、待ち時間を短縮したりといった「効率化」のために使っている事例もあります。
詳しい事例は、別の機会にご紹介したいと思います。

Beacappとは

Beacappは、Beaconを管理するためのプラットフォームです。
提供しているものは、クラウド上の管理システム（CMS）と、iOS/Android向けのSDKになります。

Beacon情報と、Beacon端末検知時のイベントを登録すれば、あとはSDKが自動的に反応してアプリに通知をしてくれる、とても便利なサービスです。

３ヶ月間は無料で使えるので、是非登録して動かしてみてください。

SDKとしてCordova向けのプラグインも用意しているので、今回はこれを使って、MonacaでBeaconの検知をしてみたいと思います。

環境準備

今回の開発に必要なものは以下の通りです。

  • Monacaのアカウント（Pro以上）
  • Beacappのアカウント(３ヶ月無料)
  • iPhone (iOS 7.0以上) / Android (OS 4.3以上)
  • Beacon端末または、iPhone(発信端末として使います)

Beacappの登録方法

以下のサイトからBeacappへのお申し込みが可能です。
http://www.beacapp.com

必要な情報を入力するとメールが届きますので、メールに記載された内容に従ってログインしてください。
ログインURLは登録したアカウントごとに異なりますので、届いたメールは大切に保管しましょう。

まずは、アプリの登録

まず、Beaconと連携したいアプリの情報を登録します。
これを登録することで、同じBeaconを検知した場合でも、アプリごとに異なるイベントを通知することができるようになっています。

左側のメニューから、Appを選択し、「新規アプリ追加」ボタンを押下します。
アプリ情報として以下の項目を設定します。

  • アプリ名称：任意のアプリ名称を登録できます。
  • アプリ識別子 (※1)：アプリの識別子を登録します。
  • タグ (※2)：任意のタグを登録します。
  • アイコン画像 (※2)：画面表示用のアイコンを登録できます。

(※1) アプリ識別子は、認証のために必要な情報で、iOSの場合は「Bundleidentifier」、Androidの場合は、「Package Name」が該当します。
Monacaの場合は、iOSアプリ設定画面の「App ID」／Androidアプリ設定画面の「パッケージ名」に設定した値になります。
ここを正しく設定しないと、SDKが認証エラーとなります。
(※2) タグ、アイコンは任意です。

アプリの登録が完了したら、Dashboard画面からアプリを選択します。
登録したアプリ画面に遷移すると、「アクティベーションキー」と「シークレットキー」が表示されています。
後でSDKを使うときに必要になりますので、覚えておいてください。

続けて、Beaconの登録

アプリの登録ができたらBeacon情報を登録しましょう。
左側のメニューから、Beaconを選択し、「新規Beacon追加」ボタンを押下します。
Beacon情報として以下の項目を設定します。

  • UUID：[8桁]-[4桁]-[4桁]-[4桁]-[12桁] の、それぞれ16進数文字列
  • Major：0～65534 (整数値)
  • Minor：0～65534 (整数値)
  • タグ：任意の文字列を設定できます
  • 位置情報：Beaconを設置した位置情報を指定できます。
  • なりすまし検知：位置情報を入力した場合に設定可能です。登録した位置情報と、Beacon検知時のGPS情報を比較して、ずれが大きい場合には、イベントを通知させない設定が可能です。

なお、UUIDの指定は必須となります。
Major, Minorコードは指定しないことも可能です。指定しない場合、同一UUIDの全てのBeacon端末が対象となります。
UUID、Majorコードまでを指定した場合は、Minorコードを無視したBeacon端末が対象となります。

CSVでの一括登録も可能です。

最後に、イベントの登録

イベントはアプリに紐付けて登録します。
左側のメニューから、Appを選択し、最初に作成したアプリを選択してください。
画面中央にEventタブが表示されますので、選択します。

Eventタブ内の、「新規イベント作成」を押下します。

イベントの中身

イベント情報として、以下の内容をご利用シーンに合わせて設定します。

  • イベント名称：任意のイベント名称を登録できます。
  • タグ：任意のタグを登録できます。
  • メモ：任意のメモを登録できます。
  • 適用するBeacon：検知対象とするBeacon端末を選択します。
  • 連動させるコンテンツ：テキスト、URL、画像、カスタマイズから選択します。
  • テキスト：文字列情報が通知されます。
  • URL：URL情報が文字列として通知されます。
  • 画像：アップロードした画像のURL情報が通知されます。
  • カスタマイズ：ご自由に設定いただいたKey-Value形式の情報が通知されます。

ここまで入力したら、「次へ」を押下します。

  • エリアを指定：Beaconを検知させたいエリアを指定します。
  • 非常に近い場所：iOSのImmediateと同等の距離を検知します。（入った時/出た時のいずれかを選択します）
  • 近い場所：iOSのNearと同等の距離を検知します。（入った時/出た時のいずれかを選択します）
  • 遠い場所：iOSのFarと同等の距離を検知します。（入った時/出た時のいずれかを選択します）
  • エリアイン：Beacon端末を検知したら、イベントを発生させます。
  • エリアアウト：Beacon端末が検知できなくなったら、イベントを発生させます。
  • 期間を指定：イベントを発生させる日時を設定します。
  • 時間を指定：イベントを発生させる時間帯を設定します。

最後に、「Add」を押下します。

保存の際に、イベントを有効にするか無効にするかを選択できます。
無効にした場合は、後で有効にすることができます。
ここでは、「はい」を押下して有効化します。

以上で、Beacapp CMS上での作業は終わりです。

あとは、アプリにSDKを組み込めば完了です。

SDKの組み込み

MonacaへのBeacapp SDKの組み込みは非常に簡単です。

SDKをダウンロードする

まず、BeacappのSDKをダウンロードします。
以下のページから、プラグインをダウンロードしてください。
https://github.com/JMASystems/cordova-plugin-beacappSDK

Monacaに取り込む

Monaca上で、組み込みたいプロジェクトを開きます。
プロジェクトの設定メニューの中に「Cordovaプラグインの管理」という項目がありますので、ここに先ほどダウンロードしたzipファイルをアップロードすれば完了です。

呼び出しかた

組み込んだSDKの呼び出しは、4つの手順で完了します。

  1. 初期化
  2. 登録情報の取得
  3. スキャン開始
  4. イベント検知時の処理

サンプルのソース

AccessToken と SecretKey は先ほど取得した値に置き換えてください。

// 手順1 初期化
beacappSDK.initialize("AccessToken","SecretKey",
    function(success){
        //初期化成功時のコールバック
        //成功したら、手順2の登録情報の取得を行う
        beacappSDK.startUpdateEvents(null,null);
    },
    function(error){
        //初期化失敗時のコールバック
});

//手順3 スキャン開始
// スキャンの開始は、登録情報の取得が完了した後に呼び出す必要があるので、
// 登録完了のリスナー内で、スキャンの開始を実行する
beacappSDK.setUpdateEventListner(
    function(didFinish){
        //setUpdateEventListnerの成功
        //スキャンを開始する
        beacappSDK.startScan(
            function(success){
                //スキャン開始成功
            },
            function(error){
                //スキャン開始失敗
        });
    },
    function(error){
        //setUpdateEventListnerの失敗
});

//手順4 イベント検知時の制御
beacappSDK.setFireEventListner(
    function(fire){
        //beacon検知
        alert(JSON.stringify(fire));
    },
    function(error)
        //コールバックの登録に失敗
);

上記の処理をアプリ起動時など（devicereadyイベント発生後）に呼び出せば、Beaconを検知することができます。

ここで、Beaconを検知したら何をさせようか、と考えてしまうと、なかなか作るものが決まりません。
Beacappでは、検知したログの集計機能を用意していますので、まずは既存のアプリに組み込んでみて、人の動きを見る、というのも非常に面白いと思います。
JMASでも業務アプリに組み込んでみていますが、出勤時間や、喫煙時間、休憩時間など、非常によく見えるようになりました。
まずはログを取ってみて、Beaconってどんなもんなの、というのを体感していただければと思います。