ｐケモンGoみたいなarアプリをandroidで作るハンズオン

TECHNOMOBILE
GROUP
HEAD OFFICE
TOKUSHIMA development section
| 5floor Column Minamiaoyama,7-1-5,Minamiaoyama,Minato-ku,Tokyo 107-0062,Japan
| 3floor Tokushimakenkohkagaku-center,Hiraishisumiyoshi,Kawauchi-cho,Tokushima-shi Tokushima 771-0134,Japan
ＰケモンGOみたいなARアプリをAndroidで作るハンズオン

2
ポケモンGOやってますか？
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
６

3
カメラの映像とキャラクターが合成されてて
なんかリアルな感じしますよね。
６

4
これがARなんです。
６

5
面白そうですよね！！！
６

6
こうゆうコンテンツ作りたいと思いません
か？
６

7
ちょっとむずかしそうな気もします。。。。
６

8
ぐぐるとポケモンGOは「Vuforia」を使ってい
るという記事を見かけます。
でもよく調べると、Vuforiaはマーカーの位
置をベースに表示しているので、ポケモン
GOのような位置情報ベースのAPIはなさそ
うな感じです。
Vuforiaを使ったARの勉強会資料はここで
公開しています。
６
http://www.slideshare.net/mogiken1/vuforiavr

9
そこでWikitudeという位置情報ベースのAR
アプリを作るためのSDKを見つけました。
これを使ってポケモンGOっぽいARアプリを
作りましょう。
６

10
Wikitudeって何？
６
ARアプリを作るためのSDKです。
https://wikitude.grapecity.com/

11
６
下記のSDKを導入することによりスマホのアプリとして開発することが出来ま
す。ジャイロなどを使うのでスマホが必須です。
https://wikitude.grapecity.com/downloads/wikitudesdk
Unityのプラグインも用意されており、Unity上での開発も可能です。
導入の仕方、APIリファレンスなどは下記に記載されています。
http://docs.grapecity.com/help/wikitude/wikitude-sdk-
android/referenceandroid.html#android-javadocs
サイトにはポケモンGOの仕組みの解説もあります。
https://wikitude.grapecity.com/topics/ar-pokemongo
価格・ライセンスは下記に
https://wikitude.grapecity.com/products/wikitudesdk

12
ポケモンGOみたいなARアプリを
作りましょう！
６

13
「まずはAndroidStudioをインストールしましょう」のページを実行して、
AndroidStudioをインストール済みにしておいてください。
Android端末も用意してください。Android4.0以上であれば動くようです。6.0で
のみ検証。それ以外は未検証です。
PCとスマホを接続するUSBケーブルも。
「スマホを開発用に設定をしましょう」のページを実行して開発環境にしてくださ
い。
６
事前準備

14
６
この学びの対象者は？
→ポケモンGOのような位置情報ベースの
ARアプリを作りたい方。Androidアプリの
作り方がわかる方。Macユーザ向けに作成
していますが、Windowsでも動くはず（未
検証）
教えないことは？
→ばりばりのWikitudeのプログラマーでは
ないので深い知識はありません。難しい質
問は。。。

15
講師
Gashfara,Inc.代表
デジタルハリウッド大学院客員講師
茂木健一
mogi@gashfara.com
kenichi.mogi@tcmobile.jp
http://facebook.com/mogiken
http://www.slideshare.net/mogiken1
自己紹介
[プロフィール/実績]
もぎ・けんいち●青山学院大学大学院卒。Gashfara,Inc.代表。本社はハワイですが出社したことなし。
ホノルルマラソンには参加ｗ
青山学院大学大学院卒：エニックスでオリジナルゲーム制作(Z80アセンブラ CP/M)、SmallTalkで
人工知能開発（企業買収）。
（株）東洋情報システム退社後、（株）エイチアイ、グランスフィア（株）、（株）ファッション
ウォーカー（えびもえのEC）など数社のベンチャー企業の立ち上げ・創業期に参画し、ガシュファ
ラ・インクをUSで起業。システム開発ではゲーム、TOL（ツタヤオンライン）の立ち上げ。動画配
信システム(USENのGate01：Gyaoの前進)、電子マネーシステム（Bitcash）、ECフルフィルメント
システムなど、多彩な分野を経験。IT関連教育では1998年ころからデジハリの２．５階に間借りしな
がら教育コンテンツ作成（JIB社）。Brew、Java、セキュリティーなどの講師として活躍。現在、
（株）HUGGを設立し、スマホのカップル向けSNSサービス[HUGG]をグローバルに展開。㈱テクノ
モバイルにて技術サポート。
【著書】
BREWプログラミング実践バイブル [共著] （インプレス）、PHP逆引き大全 516の極意[共著]（秀和
システム）

16
成長を実現させるシステム”モバイルトータルソリュー
ション”
Web
システム
１
スマホ
アプリ
2 ゲーム
アプリ
3
モバイルトータルソリューション
B2B2C
• コンシューマ向けの大規模Webシステムの開発からアプリ・ゲーム開発までをマルチデバイスで対応
高い技術力市場ニーズとマッチ
大規模
Webシステム
に強い
Java,PHP
Strong1
最先端技術・独自
フレームワークで
効率的な
開発
Strong2
高トラフィック、
インフラ
ネットワーク
に強い
Strong3 プライマリー
ベンダー、
ヒアリング・
要件定義
に強い
StrongⅠ
情報資産の活用
最先端と
知見に強い
StrongⅡ
最先端のマルチ
デバイス
ウェアラブルに
強い
StrongⅢ
Mashup Awards 5年連続受賞
会社名株式会社テクノモバイル
設立 2008年
資本金 2,500万円
代表播田誠
従業員数 100名（グループ合計）
本社所在地
〒 107-0062
東京都港区南青山7-1-5 コラム南青山 5F
開発室
〒771-0134
徳島県徳島市川内町平石住吉209-5
徳島健康科学総合センター 3F

17
どんなARアプリを作るの？
６
現在位置のまわりのどこかの位置に魚を表示し背面カメラの映像と合成します。
カメラの向きを変えても魚の位置はそのままにあるかのうように表示します。
魚をタップするとくるっと回転するARアプリ。

18
ARアプリを作るには
６
下記の環境が必要です
・iOSまたはAndroidの開発環境。
今回はAndroidStudioを例に解説します。
・実行環境に合わせたWikitudeのSDK

19
まずはAndroidStudioをインストールしましょう
６
下記URLを参考にAndroidStudioをインストールしてください
・Mac
https://akira-watson.com/android/adt-mac.html
・Windows(スマホのドライバーのインストールも必要です。メーカーサイトで
要確認)
https://akira-watson.com/android/adt-windows.html

20
スマホを開発用に設定をしましょう
６
①７回以上タップして開発
向けオプションメニューを表示
します。
②このメニューが追加されます
③チェック
④チェック

21
サンプルをダウンロードしましょう
６
下記のGitHubからDownloadしてください。
https://github.com/mogiken/wikitude_sample

22
AndroidStudioにサンプルを取り込みましょう
６
AndroidStudioを起動して下記のメニューから、ダウンロードしたサンプルプロ
グラムのフォルダーを指定して取り込みます。

23
６
下記のようにプロジェクト構成が何も表示されない時は左タブの「Project」を
押して表示してください。

24
６
下記のようにプロジェクトを展開しておくとコードの編集が楽です。

25
実機を接続してアプリを動かしましょう
スマホとPCをUSBケーブルで接続しましょう。
再生ボタンみたいなのを押すとビルドが始まりスマホにアプリがインストールさ
れます。

26
接続されているスマホを選択し「OK」を押すとインストールされます。

27
動作確認してみましょう。
GPSがうまく取得できないと警告アイコンが表示されます。しばらく待つか、
何度か再起動しましょう。
白いiアイコンがGPS
が取得できている状
態

28
ゼロからアプリを作る場合
６
・WikitudeSDKをダウンロード
・WikitudeSDKの設定が必要
下記を参考に、/app/libs/wikitudesdk.aarにSDKを設置し、build.gradleを編集
してください。AndroidManifest.xmlに権限などの設定も必要です。
・WikitudeSDKのライセンスの取得が必要
下記を参考にライセンスキーを取得してSDKの初期化時に指定する。
ToDo
android/triallicense.html#how-to-obtain-a-free-trial-license
android/setupguideandroid.html#setup-guide-android

29
アプリの全体構成
６
プログラムは下記のような構成になっており、キャラクターの表示やアニメー
ションはJavaScriptで記述する。Java部分は表示枠と位置情報の取得のみおこな
う。html部分はiOSと共通化できる。
Android
MainActivity.javaなど
画面の枠表示と位置情報の取得
のみ
assets/index.htmlと
JavaScriptで位置情報をも
とにキャラクターを表示。
アニメーションを実行
iOSと共通化

30
６
Android Javaで記述
HTML+JavaScriptで記述
AndroidのビューはarchitectView
Androidで位置情報が更新
↓
onLocationChangedが発生
↓
architectView.setLocationでビューに位置情報を通知
↓
JavaScript
onLocationChangedが発生
World.locationChangedを実行
World.loadPoisFromJsonDataでキャラを描
画

31
コード解説
６
ソースコードを解説します。日本語でわかりやすく解説を追加しています。
簡単なAndroidアプリを作ったことがある人であれば理解可能です。

32
もっとARを学ぶには？
６
http://amzn.to/2aWN9hK

33
６
・VRコンテンツ作成サービスの追加
・広告コンテンツのサービス追加
・ゲーム開発への応用
・デザイナーのスキル向上
適用事例（経営者・営業担当の方に）

ｐケモンGoみたいなarアプリをandroidで作るハンズオン

Recommandé

Recommandé

Contenu connexe

Similaire à ｐケモンGoみたいなarアプリをandroidで作るハンズオン

Similaire à ｐケモンGoみたいなarアプリをandroidで作るハンズオン (20)

Plus de 健一茂木

Plus de 健一茂木 (7)

Dernier

Dernier (8)