2020/07/10(金) に開催された 『[Online] potatotips #70 iOS/Android開発Tips共有会』でLTした資料です。 https://potatotips.connpass.com/event/178565/

1. Adaptive Cardsを使ってみた
2020/07/10
potatotips #70
NTTテクノクロス 中島進也
（なかしょ）

2. Profile
• 名前：なかしょ（中島 進也）
• 所属：NTTテクノクロス株式会社
• Twitter：@nakasho_dev
• ブログ：なかしょの技術日誌
http://nakasho-dev.hatenablog.jp/
• 最近の興味
TDD、LeanXP、DevOps、Xamarin、mBaaS、Tizen
• 主な参加コミュニティ
JXUG 、JPFUG 、TDDBC 、.NETラボ、TestNight、XPJUG
※本資料は私個人の意見であり、所属企業・部門見解を代表する
ものではありません。
2

3. 3
参考：https://adaptivecards.io/

4. Adaptive Cardsとは
• アダプティブカードは、JSONで作成された、プラットフォー
ムに依存しないUIのスニペット
• アプリやサービスがオープンに交換可能
• 特定のアプリに配信されると、JSONは周囲に自動的に適応す
るネイティブUIに変換
4
参考：https://adaptivecards.io/

5. Adaptive Cardsの目標
• ポータブル - 任意のアプリ、デバイス、UIフレームワークに
• オープン - ライブラリとスキーマはオープンソースで共有さ
れています
• 低コスト - 定義が簡単で、使いやすい
• 表現力豊か - 開発者が制作したいコンテンツのロングテール
をターゲットにしています
• 純粋に宣言的 -コードは不要であり、許可されていない
• 自動スタイル - ホストとなるアプリケーションのネイティブ
UXをブランドガイドラインともに
5
参考：https://docs.microsoft.com/en-us/adaptive-cards/
https://docs.microsoft.com/en-us/adaptive-cards/resources/principles

6. Adaptive Cardsの共有エコシステム
対応言語・PF
• Android
• iOS
• JavaScript
• ASP.NET
• .NET WPF
• .NET UWP
• ReactNative
• Xamarin.Android
6
参考：https://docs.microsoft.com/ja-jp/adaptive-cards/resources/partners
パートナー
• Bot Framwork Web Chat
• Outlook Actionable Messages
• Microsoft Teams
• Cortana Skills
• Windows Timeline
• Cisco WebEx Teams

7. Template
Json
Data Json
Azure Blob Storage
Azure CDN
iOSアプリ
Androidアプリ
Windowsアプリ
Webアプリ
・一式の定義ファイルから各プラットフォームのネイティブの表現を実現
・アプリリリース無しでAdaptiveCards表示領域のデザインを変更可能
※ 現在、TemplateとDataでJSONが分かれているのはJavaScriptと.NETのみ
Adaptive Cards活用イメージ

8. Adaptive CardsのSample
8
参考：https://adaptivecards.io/samples/
Weather large
Product video
Agenda
Sporting event
Input form

9. Adaptive Cardの要素
• Card Elements
TextBlock
Image
Media
MediaSource
RichTextBlock
TextRun
• Containers
ActionSet
Container
ColumnSet
Column
FactSet
Fact
ImageSet
• Actions
Action.OpenUrl
Action.Submit
Action.ShowCar
d
Action.ToggleVi
sibility
TargetElement
• Inputs
Input.Text
Input.Number
Input.Date
Input.Time
Input.Toggle
Input.ChoiceSet
Input.Choice
• Types
BackgroundIma
ge
9
参考：https://adaptivecards.io/explorer/

10. Adaptive Card Designer
10
参考：https://adaptivecards.io/designer/ ※npmで提供されている

11. ネイティブでの実装- Actionを定義
IActionCardHandlerインタフェースを実装する
• onAction
onSubmit ： ユーザの入力情報を処理
onShowCard： モーダルで詳細情報を表示する等の処理
onOpenUrl ： 対象のURLを開く処理
• onMediaPlay ： 動画の再生
• onMediaStop ： 動画の停止
11
参考：https://docs.microsoft.com/en-us/adaptive-cards/sdk/rendering-cards/android/actions

12. ネイティブでの実装
12
参考：https://docs.microsoft.com/en-us/adaptive-cards/sdk/rendering-cards/android/getting-started
val parseResult =
AdaptiveCard.DeserializeFromString(contentJson, AdaptiveCardRenderer.VERSION, ParseContext())
val cardActionHandler: ICardActionHandler = ActionHandler(context = applicationContext)
val hostConfig = HostConfig.DeserializeFromString(hostConfigJson)
val renderedCard = AdaptiveCardRenderer.getInstance()
.render(applicationContext, supportFragmentManager, parseResult.GetAdaptiveCard(),
cardActionHandler, hostConfig)
layout.addView(renderedCard.view)
カード情報を持ったJSONファイル
をパースする。
ICardActionHandlerを実装し
たクラスを生成
クロスプラットフォーム
構成オブジェクトを生成
Cardの描画
生成したViewを
ViewGroupに追加

13. ネイティブでの実装 – 対象サンプル
13
参考：https://adaptivecards.io/samples/WeatherCompact.html
『Weather compact』というサンプルを試してみた
以下はサンプルで表示されていたHTML表示

14. ネイティブでの実装
14
画像が
出ない！？

15. まとめ
• アダプティブカードは、JSONで作成された、プラットフォー
ムに依存しないUIのスニペット
• アプリのリリースなしでもUIの変更が可能
• ノンプログラマーでもUIの変更が可能
• でも、クロスプラットフォームを過信しないように注意
15

16. ご清聴ありがとうございました。
なかしょ（中島 進也）
@nakasho_dev
16