コルネの進捗や備忘録が記されたなにか

進捗や成果物や備忘録てきななにかを雑に更新していきます。

Power Apps で Teams を作成する

Microsoft Teams Power Apps

スポンサードリンク

はじめに

随分前に作成して、作成方法を纏めていなかったので、備忘録を兼ねてPower Apps でのTeams の作成方法を纏めようと思います。

ただ作成したのが2020年の1月ごろなので、最新の書き方でない箇所が多々ある可能性があります...
ご了承ください。

完成イメージはこのようになります。

f:id:koruneko:20201213232356p:plain

Powe Apps とMicrosoft Teams を連携する

コネクタを追加する

Power Apps でTemas を連携するには、Microsoft Teams コネクタを利用します。

下図のように、"データ"より、"Microsoft Teams"を選択して、アプリ内にMicrosoft Teams コネクタを追加します。

f:id:koruneko:20201213231029p:plain

これで、Power Apps 内のアプリでTeams と連携できるようになりました！

f:id:koruneko:20201213231540p:plain

チーム一覧を表示する

自身が所属しているチームの一覧を表示するには、

MicrosoftTeams.GetAllTeams().value

を利用します。

ギャラリーを追加して、 Items に上記を設定します。

あとは、このギャラリー内にラベルを追加して、チームの表示名を表示させます。

Label.Text

ThisItem.displayName

これでチーム一覧が表示できました。

チャネル一覧を表示する

チャネル一覧を表示する

チャネルはTeams の下にぶら下がっているものです。
なので、先ほどのチームのギャラリー内にチャネル用のギャラリー設定します。

また、今回設定するチャネル用のギャラリーは、実際のアプリのように以下機能を実現させたいと思います。

  • チームを選択したときだけチャネル一覧が表示される
  • チャネルの数によって表示領域を可変にする

これを実現するために"高さ(伸縮可能、空)"を利用します。
高さ可変ギャラリーについては、Hiroさんのこちらの記事を参考にしてください。

ギャラリーを追加したら、 Items に以下を設定します。

Gyallary.Items

MicrosoftTeams.GetChannelsForGroup(ThisItem.id).value

ThisItem.id は親要素のチームになります。

続いてチーム一覧表示のときと同じようにチャネルの表示名を表示させます。

ラベルをチャネルのギャラリー内に設定して、以下のように設定します。

Label.Text

ThisItem.displayName

ギャラリーの高さをチャネルの数によって可変にする

このままでは、ギャラリーの高さが可変ではないのでチャネルの数によってギャラリーの高さを可変に設定したいと思います。

チャネルのギャラリーの高さを以下に設定します。

Gyallary.Height

45 * CountRows(MicrosoftTeams.GetChannelsForGroup(ThisItem.id).value.displayName)

45 としている箇所はチャネルのラベルの大きさによって適宜調整してください。

チームを選択したときだけチャネル一覧が表示される

チームを選択したときだけチャネルが表示されるように設定します。

選択されたかを判する方法には色々あるかと思いますが、今回は簡単にトグルを用いたいと思います。

チームのギャラリー内にトグルを追加します。

このトグルに対して特別な関数を設定する必要はありません。

続いてチャネルのギャラリーの Visible に以下を設定します。

Gyallery.Visible

Toggle.Value

これで実現したかった機能を実現することができました！

ちなみに他の方法として、チームのコレクションに「表示状態か？」を判断するための項目を追加して、チームのラベルを選択したときに、そのフラグを反転させるような設定にすれば、表示/非表示のためのアイテムを追加しなくてよくなると思います。

メッセージ一覧を表示する

メッセージの一覧表示ギャラリーは以下の要素に分かれています。

  • 投稿者のプロファイル画像
  • 投稿者の名前
  • 件名
  • 本文

メッセージの情報を取得する

メッセージ情報を取得するには、 MicrosoftTeams.GetMessagesFromChannel を利用します。

ただし、このメッセージ情報の取得には、対象のチームIDとチャネルIDが必要です。

となると、先ほどのチャネル一覧表示のときのようにチャネルのギャラリー内にメッセージギャラリーを設定する必要があるように思えます。

ただそうしてしまうと、デザインの設定が面倒なのと、親の親のアイテムの情報を取得するのはちょっと面倒なので、今回はコレクションにメッセージの情報を設定したいと思います。

ユーザー操作から考えると、メッセージの情報を取得するタイミングはチャネルを選択したときですね。
なので、チャネル表示のラベルの OnSelect に以下を設定します。

Label.OnSelect

UpdateContext({_teamID:TeamGallery.Selected.id});
UpdateContext({_channelID:ThisItem.id});
ClearCollect(teamsMessage, MicrosoftTeams.GetMessagesFromChannel(_teamID, _channelID).value)

これで teamsMessage にメッセージ情報を設定できましたので、メッセージ表示用のギャラリーの Items に teamsMessage を設定してください。

投稿者のプロファイル画像を表示する

投稿者のプロファイル画像を表示するには、メッセージ表示用のギャラリーに"画像"を追加して、以下のように設定します。

Image.Image

Office365ユーザー.UserPhoto(ThisItem.from.user.id)

teamsMessage に設定されたコレクションの中身をみてもずばり投稿者のプロファイル画像情報が設定されている項目はありません。
なので、投稿者のユーザーIDをもとに、Office365 ユーザー コネクタを使ってプロファイル画像を取得する必要があります。
こちらのコネクタもTeams コネクタを追加したときと同様の方法で追加しておきましょう。

投稿者の名前を表示する

投稿者の名前はプロファイル画像とは違い、コレクションに設定されていますね。

また、どうせなのでいつ投稿されたのかも一緒に表示してしまいましょう。

ラベルを追加して以下のように設定します。

Label.Text

ThisItem.from.user.displayName & "　　" & ThisItem.createdDateTime

件名を表示する

件名もコレクション内に存在するので、ラベルを追加して以下のように設定します。

Label.Text

ThisItem.subject

また、件名は設定されているときだけ表示されるようにしたいと思います。

Label.height

If(IsBlank(ThisItem.subject), 0, 30)

本文を表示する

メッセージの本文は ThisItem.body.content にて取得できます。

ただこちらの設定を、ラベルにてそのまま表示させてはいけません。

なぜかというと、Teams では文字に装飾(太文字や下線など)を行うことができますね。
この設定がなされているメッセージの場合、HTML タグが付与されたメッセージが設定されています。

これをそのまま表示させるために"HTML テキスト"を利用します。
HTML テキストの HTMLText に ThisItem.body.content を設定してください。

これでメッセージがTeams で送られたメッセージそのまま表示されたかと思います。

また、文字が見切れるのを避けるためにメッセージの文字数によって、HTML テキストの高さを可変にしたいと思います。

HTMLText.Height

70 + 80 * 
Max(RoundDown((
// 半角英数字・記号
CountRows(MatchAll(HtmlTBody.HtmlText, "[\x21-\x7eE]")) +
// 全角文字
CountRows(MatchAll(HtmlTBody.HtmlText, "[^\x01-\x7E\xA1-\xDF]")) * 2 +
// 全角記号
CountRows(MatchAll(HtmlTBody.HtmlText, "[/[！-／：-＠［-｀｛-～、-〜”’・]+/g]")) * 2
) / 100, 0),
// 改行
CountRows(MatchAll(HtmlTBody.HtmlText, "[\x0A]")))

MatchALL 関数を使って正規表現でコメントの文字が何文字設定されているかをカウントしています。
それによって、高さが調整されるようにしています。

ここの詳しい解説はまた別の機会に...

Microsoft Teams にメッセージを投稿する

メッセージを投稿する

メッセージを投稿するために、以下入力項目が必要です。

  • 件名入力欄
  • 本文入力欄

件名入力欄には、"テキスト入力"を利用します。
本文入力欄には、実際のTeams と同じように、太文字や下線など設定できるようにしたいので"リッチ テキスト エディター"を設定します。

これらに入力されて情報をTeams に投稿したいと思います。

メッセージ送信用のアイコンを追加して、 OnSelect に以下のように設定します。
(調べてみたら現在V3 が最新のようです(2020/12/13 時点))

Icon.OnSelect

UpdateContext({_isSubmit:
MicrosoftTeams.PostMessageToChannelV2(
    _teamID,
    _channelID,
    {
        content: BodyInput.HtmlText,
        contentType: "html"
    },
    {subject:SubjectInput.Text}
)});

以下を設定することで、HTML で装飾されたテキストを投稿することができます。

content: BodyInput.HtmlText,
contentType: "html"

また、「なぜ UpdateContext 関数を利用しているのか？」というと、メッセージの投稿が完了したら、Teams のメッセージ情報を更新して、先ほど投稿した、メッセージをアプリにも表示させたいからです。

メッセージが投稿されると、 _isSubmit には、 True が設定されます。

これで、メッセージが投稿されたか？を判断し、メッセージ情報の更新を行いたいと思います。

メッセージを投稿したら、メッセージ情報を更新する

_isSubmit を活用して、メッセージを投稿したら、メッセージ情報を更新するよう設定したいと思います。

トグルを追加して、以下のように設定します。

Toggle.Default

_isSubmit

Toggle.OnCheck

ClearCollect(teamsMessage, MicrosoftTeams.GetMessagesFromChannel(_teamID, _channelID).value);
UpdateContext({_isSubmit:false})

これでトグルが True になったとき、つまり、メッセージが投稿されたときメッセージ情報が更新され、投稿したメッセージがPower Apps 上でも確認できるようになったかと思います。

なお、タイマーなどで、定期的に情報を更新する場合はこの設定は必要ないですが、処理がちょっと重くなります。

定期更新を設定しないのであれば、手動更新を設定しておくといいかもですね。

この設定で実装できないこと

メンション

<at></at>で囲ってあげてもメンションとして識別してくれません。
これは、送信、受信両者においてです。

個人チャット情報の操作

コネクタの情報をみてもらえばわかる通り、取得及び操作できるのはチームのみで、チャットについては取得も投稿もできません。

チャットの仕組みはOutlook に近いものがあるので、どうにか工夫すれば、もしかしたら取得することも可能？？？
わからない...

画像の表示

Teams で投稿された画像の表示を行うことはできません。

これは投稿された画像がblob などに格納されてしまうからですね。

以下に表示できる画像、表示できない画像の早見表を作成しましたので、参考にしてください。

アイテム種類 表示可/表示不可 備考
ローカルから投稿した画像 表示不可 blob に保存される
インターネットから貼り付けた画像 表示不可 Graph API を叩けば取得できる？？
このアプリから投稿した画像 表示可 Blogger に保存される
プライズ 表示不可 id でしか設定されていないので、Teams アプリでないと表示は不可
ステッカー 表示不可 Graph API を叩けば取得できる？？
GIF 表示可 GIPHY に保存される

認識間違いある場合、教えていただけると助かります...


スポンサードリンク