NTTドコモR&Dの技術ブログです。

トップ > XR > ノーコードでARアプリ開発!? MiRZAでカンペアプリを作ってみよう！

ノーコードでARアプリ開発!? MiRZAでカンペアプリを作ってみよう！

XR 事例紹介 画像処理
※ 本記事は 2026/3/31 以前にNTTコノキューにて記載した記事になります

ノーコードでARアプリ開発!? MiRZAでカンペアプリを作ってみよう！

こんにちは！NTTコノキュー新入社員の淵野です。

この記事では、Unityを用いてMiRZA(ミルザ)向けARアプリを構築する方法を紹介します。具体的にはスマートフォンに入力した文章をMiRZAに表示するカンペアプリを作成していきます。

初めて開発する方でもわかりやすいよう、スクリプトは一切記述せず、セットアップから一つずつ紹介します。

本記事には以下の内容が含まれています

  • MiRZA開発環境のセットアップ方法
  • UIの構築やカスタマイズの手順
  • MiRZAとスマートフォンを連携させた機能開発のポイント

1. 開発環境のセットアップ

1.1 開発環境

  • Windows 11
  • Unity 2022.3.27f1

1.2 公式開発ガイドを確認

まずはNTTコノキューの公式セットアップガイドに従い、Unityプロジェクトを作成します。なお今回はハンドトラッキングは使用しないのでハンドトランキングのサンプルをインポートする必要はありません。またプロジェクト名はHoloScriptと名付けました。設定周りをまとめて行えるConfigツールがあるので環境構築も簡単です。
途中ProjectValidationの項目がありますが、ほとんどのエラーは Fix All で対応可能です。一部黄色の警告が残ることがありますが無視で大丈夫そうです。

2. 初期サンプルの実行

環境が整ったら、公式ドキュメントのサンプルを試しにビルドしてみましょう。以下のサンプルシーンで動作確認を行いました： Sample > SnapdragonSpaces > 1.0.1 > FusionSamples > Scenes > ControllerPrefabSampleScene

動作確認後、このシーンを複製し、自分のプロジェクト用に編集を加えていきます。複製したシーンは Assets > Scenes に配置し、「Holoscript」という名前を付けました。

3. UI構築：スマホUIのカスタマイズ

3.1 スマホUI初期設定

FusionInteraction > onCanvasControllerCompanion > DisplayUI > Background > ControllerUX にスマホ用のUIが配置されています。このUIを以下のように編集しました。

  • タイトルバーの変更 TitleBar > Text を"HoloScript"に変更。
  • 入力欄の追加 InputField(TMP) を ControllerUX 配下に作成し、以下のように設定しました：
    • PosY: 570
    • Width: 1000
    • Height: 700

ロゴとメニューボタンがスペースを占有していたため、そちらは非活性化しました。

3.2 フォント設定

商用利用可能なNoto Sans Japaneseを使用しました。以下の手順でフォントを設定します：

  1. フォントファイルをUnityにインポート。
  2. Window > TextMeshPro > Font Asset Creator を選択し、次のように設定：
    • Source Font File: インポートしたフォント
    • Atlas Resolution: 8192
    • Character Set: Custom Characters
  3. 必要な文字をこちらからコピーし、 Custom Character List にペースト。
  4. 生成したフォントアセットを保存し、使用するTextMeshProに適用。

なおPointSizeは30に設定しました。そしてLineTypeを MultiLineNewline に設定します。現状だと少し文字が薄かったので、文字を太字にして、 Caret Width を3に設定しました。

4. MiRZA側の文字表示部分の実装

次に、スマホで入力した文字をARで表示するUIの実装を目指します。イメージは目のまえに原稿が表示されており、スマホのレイでスクロールが可能な状態のパネルを作成します。

4.1 サンプルを参考にする

一度サンプルシーンに立ち返ってUIの扱いを確認してみます。サンプルシーンのXR Interaction toolkit Sampleシーンにちょうどスマホのレイで操作できるスライダーがあったのでこちらを確認してみましょう。

こちらのスライダーには XR Simple Interaction というコンポーネントがついています。また Content Body というオブジェクトに Tracked Device Graphic Raycaster というコンポーネントがついています。これらのコンポーネントにより、スマホからのレイでUIを操作しているのではないかと思います。

実際にビルドしてMiRZAで確認するとスマホのレイでスライダーを操作することができましたので、こちらのUIを丸ごと活用します。

4.2 スクロールバー付きUIの作成

まずprojectの検索欄で”UI Menu Spaces XR InteractionToolkit”を検索し、こちらのプレハブをヒエラルキーにドラッグアンドドロップします。階層を下るとContentが01から04まで存在しており、Content数に応じて配置が変わっていることがわかります。今回はスライダーのみ再利用するのでContent02を複製し、ScriptContentsと命名し、Content01-04はすべて非活性化しました。
またScriptContents配下に”ContentBody”を配置し、 TrackedDeviceGraphicRaycaster をアタッチします。
そして ContentBody 配下に”ScrollRect”を作成し ScrollRect コンポーネントをアタッチしました。 さらにScrollRect配下に表示するスクリプト部分とスクロールバー部分を配置しました。ScrollRectのContentにスクリプト部分のTextMeshProを代入し、VerticalScrollBarには ScrollbarContent を代入しました。またScrollBarのDirectionを Top To Bottom に設定し、色は赤色に変更しました。TextMeshProに関しては先ほどと同様FontとしてNotoSansを設定し、FontSize=36に設定しました。

4.3 スマホで入力した文字をMiRZA側に反映させる

一度スマホ側UIのInputFieldに戻ります。まずInputField内に OnValueChanged という項目があるので、＋を押してから、先ほど作成したグラス側UI用のTextMeshProをアタッチします(ScrollRect > Viewport > Content(Scroll View Content) 配下のTMPです)。

そしてNoFunctionと書かれているプルダウンをクリックし、 TextMeshProUGUI > text を選択します。この操作により、InputFieldの入力値が変わるたびに、MiRZA側のTMPに文字が反映されます。これは一つのUnityプロジェクトでスマホとグラスの両方を描画できる、DualRenderFusionならではの実装であり、スマホなどからわざわざウェブソケットなどでテキストを送信する必要がないのはありがたいですね。

5. ビルド検証

ここまでの実装で動作するはずなので一度ビルドしてみましょう。ビルドするときはBuildSetting内のScenes In Build内に該当シーンをAddすることを忘れずに。ちなみにせっかくなのでアプリのロゴも作りました。 無事動きました！ここまで一度もスクリプトを記述せずに作成できるのは驚きですね。ちなみに初めて知ったのですが、スクロールバーを操作しなくても、ScrollRectで指定されている部分であればレイでドラッグできるようです。

これでもう原稿を暗記する必要はないですね！