アプリカンブログ

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

アプリカン ver 1.10.0の目玉機能「Beacon」を使ってみよう!

今後ますます利用の広がっていくであろうiBeacon。ついにアプリカンも1.10.0にて対応しました!

ネイティブアプリでiBeaconを実装しようとすると何かと面倒なイメージがありますが、アプリカンでは1つの設定ファイルと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 {
      // Beacon初期化処理
      applican.beacon.init(initBeaconSuccess, initBeaconError);
      // 初期化成功時
      function initBeaconSuccess(){
        var dump = "beaconInitSuccess";
        alert(dump);
        // 初期化が成功したらモニタリングを開始します
        applican.beacon.startMonitoring(startMonitoringSuccess, startMonitoringError);
      }
      // 初期化失敗時
      function initBeaconError(errror){
        var dump = "beaconInitError\n";
        dump += "code:" + error.code + "\n";
        alert(dump);
      }
      // モニタリング開始成功時
      function startMonitoringSuccess(){
        var dump = "beaconStartMonitoringSuccess";
        alert(dump);
      }
      // モニタリング開始失敗時
      function startMonitoringError(error){
        var dump = "beaconStartMonitoringError\n";
        dump += "code:" + error.code + "\n";
        alert(dump);
      }
    }catch(e){
      alert(e);
    }
    </script>
  </body>
</html>

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

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>

Beaconの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の仕様についてはアプリカンのリファレンスを参照してください。

ビルド設定の変更

管理画面のビルド設定、iOSアプリ設定において変更が必要です。

ランタイムエンジンを Version 1.10.0 としてください

ランタイムエンジンの選択

新規のプロジェクトの場合は最新版が選択されますが、既存プロジェクトの場合は変更をお願いします。また、iBeaconはiOS 7.0以降の機能になりますので、7.0未満の対応OSバージョンについてはiBeaconは動作しません。

追加オプションの設定

追加オプションの設定

追加オプションの中にiBeaconの項目が追加されています。これを使用するにし、必要に応じてバックグラウンド監視を選択してください。

Beaconデバイスの用意

Beaconデバイスがない場合は、BeaconEggのiBeacon Sender+を使ってiOSデバイスをiBeaconデバイスにすることができます(有料です)。Mac OSX 10.9であれば、Mac OSXをiBeaconデバイスにすることもできます(via Node.jsとiPhoneでiBeaconの送受信テスト - Qiita)。Yosemiteでは不具合があって使えないようです。

BeaconEggでBeaconデバイスになっているところ

アプリの起動

アプリを起動すると、最初にBeaconの初期化とモニタリング開始を示すアラートが出ます。もしエラーが出た場合は、BeaconErrorを参考にしてください

アプリ起動

アプリをバックグラウンドにして、Beaconデバイスの近くに来るとローカル通知が出るのが確認できるはずです。通知をタップすると、目的のページが表示されます。

Beaconのローカル通知

注意点

  • Beacon APIはiOS 7.0以降を対象としています。Androidは4.3以降になります。
  • ランタイムエンジンは1.10.0以降を対象としています。

iBeaconを本格的に実装しようとすると、強度や距離が随時アップデートされたり、BTLEの利用、ローカル通知など様々な苦労があることでしょう。しかしアプリカンのBeacon APIを使った実装であれば、開発者の方はJavaScriptのコードだけで完結します。後はデバイスのUUIDを登録して、距離によって処理分けやメッセージを書けば良いだけです。

O2Oアプリで注目を集めているiBeaconを手軽に実装するためにもぜひアプリカンを使ってみてください!

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

※iBeaconは、Apple Inc.の商標または登録商標です。