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

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

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

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

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

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

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

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

Send chatMessage in a channel or a chat - Microsoft Graph v1.0 | Microsoft Learn

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

作り方

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

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に投稿できました。

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

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

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

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

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

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

URLやこちらの方法を参考にPower AutomateのコードのプレビューからIDを取得・入力してください。

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

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

messageBodyを置換処理

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

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

Teamsに投稿

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

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