240828_【パワプラジオ】001（Connpass公開用）

#1 – 2024/8/28 Power Platform Tiger Community - 2024 -

Power Platform Tiger Community - 2024 - アダプティブカードって何？ パワプラジオ #1 – 2024/08/28 12:30～13:00 Power Platform × Radio Power Platform Tiger Community - 2024 -

agenda • パワプラジオ リスナーの皆さまへ • 本日のテーマについて • Microsoft公式サイトのドキュメント • Copilotさんに解説を頼んでみた • アダプティブカードデザイナー 画面の解説 • 使う際の注意事項 • 画像の表示方法 • フローでの使用方法 • おわりに Power Platform Tiger Community - 2024 - パワプラジオ #1 – 2024/08/28 12:30～13:00 2

パワプラジオ リスナーの皆さまへ ◼自由参加のショートラジオです • ラジオ感覚で流し聞きするのもOK • 実際に操作を体験してみるのもOK • とりあえずどんなことができるのか流し見するだけでもOK • 参加した後はアンケートへのご協力をお願いします リアクション & コメント 大歓迎!! ◼困ったことがあったら、チャットに書き込んでください • ショートラジオという時間の制約上、実施しながらコメントを見切れない場合があります • コメントはラジオ終了後に確認し、可能な限り返信します（ベストエフォート） ◼参加しているパワプラ有識者・経験者の方へ • もし、参加している方のヘルプチャットを見つけた場合は、フォローいただけると助かります （もちろん強制ではなく、気が向いた場合に恩送りベースでいただけると嬉しいです） Power Platform Tiger Community - 2024 - パワプラジオ #1 – 2024/08/28 12:30～13:00 3

本日のテーマ アダプティブカードって何?? Power Platform Tiger Community - 2024 -

Microsoft公式サイトのドキュメント • アダプティブ カードは、情報ブロックを共有、表示するための、プラットフォーム非依存の方 法です。複雑なCSSやHTMLのカスタマイズやレンダリングは不要です。アダプティブ カード をJSON形式で作成すると、クラウド アプリとサービスがオープンにやり取りできる統合を実 現できます。Microsoft Teamsなどの特定のホストに配信されると、JSONファイルはその ホストに適応するネイティブUIに自動的に変換されます。これにより、一貫したUIパターン を提供して、常にビジネス プロセス/自動化の情報を表示できるようになります。 • アダプティブ カードはホストに適応します。そのため、Microsoft Teamsとその他のサービ スとの間で情報共有するための最適な手段となります。 Power Platform Tiger Community - 2024 - パワプラジオ #1 – 2024/08/28 12:30～13:00 5

なるほど。わからん!! という感じなので、 Copilotさんに解説を頼みました。 Power Platform Tiger Community - 2024 -

Copilotさんに解説を頼んでみた Copilotさんによる小学6年生向け解説 アダプティブカードっていうのは、 簡単に言うと「情報を見やすくまとめて表示するためのカード」なんだ。 例えば、学校の掲示板に貼るお知らせみたいなものを想像してみてね。 どうやって使うの？ 1.情報をまとめる アダプティブカードは、いろんな情報を一つのカードにまとめることができるんだ。 例えば、天気予報や宿題のリスト、イベントのスケジュールなど。 2.簡単に作れる 普通、ウェブページ作る時には「CSS」や「HTML」っていう難しい言語を使うけど、 アダプティブカードは「JSON」っていうもっと簡単な方法で作れるんだ。 3.どこでも使える このカードは、いろんなアプリやサービスで使えるんだ。 例えば、Microsoft Teamsっていうチャットアプリに送ると、 そのアプリにあった見た目に自動で変わるんだよ。 Power Platform Tiger Community - 2024 - パワプラジオ #1 – 2024/08/28 12:30～13:00 最初から このぐらい優しい解説に してほしいですね。。。 7

Copilotさんに解説を頼んでみた（つづき） Copilotさんによる小学6年生向け解説 何がすごいの？ 一貫した見た目 情報の共有が簡単 どのアプリで見ても、情報が同じように見えるから、使う人が迷わないんだ。 例えば、先生が宿題のリストを作って、それをみんなに送るときに、 このアダプティブカードを使うと、みんなが同じようにみられるんだ。 まとめ アダプティブカードは、 情報をわかりやすくまとめて、いろんなアプリで簡単に共有できる便利なカードなんだ。 これを使うと、同じ情報を同じように見られるから、とっても便利なんだよ！ Power Platform Tiger Community - 2024 - パワプラジオ #1 – 2024/08/28 12:30～13:00 8

たとえばこんな感じです Copilotさんの解説に沿ってみていくと、、、 1.情報をまとめる のように、一つのカードの中に 画像や文字などの情報をまとめられる 2.簡単に作れる カード初作成の時はビビりますが、 デザイナーで（慣れれば）簡単に作れる 3.どこでも使える Teamsに投稿すると のような感じ表示される （それ以外では使ったことないですが） PCでも、スマホでも、 同じような少しリッチな表示で 情報を見ることができるようになりますね!! Power Platform Tiger Community - 2024 - パワプラジオ #1 – 2024/08/28 12:30～13:00

では作る方法は？ アダプティブカードデザイナーを使います！ Power Platform Tiger Community - 2024 - パワプラジオ #1 – 2024/08/28 12:30～13:00 【リンク】Designer | Adaptive Cards

• https://adaptivecards.io/designer/

アダプティブカードデザイナー 画面の解説 プレビュー画面 • • • Power Platform Tiger Community - 2024 - パワプラジオ #1 – 2024/08/28 12:30～13:00 作成中のカードイメージを表示する画面 カードに配置する要素は、ここにドラッグ&ドロップす ることで追加することができる 動的なコンテンツなどを組み込んでいる際には、内 容は当該の内容が表示されないので注意

アダプティブカードデザイナー 画面の解説 カード要素 • • アダプティブカードに組み込む要素の一覧 新規でカードを作る際やテンプレートに他の要素を 組み込む場合に、この要素から選択してプレビュー 画面にドラッグ&ドロップする Power Platform Tiger Community - 2024 - パワプラジオ #1 – 2024/08/28 12:30～13:00

アダプティブカードデザイナー 画面の解説 カード構造 • • Power Appsでいう「ツリービュー」 アダプティブカードの構成要素の一覧がここに表示 される Power Platform Tiger Community - 2024 - パワプラジオ #1 – 2024/08/28 12:30～13:00

アダプティブカードデザイナー 画面の解説 カード要素のプロパティ • • • カードに配置した各要素の詳細を変更する画面 要素によって表示されるプロパティの内容は異なる Teamsに通知するときなどに動的なコンテンツを指定す る場合には、このプロパティで「（動的_●●）」などと記 載をしておくと後々便利 Power Platform Tiger Community - 2024 - パワプラジオ #1 – 2024/08/28 12:30～13:00

アダプティブカードデザイナー 画面の解説 カード要素のプロパティ • • • カードに配置した各要素の詳細を変更する画面 要素によって表示されるプロパティの内容は異なる Teamsに通知するときなどに動的なコンテンツを指定す る場合には、このプロパティで「（動的_●●）」などと記 載をしておくと後々便利 Power Platform Tiger Community - 2024 - パワプラジオ #1 – 2024/08/28 12:30～13:00

アダプティブカードデザイナー 画面の解説 カードペイロードエディタ • • Power Platform Tiger Community - 2024 - パワプラジオ #1 – 2024/08/28 12:30～13:00 カードの要素および構造、要素のプロパティについて、 JSONで記載で記載されたもの 実際にTeams通知などで使用する場合は、このJSON をコピーし、Teams通知のアクション「アダプティブカード /Adaptive Card」欄へペーストして使用します

アダプティブカードデザイナー 画面の解説 サンプルデータエディタ • • サンプルが記載されているエディタ カード作成時には使用しません Power Platform Tiger Community - 2024 - パワプラジオ #1 – 2024/08/28 12:30～13:00

アダプティブカードデザイナー を使う際の注意事項 注意 アダプティブカードデザイナーには 保存の機能がございません • カードペイロードエディタに表示されたJSONをメモ帳などにコピー&ペーストして保存しておきましょう 対処方法 • 作業を中断して再開したいときは、保存しておいたJSONをカードペイロードエディタへ貼り付けることで 再開することができます Power Platform Tiger Community - 2024 - パワプラジオ #1 – 2024/08/28 12:30～13:00

アダプティブカード例 要素の解説 TextBlock TextBlock ColumnSet Image FactSet TextBlock TextBlock Action.OpenUrl Power Platform Tiger Community - 2024 - パワプラジオ #1 – 2024/08/28 12:30～13:00

アダプティブカード 画像の表示方法 Imageのプロパティ 画像を表示する場合には、 Image要素のプロパティのUrlに アドレスをしてする必要があります のカードの場合は、画像の アドレスを指定するのではなく、 Base64を動的に指定しています ※Base64で指定した場合、画像のサイズが大きすぎると カードが作成できず、エラーとなる場合があります Power Platform Tiger Community - 2024 - パワプラジオ #1 – 2024/08/28 12:30～13:00

アダプティブカード フローでの使用方法 動的なコンテンツを組み込む場合 動的なコンテンツ アダプティブカードに動的なコンテンツを組み 込む場合は、 のようにJSON文の中で 動的なコンテンツを指定します。 Power Automateの他のアクションと同様 に、SharePointリストの情報や変数などを 組み込むことが可能です。 Power Platform Tiger Community - 2024 - パワプラジオ #1 – 2024/08/28 12:30～13:00

おわりに アダプティブカードについて イメージを持ってもらうことはできたでしょうか。 ちょっと難しく感じるかもしれませんが、 1度試してみると「意外と作れます」 ぜひ試してみてください。 Power Platform Tiger Community - 2024 - パワプラジオ #1 – 2024/08/28 12:30～13:00

Power Platform Tiger Community - 2024 -