Upgrade to Pro — share decks privately, control downloads, hide ads and more …

MRTK3 - DataBinding and Theming 入門

MRTK3 - DataBinding and Theming 入門

2022/06/23(木) に開催された
Tokyo HoloLens ミートアップ vol.30 で
LT 登壇に使用した資料です。

MRTK3 - Data Binding and Theming 入門ということで、
6月上旬に Public Preview として公開された #MRTK3 の
Data Binding and Theming について解説しています。

Fccbd625997f63e7b251d9725cb905a5?s=128

堀尾風仁 Futo Horio

June 23, 2022
Tweet

More Decks by 堀尾風仁 Futo Horio

Other Decks in Technology

Transcript

  1. 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
  2. 堀 尾 風 仁 株 式 会 社 神 戸

    デ ジ タ ル ・ ラ ボ コ ミ ュ ニ テ ィ 運 営 ・ 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
  3. Data Binding とは ランタイムで取得したデータ もしくは、永続データ(Model) を UX (View) に反映するためのフレームワーク DataConsumer

    データを UX に反映するためのコンポーネント DataSource データソースを管理するためのコンポーネント ※ 扱うデータの種類 (ex. JSON, Dictionary, Reflection .. ) ごとにコンポーネント (派生クラス) が用意されている。
  4. Theming (テーマシステム) とは テーマシステムは、アプリケーションの UX 要素の外観 (テーマ) を一括変換できる機能 ( 画像引用元

    : https://docs.microsoft.com/ja-jp/windows/mixed-reality/mrtk-unity/mrtk3-data/packages/data/overview#mrtk-theming )
  5. None
  6. 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 には、リリースが計画されている すべての機能セットが含まれていない場合や、正式リリース前に アーキテクチャに大きな変更が加えられる場合があります。
  7. 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 )
  8. 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 が不要な場合は、 シンボルと取り除くことで、パフォーマンスへの影響をゼロにします。 注意点
  9. Getting Started 新しいシーンを追加して、MRTK の設定を追加する 新しいシーンを追加する ( 名前 : 任意 )

    Main Camera ゲームオブジェクトを削除 ・MRTK XR Rig ( カメラや入力設定 ) ・MRTKInputSimulator ( 入力シミュレーター ) 1 2 MRTK’s Prefab を追加する ( 以下、2つ ) ※ Apply Recommended scene settings for HoloLens 2 が正しく動作しないため、手動で対応 (セットアップミス?)
  10. 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 を設定
  11. Getting Started Data Source JSON Test コンポーネントで指定した URL について ・リクエスト毎に異なる値を持つ

    JSON オブジェクトを返却する 公式ドキュメントで記載されている通り、https://www.boredapi.com/api/activity を指定すると、上記エラーが発生する。 理由は、こちらのサイトの証明書の有効期限が切れているため。https → http に置き換えることでサンプルを動作させることが可能。
  12. Getting Started データソースから取得したデータを反映する Text Mesh Pro を追加する DataBinding オブジェクトの 子オブジェクトとして、

    Text – TextMeshPro を追加します
  13. Getting Started データソースのデータ更新を UX (View) に反映するための Data Consumer コンポーネントを追加する 1

    2 データソースタイプ ( データを取得する Data Source Type を指定 ) Truncate String 取得した文字列を切り捨てるかどうか Manage Children ( Data Consumer を 子オブジェクトにも反映するかどうか ) ヒエラルキーから Canvas を選択して、 Data Consumer Text コンポーネントをアタッチ
  14. Getting Started データソースからデータを反映するために、Text Mesh Pro に テンプレート を設定する テンプレートを入力する ex.

    {{ Key }} Text (TMP) オブジェクトを選択して、 TextMeshPro > Text Input を以下に置き換える {{ activity }}. It’s {{ type }}.
  15. DEMO

  16. Data Binding and Theming Data Binding と Theming (テーマシステム) を組み合わせて、動的にテーマを変更する方法

    Theming (テーマシステム) では、 アプリの外観 (テーマ) を動的に扱うために UX Theme Profile (ScriptableObject) を使用
  17. 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 が子オブジェクトに無くても検出可
  18. Data Binding and Theming Data Consumer 側の設定方法 ( UX Binding

    Configurator ) UX Binding Configurator アプリケーション実行時にテーマ設定を有効にするための Data Consumer が動的にアタッチしてくれる
  19. Data Binding and Theming 実行時に UXBindingConfigurator で指定されている Data Consumer を動的にアタッチされる

    アプリケーション実行時 UXBindingConfigurator が UX Binding Profile を 用いて、必要な Data Consumer をアタッチしている
  20. Data Binding and Theming Data Source の Theme を動的に変更するためのコンポーネント (

    Theme Selector ) Theme Selector Data Source Theme Provider へテーマプロファイルを スワップするコンポーネント
  21. Data Binding and Theming ThemeSelector.SetTheme() メソッドを実行することで動的にテーマを変更することが可能 ThemeSelector.SetTheme サンプルシーンでは、ThemeSelector の SetTheme(int)

    を呼び出すことで、テーマ切り替えを実現している
  22. 参考文献 ・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
  23. 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 (初期プレビューパッケージ) のため、制限や未実装もある。
  24. Thank you! Twitter アカウント @Futo_Horio #HoloMagicians