ゼロから学ぶ話題の『iBeacon』 ─基礎からコードの書き方まで 株式会社コミュニケーション・プランニング｜ヒカ☆ラボレポート

iBeaconの概要

話題の「iBeacon」、その正体は？

まずは皆さんに、「iBeacon」とは何かというところからお話しします。皆さんのなかには、「iBeacon」という名前を最近、耳にされたという方も多いかも知れません。
「iBeacon」とは端的に言うと、Beacon端末と呼ばれる機器から発信されるBluetoothの電波をiOSでキャッチし、iPhoneに色々な動きをさせるiOSの機能のことです。

例えば、Beacon端末を置いてある店舗でショッピングをすると、スマートフォンの画面にBeacon端末から発信されたおすすめ商品の情報が表示されたり。ざっくり言うとそういうことをできるのが、iBeaconですね。

iBeacon 国内での活用事例

では、実際にどういうシーンで「iBeacon」が活用されているのか、ご紹介しましょう。

・PARCO
早い段階で「iBeacon」を導入され、人流解析などにご活用いただいていました。「tab」というショッピングアプリで、お気に入りの商品やスポットをクリップすることができます。 店舗に設置されている「tab」というボックスがBeacon端末になっていて、「tab」アプリを起動すると商品などがオススメされます。

・アサシンクリードユニティ
「アサシンクリードユニティ」というゲームのプロモーションの一環として、秋葉原でゲームと連動した宝探しゲームが行われました。 Webから応募した参加者が、街に複数人配置されたガードマンの追跡を逃れながら、30分の制限時間内にアーティファクトを探すというもの。
逃げる参加者に一定距離までガードマンが接近すると、参加者のスマートフォンから音が鳴るという仕組みです。

・京都市営バス
京都市営バスの運転席横にBeacon端末を設置し、バスが接近したことを停留所の専用ディスプレイに反映させるシステムが構築されています。 京都市交通局と京都高度技術研究所（ASTEM）が共同開発した「ポケロケ」とも連動していて、788台のバスにBeacon端末が搭載されています。

・GUCCI
「VOGUE」のショッピング・イベント「VOGUE FASHION’S NIGHT OUT（FNO）」用に、「GUCCI」と「VOGUE」、サンリオの3社がコラボレーション。 「iBeacon」を活用したキティちゃんのカメラフレームアプリ「VOGUE FNO×GUCCI×Hello Kitty CAMERA（FNOカメラ）」を作りました。

イベント期間中にGUCCIの店舗を訪れたユーザーは、「iBeacon」によって「FNOカメラ」で使える来店者限定シークレットフォトフレームを入手できます。

・JAL
CA（客室乗務員）さんを始めスタッフが身につけたスマートウォッチが、羽田空港の各所に設置されたBeacon端末に反応。 そこから発信された情報をもとに、センターでスタッフがどこにいるかを集中管理できるシステムです。スマートウォッチのOSはiOSではなく、Androidを採用しているところが特徴的です。

iBeacon 海外での活用事例

・MLB
アメリカのドジャーズスタジアムとサンディエゴスタジアムに、合計65個のBeacon端末を設置いただいています。ユーザーは「ballpark」というスマートフォン・アプリを介して、応援チームのプロモーション情報をBeacon端末から受信できます。 ユーザーは、スタジアム内の座る場所に応じたチームの情報を受け取ることができます。

・MasKingdom（台湾）
台湾にあるフェイシャルマスクの販売店に、さまざまなBeacon端末を設置いただいています。店舗としてはすごく小さいのですが、それぞれのBeacon端末に近づくと、スマートフォン・アプリでゲームが起動するんです。 全部のゲームをクリアしようと、ユーザーが楽しそうにお店の中を歩き回る仕掛けです。

・ポカリスエット（シンガポール）
ポカリスエットとセブンイレブンが、共同で行ったプロモーションに、「 iBeacon」をご活用いただいています。「POCARI X RUN」というアプリを使って、ユーザーが自分でランニングコースを設定。そのなかで給水ポイントとしてセブンイレブンを指定するんです。
セブンイレブンにはBeacon端末がおいてあって、その前を通過するとiPhoneのアプリが反応してコインが貯まります。ユーザーはコインを貯めると、プレゼントキャンペーンに応募することができます。

・ファルネーゼ宮市立博物館（イタリア）
イタリア北部の街、ピアチェンツァにある博物館の館内に、Beacon端末を設置。スマートフォンにアプリをインストールすると、絵画など展示品に関する情報をテキストや映像で受け取ることができます。
いわゆるオーソドックスな「iBeacon」の使い方にはなりますが、入館者のプロフィールに合わせてコンテンツやプロモーションを調整できるなど、好評を得ているようです。

 

 

「iBeacon」のコードを学ぼう！

「iBeacon」のフレームワーク

コミュニケーション・プランニングでシステムエンジニアをしております、冨永と申します。私のほうからは、「iBeacon」で実際に使われているコードについてご紹介します。

「iBeacon」には、Core Location Frameworkを使用しています。これは今までGPSにも使われていたもので、皆さんのなかにもGPS関連のLocation Managerなどについてご存知の方はいらっしゃることでしょう。 位置情報関連が詰まったフレームワークになります。

「iBeacon」のコードに使われているコードは3種類だけ。

・CLLocationManager
・CLBeaconRegion
・CLBeacon

そのため、GPSの方の処理をほとんど書いたことがないという方でも、比較的手をつけやすいと思われます。

モニタリングとレンジング

Beaconの処理については、モニタリングとレンジングという二つのポイントがあります。

■モニタリングとは

Beaconで形成されるリージョン（Beaconが発している電波が届く範囲）への端末の出入りを監視すること。ユーザーがリージョンに入ったり、出たりしたときは、それを知らせるメッセージがつくように設定されています。

今回お持ちしたBeacon端末は出力が結構強いので、この広さの会場くらいだとすっぽり電波範囲内に収まってしまい、リージョンの境が曖昧になってしまうのではないかと心配していました。しかし、ユーザーがリージョンから出入りした際にはしっかりと通知されていたので、安心しました。

■レンジングとは

発信側のBeacon端末と受信側のスマートフォンとの距離を測ること。
ユーザーが中に入った場合には、スマートフォンとの距離を検出しています。

実際にコードを見ていこう！

では、順番にコードを見ていきましょう。

■BeaconIDとリージョン設計

まずアプリを作る前に、BeaconにどういうIDをふって、どのような構成でリージョンを作成するかということを決める必要があります。

ビーコンにはUUIDとMajor、Minorという3種類のパラメーターがあり、好きな値を設定していくことができます。この３つのパラメーターを合わせてBeaconのIDと呼んでいます。同じIDのビーコン同士でリージョンを形成します。

UUIDのみ揃っているリージョン、UUIDとMajorが揃っているリージョン、UUIDとMajorとMinorが全て揃っているリージョンと、リージョンにも色々な種類があります。
今回は、このスライドのようにビーコンのIDを決めてみました。（Major:10、Minor:10）

あとはプログラムの中で使う変数名としてリージョンのIDを決めます。このID名は、リージョンがいくつかあった時にそれらを区別するものなので、好きな名前をつけてしまって問題ありません。とりあえず今回はかんたんに、Region_1とつけてみますね。

これをコードで書いたものをCLBeaconRegionの初期化に入れてしまいます。
すると、Beaconが所属するリージョンの初期化ができます。

■モニタリングの開始

次に、このリージョンを使ってモニタリングを始めていきます。 CLLocationManagerを初期化して、[LocationManager startMonitoringForRegion]で先ほど作ったBeaconRegionを指定すると、もうモニタリングが開始されます。

■モニタリングからの戻り

個々の設定がきちんと行われていると、CLLocationManagerDelegateに値が入ってくるので、それを拾えるように自分のソースに実装していきます。

■Deletegateの種類

DelegateにはdidEnterRegionとdidExitRegionがあります。
リージョンに入った時にはdidEnterRegion、出た時にはdidExitRegionが呼ばれます。

 

■レンジングの開始

[LocationManager startRangingBeaconsRegion]というものもあり、これはレンジングを開始するためのものです。

■モニタリングとレンジングの使い分け

まず最初はBeacon端末とスマートフォン端末の監視をします。
いざスマートフォン端末がエリア内に入ってくると、Beacon端末との具体的な位置関係を検出し始めるようにします。そうした作りにしないと、電池があっという間に無くなってしまいますからね。

レンジングを開始するコードはこの一行です。
[LocationManager startRangingBeaconsInRegion:(CLBeaconRegion *)region];

同じように戻りを受け取るためにLocationManagerDelegateがありますので、それを使います。
レンジングは本当に簡単で、受け取るDelegateもこれ1個だけなのです。このDelegateに一秒間隔でばしばし値が入ってきます。

 

CLProximityについて

■CＬProximityとは

CLProximityは、Beacon端末とスマートフォン端末の距離を表すパラメーター。
CLProximityは距離が近い順の配列になっていますから、「簡単だ」などと勘違いする人がいるかも知れませんが、実は注意が必要です。

・CLProximityImmediate:とても近い
・CLProximityNear:近い
・CLProximityFar:遠い
・CLProximityUnknown:わからない

■unknownに注意しよう

CLProximityは、unknown、Immideate、Near、Farの順に表します。一番最初に来るunknownには気をつけてください。ひと通り構文で回してあげて、unknownについては何もせず、流してあげると上手くいくはずです。

 

■どうやってProximityが決まるのか？

このProximityは、Beaconが発信する電波の強度によって設定されるもの。そのためBeacon端末とスマートフォン端末との間に分厚い壁などが挟まってしまうと、いくら二つの端末の位置が近かったとしても、「CLProximityFar」すなわち「遠い」などということになってしまいます。

■運用でのポイント

実際に聞いた話では、Beaconが発信する電波は意外と簡単に遮断されてしまうこともあるそうです。例えば、イベントではBeacon端末をゲストに見せたくないからと、発泡スチロールや簡単な板などで覆ってしまうことも。

すると電波が妨げられ、CLProximityの値が「近い」から「遠い」になってしまったり、「とても近い」には一切反応しないなどというケースもあるそうです。
Beacon端末の隠し方も、ひとつのポイントになってくるんですね。

Delegateのエラー処理について

CLLocationManagerDelegateには、他にも以下のようなものがあります。

・locationManager:didStartMonitoringForRegion:
モニタリングが開始された際に呼ばれる。

・locationManager:didDetermineState:ForRegion:
端末とリージョンの位置関係を知るために、
requestStateForRegion:をコールした際に呼ばれる。

Delegateを実装する際には忘れずにこれを実装していただきたいですね。

・locationManager:monitoringDidFailForRegion:withError:
モニタリングでエラーが発生した際に呼ばれます。

いざという時に役立ちます。

まとめ

「iBeacon」アプリをつくる際には、まずサンプルとなるアプリを見付けてください。そしてとりあえずエラーなどは置いておき、いったん動かしてください。後は公式リファレンスを読むとがんばれるのではないでしょうか。

また、「iBeacon」の流れはとにかく速いので、新しい情報が必要になります。例えば誰かがブログなどに「iBeacon」のコードについて書いていたとしても、その日付が少しでも古い場合には情報として役に立たない。コードを打ち込んでみても一切反応しなかったり、上手く動かなかったりします。

さまざまな方が、「iBeacon」についてすごく素敵なブログを書いてくださったりしているのですが、情報の鮮度を忘れずにチェックすることをおススメします。

ほかに挙げるとすれば公式リファレンスについてしょうか。公式リファレンスに間違いはありませんので、とりあえず一度、チェックしてみるといいでしょう。

このイベントでは「iBeacon」の実装方法について説明しましたが、「Beacon端末を持っていないしなぁ」などと感じる方もいるかも知れません。 そんなあなたのために、手持ちのMacやiPhoneをBeacon端末にするアプリをネットで公開しています。もしよかったら使ってみてくださいね。