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 について解説しています。

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

5. View Slide

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 には、リリースが計画されている
   すべての機能セットが含まれていない場合や、正式リリース前に
   アーキテクチャに大きな変更が加えられる場合があります。
   

   View Slide

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 )
   

   View Slide

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 が不要な場合は、
   シンボルと取り除くことで、パフォーマンスへの影響をゼロにします。
   注意点
   

   View Slide

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

   View Slide

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 を設定
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. DEMO
    

    View Slide

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

    View Slide

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 が子オブジェクトに無くても検出可
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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 (初期プレビューパッケージ) のため、制限や未実装もある。
    

    View Slide

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

    View Slide