---

はじめに

Microsoft 365 を担当させていただいている三島です。今回も業務改善やDX推進のヒントになる話題を皆様にお届けしたいと思います。

今回は Power Automate で、アダプティブカードを使った残業申請フローを作成してみたいと思います。アダプティブカードというのは、テキストや画像、ボタン等を、1枚のメッセージカードとして送信することができる機能で、チャットやメール等で使用することができます。相手に返答を求めるアクションボタンを加えたり、そのアクションから他のシステムデータを更新したりすることもできます。

アダプティブカード（以降：カード）はJSON（JavaScript Object Notation）と呼ばれる形式で作成するのですが、JSONが初めての方でも、無償で利用することができる「アダプティブカードデザイナー」というツールを使用すれば、簡単に作成することができます。ドラッグ＆ドロップ操作と、わずかなキー入力で作成することができますので、ぜひトライをしてみてください。

さて、今回使用するPower Automate は、Microsoft 365 製品のひとつです。

当コラムの内容を試してみたい方は、下記ライセンスが必要となります。

• Microsoft 365 Business Basic
• Microsoft 365 Business Standard
• Microsoft 365 Business Premium
• Microsoft Enterprise E1, E3, E5

もし、ライセンスをお持ちでない場合でも、Microsoft社から提供されている開発者プログラムに参加をすることでお試しいただけますので、下記サイトを参考に手続きをしてみてください。

Microsoft 365 開発者プログラム
https://learn.microsoft.com/ja-jp/office/developer-program/microsoft-365-developer-program

Microsoft 365 のライセンス購入に関してご不明な点がございましたら、ディーアイエスサービス＆ソリューションまで気軽にご相談ください。

---

Power Automate フローの構成

残業申請フローの構成は以下のようになっています。

---

アダプティブカードを作成する

フローを作成する前に、アダプティブカードの準備をします。アダプティブカードデザイナーは下記サイトから利用することができます。

https://www.adaptivecards.io/designer

サイトにアクセスをすると、アダプティブカードデザイナーが開きます。画面の中央にはカードのサンプルが表示されていますが、画面左上にある「New Card」ボタンを選択すると、新しいカードを作成するためのポップアップが表示されます。

ポップアップにはいくつかのカードサンプルが表示されていますが、サンプルを使用せずにカードを作成する場合は「Blank Card」を選択します。

「Blank Card」を選択すると、何も無い状態でカードが表示されます。カードにはバージョンがあり、現行のTeams に対応しているバージョンは1.4までとなっています。カードを作成する際は、必ず最初にバージョンを1.4以下に変更をしてください。（確認日：2024年）

開発画面の使い方について説明いたします。カードにセットする、テキストやボタン等はエレメントと呼ばれます。エレメントをカードにセットするには、左にあるエレメント一覧からエレメントを選択し、ドラッグ＆ドロップで並べます。カードにセットしたエレメントの詳細情報は、画面右にあるプロパティで確認できます。作成したカードのJSONは画面の下にある「CARD PAYLOAD EDITOR」に自動表示されます。また、JSONを直接修正することでもカードの内容を変更できます。

今回作成するカードの設定方法を下図に示していますので、参考にしながらエレメントを設定してみてください。5つのエレメントで作成しており、エレメントをドラッグ&ドロップでカードにセット、プロパティを修正するだけで完成します。

正しく設定ができていると、下図のように「CARD PYLOAD DDITOR」にJSONが書き出されます。このJSONは後述するPower Automate の設定で使用しますので、テキストエディターなどに貼り付けて保存をしておきます。

JSON（JavaScript Object Notation）

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.4",
    "body": [
        {
            "type": "TextBlock",
            "text": "残業申請",
            "wrap": true
        },
        {
            "type": "Input.ChoiceSet",
            "choices": [
                {
                    "title": "残業あり",
                    "value": "残業あり"
                },
                {
                    "title": "残業なし",
                    "value": "残業なし"
                }
            ],
            "placeholder": "Placeholder text",
            "style": "expanded",
            "id": "overtime"
        },
        {
            "type": "Input.Time",
            "id": "closingtime",
            "label": "終業予定時刻",
            "value": "18:00"
        },
        {
            "type": "Input.Text",
            "placeholder": "残業の場合は理由を記入",
            "id": "reason",
            "label": "残業理由"
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.Submit",
                    "title": "送信",
                    "id": "send"
                }
            ]
        }
    ]
}

---

スケジュール済みクラウドフローの構築

Microsoft 365 のホームより、Power Automate を起動します。今回作成するフローは「スケジュール済みクラウドフロー」です。フロー名を入力し、実行間隔を設定します。開始日はフローを開始する日時、繰り返しの間隔は1週間で、月曜日から金曜日の間だけ実行されるように設定します。「作成」ボタンを押すとフローが作成されます。

---

Recurrence の設定

「スケジュール済みクラウドフロー」を作成すると、最初に表示されるトリガーが「Recurrence」です。ポップアップでは設定できなかった箇所をパラメータから設定します。Time Zoneが未選択の状態になっているはずですので、「（UTC+09:00）大阪、札幌、東京」をセットします。「At These Hours」と「At These Minutes」にはフローが実行される時刻をセットします。下図の例では17時にフローを実行するようにセットしています。

---

Data Operation の設定

アダプティブカードの送信先メールアドレスを設定します。アクションの追加でランタイムのドロップダウンを「組み込み」にセットすると「Data Operation」が表示されます、続いて「Data Operation」のリストの中から「作成」を選択してアクションを追加します。
「作成」のアクションを選択すると、左側にパラメータが表示されますので、送信先のメールアドレスを[]の中にセットします。メールアドレスはダブルコーテーション（“）で囲み、複数のメールアドレスをセットする場合はカンマで区切ります。

---

Control の設定

アダプティブカードは複数のメンバーに送信する可能性がありますので、先程セットしたメールアドレスの数だけ送信処理を繰り返す必要があります。処理を繰り返すには「Control」の「それぞれに適用する」というアクションを使用します。
アクションには「Select An Output From Previous Steps」という入力フォームがありますので、雷のアイコンを選択し、前のアクションで設定した「作成」の「出力」をセットします。

---

Teams の設定

繰り返し処理の中にTeamsのアクションを追加します。追加するTeamsのアクションは「アダプティブ カードを投稿して応答を待機する」です。投稿者はフローボットを設定、投稿先は「Chat with Flow bot」を選択します。この設定でTeamsチャットにボットがカードを送信してくれるようになります。メッセージは、アダプティブカードデザイナーに表示されていたJSONをコピー＆ペーストでセットします。Recipientはカードの受信者ですので「それぞれに適用する」の「Current item」を選択します。ここには「作成」アクションでセットしたメールアドレスが、繰り返し処理の順番でセットされます。

---

Outlook の設定

カードで入力された内容を、管理者にメール送信します。追加するアクションはOutlookの「メール送信（V2）」です。宛先は残業を承認する管理者のメールアドレスを設定します。件名は自由ですが、「残業申請」とします。本文にはメール本文を設定。出力項目は、申請者、残業有無、終業予定時刻、残業理由とし、カードで入力された内容を表示します。

---

メール本文にカード操作者の名前を表示する

メール本文にカード操作者の名前を表示するには、雷アイコンを選択し、「アダプティブカードを投稿して応答を待機する」から「displayName」を選択します。

---

カードの入力内容を表示する

カードの入力内容を表示するには式が必要となります。「fx」アイコンを選択すると式を作成するフォームが開きます。「アダプティブカードを投稿して応答を待機する」から「出力」を選択して式を表示します。続いてカードのIdを指定します。例えば「残業有無」を表示するには、式の後ろに ?[‘body/data/overtime’] を追加します。「overtime」とは、アダプティブカードデザイナーで設定した、エレメント「Input.ChoiceSet」のIdです。先頭に「?」がありますが、「?」をセットすることで、以降の情報が返ってこなくてもエラーとはせず、nullで返すことができるようになります。必須ではない項目では必ず追加します。

---

当コラムのフローでセットしている内容を以下に記載していますので、試される場合は参考にしてください。式を追加すると自動的に「@｛｝」が追加されますが、式を意味していますので、そのままにしておきます。

残業申請
申請者：@{body(‘アダプティブ_カードを投稿して応答を待機する’)?[‘responder’]?[‘displayName’]}
残業有無：@{outputs(‘アダプティブ_カードを投稿して応答を待機する’)?[‘body/data/overtime’]}
終業予定時刻：@{outputs(‘アダプティブ_カードを投稿して応答を待機する’)?[‘body/data/closingtime’]}
残業理由：@{outputs(‘アダプティブ_カードを投稿して応答を待機する’)?[‘body/data/reason’]}

---

フローの実行結果

毎日定刻になると残業申請フローが起動し、Teamsチャットにカードが送信されます。利用者はカードの内容を入力して、送信ボタンを押します。入力された内容は管理者へメールで送信されます。

---

当社活用事例

今回ご紹介いたしましたアダプティブカードですが、当社でも出退勤アプリの打刻カードとして運用しています。毎朝Teamsチャットに打刻カードが送信されますので、アプリを起動することなく、直接チャットから素早く打刻でき、打刻忘れも防止できます。

---

さいごに

アダプティブカードは、アイデア次第で、とても便利に使うことができる機能だと思いますので、ぜひ皆様もトライしてみてください。それでは次回もお楽しみに。

---

本コラムは2024年8月現在の情報を基に作成しています。

---

Power Platform 製品関連情報・サービス

---

Microsoft Power Apps ハッカソン、イベント登壇レポート

---

Power Platform 導入事例