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

堀尾風仁 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

    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