アダプティブカードの更新

実現方法
この記事は約8分で読めます。

はじめに

ボットにより表示されたアダプティブカードをそのままの場所で更新する方法については、「Sequential flow adaptive cards」というコードサンプルがわかりやすかったので、このコードサンプルを実際に動かすとともに、その肝の部分をまとめてみました。

きれもん
きれもん

本稿とほぼ同じ内容を、デモの実演を交えた下の動画でも確認できます。また、処理や動作のより詳細な内容については、コードサンプルもあわせてご覧ください

updateActivityメソッド

Bot ConnectorのConversationsクラスに、updateActivityという名前のメソッドがあります。このメソッドに新しいActivityオブジェクトを渡すことにより、既存のActivityが上書きされます。

アダプティブカードは、Activityのアタッチメントとして渡されてボット上に表示されるので、新しいActivityに新しいアダプティブカードをアタッチメントとして添付しておけば、Activityの上書きに伴って、そのアダプティブカードも置き換わります。

その際、Activity IDとして、置換元の古いActivityオブジェクトと同じIDを渡し、加えて、新しいActivityオブジェクトのIDも、その古いActivityオブジェクトのIDに揃えておきます。

きれもん
きれもん

要するに、アダプティブカードを更新したいなら、前もって元のActivity IDを保存しておいて、更新したいタイミングで、新しいアダプティブカードが添付されたActivityオブジェクトを、そのActivity IDとともにメソッドに渡してあげればよいわけです。

きれもん
きれもん

アダプティブカードやActivityオブジェクトは、〇〇Factory系のメソッドを使用すれば簡単に作成できるので、つまるところ、アダプティブカードの更新は、実質的にこのメソッドひとつ呼び出すだけで簡単に実現できることになります。

updateActivityメソッドを呼び出すタイミング

Sequential flow adaptive cards」では、ユーザーがアダプティブカードのボタンを押すごとに、そのアダプティブカードを同じ場所で次々と置換させていきます。

きれもん
きれもん

「ユーザーがアダプティブカードのボタンを押す」という動作は、Bot Frameworkでは、Activityオブジェクトのnameプロパティが「adaptiveCard/action」という文字列であるかどうかで識別されます。

Sequential flow adaptive cards」では、nameプロパティが「adaptiveCard/action」である場合に、selectResponseCardという関数の中で、「保存」「更新」「ステータスの変更」といった条件に合致する場合において、updateCardInTeamsという関数を呼び出すようにしておいて、その中でupdateActivityメソッドを実行させています。

具体的には、次のようなステップになります。

1. onInvokeActivityイベントハンドラがアクティビティの発生を検知して反応する。

2. その際、アクティビティのnameが「adaptiveCard/action」ならば、selectResponseCard を呼び出す。

3. selectResponseCardの中で、条件(prefixという定数で表現される)が「保存」「更新」「ステータスの更新」のいずれかに合致していれば、「アクティビティの更新」(ひいては「アダプティブカードの書き換え」)を実行する関数である、updateCardInTeamsを呼び出す。

4. updateCardInTeamsの中で、前節で説明したとおり、新しいアダプティブカードが添付されたActivityオブジェクトを、元のアクティビティのActivity IDとともに、updateActivityメソッドに渡して実行する。

「Sequential flow adaptive cards」の3つの動作

Sequential flow adaptive cards」では、今回のテーマである、「アダプティブカードをそのままの場所で更新する」(Up-to-date cardsアップトゥデイト カード)だけでなく、「参加者の役割に応じてアダプティブカードを切り替えて表示する」(Contextual viewsコンテクスチュアル ビュー)や、「参加者が並行して、待機・追尾しながらワークフローを進めていく」(Sequential workflowシーケンシャル ワークフロー)といった動作も実現しています。

きれもん
きれもん

参加者の状態遷移を管理し、参加者の状態ごとにアダプティブカードの内容を切り替えることにより、「アップトゥデイト カード」だけでなく、「コンテクスチュアル ビュー」「シーケンシャル ワークフロー」についても、updateActivityメソッドを使用して実現が可能です。

以下に、「Sequential flow adaptive cards」のどの部分がそれぞれ上記3つの動作に対応しているかについて、上記動画の実演で示したデモを参照しながら簡単に触れておきます。

アップトゥデイトカード(Up-to-date cards)

たとえば、「Sequencial flow Adaptive Card」というボットコマンドを実行して表示されるアダプティブカードの [Create New Incident] (インシデントを新規作成) というボタンを押すと、

アダプティブカードが同じ場所で置き換わって次のようなアダプティブカードが表示されます。

同様に、このあと順次、表示されたアダプティブカードのボタンを押すことにより、次々に新しいアダプティブカードが同じ場所に置き換わって表示されていきます。

これが、前節で説明した、updateActivityメソッドによるアクティビティの置き換え操作である、「アップトゥデイト カード」(Up-to-date cards)という動作にあたります。

コンテクスチュアル ビュー(Contextual views)

デモにおいては、次々に表示されるアダプティブカードのうち、下図のアダプティブカードの [Save]ボタンを押したタイミングで、3人の参加者に対して、それぞれ異なるアダプティブカードが表示されます。

きれもん
きれもん

デモの中では、「Administrator」「Miyoko Suzuki」「Taro Yamada」という3人の参加者がTestGroup1という名前のグループ上でボットとやり取りしています。

たとえば、デモに登場する3人の参加者「Administrator」「Miyoko Suzuki」「Taro Yamada」のうち、「Administrator」には、インシデントの作成者なので、[Edit]ボタンが付いたアダプティブカードが表示され、

Taro Yamada」には、割り当てられた担当者(Assigned To)なので、[Approve]ボタンと[Reject]ボタンが付いたアダプティブカードが表示され、

Miyoko Suzuki」には、割り当てられた担当者ではないので、ボタンの付いていないアダプティブカードが表示されます。

これが、参加者ごとに表示させるアダプティブカードを切り替える、「コンテクスチュアル ビュー」(Contextual views)という動作にあたります。

シーケンシャル ワークフロー(Sequential workflow)

Sequential flow adaptive cards」では、ワークフローの状態遷移に応じて、参加者の状態ごとに表示するアダプティブカードを切り替え、各参加者はそれに応じてアダプティブカードに応答することにより、待機と追尾を繰り返して全体のワークフローを進めていくという「シーケンシャル ワークフロー」(Sequential workflow)という動作も実現されています。

きれもん
きれもん

前節では、表示されたアダプティブカードにボタンが表示されるかされないかによって、「Taro Yamada」が、表示されたアダプティブカードに追尾する(ボタンを押して応答する)側に、「Miyoko Suzuki」が、次のアダプティブカードが表示されるまで待機する(次のアダプティブカードを待つ)側に、それぞれなっていました。

たとえば、「Administrator」が[Update]ボタンを押して、担当者の割り当てを「Taro Yamada」から「Miyoko Suzuki」に変更した場合、

先ほどの場合とは逆に、「Taro Yamada」のほうにボタンのついていないアダプティブカード、

Miyoko Suzuki」のほうに[Approve]ボタンと[Reject]ボタンが付いたアダプティブカードが表示されます。

きれもん
きれもん

前節とは逆に、「Miyoko Suzuki」が、表示されたアダプティブカードに追尾する(ボタンを押して応答する)側に、「Taro Yamada」が、次のアダプティブカードが表示されるまで待機する(次のアダプティブカードを待つ)側に、それぞれ変化しました。

このように、「Sequential flow adaptive cards」では、「シーケンシャル ワークフロー」(Sequential workflow)という動作も実現されています。

まとめ

アダプティブカードの更新は、updateActivityメソッドを使用したActivityオブジェクトの更新により実現できました。

コメント

タイトルとURLをコピーしました