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) のハンズオンのスライドです。

Takashi Shinohara

November 23, 2019
Tweet

More Decks by Takashi Shinohara

Other Decks in Programming

Transcript

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

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

    から Teams に投稿する Graph から Outlook に送信する アンケート収集システムを作ってみる 3
  3. 基本的なスキーマ { "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
  4. コントロールの種類 分類 名前 コンテナー Container ImageSet FactSet ColumnSet 要素 TextBlock

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

    入力したデータをクライアントに送信する (Bot Framework) Action.ShowCard 追加のカードを表示する Action.ToggleVisibility カードの要素の表示または非表示を切り替える Action.Http 指定した URL に HTTP 要求を送信する (Outlook Actionable Messages) 13
  6. Hello World カードを作ってみる (6) [Title] に "show more de tail"

    と入力する [Url] に "https://adaptiv ecards.io" と入力する 21
  7. アプリの登録 (6) [概要] をクリックし [アプ リケーション (クライアン ト) ID] および

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

    リックする 作成されたシークレットを メモ帳などに保存する 53
  9. アプリの実行 (1) Visual Studio Code を起 動し [ファイル] - [フォル

    ダーを開く] をクリックす る リポジトリの [AdaptiveC ardsSend] フォルダーを 指定して [フォルダーの選 択] をクリックする 57
  10. アプリの実行 (3) [Controller] - [AccountC ontroller.cs] を開いて必要 な情報を入力する • テナント

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

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

    リックする 作成されたシークレットを メモ帳などに保存する 86
  13. Function のデプロイ (1) Visual Studio Code を起 動し [ファイル] -

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

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

    - [Sign in t o Azure...] をクリックす る 93
  16. Function のデプロイ (8) 作成した Function の [Fu nctions] - [AdaptiveCard

    sAction (HTTP)] を右ク リックして [Copy Functio n Url] をクリックする コピーした URL をメモ帳 などに保存する 98
  17. フローの作成 (7) [宛先] および [件名] を入 力する [本文] に作成したカードの JSON

    を貼り付ける (JSON を<script type=" application/adaptivecard +json">...</script> タ グで囲むこと) 110
  18. 本日のアジェンダ Adaptive Cards 概要 Adaptive Cards Designer を触ってみる Power Automate

    から Teams に投稿する Graph から Outlook に送信する アンケート収集システムを作ってみる 120