ボタンを例にしたUnityのUI操作（XRI版）

## 0. 本記事の内容

本記事では**XR Interaction Toolkit**を使用してMeta QuestでUnityのUIを操作する例として、ボタン操作の方法を紹介します。手やコントローラがボタンと相互作用できることを確認し、そのあとインタラクションの一例としてボタンを押したタイミングでCubeを消す方法を解説します。

**Near Interaction**（直接タッチ）と**Far Interaction**（レイによる操作）の両方でUIを操作する方法を学習できます。

GitHubで公開している[サンプル](https://github.com/TakashiYoshinaga/MetaXR-SDK-Samples)の03-UiInteractionまたは03-UiInteraction-ARシーンでも動作を確認できます。

[![XRI Button Interaction](https://img.youtube.com/vi/_gd3JA_L0HA/0.jpg)](https://www.youtube.com/watch?v=_gd3JA_L0HA)

*この動画はAR版ですが記事の内容はAR/VR両対応です  
*動画のデモはMetaXR SDKによって作成したものですがXR Interaction Toolkitでも同様の結果になります

なお本記事は下記で作成したVRまたはARのシーンで表示している立方体を操作することを前提としています。立方体に特別なコンポーネントが追加されていない、Questで眺めるだけの状態からのスタートとなりますので、他のプロジェクトでも同様の状況であれば本記事の内容を実践することでUI操作を実現できます。

**[VR版]**

[MetaQuestでオブジェクトを表示（XRI版）](./2-vr.md)

**[AR版]**

[MetaQuestのパススルーを使ったAR表示（XRI版）](./3-ar.md)

## 1. シーンを複製

上記の記事で作成したシーンを編集することも可能ですが、既存のシーンを破壊せずにUI操作を試すため、シーンを複製する方法を紹介します。不要な場合は読み飛ばしてください。

- 上記で作成したVR版またはAR版のシーンを開く
- **File -> Save As...**をクリックして現在のシーンを新しい名前で保存  
  *本記事では**UiInteraction**とします
- Hierarchyに表示されるシーン名が**UiInteraction**になっていることを確認

## 2. UIの作成

ボタンを作成し、3次元空間に配置します。

**[ボタンの作成]**

- 何も選択していない状態でHierarchyの空白を右クリック
- **UI -> Button - TextMeshPro**をクリック
- **TMP Importer**（Text Mesh Proのインストーラー）が表示されたら**Import TMP Essentials**をクリック
- TMP Importerを閉じる
- **Canvas**と**EventSystem**が追加されていることを確認

![UI作成後のHierarchy](https://github.com/TakashiYoshinaga/MetaXR-SDK-Samples/blob/main/Documents/materials-xri/8/00.jpg?raw=true)

**[3D空間への配置設定]**

- **Canvas**を選択しInspectorで**Canvas**コンポーネントを見つける
- CanvasのRender Modeを**World Space**に変更  
  *UIはデフォルトでは画面上に配置されますが、この変更により3D空間に配置されるようになります
- Canvasの子要素の**Button**の**PosX**と**PosY**を**0**に変更
- CanvasのInspectorのパラメータを操作してUIのサイズを下記のように調整

| 項目 | X | Y | Z |
|------|---|---|---|
| **Position** | 0 | 1.2 | 0.8 |
| **Size** | Width: 200 | Height: 90 | - |
| **Scale** | 0.003 | 0.003 | 0.003 |

*図中の白い枠がCanvasのエリアを表しています

![Canvas設定画面](https://github.com/TakashiYoshinaga/MetaXR-SDK-Samples/blob/main/Documents/materials-xri/8/01.jpg?raw=true)

## 3. CanvasをQuest対応にする

現段階ではUIを作っただけで、Meta Questで使用するコントローラや手とのインタラクションができないため、基本的なインタラクション設定を行います。

**[RayCasterの設定]**

- **Canvas**をクリックし、Inspector下方の**Add Component**をクリック
- **TrackedDevice**で検索し、候補に表示される**TrackedDeviceGraphicRaycaster**をクリックして追加

**[EventSystemの設定]**

- Hierarchyで**EventSystem**を選択
- **Add Component**をクリックし、**XR UI**で検索
- **XR UI Input Module**をクリックして追加  
  *通常の入力ではなくXR Interaction Toolkitによる入力を使用
- **Input System UI Input Module**を**オフ**にする



## 4. 基本的なインタラクション確認

ここまでの操作でボタンとのインタラクションが可能になります。動作確認をすると以下の動画のようにボタンをクリックしたタイミングでボタンの色が少し変わっていることが確認できます。

**[操作方法]**

| インタラクション | 操作方法 |
|----------------|----------|
| **Near（直接タッチ）** | 指やコントローラをボタンに直接触れる |
| **Far（レイ操作）** | コントローラのトリガー（人差し指）でレイ選択 |

[![XRI UI Basic Interaction](https://img.youtube.com/vi/nubgB2dMxzk/0.jpg)](https://www.youtube.com/watch?v=nubgB2dMxzk)

## 5. ボタンイベントの設定

ここでの設定はXR Interaction Toolkitに特化したものではなくUnityの一般的なUIの挙動に関するものです。ここでは一例として、ボタンを押したタイミングでCubeを消してみましょう。

**[イベント設定手順]**

- **Button**をクリックし、Inspectorで**On Click**を見つける
- 右下の + ボタンをクリック
- 新たに追加された領域の**None**と書かれた箇所に**Cube**をドラッグ&ドロップ
- **No Function**と書かれたドロップダウンメニューを開く
- **GameObject -> SetActive**をクリック
- チェックボックスが**OFF**になっていることを確認  
  *これによってボタン押下時にCubeが非アクティブになります

**[設定内容の確認]**

| 設定項目 | 内容 |
|----------|------|
| **Object** | Cube（操作対象のオブジェクト） |
| **Function** | GameObject.SetActive |
| **Parameter** | OFF（非アクティブにする） |

## 7. 動作確認

設定したUI操作が正しく動作することを確認します。

**[実機にインストールする場合]**

- QuestとPCをUSBケーブルで接続
- Unity Editorで**File -> Build Settings**をクリック
- **Build And Run**をクリック
- インストーラ(apk)名を半角英数で設定して保存

**[Meta Quest Linkを使用する場合（Windows）]**

- QuestとPCをUSBケーブルで接続
- Quest内でQuest Linkを起動
- Unity Editorの**Play**ボタンをクリック

**[確認ポイント]**

| 確認項目 | 期待される動作 |
|----------|---------------|
| **Near操作** | 指やコントローラでボタンに直接触れてCubeが消える |
| **Far操作** | レイでボタンを選択してトリガーを引くとCubeが消える |
| **視覚フィードバック** | ボタンを押した時に色が変わる |

## 8. 次のステップ

ここまでの内容でUnityのUIをMeta Questで操作する基本的な方法が習得できました。記事にはしませんが、この技術を応用することで、以下のような発展的なUI操作が可能になります：

**[応用例]**

- 複数のボタンを使った複雑な操作
- スライダーやトグルなどの他のUI要素
- 動的なUI生成とインタラクション
- データの入力や表示機能


## 9. XR Interaction Toolkitに関する記事一覧はこちら

[XR Interaction ToolkitではじめようQuestアプリ開発](./0-main.md)