【Power Apps】リッチテキストエディタに入力した画像・テキストをそのままTeamsに投稿する方法

以下のふーさんに対するおいしみさんのリプを見て、**Power Apps単体でTeamsに画像を含むテキストの投稿**を実際にやってみた記事です。

https://twitter.com/ksgiksg/status/1756320165443391757?s=20/

https://twitter.com/PowerPlatform4/status/1756678482464322030?s=20/

## 普通にリッチテキスト内に画像を貼り付けて投稿してもTeams上では表示できない

リッチテキストエディタ（RichTextEditor1）とボタンを配置し、ボタンのOnSelectを以下の数式に設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/ca85ba80-40c2-3b3b-db76-255cbe1f504c.png)

```plaintext
MicrosoftTeams.PostMessageToConversation(
    "User", 
    "Channel", 
    ParseJSON(JSON({
            recipient:
                {
                    groupId: "groupId", 
                    channelId: "channelId"
                },
            messageBody: RichTextEditor1.HtmlText,
            subject: "件名"
        }
    ))
)
```

普通にmessageBodyにリッチテキストエディタの出力を設定しただけでは、画像がうまく表示されません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/2610b00d-851d-ba9a-1e04-118d4489a523.png)

https://powerplatformnikki.com/teamspostmessagetoconversation2/

## Hostedcontentsに特定の形式のJSONを入力する

おいしみさんが紹介しているHiroさんの記事によると、**Hostedcontentsに特定の形式のJSONを入力すればPower AppsやPower AutomateからTeamsに画像つきの投稿ができる**そうです。

https://qiita.com/h-nagao/items/b7c5f79c7cf25e19f4d3

[Send chatMessage in a channel or a chat - Microsoft Graph v1.0 | Microsoft Learn](https://learn.microsoft.com/en-us/graph/api/chatmessage-post?view=graph-rest-1.0&tabs=http#example-5-send-inline-images-along-with-the-message)

ラベルでRichTextEditor1.HtmlTextを確認すると**画像の拡張子やbase64の情報が含まれている**ので、これらを**抜き出して置換＆Hostedcontentsに入力すれば良さそう**です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/687f4fbf-63fd-b768-4286-36e289b5ec85.png)

## 作り方

ボタンに以下の数式を設定します。

```plaintext
With(
    {Html:MatchAll(RichTextEditor1.HtmlText, "<img.+?src=\"data:(?<contentType>.+?);base64,(?<contentBytes>.+?)\" />")},    
    ClearCollect(
        ColPostText,
            {
                recipient:
                    {
                        groupId: "groupId", 
                        channelId: "channelId"
                    },
                messageBody: RichTextEditor1.HtmlText,
                subject: "件名",
                hostedContents:
                    ShowColumns(
                        AddColumns(
                            Html,
                            @microsoft.graph.temporaryId,
                            Text(StartMatch)
                        ),
                        contentBytes,contentType,@microsoft.graph.temporaryId
                    )
            }
    );
    ForAll(
        Html As html,
        UpdateIf(
            ColPostText, true,
            {messageBody:Substitute(messageBody, html.FullMatch, "<img src=\"../hostedContents/" & html.StartMatch & "/$value\">")}
        )
    );

    MicrosoftTeams.PostMessageToConversation(
        "User", 
        "Channel", 
        ParseJSON(JSON(First(ColPostText)))
    )
)
```

Power Apps側で入力した画像とテキストをそのままTeamsに投稿できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/2a5579e5-0ee8-fb0b-fd45-7868e2f66c63.png)

以降で詳細なコードの説明をします。

### With+MatchAll関数で抽出対象を変数に格納

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/09a1e09e-59bc-affd-52f7-8026080c124e.png)

**MatchAll関数で正規表現によって抽出部分を検索し、その結果をWith関数でHtmlに格納しておきます。**

https://powerplatformnikki.com/charactersextraction/

https://powerplatformnikki.com/powerappsregexmatch/

### コレクションにコネクタへの入力値を設定する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/22ccece8-09d1-a7ca-d6c3-62702830dc4c.png)

次にForAllで置換処理を行う都合上、変数ではなく一行のコレクションに入力値を設定します。

**recipient**には、投稿先のグループIDとチャネルIDを設定します。

URLや[こちら](https://powerplatformnikki.com/powerappsconnectorparam/)の方法を参考にPower AutomateのコードのプレビューからIDを取得・入力してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/24323b67-4481-ec14-755f-7149e98434b0.png)

**messageBody**はリッチテキストエディタの出力、**subject**には件名に設定するテキストを設定します。

**hostedContents**はWith関数で設定したHtmlのStartMatchをtemporaryIdにするために**AddColumns関数で型変換と列名変更、その後ShowColumns関数で列をスキーマに合わせます**。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/1f858e67-b752-638a-98ae-f22044942b32.png)

### messageBodyを置換処理

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/b24bf018-8e6e-f6dc-e372-4d6e32099c32.png)

messageBodyに対してSubstitute関数で置換処理を行います。

**Htmlには画像の分だけレコードが存在するので、これをForAll関数で繰り返し処理すれば対象の文字列をすべて置換できます。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/8ed1c998-cad8-7efd-cc19-78c62d9b4d9f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/ebb1ffb1-9197-f4cf-b1c5-90582eb1c06e.png)

### Teamsに投稿

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/3854052f-0072-9c41-a900-09ca65d936b8.png)

Teamsコネクタの**PostMessageToConversation**を用いてTeamsに投稿します。

ParseJSON、JSON関数でUntypedObject型への変換が必要です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/0e04256b-de3f-b4ce-6adf-58e00267159b.png)