Adaptive CardをXRコンテンツで使う
Adaptive Cardとは
Adaptive CardとはJson形式で記述するカード型のUIコンテンツを交換する仕組みです。仕様自体はオープンなものとなっており、Jsonで記述されたコンテンツを読み込むことで、ホストなるアプリケーションがそのプラットフォームのUI部品でレイアウトを再現します。これによって1つ決まったコンテンツを作ることでマルチプラットフォームが実現できます。さらに、TeamsやBok Framework, OutlookやWindows Timelineといったアプリもまたがって活用ができるというちょっとおもしろい仕組みです。
詳細は以下のサイトにあります。
最大のメリットは様々なプラットフォームを経由して情報を伝搬させる際にAdaptive Cardをサポートしたプラットフォーム間では一貫した情報のやり取りが可能になるということです。Teamsで出しているAdaptiveCardを、そのUI仕様のまま情報をWindows Timelineに出すとったことが可能です。現在は様々なプラットフォームへの対応が進められています。
サポートしているアプリケーションは以下の通りですが、仕様はオープンであり、各言語でSDKの開発も進められているので今後多様な使い方が期待できるかもしれません。
Adaptive Cardでの記述方法
AdaptiveCardはシンプルなJson形式の記述によりコンテンツの情報を定義します。以下のものは名前と所属を表す要素を定義したAdaptiveCardの例です。AdaptiveCardはバージョンによってサポートする機能が異なります。最新は1.5になりますが、アプリケーションによってサポートするバージョンが異なるため実際に使う場合はできるだけバージョンが低いものを利用する方が汎用性を高められると思います。
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.5",
"speak": "<s>Weather forecast for ${formatEpoch(data[0].sunrise_ts, 'dddd')} is high of ${formatNumber(data[0].app_max_temp / 5 * 9 + 32, 0)} and low of ${formatNumber(data[0].app_min_temp / 5 * 9 + 32, 0)} degrees with a ${formatNumber(data[0].precip * 100, 0)}% chance of rain</s><s>Winds will be ${formatNumber(data[0].wind_gust_spd, 0)} mph from the ${data[0].wind_cdir}</s>",
"body": [
{
"type": "FactSet",
"facts": [
{
"title": "名前",
"value": "${Name}"
},
{
"title": "年齢",
"value": "${Age}"
}
]
}
]
}
上記では[FactSet]という項目と情報をセットで扱える要素を使っていますが、このようなUIや情報の種別に応じていくつかのコンテンツタイプが存在します。カード作成者はこの仕様に基づいてデザインを進めていくことになります。AdaptiveCardでコンテンツにどういったものが利用できるかは以下のサイトで一覧化されています。例も一緒に記載があるためわかりやすくなっています。
また、飛行機のフライト情報、天気予報といったよく使うようなレイアウトについてはすでにサンプルが公開されています。カードを定義するためのJsonも公開されているので、参考になるレイアウトのものを流用して新しく作ることも容易だと思います。
Adaptive Cardを作る
実際にAdaptiveCardをデザインする場合はWebアプリとしてDesignerが提供されています。これを利用するとドラッグ＆ドロップで要素を追加しカードを作成することが可能になっています。
デザイナへのリンクはこちらです。
Adaptive CardをXRコンテンツでも使う
Adaptive Card自体はその仕様に従っていれば、サポートされていない言語やプラットフォームでも情報を取り込んでコンテンツを生成するライブラリを作成することができます。
試験的な機能として提供されているのですが、XRコンテンツでAdaptice Cardを用いてUIを作成するためのライブラリが公開されていたのでその利用方法等を紹介したいと思います。
極力作りこみを避けたい場合はUI部品まで提供されているMixed Reality Toolkitを組み合わせることで、上記のAdaptive CardのJsonデータだけでカード型のUIを作成することが可能になります。
開発環境
- Mixed Reality Feature Tool v1.0.2209.0 Preview（MRTK3セットアップ用）
- Unity Hub 3.3.0
- Unity 2021.3.11f1
MRTKV2での利用
MRTKV2でAdaptive Cardを利用する場合はMRTKV2用のパッケージを追加でインストールします。
MRTKV2でのパッケージのインポート
最初にUnity Hubで空のプロジェクトを作成します。その後Mixed Reality Feature Toolを起動して作成したUnityプロジェクトを開きます。パッケージの選択で以下の２つを選択し[Get Features]を押下します。
- MRTK Adaptive Cards Core (Experimental) 0.1.0-pre.3
- MRTK2 Adaptive Cards (Experimental) 0.1.0-pre.3
自動的に不足しているパッケージを設定してくれるのでそのまますべてのパッケージをインポートします。
Adaptive Cardの設定と確認
Unityプロジェクトを開いたら、MRTKV2の空プロジェクトの作成までの手順を実施しコンテンツの実装準備をします。
次に、[Project]パネルで[Packages > MRTK2 Adaptive Cards (Experimental) > Assets > Prefabs]配下を表示します。[AdaptiveCard(no titkebar)]または[AdaptiveCard]を[Hierarchy]パネルにドラッグ＆ドロップしコンポーネントを追加します。
次に、追加した[Hierarchy]パネルで[AdaptiveCard]を選択します。[Inspector]パネルの[Adaptive Card]コンポーネントの[Card Json]に作成したAdaptive CardのJson定義を設定します。
サンプルについては以下のサイトにテンプレートやサンプルとして公開されているのでとりあえず動かす程度であればそこからダウンロードして利用します。
この状態で実行すると起動時にAdaptiveCardコンポーネントをJson定義を読込み、情報が表示されます。サンプルのものは一部の項目が可変要素として"${[キー名]}"で定義されています。
MRTK3での利用
MRTK3でも使い方はほぼ同じです。MRTK3用のAdaptive Cardのライブラリをインポートし、AdaptiveCardオブジェクトとUIコンテンツを記述したJsonファイルを設定するだけで利用できます。
MRTK3でのパッケージのインポート
最初にUnity Hubで空のプロジェクトを作成します。その後Mixed Reality Feature Toolを起動して作成したUnityプロジェクトを開きます。パッケージの選択で以下の3つを選択し[Get Features]を押下します
- MRTK Adaptive Cards Core (Experimental) 0.1.0-pre.3
- MRTK3 Adaptive Cards (Experimental) 0.1.0-pre.3
- MRTK3 Data Binding and Theming (Experimental) 1.0.0-pre.14
自動的に不足しているパッケージを設定してくれるのでそのまますべてのパッケージをインポートします。
Adaptive Cardの設定と確認
Unityプロジェクトを開いたら、MRTK3の空プロジェクトの作成までの手順を実施しコンテンツの実装準備をします。
次に、[Project]パネルで[Packages > MRTK3 Adaptive Cards (Experimental) > Assets > Prefabs]配下を表示します。[AdaptiveCard(no titkebar)]または[AdaptiveCard]を[Hierarchy]パネルにドラッグ＆ドロップしコンポーネントを追加します。
次に、追加した[Hierarchy]パネルで[AdaptiveCard]を選択します。[Inspector]パネルの[Adaptive Card]コンポーネントの[Card Json]に作成したAdaptive CardのJson定義を設定します。
この状態で実行するとMRTKV2と同様、起動時にAdaptiveCardコンポーネントをJson定義を読込み情報が表示されます。サンプルのものは一部の項目が可変要素として"${[キー名]}"で定義されています。
まとめ
今回はAdaptiveCardについての簡単な解説と情報源、MRTKと絡めることでXRコンテンツの開発でもAdaptiveCardが利用できることを紹介しました。
同じ開発プラットフォームではない場合は、UIの移植や流用は再作成が多いと思います。Adaptive Cardはそういった開発プラットフォーム依存にならないUIコンテンツを定義することができるためとても便利です。
現時点では、Adaptive Cardで定義した情報の中に可変値を入れる機能はまだありません（仕様にはある模様）。このため、現時点のパッケージの仕様はレイアウト通りにカード型のUIを静的表示する事しかできない状態です。
例えば、MRTK3の場合DataBindingの機能があるため、これと組み合わせることで動的表示も可能になると考えられます(現在はAdaptiveCardとDataBindingの機能を組み合わせるには個別対応が必要です)。
これが実現するとAdaptive Cardで可変部分をDataBindingのキーとして定義しテンプレート化することで、配列のようなコレクションの情報を一覧表示したりといったことも可能になります。
サンプルコード
AdaptiveCardを設定した簡易なUnityプロジェクトは以下で公開しています。クローン後[Mixed Reality Feature Tool]で必要なコンポーネントをインポートすることで動作確認することができます。手順はさほど複雑ではないですがよくわからないときの参考にしてください。
Discussion