Adaptive CardをXRコンテンツでも使ってみる
782 Views
February 15, 23
スライド概要
XRミーティング 2023/02/15(https://osaka-driven-dev.connpass.com/event/273257/)登壇資料。
Adaptive CardのUIスニペットをMRTKのコンポーネントで利用することができるライブラリが試験的な機能として公開されていたので調査した話。
Adaptive Cardについては以下を参照
・https://adaptivecards.io/
・https://learn.microsoft.com/ja-jp/adaptive-cards/
Zennでも手順を公開: https://zenn.dev/miyaura/articles/544599391e01d0
Githubにも簡単なサンプルを公開: https://github.com/TakahiroMiyaura/MRTK-AdaptiveCardsSamples
ICT業界でソフトウェアエンジニア/アプリケーションアーキテクトを担当。 社内ではXR関連技術に関する啓もう活動や技術支援に従事。 業務の傍ら、XR（特にMixed Reality領域）についての開発技術の調査、開発などを行っています。 また、「大阪駆動開発」コミュニティ所属しており、日々の調査で得た知見はコミュニティを通して情報発信を行っています。
関連スライド
各ページのテキスト
Adaptive CardをXRコンテンツでも使ってみる 2023/02 XRミーティング 2023/02/15【AR/CR/MR/SR/VR】 takabrz1 Takahiro Miyaura
Microsoft MVP for Mixed Reality 2018-2023 某会社でSE(アプリケーション領域のアーキテクト的なお仕事なはず）＝ XRは趣味です（貢献領域：Mixed Reality） 宮浦 恭弘 (Miyaura Takahiro) ◼ 大阪駆動開発(とHolomagicians)コミュニティに生息 ◼ HoloLens日本販売してからxR系技術に取組む ◼最近はMixed Reality Toolkit 3と戯れている。 ◼ 新しい技術や、MRに使えそうな技術を調べる 技術Tips : https://qiita.com/miyaura @takabrz1 ※よかったらこれを機にお知り合いになってください
今日はAdaptive Cardのお話 2023/02/15 Copyright © 2023 Takahiro Miyaura 3
Adaptive Card
JSONで作成するUIスニペット
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.5",
"speak": "<s>Flight KL0605 to San Fransisco has been delayed.</s><s>It will not leave until
10:10 AM.</s>",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"size": "Small",
"url": "https://adaptivecards.io/content/airplane.png",
"altText": "Airplane"
}
]
}…
カード型の情報表示やアクションが可能なUIのスニペット
JSONで作成可能でプラットフォームに依存しない。
サポートしているアプリに配信されるとJSONをもとにアプリのネイティブUIで表示
2023/02/15
Copyright © 2023 Takahiro Miyaura
4
Adaptive Card 例えば。。。 サンプルやテンプレートが豊富 ○ https://adaptivecards.io/samples/ 2023/02/15 Copyright © 2023 Takahiro Miyaura 5
Adaptive Card 何がいいのか クロスプラットフォーム、アプリ間を超えて利用できる ◼UIはJSONで記述 ◼実際のUIは対応しているアプリのネイティブUI部品で再現 ◼ただ情報を出すだけでなくボタンなどのアクションも定義可 サポートしているアプリ ○ Bot Framework Web Chat ○ Microsoft Bot Framework 用の埋め込み可能な Web チャット コントロール ○ Outlook のアクション可能メッセージ ○ Microsoft Teams ○ Cortana スキル ○ Windows タイムライン 様々な言語でSDKも提供 ○ Cisco Webex Teams 2023/02/15 Copyright © 2023 Takahiro Miyaura 6
Adaptive Card 作るのも簡単です Webのデザイナツールもあるよ！ ○ https://adaptivecards.io/designer 2023/02/15 Copyright © 2023 Takahiro Miyaura 7
なぜこんな話をするのか 2023/02/15 Copyright © 2023 Takahiro Miyaura 8
これをみつけちゃったのです。 Mixed Reality Feature Toolに時々パッケージが増える Mixed Reality Feature Tool Unity向けMixed Reality関連パッケージの設定ツール Adaptive Card関連の試験的機能が追加されてる！ 少し試してみました 2023/02/15 Copyright © 2023 Takahiro Miyaura 9
今日はMRTKでAdaptive Card使ってみる 2023/02/15 Copyright © 2023 Takahiro Miyaura 10
手順はZennに整理しておきました。 Adaptive CardをXRコンテンツで使う ○Adaptive Cardに関する情報 ○MRTKV2で使う方法 ○MRTK3で使う方法 [Adaptive CardをXRコンテンツで使う] https://zenn.dev/miyaura/articles/544599391e01d0 2023/02/15 Copyright © 2023 Takahiro Miyaura 11
GitHubに今日使ったものを公開しておきました ○Adaptive Cardの使い方自体シンプルなのでサ ンプルコードはほとんどいらないかも https://github.com/TakahiroMiyaura/MRTK-AdaptiveCardsSamples 2023/02/15 Copyright © 2023 Takahiro Miyaura 12
ポイント とても簡単に使えます。 1. 2. 3. 4. 5. 6. Adaptive CardをJSONで作る Unityプロジェクトを作成 MRTKとAdaptive Cardパッケージをインポート Adaptive Cardコンポーネントを追加 1で作成したJSONをコンポーネントに設定する ｜・ω・)b ハードコピーはMRTK3ですが、Zenn記事には MRTKV2のものも残しています。 2023/02/15 Copyright © 2023 Takahiro Miyaura 13
ポイント 1. Adaptive CardをJSONで作る Webのデザイナツールが便利なので簡単なものを作る ○ https://adaptivecards.io/designer 2023/02/15 Copyright © 2023 Takahiro Miyaura 14
ポイント 2. Unityプロジェクトを作成 いつも使う3Dのもので作成 2023/02/15 Copyright © 2023 Takahiro Miyaura 15
ポイント 3. MRTKとAdaptive Cardパッケージをインポート Mixed Reality Feature Toolでインポート 以下の3つをチェックしてインポート ○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 ※不足分の依存パッケージは自動で追加してくれます。 2023/02/15 Copyright © 2023 Takahiro Miyaura 16
ポイント 4. Adaptive Cardコンポーネントを追加 プロジェクト設定なども忘れずに！ ②ドラッグ&ドロップでAdaptive Card追加 ①Packages > MRTK3 Adaptive Cards (Experimental) > Assets > Prefabsへ移動 2023/02/15 Copyright © 2023 Takahiro Miyaura 17
ポイント 5. 1で作成したJSONをコンポーネントに設定する Adaptive CardのUIスニペット（JSON）をセット ①選択 ②作成したJsonファイルをドラッグ&ドロップ 2023/02/15 Copyright © 2023 Takahiro Miyaura 18
実行すると 定義上のレイアウトはこれ 2023/02/15 Copyright © 2023 Takahiro Miyaura 19
MRTKV2とMRTK3でJSONだけ共有して同じ表示！ 2023/02/15 Copyright © 2023 Takahiro Miyaura 20
まとめ 2023/02/15 Copyright © 2023 Takahiro Miyaura 21
まとめ Adaptive CardをXRコンテンツで使う話 ✓ まだ、試験的な機能です（静的表示のみ） ✓ JSONでUIスニペットの可能性 ✓ コンテンツの流用を考えた場合にネイティブでの移植がいらない ✓ 例：MRTKV2,MRTK3でJSON共有だけで同じUIを実現 ✓ XRコンテンツ以外でも活用できる とても便利そうです 2023/02/15 Copyright © 2023 Takahiro Miyaura 22
OMAKE Adaptive CardとDataBindingを組み合わせる実験もした ✓ GitHubで公開しているものに含まれています。 ✓ 強引にやっているのであまり参考にならないかも ✓ DataBindingの仕様とAdaptive Cardの置換ルールは違う ✓ ✓ 2023/02/15 DataBindingは {{[キー名]}} Adaptive Cardは${[キー名]}} Copyright © 2023 Takahiro Miyaura 23
大阪駆動開発 関西を中心に、IT系のおもしろそうなことを 楽しんでやるコミュニティ 24