PA45 第20回 スライド

アダプティブカードの作り方 ── そっけない通知が、"リッチカード"に化ける(出張申請カードを、完成JSON配布+Copilotの作り方実演でつくる)
1 / 19
PA45 — Power Automate 45 | 第20回 / Vol.20Online Hands-on
まもなく開始します
20:15 START

第20回|アダプティブカードの作り方 ✈💬

開始まで、もう少しお待ちください ☕

2 / 19
PA45|第20回

事前準備 (サインインだけでOK)

今日は Teamsに「リッチなカード」を届ける回。
JSONは 配布します=貼るだけでOK。
Copilotに作らせる方法も実演・プレミアム不要

1

Power Automate にサインイン

make.powerautomate.com を開いてサインイン。今日は ゼロから1本作ります。

2

Teams が使えればOK

投稿先に 自分のチーム/チャネルを使います。テスト用チャネルがあると安心(無ければ一緒に用意)。

📥 ゴール:リッチなカードを自分のTeamsに1枚届ける
3 / 19
INTRODUCTION

PA45 とは?

Concept
忙しい人のための 45分ハンズオン
⏱️

45分完結

長時間の研修は不要。要点だけを凝縮し、最短でスキルを習得。終わったその日から1本使えるようになります。

💻

実践型ハンズオン

座学だけではありません。その場で手を動かし「使える」技術を学びます。見るだけ参加も大歓迎です。

👥

一緒に作る

ゼロから一緒に作ることで仕組みを理解。「なぜ動くのか」が腑に落ちるので、応用も自分でできます。

✓ Power Automate 未経験・知識ゼロでも大丈夫!今日も「できた!」をひとつ持ち帰りましょう。
4 / 19
SPEAKER

Power Automate 45 (PA45)

Speaker
Haru
Haru
💻 Power Platform / DX 推進
  • 🏢 社内で PA/Copilot ハンズオン講座を開催し、DXを推進
  • 🎤 広島コミュニティ「PLUG」運営・外部コミュニティ登壇
  • 📱 X で初心者向け Power Automate チップスを継続発信
  • 🕐 PA45(45分の "1粒ハンズオン")を毎週開催・運営
今日も一緒に「できた!」を作っていきましょう 😊
5 / 19
PA45 Online Course

ご参加にあたってのお願い (ルール)

Guidelines
🤝

気持ちよく学ぶ

  • 誹謗中傷・不適切な発言は禁止
  • お互いを尊重し合いましょう
🎥

録画について

  • 後日 YouTube 公開予定
  • 匿名参加で表示名を隠せます
💬

チャットは気軽に

  • 「できました!」大歓迎
  • 小さな質問でもOK

🖌️ アウトプットで定着

#PA45 をつけて投稿しよう!「気づき」「これ便利!」何でもOK。

🎓 初心者大歓迎

🚫 難しい専門用語は使いません/🚶 置いてけぼりにしないようゆっくり進行。

6 / 19
Power Automate 入門講座

Vol.20

アダプティブカードTeamsに投稿Copilotで作るプレミアム不要

第20回:アダプティブカードの作り方
そっけない通知が、"リッチカード"に化ける

Theme
出張申請カードを題材に、完成JSONを貼ってTeamsに投稿。Copilotでの作り方も実演
Target
フローは作れるが「通知が地味…」をリッチにしたい方(知識ゼロOK・作れなくても貼るだけ)
Time
解説+その場で一緒に作る 約45分
7 / 19
PA45|第20回 / 掴み

ただの"張り紙"を、押せる"受付ボタン"に ── 通知が化ける

Hook
😪
文字だけの張り紙
読み飛ばされる・動けない
✨ 化ける
申請内容を開く ▸ 👆
押せる受付パネル
一目で分かる・その場で動ける
今日のゴール:JSONを貼るだけで、このカードを自分のTeamsへ
8 / 19
PA45|第20回 / 完成イメージ

これを全員のTeamsに届けます ── アダプティブカードとは

Goal

アダプティブカード=
部品を組み合わせて作るカード

  • 色帯・表・ボタンが乗せられる
  • 明/暗テーマに自動で追従
  • 題材は出張申請(架空・次回の承認ボタンへ続く)
出張申請が届きました
申請者
山田 太郎
技術部 ・ 申請番号 #A-1042
承認待ち
行き先愛知県 名古屋市(本社)
期間7/22(水)〜 7/23(木)・ 1泊2日
目的新ラインの立ち会い・技術打合せ
交通手段新幹線(往復)
概算費用¥42,800
先方の都合で日程が前倒しになりました。ご確認お願いします。
申請内容を開く
9 / 19
PA45|第20回 / 仕組み

"リッチに見える"正体は、この5部品 ── 難しくない

Parts
🎨

① 色帯+アイコン

見出しを Containeraccent で色付け。一気に"製品っぽく"。

🏷️

② 状態バッジ

「承認待ち」を color:Warning で。状態がひと目で分かる。

📋

③ FactSet

「項目:値」が整然と並ぶ。これが業務システム感の正体

④ 強弱のある文字

申請者名を大きく太く。大事な情報が先に目に入る。

⑤ 押せるボタン

Action.OpenUrl で「申請内容を開く」。今回は開くだけ(押して結果が返るのは次回)。

この5つが入るだけで、素のテキストとの落差で「おおっ」となります。逆にテキストだけだと驚きは出ません。
10 / 19
PA45|第20回 / AIと一緒に

JSONは"書かない"。Copilotに頼む ── 頼み方にコツ

Copilot
こういうカードを 作って! あなた Copilot { } 貼るだけJSON
頼み方のコツは3つだけ
  • 「Adaptive Card 1.5」と版を指定
  • 欲しい部品を箇条書きで渡す
  • 「JSONだけ出して」と縛る
頼み方の例:「Adaptive Card 1.5 のJSONを作って。用途はTeamsへの出張申請通知。①青い見出しバー ②申請者名 ③FactSet(行き先/期間/目的/交通手段/費用)④"申請内容を開く"ボタン。説明は不要、JSONだけ。」
11 / 19
PA45|第20回 / 実演

実際にCopilotに頼むと、こう返ってきます ── そのまま動くJSON

Live
Adaptive Card 1.5 のJSONを作って。Teamsへの出張申請通知。①青い見出しバー ②申請者名 ③FactSet(行き先/期間/目的/交通手段/費用)④"申請内容を開く"ボタン。説明は不要、JSONだけ。
Copilot
アダプティブ カード JSONJSON
{
  "$schema": "http://adaptivecards.io/...",
  "type": "AdaptiveCard", "version": "1.5",
  "body": [
    { "type": "Container", "style": "emphasis",
      "items": [ { "type": "TextBlock",
        "text": "出張申請が届きました",
        "color": "Accent" } ] },
    { "type": "FactSet", "facts": [ … ] } ],
  "actions": [ { "type": "Action.OpenUrl", … } ]
}
行き先を大阪に変更して申請者名を入力できるように
貼れるJSONが即・出る
⚠️ でも見出しがグレー地
→ 次:デザイナーで検品
12 / 19
★ 検品 / FINISH

AIの"たたき台"を、デザイナーで仕上げる ── ここが肝

Review

デザイナーに貼って、emphasis → accent に直すだけで"青帯"に。(JSONは手書きせずポチポチ直す・画面は英語)

Copilotの出力
"style": "emphasis"

見出しはグレー地。少しあっさり。

配布版(検品後)
"style": "accent",
"bleed": true

青帯+アイコン+バッジで"驚き"に。

Select host app:Microsoft TeamsTarget version:1.5
CARD ELEMENTS
  • Container
  • FactSet
  • ColumnSet
  • TextBlock
  • ActionSet
出張申請が届きました
山田 太郎
#A-1042
承認待ち
行き先名古屋
費用¥42,800
申請内容を開く
CARD STRUCTURE
▾ AdaptiveCard
 ▾ Container [accent]
  TextBlock
 FactSet
 ActionSet
CARD PAYLOAD EDITOR / 画面で組むとJSONが自動で出る "type":"AdaptiveCard", "version":"1.5"
13 / 19
PA45|第20回 / ハンズオン準備

今日つくるフローは、たった3ステップ ── 全体像

Overview
STEP 1

🖱️ ボタンで開始

「手動でトリガー」。ボタンを押したら動くだけ。

STEP 2

💬 カードを投稿

Teamsアクションに 配布JSONを貼る

STEP 3

🎉 Teamsに届く

実行すると、自分のチームにカードが登場。

🔑 受講生が触るのは1箇所だけ

配布JSONの中の 「申請者: 山田 太郎」を自分の名前に変えるだけ。他は固定で「まず動かす」を優先。

📋 使うアクション

「アダプティブ カードを投稿して応答を待機する」。今回は情報カードなので投稿された時点でOK(応答は次回)。

14 / 19
★ STEP 2 / HANDS-ON

Teamsに投稿するアクションを置く ── 宛先を選ぶだけ

Build
フローを手動でトリガーする
アダプティブ カードを投稿して応答を待機する
アダプティブ カードを投稿…
投稿者 *
フロー ボット
投稿先 *
チャネル
チーム *
PA45 Demo
チャネル *
一般(General)
ここまでは選ぶだけ。投稿者=フローボット、投稿先=チャネル、そして 自分のチームと投稿したいチャネルを選択。次に、肝心の"カード本体"を貼ります。
15 / 19
★ STEP 2 / HANDS-ON

「メッセージ」欄に、配布JSONを貼る ── 直すのは名前だけ

Paste
アダプティブ カードを投稿して応答を待機する
メッセージ *(アダプティブ カード JSON)
{ "type": "AdaptiveCard", "version": "1.5", "body": [ { "type":"Container", "style":"accent", … 出張申請カード … }, { "type":"FactSet", "facts":[ … ] } ], "actions":[ { "type":"Action.OpenUrl", "title":"申請内容を開く" } ] }
✔ 受講生が触るのはここだけ"text": "申請者: 山田 太郎"自分の名前に置き換える。
他は固定でOK金額・行き先はそのまま。まずは 「動いた!」を最優先
コツ:JSONは丸ごとコピペが安全
16 / 19
★ STEP 3 / ヤマ場

テスト実行 → 自分のTeamsにカードが届く 🎉

Ta-da!
  • テスト → 手動 → フローの実行を押す
  • 選んだチームのチャネルにカードが登場
  • 投稿主は 「ワークフロー経由の〇〇」
色は見る人のテーマで変わります。明るいTeamsでは水色帯、暗いTeamsでは濃紺帯に。どちらも狙い通りリッチ。
豆知識:今回のアクションは"応答を待機"するので、投稿後もフローは「実行中」のまま。カードが届けば成功。実行はキャンセルしてOK。
出張申請が届きました
申請者
山田 太郎
技術部 ・ #A-1042
承認待ち
行き先愛知県 名古屋市
期間7/22〜7/23
概算費用¥42,800
申請内容を開く
▲ 実機(暗いTeams)に届いた本物のカード
17 / 19
NEXT STEP

このカードに、次は"押せるボタン"を付けます ── 第21回予告

To be continued
🧾

申請・承認フロー

今日のカードに承認ボタン → 上司が押すだけで回る。

📅

出欠・アンケート

ボタンで回答を集計。Teamsで完結。

🔔

通知の格上げ

いつもの通知を、この型でリッチに置き換え。

今日の型(頼む→検品→貼る)さえ覚えれば、中身を替えるだけで いろんなカードが作れます。まずは1枚、届かせられたら大成功。
18 / 19
PA45|第20回 / 大切なこと

使うときの注意 ── ここだけ押さえる

Cautions
🔐

個人情報を載せない

全員に見える。練習は架空データ

🎯

まずテスト用チャネル

全社チャネルは見た目確認のあとで

🧪

"待機"は止まって当然

投稿できていれば成功・キャンセルOK

免責:本内容は公開日時点の情報です。筆者が実機で学んで試した手順で、Microsoftの仕様・画面は今後変わる可能性があります。最新は公式(Microsoft Learn)もご確認ください。
19 / 19
Thank you!

おつかれさまでした! ── アンケートのお願い

✈💬 そっけない通知が、リッチカードに ── 今日から"見せて伝わる"自動化を!

📝 アンケートにご協力ください

2分で終わります。回答者には参加バッジをお送りします🏅 「ここが分かりにくかった」も大歓迎。次回をもっと良くする力になります。

アンケートに回答する

次回は、このカードに"押せるボタン"を付けます 🔘
また一緒に「できた!」を作りましょう 😊