読者です 読者をやめる 読者になる 読者になる

アプリカンブログ

HTML5でiOS/Androidアプリが開発できるプラットフォーム、アプリカンのブログです。

リファレンスより。アプリカンでiBeacon通知を使ってみよう

アプリカンのリファレンスページではAPIの説明と共に、そのAPIを使うためのサンプルプロジェクトを公開しています。

今回はその中からBeacon APIを使ったiBeacon通知の使い方を紹介します。

必要なもの

プロジェクトのダウンロード

Beacon | アプリカン | アプリ開発支援プラットフォームにてサンプルをダウンロードをクリックします。

f:id:moongift:20150516112819p:plain

アプリカンにログイン

アプリカン | アプリ開発支援プラットフォームへ行き、右上にある会員登録をクリックします。既に会員登録済みの場合はログインをクリックします。

f:id:moongift:20150510221355p:plain

新規プロジェクト作成

会員登録、ログイン後に表示されるプロジェクト一覧ページにて、新しいプロジェクトを作成ボタンをクリックします。

f:id:moongift:20150510221412p:plain

プロジェクト名は「Beaconテスト」として、対象デバイスは必要なものを選択してください。そして作成ボタンをクリックします。

f:id:moongift:20150510221433p:plain

作成されると、Beaconテストのプロジェクト画面に移動します。

f:id:moongift:20150510221449p:plain

beacon-config.xmlの編集

Beacon APIの設定を行うためのbeacon-config.xmlを編集します。uuidやmajorおよびminor、そして距離がどれくらいになった時にメッセージを出すかと言った指定ができます。詳細はbeaconConfig | アプリカン | アプリ開発支援プラットフォームをご覧ください。

<?xml version="1.0" encoding="utf-8" ?>
<beacon-config>
    <beacons>
        <beacon uuid="00000000-ABCD-1234-ABCD-012345678901">
            <local-notification>
                <retry-count>3</retry-count>
                <retry-interval-minutes>5</retry-interval-minutes>
                <reset-time>23:59</reset-time>
                <reset-interval-minutes>360</reset-interval-minutes>
                <conditions>
                    <condition major="1">
                        <monitoring-range-meters to="1" />
                        <message lang="ja">目の前にお買い得商品があります。。</message>
                        <url>local://coupon1.html</url>
                    </condition>
                    <condition>
                        <monitoring-range-meters from="3" to="4" />
                        <message lang="ja">近くに特典の受けられる商品があります。</message>
                        <url>local://coupon2.html</url>
                    </condition>
                </conditions>
            </local-notification>
            <history>
                <max-history>100</max-history>
                <interval-seconds>60</interval-seconds>
                <expired-days>90</expired-days>
            </history>
        </beacon>
        <beacon uuid="11111111-BCDE-4567-BCDE-109876543210" major="1" minor="2">
            <local-notification>
                <retry-count>3</retry-count>
                <retry-interval-minutes>2</retry-interval-minutes>
                <reset-time>23:59</reset-time>
                <reset-interval-minutes>10</reset-interval-minutes>
                <conditions>
                    <condition>
                        <monitoring-range-meters to="5" />
                        <message lang="ja">いらっしゃいませ!</message>
                        <url>local://coupon.html</url>
                    </condition>
                </conditions>
            </local-notification>
            <history>
                <max-history>100</max-history>
                <interval-seconds>30</interval-seconds>
                <expired-days>90</expired-days>
            </history>
        </beacon>
    </beacons>
</beacon-config>

コードのアップロード

プロジェクト画面左にあるアップロードをクリックします。

f:id:moongift:20150510221511p:plain

そしてアップロードと書かれている枠の中に、先ほどダウンロードしたweb.zipをドラッグ&ドロップしてください。

f:id:moongift:20150510221528p:plain

アップロードが完了すると、追加されましたというメッセージが出ます。そして、その下にある公開ボタンをクリックします。

f:id:moongift:20150510221549p:plain

そして公開するボタンをクリックしてください。

f:id:moongift:20150510221604p:plain

更新されました、と表示されれば準備は完了です。

f:id:moongift:20150510221619p:plain

アプリカンシミュレータのインストール

iOSのApp StoreまたはAndroidのGoogle Playにて applican と検索してアプリカンシミュレータをインストールしてください。

f:id:moongift:20150510221634p:plain

アプリカンシミュレータで確認

アプリカンシミュレータを起動すると、まずログイン画面が表示されます。会員登録したログインID、パスワードでログインします。

f:id:moongift:20150510221648p:plain

そうすると登録しているプロジェクトが一覧表示されますので、Beaconテストを選択します。

f:id:moongift:20150516112836p:plain

以下がBeaconテストを開いた画面です。最初に初期化を行い、監視の開始をタップします。

f:id:moongift:20150516112851p:plain

f:id:moongift:20150516112903p:plain

後はアプリをバックグラウンドにし、Beaconデバイスの近くに行くと、通知が表示されます。Beacon APIの通知はローカル通知なので、オフラインでも利用できるのが利点です。

f:id:moongift:20150516112913p:plain

通知を開くと、予め指定したパラメータをつけて画面が開きますのでクーポンを表示するなどの処理分けが可能です。

ビーコンの処理

ビーコン情報の監視は beacon-config.xml で行うこともできますし、コードから指定も可能です。

function watchBeacon() {
  // 監視するビーコンの情報
  var beaconInfo = { uuid:'00000000-92DC-1001-B000-001C4DE26F4C', major:"1"};
  
  // ビーコンの監視の開始
  watchId = applican.beacon.watchBeacon(beaconInfo, watchBeaconResult, watchBeaconSuccess, watchBeaconError);
}

// 取得したビーコン情報。端末に依存しますがおよそ1秒ごとに取得されます。
function watchBeaconResult(beacon){
    
  var uuid    = beacon.uuid;    // ビーコンの UUID
  var major    = beacon.major;    // ビーコンのメジャー番号
  var minor    = beacon.minor;    // ビーコンのマイナー番号
  var proximity  = beacon.proximity;  // 距離の精度(0:不明, 1:至近距離, 2:近距離, 3:遠距離)
  var accuracy  = beacon.accuracy;  // ビーコンまでの距離(メートル)
  var rssi    = beacon.rssi;    // 受信信号強度(dBm)
  var dump = "ビーコン情報:\n";
  dump += "uuid : " + uuid + "\n";
  dump += "major : " + major + "\n";
  dump += "minor : " + minor + "\n";
  dump += "proximity : " + proximity + "\n";
  dump += "accuracy : " + accuracy + "\n";
  dump += "rssi : " + rssi + "\n";
  document.querySelector("#dumpAreaWatchBeacon").value = dump;
}

店舗などでO2Oとして使う場合にはローカル通知を用いるのが良いかと思います。アプリを立ち上げたまま使う場合はリアルタイム監視の機能を使ってみてください。


アプリカンを使うとiBeaconを使ったアプリ開発がとても簡単にできるようになります。ぜひ皆さんのアプリの中で使ってください。

アプリカン | アプリ開発支援プラットフォーム