Power Autoate でタケノコニョッキをするフロー

# はじめに
今回の成果物です。
[【イラスト】たけこのこニョッキのルールと遊び方](https://45mix.net/takenoko-nyokki/)


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">たけのこ たけのこ にょっきっき！ <a href="https://t.co/TUqTD6vXWz">pic.twitter.com/TUqTD6vXWz</a></p>&mdash; おいしみ (@ksgiksg) <a href="https://twitter.com/ksgiksg/status/1664647881037598725?ref_src=twsrc%5Etfw">June 2, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Teamsのメッセージの作成ボックスからフローを起動して、一緒に遊ぶメンバーを選びます。
選んだメンバーとのグループチャットが作成され、Botからアダプティブカードが投稿されます。
カードのボタンを押した順に『〇にょき！』し、同じタイミングでボタンを押してしまうと『〇にょき！』の番号が被ってしまい負けになります。

:::note warn
今回、勝敗の判定は行っていません。
:::

# 使用している技術的な要素
お遊びのフローですが、いくつかPowerAutomate の技術的な要素を含みますので、それらの解説をしていきます。

- ユーザーを選択するアダプティブカード
- マイリスト(個人のLists)をPower Automate で操作する
- アダプティブカードとリストを連携させる


# ゲームを開始するフロー
このゲームを成立させるためには2つのフローが必要です。
１つ目がこの、ゲームを開始するフローです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/3ec35411-d4bc-30bf-b415-fb486f01de89.png)
作成ボックスから開始して、グループチャットにアダプティブカードを投稿するまでを担当します。

## ユーザーを選択するアダプティブカード
トリガーにはTeamsコネクタの「**作成ボックスから**」を使用しています。
このトリガーはTeamsから自分の好きなタイミングで呼び出せるので、とても便利なトリガーです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/40190c9e-1c07-d8ad-e97a-aa7c7086bb87.png)
このトリガーは**アダプティブカード**を作成することで、フローの起動時にユーザーからの入力を受け付けることができます。
これを使って、このフローの開始時に一緒に遊ぶユーザーを選択できるようにしています。

さて、アダプティブカードの作成は、このトリガーの「**アダプティブ カード の編集**」をクリックした次の画面で直感的な操作で作成することができますが、ユーザーを選択するInput要素はこの選択肢の中にありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/8c22b99e-b699-59c0-372b-5d144364fef4.png)

これは[アダプティブカードデザイナー](https://adaptivecards.io/designer/)でも同じことで、GUI操作でユーザーを選択する要素を追加することはできません。
**つまり、自分でアダプティブカードのJsonを編集して追加する必要があります。**

このユーザーを選択する要素、`ユーザー ピッカー`の詳細はこちらのページに記載されています。

https://learn.microsoft.com/ja-jp/microsoftteams/platform/task-modules-and-cards/cards/people-picker?tabs=desktop

こちらのページをよく読み、Jsonを自分で編集する必要がありますが、今回は[このページの例](https://learn.microsoft.com/ja-jp/microsoftteams/platform/task-modules-and-cards/cards/people-picker?tabs=desktop#example)をちょっとだけ変更して作成します。

```JSON:サンプルコード
{
 "type": "AdaptiveCard",
 "body": [
  {
   "type": "TextBlock",
   "size": "Medium",
   "weight": "Bolder",
   "text": "People Picker with Org search enabled"
  },
  {
   "type": "Input.ChoiceSet",
   "choices": [],
   "choices.data": {
    "type": "Data.Query",
    "dataset": "graph.microsoft.com/users"
   },
   "id": "people-picker",
   "isMultiSelect": true
  }
 ],
 "actions": [
  {
   "type": "Action.Submit",
   "title": "Submit"
  }
 ],
 "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
 "version": "1.2"
}
```

基本的にはそのまま使用できますが、ラベルを以下のようにちょこちょこっと書き換えて完成です。

```JSON:編集したサンプルコード
{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "2人以上追加してね！"
        },
        {
            "type": "Input.ChoiceSet",
            "choices.data": {
                "type": "Data.Query",
                "dataset": "graph.microsoft.com/users"
            },
            "id": "people-picker",
            "isMultiSelect": true
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "ゲーム開始"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}
```
これでフローの起動時にユーザーを選択できるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/98c5497e-fc92-68ce-95cd-500d1191731f.png)


## グループチャットの作成
先ほど選択できるようにしたユーザーとのグループチャットを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/caa37ea0-443d-8938-c7f4-ddeb0e0e2d2b.png)
「チャットの作成」アクション、[追加するメンバー]に動的なコンテンツからトリガーの`people-picker`を指定します。

アダプティブカードの要素として指定したIDで取得される入力値ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/706278b7-0b18-d299-d50e-b75013cc73ca.png)

このアダプティブカードの出力`people-picker`はカンマ区切りのユーザーIDです。なので、[追加するメンバー]にそのまま入力すればグループチャットの作成が可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/33bea8c4-a876-9675-8ea7-1a470184b226.png)

## 項目の作成
後の工程に関係する部分ですが、**「ニョッキ！」が何番目かを記録する**ためのデータをListsに作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/60d27655-ed79-4461-0ac2-dcc6f67e90da.png)

SharePointリストでもよいのですが、個人の始めた遊びのためにチームのSharePointリストを使うのも忍びないので、**個人用Lists**を使用しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/885d6f26-cf44-a78d-2d57-1a2a07f81b3d.png)
タイトルに作成したグループチャットのIDを、ニョッキした人を記録するためのpeople列も用意していますが、数値を記録するための列があればOKです。int列として、初期値「1」で作成しています。

またこのアクションはSharePointコネクタ、Listsの保存場所は個人用ListsなのでOneDriveと異なっています。
しかし、OneDriveとSharePointは根幹では同じようなものなので、このSharePointコネクタのアクションでOneDriveのListsも操作できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/fe6a6f3d-52f0-9bf0-1b53-54706ae9395e.png)

なので、OneDriveのURLを入力することで個人用ListsもPower Automate から操作することが可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/2ea04aa9-a15d-1bf6-06aa-0e36eefe049c.png)

## チャットやチャネルにカードを投稿する
最後に、ゲーム用の「ニョッキ！」宣言ボタンのついたアダプティブカードを投稿します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/3b2d8b38-ba85-9ea2-c500-d1059aa411d5.png)

カード自体は単純な作りですが、**先ほど作成したListsの項目と連携できる**ようにしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/440c3fe0-7356-18a9-680a-d3aa6b9dcc31.png)

具体的には、アクションボタンの`data`プロパティにListsのIDを指定します。これによって、ボタンを押したときに後続のフローでIDを受け取ることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/4fb8df35-c7a5-96a6-400a-399fcdd37867.png)


```JSON:Adaptive Card
{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.4",
    "actions": [
        {
            "type": "Action.Submit",
            "title": "〇にょき！",
            "data": {
                "spoID": @{outputs('項目の作成')?['body/ID']}
            }
        }
    ],
    "body": [
        {
            "type": "TextBlock",
            "text": "番号が重複しないように\n\nタイミングよくボタンを押そう！",
            "wrap": true
        }
    ]
}
```
アダプティブカードの扱いについては、Miyakeさんのスライドがとってもとってもわかりやすいです。

https://speakerdeck.com/miyakemito/power-automatedefalseadaptive-cards-ji-ben-bian?slide=53

また、`Card Type ID`に任意のテキストを入力します。
このテキストは、次のフローのトリガーで使用するので控えておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/872541da-f5ea-1031-60f7-d5313959e230.png)



# ニョッキ！を宣言するフロー
ボタンを押したときに「〇にょき！」するためのフローです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/0ccd20cf-5819-fb2f-4f92-109a025f0ee1.png)
フローの全体像はこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/222e87bb-499c-bc4e-6d69-db078bf828f8.png)

## When someone responds to an adaptive card
カードのボタンが押されたときに起動するトリガーです。
`アダプティブ カードの入力`と`カードの種類 ID`には、先ほどカードを作成した情報と同じ情報を入力します。
ただし、ListsのIDを指定していた動的なコンテンツは削除し、適当な値(この場合は「1」)に変えておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/72d7117d-0032-9970-d64c-32c023a1b496.png)

:::note info
スキーマが指定できていれば良いので、出力の値は違っていても問題ありません
:::

## にょき！番号の取得と更新
何番目にボタンを押したかを取得し、次のために番号を1つ進めるための部分です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/803e7726-3eac-b784-0de2-108481f45d3e.png)

`サイトのアドレス`は先ほど同様OneDriveのURLを、`ID`にはカードの出力で返したListsのIDを設定します。
```PowerFx:spoID
@{triggerBody()?['entity/cardOutputs/spoID']}
```

更新アクションではintを+1するために、以下の数式を入力しています。
```PowerFx:spoID
@{add(outputs('項目の取得')?['body/int'],1)}
```

また、間に5秒の待ち時間を入れているのは、わざと宣言がかぶりやすくするためのゲーム性の調整のためです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/a429f7df-f305-7d66-141f-83093210e502.png)

## にょき！の投稿
最後に、取得したにょき番号を投稿します。
Botからの投稿になりますが、誰が宣言したかがわかるようにユーザーの@ mentionを使用しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/13db3998-6c30-1154-b6e8-8a1eebcceaf2.png)

@ mentionを取得するための、ボタンを押したユーザーのIDや、投稿先グループチャットのIDはトリガーのアウトプットに含まれており、動的なコンテンツから指定することが可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/eeb225d9-33ac-bb08-f129-81d72e28fb49.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2572227/4be57b9e-3bb1-956c-a694-8c58a2ac8321.png)

# さいごに
作成したフローのサンプルを公開します。

https://github.com/ksgiksg/Power-Automate/blob/main/%E3%82%BF%E3%82%B1%E3%83%8E%E3%82%B3%E3%83%8B%E3%83%A7%E3%83%83%E3%82%AD%E3%83%BB%E9%96%8B%E5%A7%8B%E7%B7%A8_20230618152951.zip

https://github.com/ksgiksg/Power-Automate/blob/main/%E3%82%BF%E3%82%B1%E3%83%8E%E3%82%B3%E3%83%8B%E3%83%A7%E3%83%83%E3%82%AD%E3%83%BB%E3%83%8B%E3%83%A7%E3%83%83%E3%82%AD%E7%B7%A8_20230618152931.zip