在校生向けのAR講座(後半)で使用した資料をアップロードしました．コード量少なめ，今回はVuforiaの使い方についての説明．

1. UNITY
&
AR
~SPRING~
UNIVERSITY OF NAGASAKI
SAYA KATAFUCHI

2. INDEX-SECOND
SESSION
 ARコンテンツを作ろう
 Vuforiaの使い方
 サインインする
 SDKをダウンロードする
 画像を登録する
 特徴点画像をダウンロードする
 Unityで使用する
 AR機能を作る
 メニュー画面からリンクさせる
 テストしてみよう
 なめなび(仮)を端末に書きだそう
 Android
 iOS

3. INDEX-SECOND
SESSION
 まとめ
 伝えたかったこと
 Contest…？
 Links

4. INDEX-SECOND
SESSION
 ARコンテンツを作ろう
 Vuforiaの使い方
 サインインする
 SDKをダウンロードする
 画像を登録する
 特徴点画像をダウンロードする
 Unityで使用する
 AR機能を作る
 メニュー画面からリンクさせる
 なめなび(仮)を端末に書きだそう
 Android
 iOS

5. 時間がなさそうなので…
前回までの講義スライドで作ったプロジェクトの完成版を配布し
ています
(デザイン，ボタン等細かい調整を行っています)
ARに関するSDKも入れていますので，
今日はこのプロジェクトを使用してください．

6. ARコンテンツをつくろう
滑石ぷらぷら地図
この地図を認識したら
何か表示できるように
したい！

7. ARコンテンツをつくろう
(CF.おくんちナビ)
おくんちナビ(提供：NIB長崎放送 制作：扇精光)
庭先回りMAPを認識
→踊町の歴史や出し物
の所在，レストランの
情報などが提示される

8. ARコンテンツをつくろう
 地図を読み込んだら，地図の上に何か表示させよう
→本当は滑石に関係する物を表示させたいけど，滑石って何も
ない丁度良い素材がないので県立大学のマークを重畳表示さ
せてみよう
※Unityを用いたゲーム開発について
• ジャイロセンサ
• GPS
• カメラ(インサイド・アウトサイド問わず)
などの端末独自の機能を用いたプログラムは，Unity内では
十分にテストをすることができません．
これらの機能を使ったアプリは端末にプログラムを入れて
デバッグする必要があります．

9. VUFORIAの使い方
 AR機能をつけるためのSDK『Vuforia(ビューフォリア)』
https://developer.vuforia.com/

10. VUFORIAの使い方
(サインインする)
会員登録が必要！
メールアドレスと
パスワードを登録する

11. VUFORIAの使い方
(サインインする)
上から
• 名
• 姓
• メールアドレス
• メールアドレス再入力(確認)
• ログインパスワード
• パスワード再入力(確認)
• 所属組織名(会社)
• 在住国
• どこでVuforiaを知ったか？
• ユーザーネーム

12. VUFORIAの使い方
(サインインする)
• iOSとAndroidどちらの端末を
使うつもりか？
• 利用規約に同意する
• メールマガジンの登録
• 不正なユーザー登録を防ぐための
認証

13. VUFORIAの使い方
(サインインする)
• 登録が完了すると，正式登録のためのverifyメールが届きます
• きちんと登録されていれば，登録したメールアドレスとログ
インパスワードでマイページにログインできるようになりま
す

14. VUFORIAの使い方
(SDKをダウンロードする)
ログインした状態で
Download the SDK
をクリック

15. SDKとは
ソフトウェア開発キット(Software Development Kit)の略
特定のソフトウェアパッケージやソフトウェアフレームワーク，
コンピュータ・システム，オペレーティングシステムを開発する
ためのキットのことを指す
アプリ開発やソフトウェア開発においてよく目にする言葉であり，
技術系の会社に就職するときの筆記試験においてもこれに関する
質問をされることがある…かも？

16. VUFORIAの使い方
(SDKをダウンロードする)
Download Unity
Extension 2.8.9 for
Android & iOS
をクリック

17. VUFORIAの使い方
(SDKをダウンロードする)
利用規約を読む
一番下まで読むと
Agreeボタンが押せるようになる

18. VUFORIAの使い方
(SDKをダウンロードする)
ダウンロードできた！

19. VUFORIAの使い方
(画像を登録する)
ログインした状態で
TargetManager
をクリック

20. VUFORIAの使い方
(画像を登録する)
このボタンから
マーカー画像を登録する
フォルダを作ります

21. VUFORIAの使い方
(画像を登録する)
画像をまとめるフォルダ
の名前を入力

22. VUFORIAの使い方
(画像を登録する)
追加できた！

23. VUFORIAの使い方
(画像を登録する)
フォルダの中身はまだ
空っぽです
このボタンから画像を登
録します

24. VUFORIAの使い方
(画像を登録する)
画像の情報を入力します
上から
・画像の名前
・画像のタイプ(１枚だけか？
箱状の画像タイプか？等)
• 画像の幅
• 画像ファイルを選択

25. VUFORIAの使い方
(画像を登録する)
登録が完了した！

26. ShowFeatures
をクリックすると
画像に付いた
特徴点情報を確認できます

27. VUFORIAの使い方
(特徴点画像をダウンロードする)
1)チェックを入れて
2)ダウンロード

28. VUFORIAの使い方
(特徴点画像をダウンロードする)
UnityEditorにチェックを入れて
『Create』をクリック

29. VUFORIAの使い方
(特徴点画像をダウンロードする)
ダウンロードできた

30. VUFORIAの使い方
(UNITYで使用する)
まずAR機能用の新しいシーンを追加しましょう
New Sceneで新しいシーンを作成
Ctrl + Sで名前をつけてシーンを保存
今回は『AR』という名前をつけました

31. VUFORIAの使い方
(UNITYで使用する)
Assets->Import Package->
Custom Packageをクリック

32. VUFORIAの使い方
(UNITYで使用する)
SDKファイルの方を選択し，
『開く』をクリック

33. VUFORIAの使い方
(UNITYで使用する)
全てにチェックが入った状態で
『Import』をクリック

34. VUFORIAの使い方
(UNITYで使用する)
ファイルがインポートできた！

35. VUFORIAの使い方
(UNITYで使う)
同じ要領でマーカー画像のファイルも読み込む

36. VUFORIAの使い方
(UNITYで使う)
全てにチェックが入った状態で
『Import』をクリック

37. VUFORIAの使い方
(UNITYで使う)
全てにチェックが入った状態で
『Import』をクリック

38. AR機能を作る
Assets->Qualcomm Augumented Reality-> Prefabs
の中にある
ImageTargetを選択

39. AR機能を作る
ImageTargetとARCameraを
ドラッグしてHierarchyタブに持っていく

40. AR機能を作る
ARCameraのインスペクタに
Data Set Load Behaviour
という項目がある
チェックボックスにチェックを入れ，
Activateにもチェックを入れる
画像セット名

41. AR機能を作る
ImageTargetのインスペクタに
Image Target Behaviour
という項目がある
DataSetを20140515ARKouzaに，
ImageTarget をnameshi_mapに指定する

42. AR機能を作る
GameObject->Create Other-
>
Cubeをクリックし，
Hierarchyに追加する

43. AR機能を作る
Cubeをドラッグし，
ImageTargetに重ね合わせる
※画像を読み込んだ時に表示させたいものは
ImageTargetの中に入れる！

44. AR機能を作る
ImageTargetの下にCubeが
入ったことを確認

45. AR機能を作る
サイズが小さすぎて
Cubeが見えないので…

46. AR機能を作る
Scaleを調整して
サイズを大きくする

47. AR機能を作る
Cubeが半分埋まっていたので，
Y軸方向のPositionを調整する

48. AR機能を作る
GameObject->Create Other
->Directional Light
をクリック

49. AR機能を作る
Cubeがきれいに見えるように
なった！

50. AR機能を作る
このシーンで使うカメラは
ARCameraなので
MainCameraをDeleteする

51. AR機能を作る
(メニュー画面からリンクさせる)
Unityの各シーンを繋ぐ時はApplication.LoadLevelを使う
menu.js
If(GUI.Button(Rect(Screen.width-240,300,200,70)),”滑石ぷ
らぷら地図AR”){
Application.Loadlevel(“AR”)
}

52. AR機能を作る
(まとめ)
 Hierarchyタブに『ARCamera』と『ImageTarget』を追加す
る．
 Inspectorタブでマーカーとして使用する画像セットを指定す
る
 ARで表示させたいモノはGameObject(今回はCube)で作り，
ImageTargetの中に入れる
 MainCameraを消し忘れると動かないので，必ず消すこと

53. INDEX-SECOND
SESSION
 ARコンテンツを作ろう
 Vuforiaの使い方
 サインインする
 SDKをダウンロードする
 画像を登録する
 特徴点画像をダウンロードする
 Unityで使用する
 AR機能を作る
 メニュー画面からリンクさせる
 テストしてみよう
 なめなび(仮)を端末に書きだそう
 Android
 iOS

54. なめなびを端末に書き出そう
(ANDROID)
Androidは私が端末を持っていないので詳しく説明出来るわけで
はありませんが…
Androidアプリを作る為に必要な
Android SDK(http://developer.android.com/sdk/index.html)
をダウンロードしておきます
Android SDKには，Androidのバージョンごとに違うSDKが用意
されています．
自分の持っている端末のバージョンを確認してダウンロードする
ようにして下さい

55. (補足)
ANDROIDのバージョン
今みなさんが持っている(であろう)Android端末のバージョンと
APIレベルの対応表
プラットフォーム APIレベル コードネーム 公開日
Android4.0 14 Ice Cream
Sandwich
2011/10/19
Android4.0.1
Android4.0.2
Android4.0.3 15 Ice Cream
Sandwich MR1
2011/12/16
Android4.1 16 Jelly Bean 2012/12/16
Android4.1.1
Android4.2 17 Jelly Bean MR1 2012/12/13
Android4.2.2
Android4.3 18 Jelly Bean MR2 2013/07/24

56. なめなびを端末に書き出そう
(ANDROID)
Unity→Preferencesでウィンドウを開く
Extensional Toolsタブの，
Android SDK Locationから
SDKがある場所を指定する

57. なめなびを端末に書き出そう
(IOS)
iOS端末に書き出す時は『Xcode』というMacの開発環境を用意
しなければならない
XcodeはAppStoreで無料でインストール可能

58. なめなびを端末に書き出そう
(IOS)
また，端末に書き出す機能はAppleDeveloperライセンスの所持
者に限定されるので，7800円のお布施(2014年5月14日現在)を
Appleに払ってDeveloperプログラムに参加する必要がある
Apple Developer Programへの登録に関してはここでは触れま
せん．以下のURLから確認して下さい．
https://developer.apple.com/jp/support/ios/enrollment.ht
ml

59. なめなびを端末に書き出そう
File->Build Settings…
をクリック

60. なめなびを端末に書き出そう
使うシーンをすべて登録して
Buildをクリック

61. なめなびを端末に書きだそう
BuildとBuild & Runの違い
 Build
Unityで作ったソフトウェアを各プラットフォームで使用で
きるファイルに変換し，所定の場所に保存する
 Build ＆ Run
Unityで作ったソフトウェアを各プラットフォームで使用で
きるファイルに変換し，さらに各端末の方で実際にプログラ
ムを動かす

62. なめなびを端末に書きだそう
(端末の設定)
PlayerSettingsをクリック

63. なめなびを端末に書きだそう
(端末の設定)
Inspectorタブに設定画面が表示される
上から
• 企業名(任意)
• アプリ名
• アプリのアイコン
• アプリ内で使用するカーソル画像
• カーソル画像における先端位置
下のタブでは各端末ごとにスプラッシュスクリーンや
アイコンの設定，デフォルトの端末の向き(縦・横)などを
指定することができます

64. INDEX-SECOND
SESSION
 まとめ
 伝えたかったこと
 Contest…？
 Links

65. まとめ
 (今回は飛ばしたが)Vuforiaへのユーザー登録を行う
 SDKと特徴点画像をダウンロードする
 この時Unity用のパッケージでダウンロードすること
 ARCamera,ImageTargetのInspectorタブで画像セットの指
定を忘れない
 ARで表示したいものはImageTargetの中に入れる
 (Androidの場合)自分の持っている端末とAndroidSDKのバー
ジョンを間違えないようにする
 (iOSの場合)AppleDeveloperProgramに参加しないとほぼ何
もできない

66. INDEX-SECOND
SESSION
 まとめ
 伝えたかったこと
 Contest…？
 Links

67. 伝えたかったこと
 (慣れれば)アプリ開発難しくないよ！
 複雑なアプリでも，誰かが作ったプログラムを利用すれば割
りと簡単に作れる
 「○○したいんだけどどうすればいいの？」→Google先生に
聞けば大体解決する
 地方はすごくさびれてる
 「ITで活発にする」のではなく，「地元住民の『地元と盛り
上げるぞ！』という気持ちをITが応援する」というのが理想
的→なめなび(仮)を作るためのコンテンツの少なさにかなり悩
まされた

68. INDEX-SECOND
SESSION
 まとめ
 伝えたかったこと
 Contest…？
 Links

69. CONTEST…？
『長崎デジタルコンテスト』
http://digicon.me/
作品を作って、審査員にプレゼンでアピールする実践
型コンテスト
アプリやソフトウェアを作る『プログラミング部門』
CGや動画、デザインを作る『マルチメディア部門』
とても楽しくて良い経験になるコンテストなので参加
してみてもいいと思います

70. INDEX-SECOND
SESSION
 まとめ
 伝えたかったこと
 Contest…？
 Links

71. LINKS
 Unity3D(本日使ったソフトウェア『Unity3D』の配布元)
http://japan.unity3d.com/
 Qualcomm(AR機能を作るために使ったSDKの配布元)
http://www.qualcomm.co.jp/
 SlideShare(ネット上でもこのスライドを見ることができます)
http://www.slideshare.net/yomoyamareiji
 Mail(何かわからないこととかあれば)
b2211017@sun.ac.jp
 Twitter(メールが面倒くさい，すぐにアドバイスがほしい)
https://twitter.com/reiji1020