メインコンテンツまでスキップ
バージョン: 1.0.4

ノーコードでARアプリ開発。カンペアプリを作成

WARNING

本ページに記載の環境は本記事執筆時点(2024/12/24)のものです。
アップデートによって変更が生じている可能性がある点ご留意ください。

0. はじめに​

この記事では、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で指定されている部分であればレイでドラッグできるようです(Gifの通り)。

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

6. おわりに​

本アプリですが、いろいろなユースケースが考えられるかもしれません。

例えば学校の教師の方に装着いただき、教師の負担を軽くできるかもしれません。生徒の質問をリアルタイムでグラスに表示する、なども面白そうですね。

また現状はスマホのレイを使用していますがハンドトラッキングで操作するのも面白そうです。余裕があれば機能拡充も目指したいと思います。