Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Adaptive Cardsへの招待

1,471 views

Published on

JPPUG20 Summerでの登壇資料です。

Published in: Technology
  • Be the first to comment

Adaptive Cardsへの招待

  1. 1. への招待 沼 Hiro @mofumofu_dance#AdaptiveCards #JPPUGSummer20
  2. 2. 今日のまとめ
  3. 3. ユーザー に Adaptive な Card 形式の メッセージ とは・・・
  4. 4. ユーザーにAdaptive ?? Adaptive Cards CSSやHTMLなどを前提とせずプラットフォーム・サービスに最適化されるカード交換フォーマット
  5. 5. レイアウトとデータのJSONから 各種デバイス・サービスに最適化された 状態で情報を提供
  6. 6. いま Microsoft Teams がアツい! Adaptive Cards は Teams でも表示可能 さらに アクションもできる! しかも Power Automate で簡単に投稿できる Teams ユーザーに最適な形式
  7. 7. ユーザー に 最適化 した メッセージを送ろう! を使って
  8. 8. はじめに 1.Adaptive Cards って? 2.何がメリットなの? 3.Power Platformでは何ができるの?
  9. 9. Adaptive Cardsって? JSONで書かれるマルチチャンネルに対応のカード交換フォーマット
  10. 10. 最近いろんなところで使う試みが ローコード/Proコードともに今後も利用範囲が広がる予感 SPFxを利用してSharePointページで Microsoft Searchの結果カスタマイズ Graph Explorerにも
  11. 11. 何がメリット? Actionable Message であること! (ほかのメッセージ形式では不可) ✓ CSSやHTMLの前提なしにカードのデザインが可能 ✓ “Templating” (カードレイアウトとデータの分離) で再利用性高い ✓ Power Platformで標準的にサポートされている ➢ 自分の普段使っている場所でアクションが可能 (cf. LINEのアカウントとしてプロモーションしたりクーポン送るのと同じ) メリットしかない!!
  12. 12. Power Platformでは何ができる? 標準のアクションの範囲では • Power Automate → Teams チャンネル/チャットへのカード送信 • Power Automate → Outlookへのカードを含むメール送信 • Power Apps から (以下同上) このほか、Power Virtual Agentsでのカード送信もIdeasに上がっています 少しコードを書くと • Power Appsでのカードレイアウトプレビュー • 自前のTemplating API などなど幅が広がります
  13. 13. Step by Step のデモ 1. Adaptive Cards Designer を使ってみよう 2. Power Automate から Teams にAdaptive Cards を送信 3. Adaptive Cards からのデータを SharePointに保存 4. 他のサービスのデータを Adaptive Cards で表示する
  14. 14. 1. Adaptive Cards Designer を使ってみよう https://adaptivecards.io/designer/ まずはどんなものが作れるのかイメージが大事! Adaptive Cards はウェブ上でカードのデザイン & JSONの生成ができるデザイナーが用意されている ドラッグ&ドロップと値の設定だけで作成可能
  15. 15. Adaptive Cards Designer を使ってみよう https://github.com/mofumofu- dance/PowerApps365/blob/master/Samples/Zaitaku/健康状況報告フローのカス タマイズ.pdf 詳しい使い方は
  16. 16. 2. Power Automate から Teams に Adaptive Cards を送信 Power Automate では Adaptive Cards を Teams に送信するアクションが用意されている 単純なカードの送信は、デザイナーから JSON をコピー&ペースト 投稿は Flow bot として行われる デザイナー画面 実際のメッセージ
  17. 17. 2. Power Automate から Teams に Adaptive Cards を送信 投稿先は Teams のチャンネル または ユーザー (Flow bot とのチャット) を選択可能 これらのカードでは Submit以外 のアクションを利用できる (指定のURLを開く、カードの表示・非表示くらい) ユーザーのレスポンス/入力が必要なら Submit アクションが必要 Teams チャンネル 宛先指定のチャット
  18. 18. 3. Adaptive Cards からのデータを SharePointに保存 の、前に Power Automate の試験的機能を有効にしましょう!
  19. 19. 3. Adaptive Cards からのデータを SharePointに保存 Adaptive Cards の特徴は ユーザーがアクション可能 なメッセージであること ユーザーのアクション (文字入力や選択、チェック) の結果は Power Automate のフロー内で取得できる 取得した結果は何らかのデータソースにそのまま保存 → Adaptive Cards を利用した簡易サーベイ 有給申請等の承認 等に利用可能
  20. 20. 3. Adaptive Cards からのデータを SharePointに保存 Teams のチャンネルに投稿したカードは、一度誰かに回答されるとおわり (フローが流れるので) ➢ 複数のユーザーに回答を促したい場合には ユーザー宛にカードを送信する必要がある ※(もしくは1つ Per Userプランがあれば) Power Appsからカードを送信すると複数回データ取得できる 注意点
  21. 21. 4.他のサービスのデータを Adaptive Cards で表示する 毎回固定のメッセージを送るケースはそんなにない 何らかのデータを利用して Adaptive Cards で送るのが効果的 例えば、RSSで取得したブログ記事の概要 や タスクの状況、 チケットシステムの新規チケット通知 などなど データはRSSと記事のスクレイピング データはSharePointリスト
  22. 22. 4.他のサービスのデータを Adaptive Cards で表示する 1つのデータからカードを作るなら、カード送信&待ち受けのアクションでタイムアウトをさせるテクニックが有効 (Templatingが使えるので) ただし現状ではString型しかサポートしていないようなので、配列を相手にする場合には別の方法を使う
  23. 23. 4.他のサービスのデータを Adaptive Cards で表示する 応答を待機だけど即タイムアウトさせる 後ろに「終了」アクションを入れて実行条件を変更
  24. 24. 4.他のサービスのデータを Adaptive Cards で表示する 配列型のデータを Adaptive Cards で表示するために加工するには・・・ 『選択アクション』 が超大事 このアクションで、データソースから得られた配列を、Adaptive Cardsのレイアウトに現れる配列に変換できる 詳しくは https://mofumofupower.hatenablog.com/entry/2020/05/15/003312 繰り返し構造の変換
  25. 25. Conclusion & Remarks ✓ Teams に対してアクション可能なメッセージを送れる唯一のフォーマット ✓ Power Automate を利用すればローコードにAdaptive Cards を Teams / Outlook で利用できる ✓ デザイナーでいろんなレイアウトを作ってみて蓄積するとよい ✓ 今後も利用シーンが増えてくるはずなので要チェック!
  26. 26. 学習リソース ◆ 公式Docs & ブログ https://docs.microsoft.com/en-us/adaptive-cards/ https://adaptivecards.io/blog/ ◆ コミュニティ https://aka.ms/logicflowjp-fb ◆ わたし https://mofumofupower.hatenablog.com/ あとはTwitter上にいる詳しい方々をフォローするのが近道です
  27. 27. Appendix
  28. 28. これからの発展 Power AutomateのTeamsコネクターのアクションに「メッセージの選択時」が追加されそう。 これにAdaptive Cardsが利用される ACMSがいまPoCフェーズ。Adaptive Cardsのテンプレートを企業内で管理できるようにな る。また、Templating APIも内包している https://aka.ms/ACMSstage
  29. 29. ちょっと応用 Power AppsからTeamsへAdaptive Cardsを直接投稿できる メリット: 「送信」のアクションが複数回発火するので、サーベイを全員に個別に送らなくてもよい ただいHTTPアクションを利用するのでライセンス注意 https://powerusers.microsoft.com/t5/Community-App-Samples/Posting-Adaptive-Card-to-Teams-User- from-Power-Apps/td-p/571127 Azure FunctionsでSDKを利用すると、自前のTemplating APIをつくることができる ほんの数行書くくらい。データと構造の分離ができてとてもよい https://mofumofupower.hatenablog.com/entry/2020/06/23/235008

×