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

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