0. 本記事の内容

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

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

GitHubで公開しているサンプルの03-UiInteractionまたは03-UiInteraction-ARシーンでも動作を確認できます。

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

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

[VR版]

MetaQuestでオブジェクトを表示（XRI版）

[AR版]

MetaQuestのパススルーを使ったAR表示（XRI版）

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が追加されていることを確認

[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のエリアを表しています

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（レイ操作）	コントローラのトリガー（人差し指）でレイ選択

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アプリ開発