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

アプリカンブログ

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

Androidでもビーコン。アプリカンのBeacon APIを使おう!

アプリカンでは ver. 1.10.0 よりBeacon APIを提供しています。ビーコンはO2Oマーケティングで欠かせない、店舗などに訪問者が来た時にお知らせを出したり何らかのクーポンなどを発行するのに使えます。iOSではiBeaconと知られています。

アプリカンではAndroidでもBeacon APIを使うことで同様の操作ができるようになっています。ビーコンデバイスと連携させるのは難しく感じますが、アプリカンでは設定ファイルとJavaScriptを使ってごくごく簡単に実装が可能です。ぜひお試しください。

プロジェクトのベースをダウンロードする

ライブラリ一覧

ライブラリページより、

  • シンプル
  • beacon-config.xml

をダウンロードします。シンプルを解凍してできたwebフォルダの中にbeacon-config.xmlを入れてください。基本の構成は次のようになります。

beacon-config.xmlをダウンロードして配置

index.htmlを編集

index.htmlを次のように編集します。

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1.0, user-scalable=no">
    <title>Sample</title>
    <script type="text/javascript" charset="utf-8" src="js/applican.js"></script>
  </head>
  <body>
    SAMPLE
    <script>
    try {
      var onDeviceReady = function() {
        // Beacon APIを初期化します
        applican.beacon.init(initBeaconSuccess, initBeaconError);
        
        // 初期化成功した場合のコールバック
        function initBeaconSuccess(){
          var dump = "beaconInitSuccess";
          alert(dump);

          // モニタリングを開始します
          applican.beacon.startMonitoring(startMonitoringSuccess, startMonitoringError);
          
          // モニタリング開始した時のコールバック
          function startMonitoringSuccess(){
            var dump = "beaconStartMonitoringSuccess";
            alert(dump);
          }
          
          // モニタリングを開始できなかった場合のコールバック
          function startMonitoringError(error){
            var dump = "beaconStartMonitoringError\n";
            dump += "code:" + error.code + "\n";
            alert(dump);
          }
        }

        // 初期化失敗した時のコールバック
        function initBeaconError(errror){
          var dump = "beaconInitError\n";
          dump += "code:" + error.code + "\n";
          alert(dump);
        }
      }
      
      document.addEventListener("deviceready", onDeviceReady, false);
    </script>
  </body>
</html>

こちらはごくごく簡単なコードなので、実際に組み込む際には Beacon API | アプリ開発支援プラットフォーム を参考にしてください。上記は初期化し、初期化が成功すればモニタリングを開始します。フォアグラウンド/バックグラウンドで startMonitoring と watchBeacon が用意されています。 watchBeaconはフォアグラウンド時にビーコンの監視を行います。

注意点としては deviceready になったタイミングで実行するようにしてください。

beacon-config.xmlの編集

beacon-config.xmlは次のようになっています。

<?xml version="1.0" encoding="utf-8" ?>
<beacon-config>
  <beacons>
    <beacon uuid="1E21BCE0-7655-4647-B492-A3F8DE2F9A02" major="1" minor="1">
      <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>
            <monitoring-range-meters to="1" />
            <message lang="ja">目の前にお買い得商品があります。。</message>
            <url>coupon1.html</url>
          </condition>
          <condition>
            <monitoring-range-meters from="3" to="4" />
            <message lang="ja">近くに特典の受けられる商品があります。</message>
            <url>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>
        :
  </beacons>
</beacon-config>

iBeaconのUUIDは20個まで定義できます。major/minorは次のように記述することもできます。

<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>coupon1.html</url>
      </condition>
      <condition>
        <monitoring-range-meters from="3" to="4" />
        <message lang="ja">近くに特典の受けられる商品があります。</message>
        <url>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>

conditionの中にmajorを含めることもできます。そしてレンジによって出すメッセージを振り分けることも可能です。beacon-config.xmlの仕様についてはアプリカンのリファレンスを参照してください。

なお今回の 1E21BCE0-7655-4647-B492-A3F8DE2F9A02 というUUIDはiOSデバイスをiBeaconデバイスにするBeaconEggのものになります。実際に使う際にはご自分のBeaconデバイスのUUIDを指定するようにしてください。

ビルド設定の変更

アプリカンの管理画面、Androidアプリ設定にて変更が必要です。

ランタイムエンジンを Version 1.10.0 以上にする

新規のプロジェクトの場合は最新版が選択されますが、既存プロジェクトの場合は変更をお願いします。また、Beacon APIはAndroid 4.3以上でサポートされますので、対応OSバージョンを4.3以上としてください。

パーミッション設定でBluetoothを追加

次にパーミッション設定を選択します。

そしてBluetoothをクリックして有効にします。

最後にこの内容で保存ボタンをクリックしてください。

追加オプション設定

追加オプション設定を選択します。

iBeaconを使用するに設定してください。また、バックグラウンド監視も必要に応じて設定してください。

コンテンツのアップロード

設定が終わったらコンテンツをweb.zipとして圧縮してアップロードします。

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

アップロードが終わったらアプリカンシミュレータでの確認になります。

起動すると初期化成功のアラートが出ます。

続いてモニタリング開始のアラートです。

そしてBeaconデバイスが近くにあると、Androidデバイスに通知が表示されます。

まとめ

アプリカンでのビーコン通知は設定された距離によって通知されるメッセージを変えたり、最大20個までの購読ができるようになっています。通常実装する必要がある電波強度のチェックや精度を気にする必要はありません。

ローカル通知を開いた時のURLも指定できますので自由度高いビーコン連携ができるはずです。O2Oアプリ開発はもちろん、今流行のIoT開発においてもきっと役立つでしょう。

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