Successfully reported this slideshow.
Your SlideShare is downloading. ×

Adaptive Cardsを使ってみた

Ad

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

Ad

Profile
• 名前:なかしょ(中島 進也)
• 所属:NTTテクノクロス株式会社
• Twitter:@nakasho_dev
• ブログ:なかしょの技術日誌
http://nakasho-dev.hatenablog.jp/
• 最近の...

Ad

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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Check these out next

1 of 16 Ad
1 of 16 Ad
Advertisement

More Related Content

Slideshows for you

Advertisement

Adaptive Cardsを使ってみた

  1. 1. Adaptive Cardsを使ってみた 2020/07/10 potatotips #70 NTTテクノクロス 中島進也 (なかしょ)
  2. 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. 3 参考:https://adaptivecards.io/
  4. 4. Adaptive Cardsとは • アダプティブカードは、JSONで作成された、プラットフォー ムに依存しないUIのスニペット • アプリやサービスがオープンに交換可能 • 特定のアプリに配信されると、JSONは周囲に自動的に適応す るネイティブUIに変換 4 参考:https://adaptivecards.io/
  5. 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. 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. 7. Template Json Data Json Azure Blob Storage Azure CDN iOSアプリ Androidアプリ Windowsアプリ Webアプリ ・一式の定義ファイルから各プラットフォームのネイティブの表現を実現 ・アプリリリース無しでAdaptiveCards表示領域のデザインを変更可能 ※ 現在、TemplateとDataでJSONが分かれているのはJavaScriptと.NETのみ Adaptive Cards活用イメージ
  8. 8. Adaptive CardsのSample 8 参考:https://adaptivecards.io/samples/ Weather large Product video Agenda Sporting event Input form
  9. 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. 10. Adaptive Card Designer 10 参考:https://adaptivecards.io/designer/ ※npmで提供されている
  11. 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. ネイティブでの実装 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. ネイティブでの実装 – 対象サンプル 13 参考:https://adaptivecards.io/samples/WeatherCompact.html 『Weather compact』というサンプルを試してみた 以下はサンプルで表示されていたHTML表示
  14. 14. ネイティブでの実装 14 画像が 出ない!?
  15. 15. まとめ • アダプティブカードは、JSONで作成された、プラットフォー ムに依存しないUIのスニペット • アプリのリリースなしでもUIの変更が可能 • ノンプログラマーでもUIの変更が可能 • でも、クロスプラットフォームを過信しないように注意 15
  16. 16. ご清聴ありがとうございました。 なかしょ(中島 進也) @nakasho_dev 16

×