プロトタイプシステムの実装 26

5.1 開発環境

プロトタイプシステムの開発にはUnity 5.3.1¹を用い，開発言語にはC#を用いた．また，

Androidアプリケーションを実装するために，Android SDK²を用いた．動作端末にはHuawei Ascend P7を用い，端末のAndroid OSのバージョンは4.4(Kitkat)である．Unity上でARを 利用するためのライブラリとして，NyARToolKit for Unity³を用いた．サーバはローカル環境

(MacOS 10.10.5)で構築し，サーバ上のデータベースにはMySQLを用いた．Unityで開発さ

れたアプリケーションとサーバの通信にはPHPを用いている．

5.2 画面遷移

画面は，描画するかしないかで切り替えている．画面遷移を図5.2に示す．例えばメニュー 画面からポイント確認画面へ遷移する場合，メニュー画面を描画しないと設定し，ポイント 画面を描画すると設定することにより切り替える．

5.3 ポイント確認画面

5.3.1 ポイントとバッジの描画

ARを用いてポイントとバッジを描画することにより，消費者にフィードバックする．AR を利用するためのライブラリとして，ARToolKitを元に開発されたNyARToolKitを利用して いる．マーカには，大きさ3cmのNyIDマーカを用いている．NyIDマーカは予めARマー カに番号が割り振られており，消費者を識別するために利用している．本システムでは，AR マーカを消費者識別用のIDとポイントやバッジを重畳表示するために利用している．

ポイントはARマーカ上に描画される．ARマーカが認識されると，サーバと通信を行い，

消費者の情報を取得する．次に，消費者の現在のレベルを確認し，オブジェクトの色を決定 する．そして，現在保有するポイントの数だけオブジェクトを描画する．保有ポイントの一 番上には，木のオブジェクトを描画する．

1http://japan.unity3d.com/

2http://developer.android.com/sdk/index.html

3http://nyatla.jp/nyartoolKit/wp/?page_id=556

図5.1:画面遷移

ポイントの周りには，ミッション達成状況に応じて星型のバッジをランダムに描画する．描 画する際はデータを確認し，達成した項目のバッジを描画する．

バッジの描画範囲を図5.2に示す．薄い灰色の箇所にバッジを描画する．バッジは，ARマー カから縦横-5cm∼5cmの範囲内に描画する．ポイントとバッジが被らないように，ARマーカ 上には描画しない．

図5.2:バッジの描画範囲

5.3.2 バッジの取得

どのバッジをタッチしたかは，UnityのRaycasterコンポーネントを用いて判別している．

Raycasterコンポーネントは，タッチした地点からレイを飛ばし，オブジェクトに当たったら

どのオブジェクトに当たったのかを返す．カメラにRaycasterコンポーネントを設定すること により，どのバッジにタッチしたかを判別し，対応するミッション画面の達成項目を未達成 から達成済みの画像に交換する．

5.3.3 アニメーション

ポイントやバッジの移動方法として，DoTweenアセットを利用した⁴．DoTweenは，時間 経過に沿ってオブジェクトの位置や倍率，角度などを変化させるライブラリである．ポイン トを加算する際に上空からボールが降ってくる場面や，バッジが生成され移動する場面に対 し利用している．

5.3.4 レベルアップ

ポイント加算のアニメーションが再生された後，保有ポイントが10ポイント以上になれば レベルアップを行う．レベルアップ時には，レベルアップ用の音を再生する．ARマーカから カメラを背け，再度ARマーカを認識させると，レベルアップした状態で新しく描画される．

5.3.5 競争

複数のARマーカが同時に検出されると，順位付けを行う．ポイントを描画する前に，まず レベルが大きい順に並べ替え，次にポイントが大きい順に並べ替える．そして，並べ替えた 順にポイントを描画する．ポイント描画後，上位3名は順位に合わせた色の王冠のオブジェ クトを描画し，残りは木のオブジェクトを描画する．

5.4 実店舗内かの判断

本システムは，実店舗内で使用することを想定している．実店舗内か判断するため，GPS を用いた．GPSで位置情報を取得し，実店舗以外ではポイント確認画面は利用できないよう になっている．

4http://dotween.demigiant.com/index.php

5.5 通信

通信の様子を図5.3に示す．スマートフォンとサーバ間の通信はPHPで実装した．また，

WebサーバにはApach，MySQLが動作している．

提供側は，サーバに消費者の情報を取得する際と更新する際にアクセスする．消費者側は，

自身の情報を登録する際と，消費者情報を取得する際にアクセスする．

Unityからデータを送受信するために，WWWクラスとWWWFormクラスを用いた．デー

タベースから受信する際には，情報をJSON形式に変換して受信する．Unity側で受け取った

ら，string形式にデコードする．

図5.3:通信の様子

5.6 データベースの構造

データベースは消費者全体を管理するテーブル(全体テーブル)と，消費者個人が購買した 情報を扱うテーブル(個人テーブル)の2つからなる．

全体テーブルには，ARマーカID，消費者の名前，更新日，起動したか否か，ミッション 達成状況，レベルが登録されている．ARマーカIDの欄には，予め人数分のIDが0番から 1番，2番と順に保存されている．消費者の名前には，消費者が登録時に入力したニックネー ムが保存されている．更新日には，消費者の情報が更新された日付を，起動したか否かには，

更新されてからアプリケーションを起動したか否かが保存されている．ミッション達成状況 には，1∼9個あるミッションそれぞれが達成しているかどうかが保存されており，0時になる とアカウント作成以外のミッションが未達成に切り替わる．レベルには，消費者の現在のレ ベルが保存されている．全体テーブルは，新しく消費者個人の情報を登録する場合と，提供 側が消費者のミッションの到達度を登録する場合に更新される．

個人テーブルには，ポイント取得日，ミッションを行うことで生じたポイント(付与分のポ イント)，累計ポイントが登録されている．ポイント取得日には，ミッションを行うことでポ イントを得た日付を，付与分のポイントには，得たポイントを保存している．累計ポイントに は，プロトタイプシステムを利用し始めてからの合計のポイントを保存している．個人テー ブルは，ポイントを得るたびにデータを書き換えるのではなく，追加して記述している．

5.7 消費者情報が登録されているかの確認

消費者情報がデータベースに登録されているか確認する方法について述べる．消費者と提 供側は，ARマーカを通して消費者情報がデータベースに登録しているかどうか判断する．

アプリケーションを起動すると，サーバと通信を行い，全体テーブルから登録されている IDを全て取得する．次に，スマートフォンをARマーカにかざすことにより，どのARマーカ が認識されているか取得する．通信を行い取得したIDの中から，検出されたARマーカのID と一致するものを探す．一致するものがあった場合，消費者側のアプリケーションはメニュー 画面に，提供側のアプリケーションは購買情報を登録する画面に切り替える．画面の切り替 えと同時に通信を行い，全体テーブルと個人テーブルから消費者の情報を取得する．一致す るものがなかった場合，消費者側のアプリケーションは消費者の名前を登録する画面へ移動 する．消費者の名前を入力すると，全体テーブルの消費者の名前の欄に登録される．また，個 人テーブルが新しく作成される．個人テーブルの名前は，ARマーカIDと消費者の名前から 構成されており，個人テーブルの名前が被らないようにしてある．