Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
TECHNOMOBILE
GROUP
HEAD OFFICE
TOKUSHIMA development section
| 5floor Column Minamiaoyama,7-1-5,Minamiaoyama,Minato-ku,Tok...
2
ポケモンGOやってますか?
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
3
カメラの映像とキャラクターが合成されてて
なんかリアルな感じしますよね。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
4
これがARなんです。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
5
面白そうですよね!!!
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
6
こうゆうコンテンツ作りたいと思いません
か?
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
7
ちょっとむずかしそうな気もします。。。。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
8
ぐぐるとポケモンGOは「Vuforia」を使ってい
るという記事を見かけます。
でもよく調べると、Vuforiaはマーカーの位
置をベースに表示しているので、ポケモン
GOのような位置情報ベースのAPIはなさそ
うな感じです。
Vuf...
9
そこでWikitudeという位置情報ベースのAR
アプリを作るためのSDKを見つけました。
これを使ってポケモンGOっぽいARアプリを
作りましょう。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESE...
10
Wikitudeって何?
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
ARアプリを作るためのSDKです。
https://wikitude.grapecity.com/
11
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
下記のSDKを導入することによりスマホのアプリとして開発することが出来ま
す。ジャイロなどを使うのでスマホが必須です。
https://wi...
12
ポケモンGOみたいなARアプリを
作りましょう!
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
13
「まずはAndroidStudioをインストールしましょう」のページを実行して、
AndroidStudioをインストール済みにしておいてください。
Android端末も用意してください。Android4.0以上であれば動くようです。6....
14
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
この学びの対象者は?
→ポケモンGOのような位置情報ベースの
ARアプリを作りたい方。Androidアプリの
作り方がわかる方。Macユーザ...
15
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
講師
Gashfara,Inc.代表
デジタルハリウッド大学院客員講師
茂木健一
mogi@gashfara.com
kenichi.mogi@...
16
成長を実現させるシステム”モバイルトータルソリュー
ション”
Web
システム
1
スマホ
アプリ
2 ゲーム
アプリ
3
モバイルトータルソリューション
B2B2C
• コンシューマ向けの大規模Webシステムの開発からアプリ・ゲーム開発...
17
どんなARアプリを作るの?
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
現在位置のまわりのどこかの位置に魚を表示し背面カメラの映像と合成します。
カメラの向きを変えても魚の位置はその...
18
ARアプリを作るには
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
下記の環境が必要です
・iOSまたはAndroidの開発環境。
今回はAndroidStudioを例に解説します。
...
19
まずはAndroidStudioをインストールしましょう
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
下記URLを参考にAndroidStudioをインストールしてください
・Mac
...
20
スマホを開発用に設定をしましょう
6
①7回以上タップして開発
向けオプションメニューを表示
します。
②このメニューが追加されます
③チェック
④チェック
21
サンプルをダウンロードしましょう
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
下記のGitHubからDownloadしてください。
https://github.com/mogike...
22
AndroidStudioにサンプルを取り込みましょう
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
AndroidStudioを起動して下記のメニューから、ダウンロードしたサンプルプ...
23
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
下記のようにプロジェクト構成が何も表示されない時は左タブの「Project」を
押して表示してください。
24
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
下記のようにプロジェクトを展開しておくとコードの編集が楽です。
25
実機を接続してアプリを動かしましょう
スマホとPCをUSBケーブルで接続しましょう。
再生ボタンみたいなのを押すとビルドが始まりスマホにアプリがインストールさ
れます。
26
接続されているスマホを選択し「OK」を押すとインストールされます。
27
動作確認してみましょう。
GPSがうまく取得できないと警告アイコンが表示されます。しばらく待つか、
何度か再起動しましょう。
白いiアイコンがGPS
が取得できている状
態
28
ゼロからアプリを作る場合
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
・WikitudeSDKをダウンロード
・WikitudeSDKの設定が必要
下記を参考に、/app/libs/...
29
アプリの全体構成
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
プログラムは下記のような構成になっており、キャラクターの表示やアニメー
ションはJavaScriptで記述する。Java...
30
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
Android Javaで記述
HTML+JavaScriptで記述
AndroidのビューはarchitectView
Androidで位...
31
コード解説
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
ソースコードを解説します。日本語でわかりやすく解説を追加しています。
簡単なAndroidアプリを作ったことがある人であれば理解...
32
もっとARを学ぶには?
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
http://amzn.to/2aWN9hK
33
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
・VRコンテンツ作成サービスの追加
・広告コンテンツのサービス追加
・ゲーム開発への応用
・デザイナーのスキル向上
適用事例(経営者・営業担...
Upcoming SlideShare
Loading in …5
×

pケモンGoみたいなarアプリをandroidで作るハンズオン

ポケモンGOのような位置情報ベースのARアプリを作るハンズオン資料です。

  • Be the first to comment

pケモンGoみたいなarアプリをandroidで作るハンズオン

  1. 1. 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 PケモンGOみたいなARアプリをAndroidで作るハンズオン
  2. 2. 2 ポケモンGOやってますか? COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6
  3. 3. 3 カメラの映像とキャラクターが合成されてて なんかリアルな感じしますよね。 COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6
  4. 4. 4 これがARなんです。 COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6
  5. 5. 5 面白そうですよね!!! COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6
  6. 6. 6 こうゆうコンテンツ作りたいと思いません か? COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6
  7. 7. 7 ちょっとむずかしそうな気もします。。。。 COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6
  8. 8. 8 ぐぐるとポケモンGOは「Vuforia」を使ってい るという記事を見かけます。 でもよく調べると、Vuforiaはマーカーの位 置をベースに表示しているので、ポケモン GOのような位置情報ベースのAPIはなさそ うな感じです。 Vuforiaを使ったARの勉強会資料はここで 公開しています。 COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6 http://www.slideshare.net/mogiken1/vuforiavr
  9. 9. 9 そこでWikitudeという位置情報ベースのAR アプリを作るためのSDKを見つけました。 これを使ってポケモンGOっぽいARアプリを 作りましょう。 COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6
  10. 10. 10 Wikitudeって何? COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6 ARアプリを作るためのSDKです。 https://wikitude.grapecity.com/
  11. 11. 11 COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6 下記の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. 12. 12 ポケモンGOみたいなARアプリを 作りましょう! COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6
  13. 13. 13 「まずはAndroidStudioをインストールしましょう」のページを実行して、 AndroidStudioをインストール済みにしておいてください。 Android端末も用意してください。Android4.0以上であれば動くようです。6.0で のみ検証。それ以外は未検証です。 PCとスマホを接続するUSBケーブルも。 「スマホを開発用に設定をしましょう」のページを実行して開発環境にしてくださ い。 6 事前準備
  14. 14. 14 COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6 この学びの対象者は? →ポケモンGOのような位置情報ベースの ARアプリを作りたい方。Androidアプリの 作り方がわかる方。Macユーザ向けに作成 していますが、Windowsでも動くはず(未 検証) 教えないことは? →ばりばりのWikitudeのプログラマーでは ないので深い知識はありません。難しい質 問は。。。
  15. 15. 15 COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 講師 Gashfara,Inc.代表 デジタルハリウッド大学院客員講師 茂木健一 mogi@gashfara.com kenichi.mogi@tcmobile.jp http://facebook.com/mogiken http://www.slideshare.net/mogiken1 自己紹介 [プロフィール/実績] もぎ・けんいち●青山学院大学大学院卒。Gashfara,Inc.代表。本社はハワイですが出社したことなし。 ホノルルマラソンには参加w 青山学院大学大学院卒:エニックスでオリジナルゲーム制作(Z80アセンブラ CP/M)、SmallTalkで 人工知能開発(企業買収)。 (株)東洋情報システム退社後、(株)エイチアイ、グランスフィア(株)、(株)ファッション ウォーカー(えびもえのEC)など数社のベンチャー企業の立ち上げ・創業期に参画し、ガシュファ ラ・インクをUSで起業。システム開発ではゲーム、TOL(ツタヤオンライン)の立ち上げ。動画配 信システム(USENのGate01:Gyaoの前進)、電子マネーシステム(Bitcash)、ECフルフィルメント システムなど、多彩な分野を経験。IT関連教育では1998年ころからデジハリの2.5階に間借りしな がら教育コンテンツ作成(JIB社)。Brew、Java、セキュリティーなどの講師として活躍。現在、 (株)HUGGを設立し、スマホのカップル向けSNSサービス[HUGG]をグローバルに展開。㈱テクノ モバイルにて技術サポート。 【著書】 BREWプログラミング実践バイブル [共著] (インプレス)、PHP逆引き大全 516の極意[共著](秀和 システム)
  16. 16. 16 成長を実現させるシステム”モバイルトータルソリュー ション” Web システム 1 スマホ アプリ 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. 17. 17 どんなARアプリを作るの? COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6 現在位置のまわりのどこかの位置に魚を表示し背面カメラの映像と合成します。 カメラの向きを変えても魚の位置はそのままにあるかのうように表示します。 魚をタップするとくるっと回転するARアプリ。
  18. 18. 18 ARアプリを作るには COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6 下記の環境が必要です ・iOSまたはAndroidの開発環境。 今回はAndroidStudioを例に解説します。 ・実行環境に合わせたWikitudeのSDK https://wikitude.grapecity.com/downloads/wikitudesdk
  19. 19. 19 まずはAndroidStudioをインストールしましょう COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6 下記URLを参考にAndroidStudioをインストールしてください ・Mac https://akira-watson.com/android/adt-mac.html ・Windows(スマホのドライバーのインストールも必要です。メーカーサイトで 要確認) https://akira-watson.com/android/adt-windows.html
  20. 20. 20 スマホを開発用に設定をしましょう 6 ①7回以上タップして開発 向けオプションメニューを表示 します。 ②このメニューが追加されます ③チェック ④チェック
  21. 21. 21 サンプルをダウンロードしましょう COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6 下記のGitHubからDownloadしてください。 https://github.com/mogiken/wikitude_sample
  22. 22. 22 AndroidStudioにサンプルを取り込みましょう COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6 AndroidStudioを起動して下記のメニューから、ダウンロードしたサンプルプロ グラムのフォルダーを指定して取り込みます。
  23. 23. 23 COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6 下記のようにプロジェクト構成が何も表示されない時は左タブの「Project」を 押して表示してください。
  24. 24. 24 COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6 下記のようにプロジェクトを展開しておくとコードの編集が楽です。
  25. 25. 25 実機を接続してアプリを動かしましょう スマホとPCをUSBケーブルで接続しましょう。 再生ボタンみたいなのを押すとビルドが始まりスマホにアプリがインストールさ れます。
  26. 26. 26 接続されているスマホを選択し「OK」を押すとインストールされます。
  27. 27. 27 動作確認してみましょう。 GPSがうまく取得できないと警告アイコンが表示されます。しばらく待つか、 何度か再起動しましょう。 白いiアイコンがGPS が取得できている状 態
  28. 28. 28 ゼロからアプリを作る場合 COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6 ・WikitudeSDKをダウンロード ・WikitudeSDKの設定が必要 下記を参考に、/app/libs/wikitudesdk.aarにSDKを設置し、build.gradleを編集 してください。AndroidManifest.xmlに権限などの設定も必要です。 ・WikitudeSDKのライセンスの取得が必要 下記を参考にライセンスキーを取得してSDKの初期化時に指定する。 ToDo http://docs.grapecity.com/help/wikitude/wikitude-sdk- android/triallicense.html#how-to-obtain-a-free-trial-license http://docs.grapecity.com/help/wikitude/wikitude-sdk- android/setupguideandroid.html#setup-guide-android https://wikitude.grapecity.com/downloads/wikitudesdk
  29. 29. 29 アプリの全体構成 COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6 プログラムは下記のような構成になっており、キャラクターの表示やアニメー ションはJavaScriptで記述する。Java部分は表示枠と位置情報の取得のみおこな う。html部分はiOSと共通化できる。 Android MainActivity.javaなど 画面の枠表示と位置情報の取得 のみ assets/index.htmlと JavaScriptで位置情報をも とにキャラクターを表示。 アニメーションを実行 iOSと共通化
  30. 30. 30 COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6 Android Javaで記述 HTML+JavaScriptで記述 AndroidのビューはarchitectView Androidで位置情報が更新 ↓ onLocationChangedが発生 ↓ architectView.setLocationでビューに位置情報を通知 ↓ JavaScript onLocationChangedが発生 World.locationChangedを実行 World.loadPoisFromJsonDataでキャラを描 画
  31. 31. 31 コード解説 COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6 ソースコードを解説します。日本語でわかりやすく解説を追加しています。 簡単なAndroidアプリを作ったことがある人であれば理解可能です。
  32. 32. 32 もっとARを学ぶには? COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6 http://amzn.to/2aWN9hK
  33. 33. 33 COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED. 6 ・VRコンテンツ作成サービスの追加 ・広告コンテンツのサービス追加 ・ゲーム開発への応用 ・デザイナーのスキル向上 適用事例(経営者・営業担当の方に)

×