Workbot for Microsoft Teams でユーザー選択コントロールを使う

# はじめに
Workbot for Microsoft Teams を使えば、チャット上で人とのインタラクションを実現でき、人が介在する業務全体の自動化を行うことが可能になります。例えば、Teams のチャット上で管理者の変更、あるいは、アクセス権を付与するユーザーを決定する場合、Workbot の上で Microsoft 365 内のユーザーを指定させる必要がございます。

このケースにおいて、もっとも単純な方法は、テキスト入力ボックスを使ってメールアドレスを入力させる方法です。しかし、利用者が名前からメールアドレスを調べる手間がかかり、メールアドレスの入力間違いのリスクもあります。そのため、チェックと訂正の機能を実装する必要が生じ、結果的に実装コストの増加へとつながってしまいます。

では、この問題を解決するよい方法はないのでしょうか？

# カスタムの Adaptive Card を使うことで、ユーザー選択コントロールを作成することが可能

「[Workbot for Microsoft Teams でリッチな画面を作成する](https://qiita.com/n-inoue/items/d2be7232283d1f023154)」の記事でご紹介した通り、Workbot for Microsoft Teams では、Adaptive Card によりチャット上の画面を描画しています。

カスタムの Adaptive Card を記述し、「[アダプティブ カードのユーザーピッカー](https://learn.microsoft.com/ja-jp/microsoftteams/platform/task-modules-and-cards/cards/people-picker)」を使うことで、次のようなユーザー選択コントロールのUIを簡単に作成することが可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3444315/843d0933-5af4-aca5-c46b-e06dbea51968.png)

このように、名前やメールアドレスなどを元に検索を行うことも可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3444315/8cfd08bd-9883-5d38-8276-9f7f9577c178.png)

選択したユーザーの上にカーソルを当てれば、ユーザーの詳細情報も確認可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3444315/96c8e455-58d9-ffa8-e6ef-d8e5a9d469a5.png)

# ユーザー選択を行う Workbot を作成する手順
### レシピの全体構成

今回作成するレシピの全体構成です。ユーザー選択を行う画面を表示する「レシピ１」と、[ユーザーを選択]ボタンのクリックをトリガーに動き、選択されたユーザーを受け取って結果を表示する「レシピ２」で構成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3444315/9262ca89-b573-d166-219e-d42a82a356f2.png)

### ユーザー選択を行うレシピの作成（レシピ1）
「Post reply (old version)」アクションを選び、カスタムの Adaptive Card を記述するために、[Post a raw JSON instead] を 「Yes」に設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3444315/dafd5edc-1b05-cfb3-1c2e-a1686eb39bf5.png)

[Raw message] に、次の JSON を記述します。「people_picker」というIDの部分が、ユーザー選択コントロールになります。今回は、複数ユーザーの選択を可能にするため、isMultiSelect を true にしていますが、false にすることで単一ユーザーを選択させるように変更も可能です。詳細な仕様については、公式サイト「[アダプティブ カードのユーザーピッカー](https://learn.microsoft.com/ja-jp/microsoftteams/platform/task-modules-and-cards/cards/people-picker)」をご覧ください。

```json
{
  "type": "message",
  "attachments": [
    {
      "contentType": "application/vnd.microsoft.card.adaptive",
      "content": {
        "type": "AdaptiveCard",
        "body": [
          {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "M365上のユーザー検索"
          },
          {
            "type": "Input.ChoiceSet",
            "choices": [],
            "choices.data": {
              "type": "Data.Query",
              "dataset": "graph.microsoft.com/users"
            },
            "id": "people_picker",
            "isMultiSelect": true
          }
        ],
        "actions": [
          {
            "type": "Action.Submit",
            "title": "ユーザーを選択",
            "data": {
              "bot_command_name": "sample_list_selected_users",
              "bot_command_params": ""
            }
          }
        ],
        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
        "version": "1.4"
      }
    }
  ]
}
```

### 選択されたユーザーを表示するレシピの作成（レシピ2）

カスタムの Adaptive Card を使った際の、パラメーターの受け渡し方については、「[Workbot for Microsoft Teams でパスワード入力 を行う](https://qiita.com/n-inoue/items/2a018cb80c5b188086d5)」をご覧ください。
今回の例では、次のような対応関係となります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3444315/ee483323-4a95-e776-70a7-eb07e182ec6e.png)

今回、people_picker には、選択したユーザーのIDがカンマ区切りで渡ってきます。そのため、カンマ区切りの文字列を、配列に変換します。今回は、変換に 「Ruby アクション」を利用します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3444315/37147edf-a88c-b8d5-098b-d0abce46dc1c.png)

カンマ区切りの文字列の配列への変換は、split を使えば１行で実行することが可能です。

```ruby
{
	user_ids: input['user_ids_separated_by_comma'].split(',')
}
```
あとは、ユーザーIDの配列に対してユーザーIDからユーザー情報を取得し、取得した結果を表示するアクションを追加すれば、レシピは完成です。

### レシピの実行結果

「レシピ１」でユーザーを選択し、選択されたユーザーの名前を「レシピ２」で表示した結果です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3444315/eb019719-8961-3a77-4246-e4546abb6a95.png)


# まとめ
まとめると、以下のようになります。

* カスタムの Adaptive Card を使えばユーザー選択コントロールを作成可能
* 選択されたユーザーは、カンマ区で区切られたユーザーIDの文字列として取得可能
* カンマ区切りのテキストの配列への変換は ruby アクションが便利

# おわりに
いかがでしょうか？ カスタムの Adaptive Card を用いることで、標準機能では作成できないユーザー選択コントロールを作成することができます。Adaptive Card のポテンシャルを最大限活用するには、カスタムの Adaptive Card を使用するのは、非常に力強い方法です。

なお、ユーザーを一覧から選択させるだけであれば、Typeahead search という機能を使うことで、標準機能でもある程度近いものを作ることは可能です。こちらについても、別な機会にご紹介できればと思います。

Workatoの導入・導入後の活用などでお困りの場合、Workatoリセラーにご相談する方法もございます。お困りごとがございましたら、認定リセラーの[当社](https://www.hitachi-solutions.co.jp/rpa/sp/products/workato/?utm_source=sns&utm_medium=qiita&utm_campaign=dd120751667a0804ad0c)へ是非ご相談ください。

# 参考リンク
* 株式会社 日立ソリューションズ
    * [Workato ご紹介サイト](https://www.hitachi-solutions.co.jp/rpa/sp/products/workato/?utm_source=sns&utm_medium=qiita&utm_campaign=dd120751667a0804ad0c)
* Workato 公式サイト
    * [Workbot for Microsoft Teams](https://docs.workato.com/workbot-for-teams/workbot.html)
    * [Adaptive card blocks for Microsoft Teams](https://docs.workato.com/workbot-for-teams/adaptive-card-blocks.html#use-column-set-and-column-blocks-to-fully-customize-message-structure)
* 本記事のサンプルレシピ
    * [[Example] Select users](https://app.jp.workato.com/recipes/375069?st=1247e6d4890ab7ff4de4ea28abf77a32dd6fec35ecb64ebbda0313b23ed2daa7) (JPDC利用者向け)
    * [[Example] List selected users](https://app.jp.workato.com/recipes/375068?st=12d06c8a8ff39b8ddc969324ac92a1b05f02d162465edbe386b429b82e8acee8) (JPDC利用者向け)
    * [[Example] Select users](https://app.workato.com/recipes/46385140?st=e7e74298240287d91112ec240a77c783358c5c5ad3a5afa47e3c54d69e5e5cb7) (USDC利用者向け)
    * [[Example] List selected users](https://app.workato.com/recipes/46385133?st=9894480e3cc83f7b1dff68f3342f7371b63cac7adc86998c413b2eaaf73b11db) (USDC利用者向け)
* Adaptive Card 関連
    * [アダプティブ カードのユーザーピッカー](https://learn.microsoft.com/ja-jp/microsoftteams/platform/task-modules-and-cards/cards/people-picker)
    * [Microsoft Teams 向けアダプティブ カードの概要](https://learn.microsoft.com/ja-jp/power-automate/overview-adaptive-cards)