Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Global Microsoft 365 Developer Bootcamp 2019 Tokyo: Adaptive Cards ハンズオン / Hands-on training for Global Microsoft 365 Developer Bootcamp 2019 Tokyo: Adaptive Cards

Global Microsoft 365 Developer Bootcamp 2019 Tokyo: Adaptive Cards ハンズオン / Hands-on training for Global Microsoft 365 Developer Bootcamp 2019 Tokyo: Adaptive Cards

Global Microsoft 365 Developer Bootcamp 2019 Tokyo (https://connpass.com/event/144707) のハンズオンのスライドです。

9cdd446fb259ec93e52d4388f60197f8?s=128

Takashi Shinohara

November 23, 2019
Tweet

Transcript

  1. Adaptive Cards ハンズオン

  2. 自己紹介 Name 篠原敬志 (Takashi Shinohara) Company アバナード株式会社 シニアコンサルタント Award Microsoft

    MVP for Office Development (2018-) Twitter @karamem0 Blog からめもぶろぐ。 (http://blog.karamem0.jp) Bio 俺たちは雰囲気で OAuth をやっている 2
  3. 本日のアジェンダ Adaptive Cards 概要 Adaptive Cards Designer を触ってみる Power Automate

    から Teams に投稿する Graph から Outlook に送信する アンケート収集システムを作ってみる 3
  4. Adaptive Cards 概要 4

  5. Introduction https://docs.microsoft.com/en-us/adaptive-cards/ 5

  6. Adaptive Cards とは カード形式のコンテンツを共通の一貫した方法で交換するた めの新しい方法 高性能で美しいエクスペリエンス オープン フレームワーク マルチ プラットフォーム

    ネイティブ パフォーマンス 6
  7. エクスペリエンス カードのペイロードは JSON 形式で記述 グリッド状にコントロールを配置 インタラクティブな表現 7

  8. オープン フレームワーク レンダリングのライブラリはすべてオープン ソース https://github.com/microsoft/AdaptiveCards 8

  9. マルチ プラットフォーム UWP / WPF / .NET iOS Android HTML

    9
  10. 利用できるサービス Bot Framework Cortana Skills Outlook Actionable Message Windows Timeline

    Microsoft Teams 10
  11. 基本的なスキーマ { "type": "AdaptiveCard", "version": "1.0", "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "body": [

    { "type": "TextBlock", "text": "Hello Adaptive Cards!" } ], "actions": [ { "type": "Action.OpenUrl", "title": "show more detail", "url": "https://adaptivecards.io", } ] } 11
  12. コントロールの種類 分類 名前 コンテナー Container ImageSet FactSet ColumnSet 要素 TextBlock

    RichTextBlock Image Media ActionSet 分類 名前 入力 Input.Text Input.Date Input.Time Input.Number Input.ChoiceSet Input.Toggle 12
  13. アクションの種類 名前 説明 Action.OpenUrl 指定した URL を Web ブラウザーで開く Action.Submit

    入力したデータをクライアントに送信する (Bot Framework) Action.ShowCard 追加のカードを表示する Action.ToggleVisibility カードの要素の表示または非表示を切り替える Action.Http 指定した URL に HTTP 要求を送信する (Outlook Actionable Messages) 13
  14. ハンズオン: Adaptive Cards Designer を触ってみる 14

  15. Adaptive Cards Designer GUI で操作しながら JSON 形式のペイロードを作成するため の Web ツール

    https://adaptivecards.io/designer/ 15
  16. Hello World カードを作ってみる (1) https://adaptivecards.io にアクセスし [Designer] をクリックする 16

  17. Hello World カードを作ってみる (2) [New card] をクリックす る 17

  18. Hello World カードを作ってみる (3) [Elements] - [TextBlock] をデザイナーにドラッグ & ドロップする

    18
  19. Hello World カードを作ってみる (4) [Text] に "Hello adaptive cards!" と入力する

    19
  20. Hello World カードを作ってみる (5) [Card Structure] の [Ada ptiveCard] をクリックし

    [⚡] - [Action.OpenUrl] をクリックする 20
  21. Hello World カードを作ってみる (6) [Title] に "show more de tail"

    と入力する [Url] に "https://adaptiv ecards.io" と入力する 21
  22. Hello World カードを作ってみる (7) [Preview mode] をクリッ クしてプレビュー表示する [Select host

    app] で任意 のアプリの見た目に切り替 える 22
  23. ハンズオン: Power Automate から Teams に投稿する 23

  24. Teams へのログイン https://teams.microsoft. com にログインする [代わりに Web アプリを使 用] をクリックして

    Teams を起動する 24
  25. チームの作成 (1) [チームを作成] をクリック する 25

  26. チームの作成 (2) [初めからチームを作成す る] をクリックする 26

  27. チームの作成 (3) [プライベート] をクリック する 27

  28. チームの作成 (4) [チーム名] を入力して [作 成] をクリックする 28

  29. チームの作成 (5) [スキップ] をクリックする 29

  30. チームの作成 (6) チームが作成されたことを 確認する 30

  31. Office 365 ポータルへのログイン https://www.office.com にログインする 31

  32. フローの作成 (1) [Power Automate] をク リックする 32

  33. フローの作成 (2) [作成] をクリックする 33

  34. フローの作成 (3) [インスタント フロー]をク リックする 34

  35. フローの作成 (4) [フロー名] を入力し [手動 でフローをトリガーします] をチェックして [作成] を クリックする

    35
  36. フローの作成 (5) [新しいステップ] をクリッ クする 36

  37. フローの作成 (6) [独自のアダプティブ カー ドをフロー ボットとして チャンネルに投稿する (プ レビュー)] をクリックする

    37
  38. フローの作成 (7) [チーム] および [Channe l] で作成したチームを選択 する [Message] にカードの

    JS ON を貼り付ける 38
  39. フローの作成 (8) [テスト] をクリックし [ト リガー アクションを実行す る] を選択して [保存

    & テ スト] をクリックする 39
  40. フローの作成 (9) [続行] をクリックする 40

  41. フローの作成 (10) [フローの実行] をクリック する 41

  42. フローの作成 (11) 正常に実行されたことを確 認して [完了] をクリック する。 42

  43. 実行結果の確認 Teams に Adaptive Card s が投稿されていることを 確認する 43

  44. ハンズオン: Graph から Outlook に送 信する 44

  45. Azure Portal へのログイン https://portal.azure.com にログインする 45

  46. アプリの登録 (1) [すべてのサービス] をク リックする 46

  47. アプリの登録 (2) [Azure Active Directory] をクリックする 47

  48. アプリの登録 (3) [アプリの登録] をクリック する 48

  49. アプリの登録 (4) [新規登録] をクリックする 49

  50. アプリの登録 (5) アプリケーションの名前を 入力して [登録] をクリッ クする 50

  51. アプリの登録 (6) [概要] をクリックし [アプ リケーション (クライアン ト) ID] および

    [ディレク トリ (テナント) ID] の値 をメモ帳などに保存する 51
  52. アプリの登録 (7) [認証] - [リダイレクト UR I] に "https://localhost:5 001/Account/Callback"

    と入力して [保存] をクリッ ク 52
  53. アプリの登録 (8) [証明書とシークレット] - [新しいクライアント シー クレット] - [追加] をク

    リックする 作成されたシークレットを メモ帳などに保存する 53
  54. アプリの登録 (9) [API のアクセス許可] - [アクセス許可の追加] をク リックする 54

  55. アプリの登録 (10) [Microsoft Graph] をク リックする 55

  56. アプリの登録 (11) [委任されたアクセス許可] - [Mail.Send] をチェック して [アクセス許可の追加] をクリックする 56

  57. アプリの実行 (1) Visual Studio Code を起 動し [ファイル] - [フォル

    ダーを開く] をクリックす る リポジトリの [AdaptiveC ardsSend] フォルダーを 指定して [フォルダーの選 択] をクリックする 57
  58. アプリの実行 (2) 通知領域の [Restore] をク リックする 58

  59. アプリの実行 (3) [Controller] - [AccountC ontroller.cs] を開いて必要 な情報を入力する • テナント

    ID • アプリケーション ID • アプリケーション シーク レット 59
  60. アプリの実行 (4) [デバッグ] - [デバッグの 開始] をクリックする 60

  61. アプリの実行 (5) [このサイトは安全ではあり ません] と表示される場合、 [Web ページへ移動] をク リックする 61

  62. アプリの実行 (6) [Sign in with Microsoft] をクリックする 62

  63. アプリの実行 (7) 組織アカウントでログイン する 63

  64. アプリの実行 (8) [Adaptive Cards Payloa d] にカードの JSON を貼 り付け、[Send]

    をクリッ クする 64
  65. アプリの実行 (9) 正常に実行されたことを確 認する 65

  66. アプリの実行 (10) Outlook (https://outlook. office365.com) にアクセ スし、カードが送信された ことを確認する 66

  67. ハンズオン: アンケート収集システムを 作ってみる 67

  68. 全体図 Microsoft Power Automate Outlook Actionable Messages Azure Functions Microsoft

    Excel 68
  69. 手順 Excel ファイルを作成する Function を作成する アプリを登録する Function をデプロイする カードを作成する フローを作成する

    アクションを実行する 69
  70. Excel ファイルの作成 (1) Excel を起動し [空白の ブック] をクリックする 70

  71. Excel ファイルの作成 (2) [挿入] - [テーブル] をク リックしてテーブルを作成 する 71

  72. Excel ファイルの作成 (3) 列見出しを以下のように設 定する 1 列目: 名前 2 列目:

    評価 3 列目: コメント 72
  73. Excel ファイルの作成 (4) [アンケート集計結果.xlsx] と名前を付けて OneDrive for Bussiness のルート フォルダーに保存する

    73
  74. Azure Portal へのログイン https://portal.azure.com にログインする 74

  75. Function の作成 (1) [リソースの作成] をクリッ クする 75

  76. Function の作成 (2) [Function App] と入力し て検索する 76

  77. Function の作成 (3) [作成] をクリックする 77

  78. Function の作成 (4) 必要な情報を入力して [作 成] をクリックする 78

  79. Function の作成 (5) デプロイが成功することを 確認する 79

  80. アプリの登録 (1) [すべてのサービス] をク リックする 80

  81. アプリの登録 (2) [Azure Active Directory] をクリックする 81

  82. アプリの登録 (3) [アプリの登録] をクリック する 82

  83. アプリの登録 (4) [新規登録] をクリックする 83

  84. アプリの登録 (5) アプリケーションの名前を 入力して [登録] をクリッ クする 84

  85. アプリの登録 (6) [概要] をクリックし [アプ リケーション (クライアン ト) ID] および

    [ディレク トリ (テナント) ID] の値 をメモ帳などに保存する 85
  86. アプリの登録 (7) [証明書とシークレット] - [新しいクライアント シー クレット] - [追加] をク

    リックする 作成されたシークレットを メモ帳などに保存する 86
  87. アプリの登録 (8) [API のアクセス許可] - [アクセス許可の追加] をク リックする 87

  88. アプリの登録 (9) [Microsoft Graph] をク リックする 88

  89. アプリの登録 (10) [アプリケーションの許可] - [Files.ReadWrite.All] を チェックして [アクセス許 可の追加] をクリックする

    89
  90. アプリの登録 (11) [管理者の同意を与えます] をクリックする 90

  91. Function のデプロイ (1) Visual Studio Code を起 動し [ファイル] -

    [フォル ダーを開く] をクリックす る リポジトリの [AdaptiveC ardsAction] フォルダーを 指定して [フォルダーの選 択] をクリックする 91
  92. Function のデプロイ (2) [AdaptiveCardsAction.c s] を開いて必要な情報を入 力する • テナント ID

    • アプリケーション ID • アプリケーション シーク レット • ユーザー プリンシパル名 92
  93. Function のデプロイ (3) [Azure] - [Deploy to Fun ction App...]

    - [Sign in t o Azure...] をクリックす る 93
  94. Function のデプロイ (4) 組織アカウントでログイン する 94

  95. Function のデプロイ (5) 作成した Function の名前 をクリックする 95

  96. Function のデプロイ (6) [Deploy] をクリックする 96

  97. Function のデプロイ (7) デプロイが成功することを 確認する 97

  98. Function のデプロイ (8) 作成した Function の [Fu nctions] - [AdaptiveCard

    sAction (HTTP)] を右ク リックして [Copy Functio n Url] をクリックする コピーした URL をメモ帳 などに保存する 98
  99. カードの作成 (1) https://adaptivecards.io にアクセスし [Designer] をクリックする 99

  100. カードの作成 (2) [Select host app] を [Ou tlook Actionable Messag

    es] に切り替える 100
  101. カードの作成 (3) [Card Payload Editor] に リポジトリの JSON を貼り 付ける

    101
  102. カードの作成 (4) [回答する] を選択し [UR L] に Function の URL

    を 貼り付ける 102
  103. Office 365 ポータルへのログイン https://www.office.com にログインする 103

  104. フローの作成 (1) [Power Automate] をク リックする 104

  105. フローの作成 (2) [作成] をクリックする 105

  106. フローの作成 (3) [インスタント フロー]をク リックする 106

  107. フローの作成 (4) [フロー名] を入力し [手動 でフローをトリガーします] をチェックして [作成] を クリックする

    107
  108. フローの作成 (5) [新しいステップ] をクリッ クする 108

  109. フローの作成 (6) [メールの送信 (V2) (プレ ビュー)] をクリックする 109

  110. フローの作成 (7) [宛先] および [件名] を入 力する [本文] に作成したカードの JSON

    を貼り付ける (JSON を<script type=" application/adaptivecard +json">...</script> タ グで囲むこと) 110
  111. フローの作成 (8) [テスト] をクリックし [ト リガー アクションを実行す る] を選択して [保存

    & テ スト] をクリックする 111
  112. フローの作成 (9) [続行] をクリックする 112

  113. フローの作成 (10) [フローの実行] をクリック する 113

  114. フローの作成 (11) 正常に実行されたことを確 認して [完了] をクリック する。 114

  115. アクションの実行 (1) https://outlook.office36 5.com にログインし、Pow er Automate から送信さ れたメールを確認する 115

  116. アクションの実行 (2) カードに入力して [回答す る] をクリックする 116

  117. アクションの実行 (3) 正常に実行されたメッセー ジが表示されることを確認 する ※エラーが発生することが ありますが、何度か試すと 正常メッセージが表示され ます 117

  118. アクションの実行 (4) Excel ファイルに入力した 内容が表示されることを確 認する 118

  119. まとめ 119

  120. 本日のアジェンダ Adaptive Cards 概要 Adaptive Cards Designer を触ってみる Power Automate

    から Teams に投稿する Graph から Outlook に送信する アンケート収集システムを作ってみる 120
  121. お疲れさまでした! 121