LoginSignup
3
4

MetaQuest (Unity) でWebAPIにGETリクエストを送る方法

Last updated at Posted at 2024-05-12

この記事はUnityを用いてMetaQuest3上でAPIにGETリクエストをするためのUnityプロジェクト設定方法について記す.シーン上にボタンとテキストがあって,ボタンを押すと,データがテキストに反映されることを目標にする.

実行環境
Unityのバージョンは2022.3.5f1
MetaQuest3

API作成

今回はDjangoRestFrameworkを用いてAPIを作成する.

詳しくは以下の記事を参考にデプロイまで行ってほしい.
https://qiita.com/tarakokko3233/items/0961933e2b9695cb561a

作成したDBのテーブルのモデルは以下の通りとする.

models.py
from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=100)
    content = models.TextField()

    def __str__(self):
        return self.title

このPostテーブルのtitleに1を,contentにtestを格納する.CLIやGUIソフトなど好きな形で格納してほしい.

シーンの作成

Unityの公式が基本的なシーンと設定をしてくれているのでインストールする.
https://connect-prd-cdn.unity.com/20240215/d39c8bf6-4913-43da-80a7-137b06275884/Create-with-VR_2022LTS.zip

インストールしたUnityパッケージ(VRRoom)をUnityHubで開いてUnityEditorを開始する.

スクリーンショット 2024-05-12 16.30.09.png

スクリーンショット 2024-05-12 16.33.10.png

Assets/Scenes/Create-with-VR-Starter-Sceneをhierarchyにドラッグ&ドロップする.
スクリーンショット 2024-05-12 16.34.15.png

もとあったシーンは削除して良い

ボタンとテキストを追加する.
hierarchyウィンドウの+ボタンを押して,XR - UI Canvasを押してCanvasを追加する.
スクリーンショット 2024-05-12 17.32.10.png

UIのコンポーネントはCanvas上に設置する.Canvasは実行時の画面に張り付くように配置されるのでSceneでは大きく配置される.InspectorビューでScaleをXYZともに0.01にすることをお勧めする.
スクリーンショット 2024-05-12 17.35.02.png

UI - Text-TextMeshProを押してテキストを先ほど作成したCanvas下に配置する.
スクリーンショット 2024-05-12 17.36.18.png

TextMeshProのインポートを促されたらインポートすること
スクリーンショット 2024-05-12 17.38.58.png

UI - Button-TextMeshProを押してボタンを追加する

スクリーンショット 2024-05-12 17.38.54.png

今のままだとカメラとボタンとテキストが同じ位置にいるのでカメラ(XR Rig)をZ軸-方向に,ボタンとテキストをY軸+方向に適切に移動するとカメラに映る.

スクリーンショット 2024-05-12 17.44.20.png

Meta XR All-in-One SDKの導入

Unity Asset Storeで,Meta XR All-in-One SDKをマイアセットに追加する.
https://assetstore.unity.com/packages/tools/integration/meta-xr-all-in-one-sdk-269657

UnityEditorを開いて,Window-Package Managerを開く.
スクリーンショット 2024-05-12 16.53.32.png

Packages:My Assetsにして,Meta XR All-in-One SDKを選択して,右端のInstallを押す.

スクリーンショット 2024-05-12 16.54.21.png

これで導入完了.

この後editorを再起動するようにポップアップが出るはずなので再起動すること.

ビルド設定とMeta環境設定

まず,Assets/Plugins/AndroidにあるAndroidManifest.xmlに以下の内容を追記する.

AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />

次に,File - BuildSettings... を押す.

スクリーンショット 2024-05-12 16.59.36.png

PlatformAndroidにし,Switch Platformを選択する.処理が完了したらPlayer Settingsを選択する.

スクリーンショット 2024-05-12 17.19.26.png

次に,Meta XRを選択し,Androidマークを押し,Fix All,Apply Allを押す.
スクリーンショット 2024-05-12 17.22.05.png

次に,XR Plug-in Management- OpenXR - Meta Quest Supportの設定(歯車)を押し,Force Remove Internet Permissionのチェックを外す

スクリーンショット 2024-05-12 17.28.19.png

その後,Player - othersettings - Internet Access の設定をRequireにする
スクリーンショット 2024-05-12 18.48.51.png

APIからデータを受け取る設定

APIからデータを受け取り,テキストに表示するためのC#コードを書く.

GetTitle.cs
using System;
using UnityEngine;
using UnityEngine.Networking;
using System.Collections;
using TMPro;

public class GetTitle : MonoBehaviour
{
    public TextMeshProUGUI resultText; //TextMeshProを受け取る
    private const string url = "https://--hostname--/--endpoint--/"; //デプロイしたAPIのURLとデータを受け取りたいテーブルにGETリクエストを送るエンドポイント

    public void FetchData()
    {
        StartCoroutine(GetData());
    }

    private IEnumerator GetData()
    {
        using (UnityWebRequest webRequest = UnityWebRequest.Get(url))
        {

            webRequest.SetRequestHeader("X-Debug-Mode", "true");
            yield return webRequest.SendWebRequest();

            if (webRequest.result == UnityWebRequest.Result.ConnectionError || webRequest.result == UnityWebRequest.Result.ProtocolError)
            {
                Debug.LogError("Error: " + webRequest.error);
            }
            else
            {
                string json = webRequest.downloadHandler.text;

                Post[] PostArray = JsonHelper.FromJson<Post>(json);

                if (PostArray != null && PostArray.Length > 0)
                {
                    Post firstPostData = PostArray[0]; //Postのデータの最初のデータを格納
                    resultText.text = firstPostData.title; //title属性を得る
                }
                else
                {
                    Debug.LogWarning("No quiz difficulty found.");
                }
            }
        }
    }
}

[System.Serializable]
public class Post
{
    public String title;
    public String content;
}

public static class JsonHelper
{
    public static T[] FromJson<T>(string json)
    {
        string newJson = "{ \"array\": " + json + "}";
        Wrapper<T> wrapper = JsonUtility.FromJson<Wrapper<T>>(newJson);
        return wrapper.array;
    }

    [System.Serializable]
    private class Wrapper<T>
    {
        public T[] array;
    }
}

ボタンをクリックした時の挙動を管理するC#コードを書く

ButtonClickHandler.cs
using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class ButtonClickHandler : MonoBehaviour
{
    public GetTitle title;
    public TextMeshProUGUI resultText;

    private Button button;

    private void Start()
    {
        button = GetComponent<Button>();
        button.onClick.AddListener(OnButtonClicked);
    }

    private void OnButtonClicked()
    {
        title.FetchData();
        UpdateResultText();
    }

    private void UpdateResultText()
    {
        resultText.text = title.resultText.text;
    }
}

C#コードはAssetsディレクトリにC#ディレクトリを作成してそこに格納すると良い.

GetTitle.csを格納するための空のゲームオブジェクト(TitleManager)を作成する.
CreateEmptyを押す
スクリーンショット 2024-05-12 18.03.33.png

TitleManagerのInspectorビューでAddComponentを押してGetTitleを選択する.
スクリーンショット 2024-05-12 18.10.44.png

GetTitleコンポーネントにResult TextにCanvas下にあるText(TMP)をドラッグ&ドロップする.
スクリーンショット 2024-05-12 18.14.21.png

ボタンを押した時の挙動をButtonオブジェクトに追加する.
ButtonオブジェクトのInspectorビューでAdd Componentを押してButtonClickHandlerを追加する
スクリーンショット 2024-05-12 18.16.44.png

追加したbuttonClickHandlerコンポーネントのTitleTitleManagerを,Result TextText(TMP)(Canvas下にある)をドラッグ&ドロップする.

スクリーンショット 2024-05-12 18.25.12.png

ビルドと実行

File - Build and Runで実行する.APKファイル名を聞かれるので任意の名前を書く.
スクリーンショット 2024-05-12 18.29.05.png

VR空間上でButtonを押したら1にテキストが変わればOK
スクリーンショット 2024-05-12 18.53.59.png

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4