見出し画像

Teamsのアダプティブカードを使ってみた

岩澤　樹/NPO業務Hack

Slackみたいに、特定のスタンプを押下したらNotionに連携するというようなことを実装したいのですが、Teamsの場合それをうまくやるのがとても難しいです。（カスタムスタンプがない、かつ、スタンプがひとつしか押下できないので）

そのため、今回はPower Automateを起動し、スレッドの内容を取得したテキストをNotionに連携するフローを作成して代替しようと思います。
※Logic Appsを使って、特定のトリガーで自動起動させることも可能なので、そっちもやってみようと思います。

完成イメージ

  1. スレッドのメニューから、「Notionへの起票」をクリックします

  2. チャンネルに問い合わせの内容を起票するフォーム（アダプティブカード）を投稿

  3. フォームに回答すると、Notionへ連携（※今回は実装しないです）

「notionへの起票」ボタンの押下
フォームの投稿と、回答の返信

Teamsで回答内容を返信していますが、Power AutomateやLogic Appsを用いたNotionへの連携は以下記事を参考に。


アダプティブカードの投稿

まずPower Automate側で設定をしていきます。
インスタント クラウド フローで、「選択されたメッセージに対して」を選択します。これで、選択したスレッドのテキストを取得して変数として次のアクションへ引き継ぐことができます。

アダプティブカードを作成するのですが、主な方法としてポップアップ表示させるのと、チャンネルに投稿して起票してもらうやりかたの２種類があります。ポップアップの場合は、カードの種類IDを指定できないこと、初期値として選択したスレッドのテキストを利用することができなさそうなので、今回はチャンネルに投稿する方法を選択しています。

チャットやチャネルにカードを投稿するアクションにて、カードの初期値を設定していきます。投稿するチャネル、チームは選択したスレッドにしています。
特に重要なのが、Card Type IDになります。これがないと後続の処理で失敗します。

以下今回利用したサンプルのJSONです。

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.4",
    "body": [
        {
            "type": "TextBlock",
            "text": "登録者",
            "wrap": true
        },
        {
            "type": "Input.Text",
            "placeholder": "Placeholder text",
            "id": "ContactUser",
            "value":"@{triggerBody()?['teamsFlowRunContext']?['messagePayload']?['from']?['user']?['displayName']}"
        },
        {
            "type": "TextBlock",
            "text": "問い合わせ内容",
            "wrap": true,
        },
        {
            "type": "Input.Text",
            "placeholder": "Placeholder text",
            "id": "Content",
            "isMultiline": true,
            "value":"@{triggerBody()?['teamsFlowRunContext']?['messagePayload']?['body']?['plainText']}"
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "登録"
        }
    ]
}

設定は以上になります。


アダプティブカードの作成

アダプティブカードは専用のブラウザアプリで作成し、そこで発行されたJSONをコピーして使います。

左側のメニュー（Card Elements）から各パーツをドラック＆ドロップで配置し、配置したパーツに対して画面右にあるプロパティ（Element Properties）を設定していきます。
作成後は、画面下（Card Payload Editor）に表示されたJSONをコピーします。

登録されたアダプティブカードの対応

アダプティブカードが登録された場合のフローを新規に作成します。
実際は、Notion DBへ登録する処理が、JSON解析と、チャネル応答の間に入ります。

最初のトリガー部分には、アダプティブカードの作成と同一のJSONを設定しておきます。また、カードの種類IDに関しては、前フローで設定したCard Type IDを入力します。

JSON解析は、一度応答のテストをして、そこから出力データ取得して作成しています。Element IDも異なると思いますので、実際のデータで確認ください。

今回は、アダプティブカードの問い合わせ者を「ContactUser」、問い合わせ内容を「Content」でElement IDを指定しています。JSON解析で取得できたそれらをメッセージに当てはめています。

同じ要領でNotionへのインプットデータとして活用できると思います。

まとめ

これ以外にも、選択したスレッドを直接Notionに連携することも可能です。ただ、その場合は、Notionを開き重要度やその他必要な情報を手動で入力する必要があるため、一度こういったフォームを挟んだ方が楽かなと感じています。

ただ、アダプティブカードの運用は使いやすいか？といわれたら「そうでもない…」と言わざるを得ないので、こういう運用はおススメはしないです笑
無難に、専用のアプリと連携するか、「タスクの作成」などの標準機能を使った連携をするのが良いかもしれないです。

どうするとよりユーザーが使いやすく、管理もしやすい形が実現できるのか引き続き模索していきたいと思います。

それではまた来週！

この記事が気に入ったらサポートをしてみませんか？