だんグラの MenuSample を動かしてみる

#はじめに
[ホログラム社](https://ho-lo.jp/)から提供されているだんグラを購入したので, 公開されている HologlaSDK のサンプルシーンを iOS で動かすためのチュートリアル的な記事を備忘録として残しておきます.

#だんグラについて
段ボールで出来た本体にスマホを装着して使う XR グラスです. 
本体価格は 5000 円程度であり, 気軽に試せるのが良いですね.

XR (AR/VR/MR) の同時開発をサポートしているため Unity 上でカメラコンポーネントの設定をいじるだけで各モードを移行できるのが便利です. 

操作入力系統としては

* 右クリック
* 左クリック
* 左右同時クリック

を HologlaSDK を用いることで簡単に実装出来ます.
実際の仕組みとしては, だんグラ本体の左右についているタップスイッチを押し込むことで搭載したスマホをタップし, 入力を検知するという感じです.

#この記事の概要

* ARKitPlugin および HologlaSDK の導入
* MenuSample のビルド
* 実機で実行

#開発環境
macOS 10.15.3
Unity 2018.4.17f1
Xcode 11.31
iPhoneX iOS 13.3.1

#プロジェクトの作成
Unity Hub を起動し, 
**プロジェクト -> 新規作成** から新しいプロジェクトを作成.
テンプレートは **3D** を選択.
プロジェクト名はとりあえず **HelloDangla** にしておきましょう.
適当な保存先を決めたら **作成** をクリック. 

![1_プロジェクト作成2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241368/63ddede6-7f4a-ed73-b9e3-dbda2badf73e.png)

#パッケージ類のインポート
###hologlaSDKの導入
* [GitHub](https://github.com/ho-lo/HologlaSDK-Unity)から hologlaSDK を保存
* 保存したzipファイルを解凍
* **Assets -> Hologla** フォルダを, プロジェクトウィンドウの **Assets** 直下にドラッグ&ドロップ

![2_HologlaSDK導入.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241368/bad7bbcd-7b83-27a5-37bd-0147891b7d12.png)


###ARKitの導入
* [こちら](https://ho-lo.jp/sdk/)より「動作確認済みARKitのUntyプラグイン」の項目から bitbucket のページへ
* bitbucket から ARKit を保存
* 保存した zip ファイルを解凍
* **Assets -> UnityARKitPlugin** フォルダを, プロジェクトウィンドウの **Assets** 直下にドラッグ＆ドロップ

![3_ARKIt導入.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241368/464c6b98-9e0a-d3ad-9cad-286a051e9b48.png)


#MenuSampleシーンの導入
まず, Unity のメニューバーの **Hologla -> ARKit -> Initialize Project with ARKit** を選択します.

![4_InitializeARKit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241368/55d7b795-ddc9-c480-9590-048a8b2f5e19.png)


次に, プロジェクトウィンドウの **Hologla -> Scenes** から **MenuSample** をヒエラルキービューにドラッグ&ドロップ.

![5_MenuSample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241368/14ce6650-66e8-3e07-c1c8-bc08f16877e1.png)


プロジェクト初期化時に作成される SampleScene は今回使わないので Unload しておきます.

![6_SampleSceneunload.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241368/93bdb696-5fd5-8745-c3b0-1b7fa9111302.png)

次に, Unity のメニューバーの **Hologla -> ARKit -> Initialize Scene with ARKit** を選択します.

![7_InitializeScene.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241368/f36257dd-0191-8421-a678-5c7776bd9e93.png)

ヒエラルキービューに

* HologlaInput
* HologlaCameraParent
* ARCameraManager

が追加されますが, HologlaInput と HologlaCameraParent は MenuSample シーンに既に存在しますので削除します.

![8_諸々の削除.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241368/f33ebcd1-9543-5264-c8f3-0686fc8ff9c6.png)


#各種コンポーネントの設定

###ARCameraManager
ARCameraManager にある UnityARCameraManager コンポーネント の [Camera] に, **HologlaCameraParent -> HologlaCamera** をドラッグ&ドロップで設定.

![9_ARCameraManagerの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241368/5a7ca866-b550-3981-15b9-34af2cac8ade.png)


###HologlaCamera
HologlaCamera にある HologlaCameraManager コンポーネントの [ArBackgroundMaterial] に, **Hologla -> Materials** の **HologlaYUVMaterial** をドラッグ&ドロップで設定.

また, [Current View Mode] を **MR** に, 
[Current View Size] をお手持ちの iPhone に合わせて下記のように設定.

* Size 1: 6S-7-8
* Size 2: X-ZS
* Size 3: XR
* Size 4: 6S-7-8Plus
* Size 5: XS-Max

※ 公式アプリの設定項目より. Size 2 を iPhoneX でのみ確認済み.

![10_HologlaYUVMaterial.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241368/1be9d55f-ce7a-c544-3000-9ccfb5695cd7.png)


###HologlaInput
**HologlaInput -> Canvas -> RightButton** にある Butoon コンポーネントの OnClinck() 右下の [＋] をクリック.
None の箇所に **HologlaCameraParent -> HologlaCamera** をドラッグ&ドロップ設定.
[No Function] を **GazeInput -> InputRightEvent()** に変更.

![11_HologlaInput.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241368/88ed544d-6f21-5647-b11a-73aa16d6b34f.png)


#その他の設定
### BuildSettings
プロジェクトを iOS 用の設定にします. 
メニューバーから **File -> Build Settings** を選択.
Platform から　iOS を選択して Switch Platform をクリック.
Platform の iOS の横に Unity のアイコンが表示されていることを確認.

<img width="629" alt="12_BuildSettings.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241368/b24ace14-0a4e-bf49-e3b2-1bc5d3a05ec3.png">


### PlayerSettings
ビルド時のオプション設定をします.
メニューバーから **Edit -> ProjectSettings** を選択.
ウィンドウが表示されたら, 左のビューから Player を選択.
Settings for iOS を選択.
後は下記のように設定を変更していきます.

![13_PlayerSettings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241368/5870edc6-60cb-d81c-bbd1-ada59f7568be.png)


#####Other Settings
Identification の　Bundle Identifier に適当な名前を設定します (今回は com.Test.MenuSample).

Configuration の Camera Usage Description に何らかの文字列が入力されていることを確認 (実機起動時のカメラ使用許可で表示される文字列になります).

Configuration の [Target Device] を **iPhone Only** に設定. 

Configuration の [Target minimum iOS Version] を **11.0** に設定.

<img width="962" alt="14_PlayerSettings_OtherSettings.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241368/91d032d6-db3f-a6eb-c027-5da1d1effae8.png">

#####Resolution and Presentation
Orientation の [Default Orientation] を **Landscape Left** に設定 (画面を左向きに固定).

<img width="940" alt="15_PlayerSettings_ResolutionandPresentation.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241368/c42fc828-9bd0-610c-4c3f-6363f51d3213.png">


#Unity上でテストしてみる
ARKit を使ったプロジェクトは実機での使用を想定しているため, Unity 上では通常テストすることができません. UnityARKitRemote 等を使用すればできることにはできるのですが, 導入の手間を考えると少々面倒くさいので簡単にテストできるようにしておきましょう.

今回のサンプルの場合, 本来スマホの動きに伴って移動するカメラをキーボードから制御できるようにすればテストができるため, カメラに制御用スクリプトをつけてあげます.

**HologlaCameraParent -> HologlaCamera** を選択し, インスペクターウィンドウの Add Component から New script を選ぶ.
Name を **CameraMover** にして Create and Add をクリック. 

![16_addscript.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241368/b6dd2077-49ac-e433-ed12-c8406d1720be.png)


作成した CameraMover.cs に[こちら様](https://qiita.com/Nekomasu/items/f195db36a2516e0dd460)の記事の CameraMover.cs の内容をコピぺします.

これでWASDで移動, 右ドラッグで向きの制御ができるようになりました (その他の操作は上記の記事参照). 

それでは再生ボタンをクリックして ゲームビューから確認してみましょう.
真ん中の白い球体のオブジェクトが自分の視点を表しています. 
画面右下, 左下の白い部分がそれぞれ左クリック, 右クリックの入力部になっており, ゲームビュー上ではそれらをマウスでクリックすることでクリック入力できます.

MR, VR, AR 以外の適当な項目に注目して右クリック入力をし, メニューに変化があればサンプルメニューの実装はOKです.
なお, 左クリック入力をすると視点のリセットができます.

#Unity でビルド
Unity プロジェクトから Xcode 用のプロジェクトを出力します.

メニューバーから **File -> Build Settings** を選択.
Add Open Scenes をクリックし, **Hologla/Scenes/MenuSample** のみチェックを入れます.
Build をクリックしたら, 適当な名前をつけて保存します.

<img width="630" alt="17_Unityビルド.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241368/f88268f3-8045-dce0-a027-e152ed782c34.png">


#Xcode でビルド
先ほど Unity でビルドした際に作成されたフォルダの中にある `Unity-iPhone.xcodeproj` をクリックして Xcode を開きます.
Xcode が開かれたらナビゲータエリアの Unity-iPhone をクリック. 

続いてエディタエリア で Signing & Capabilities を選択し, [Team] に自分のチームを設定します.

![18_Xcode_signing.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241368/d0c167a7-ba94-9e24-ef22-bc3e8d798046.png)


最後に Mac と iPhone を接続し, 接続した iPhone が認識されていることを確認できたらツールバーの再生ボタンをクリックして実機にインストール.

![19_Xcode_build.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241368/28b1008c-5ae4-cd7d-9e1f-eb75f7c27d31.png)

HelloDangla という名前のアプリがインストールされるので, アプリを起動しスマホをだんグラに装着しましょう.

#終わりに
今回, HologlaSDK のサンプルシーンである MenuSample をビルドし, 実機で実行しました.

この MenuSample は公式アプリ [CandyRockStar](https://ho-lo.jp/app/candyrockstar/) などの起動時に表示されるものと同一であるため, アプリケーション自作の際にも役に立ちそうです.


#参考
https://ho-lo.jp/sdk/
https://github.com/ho-lo/HologlaSDK-Unity
https://qiita.com/Nekomasu/items/f195db36a2516e0dd460