Data Binding and Theming 入門 神 戸 デ ジ タ ル ・ ラ ボ 堀 尾 風 仁 / F u t o H o r i o T o k y o H o l o L e n s ミ ー ト ア ッ プ v o l . 3 0 M i x e d R e a l i t y T o o l k i t 3

堀 尾 風 仁 株 式 会 社 神 戸 デ ジ タ ル ・ ラ ボ コ ミ ュ ニ テ ィ 運 営 ・ A R K O B E ・ A z u r e T e c h L a b . M i c r o s o f t M V P f o r W i n d o w s D e v e l o p m e n t Twitter アカウント @Futo_Horio

Data Binding とは ランタイムで取得したデータ もしくは、永続データ(Model) を UX (View) に反映するためのフレームワーク DataConsumer データを UX に反映するためのコンポーネント DataSource データソースを管理するためのコンポーネント ※ 扱うデータの種類 (ex. JSON, Dictionary, Reflection .. ) ごとにコンポーネント (派生クラス) が用意されている。

Theming (テーマシステム) とは テーマシステムは、アプリケーションの UX 要素の外観 (テーマ) を一括変換できる機能 ( 画像引用元 : https://docs.microsoft.com/ja-jp/windows/mixed-reality/mrtk-unity/mrtk3-data/packages/data/overview#mrtk-theming )

No content

Early preview packages 開発の早期段階に位置するパッケージ MRTK 3 のいくつかのパッケージは他のパッケージと比較して、 開発段階の初期段階 (Early Stage) に位置します。 これらは Early preview packages (初期プレビューパッケージ) と呼ばれ、 パッケージ名の Early Preview によって識別が可能 2022年6月現在、以下3つのパッケージが Early preview として扱われています。 ・Accessibility ・Data Binding and Theming ・Environment ※ Early preview package には、リリースが計画されている すべての機能セットが含まれていない場合や、正式リリース前に アーキテクチャに大きな変更が加えられる場合があります。

Getting Started 前提条件 ・Unity 2020.3 LTS 以降 ・Text Mesh Pro 2.1.4 以降 ・MRTK3 初期セットアップ済みであること ( 初期セットアップ方法 : https://docs.microsoft.com/ja-jp/windows/mixed-reality/mrtk-unity/mrtk3-overview/setup )

Getting Started Scripting Define Symbols を設定する MRTK3 Data Binding and Theming を有効にするためには、 Player Settings > Other Settings > Scripting Define Symbols に MRTK_UX_DATABINDING_THEMING_ENABLED シンボルを追加する必要があります。 ・このシンボルを追加しないと動作に必要となる パッケージがコンパイルされず、Data Binding and Theming が 正しく機能しないので注意が必要です。 ・Data Binding and Theming が不要な場合は、 シンボルと取り除くことで、パフォーマンスへの影響をゼロにします。 注意点

Getting Started 新しいシーンを追加して、MRTK の設定を追加する 新しいシーンを追加する ( 名前 : 任意 ) Main Camera ゲームオブジェクトを削除 ・MRTK XR Rig ( カメラや入力設定 ) ・MRTKInputSimulator ( 入力シミュレーター ) 1 2 MRTK’s Prefab を追加する ( 以下、2つ ) ※ Apply Recommended scene settings for HoloLens 2 が正しく動作しないため、手動で対応 (セットアップミス？)

Getting Started Data Source コンポーネントを追加する 1 2 3 データソースタイプ ( Data Consumer 参照用 : 任意の文字列 ) URL ( Curl を実行する URL ) Seconds Between Fetches ( データを取得する間隔 [秒] ) ・新しいゲームオブジェクトを追加 ( 名前 : DataBinding ) ・Data Source Json Test コンポーネントをアタッチ ・URL に http://www.boredapi.com/api/activity を設定

Getting Started Data Source JSON Test コンポーネントで指定した URL について ・リクエスト毎に異なる値を持つ JSON オブジェクトを返却する 公式ドキュメントで記載されている通り、https://www.boredapi.com/api/activity を指定すると、上記エラーが発生する。 理由は、こちらのサイトの証明書の有効期限が切れているため。https → http に置き換えることでサンプルを動作させることが可能。

Getting Started データソースから取得したデータを反映する Text Mesh Pro を追加する DataBinding オブジェクトの 子オブジェクトとして、 Text – TextMeshPro を追加します

Getting Started データソースのデータ更新を UX (View) に反映するための Data Consumer コンポーネントを追加する 1 2 データソースタイプ ( データを取得する Data Source Type を指定 ) Truncate String 取得した文字列を切り捨てるかどうか Manage Children ( Data Consumer を 子オブジェクトにも反映するかどうか ) ヒエラルキーから Canvas を選択して、 Data Consumer Text コンポーネントをアタッチ

Getting Started データソースからデータを反映するために、Text Mesh Pro に テンプレート を設定する テンプレートを入力する ex. {{ Key }} Text (TMP) オブジェクトを選択して、 TextMeshPro > Text Input を以下に置き換える {{ activity }}. It’s {{ type }}.

DEMO

Data Binding and Theming Data Binding と Theming (テーマシステム) を組み合わせて、動的にテーマを変更する方法 Theming (テーマシステム) では、 アプリの外観 (テーマ) を動的に扱うために UX Theme Profile (ScriptableObject) を使用

Data Binding and Theming Data Binding で Theme を扱う場合の Data Source 側の設定 A s s e t s / U X T h e m i n g E x a m p l e / S c e n e s / U X T h e m i n g E x a m p l e Data Source Provider Singleton Data Source Theme Provider テーマ (UX Theme Profile) を取得するための データソースプロバイダー データソースプロバイダーをシングルインスタンス化 Data Consumer が子オブジェクトに無くても検出可

Data Binding and Theming Data Consumer 側の設定方法 ( UX Binding Configurator ) UX Binding Configurator アプリケーション実行時にテーマ設定を有効にするための Data Consumer が動的にアタッチしてくれる

Data Binding and Theming 実行時に UXBindingConfigurator で指定されている Data Consumer を動的にアタッチされる アプリケーション実行時 UXBindingConfigurator が UX Binding Profile を 用いて、必要な Data Consumer をアタッチしている

Data Binding and Theming Data Source の Theme を動的に変更するためのコンポーネント ( Theme Selector ) Theme Selector Data Source Theme Provider へテーマプロファイルを スワップするコンポーネント

Data Binding and Theming ThemeSelector.SetTheme() メソッドを実行することで動的にテーマを変更することが可能 ThemeSelector.SetTheme サンプルシーンでは、ThemeSelector の SetTheme(int) を呼び出すことで、テーマ切り替えを実現している

参考文献 ・Mixed Reality Toolkit 3 https://docs.microsoft.com/en-us/windows/mixed-reality/mrtk-unity/mrtk3-overview ・Data Binding and Theming Framework https://docs.microsoft.com/en-us/windows/mixed-reality/mrtk-unity/mrtk3-data/packages/data/overview ・Working with Dynamic Data and Theming in MRTK3 ( MRDevDays ) https://www.youtube.com/watch?v=IiTpZ2ojyno

Known Limitations and Missing Features ・Unity's canvas ベースのコントロールとスクロール可能なリストは未統合 ・.NET INotifyPropertyCanged との統合は未実装 ・ サンプルシーンの Flickr、trymrtk.com からの画像読み込みが動作しない ( Unity の新しいバージョンに、Https SSL 不具合があるため ) ・ 付加的なパフォーマンス・チューニング ・ 今回のリリースはデータキャプチャではなく、データ表現に焦点を当てているため、 MRTK UX Controls はデータソースで状態を設定するように作られていない ・ リストデータへの動的な変更は、増分のみ更新ではなく、リスト全体を完全に更新する ・ データ操作パイプライン (Data manipulation pipeline) はまだ実装されていない ・ Slate の UX Component は、まだ完全にサポートされていない ・ DataSourceJson ノードは DataSourceObjects と相互運用できるように IDataNode インターフェースを実装する必要がある 制限事項と未実装の一覧 ※ Data Binding and Theming パッケージは Early preview packages (初期プレビューパッケージ) のため、制限や未実装もある。

Thank you！ Twitter アカウント @Futo_Horio #HoloMagicians