Microsoft Teamsの投稿を手軽にまとめたい。できたらオシャレな見た目で公開したい

# はじめに
NTTテクノクロスのかわちゃきです。こんにちは。普段は部署の人材育成やプロモーション活動、社内研修講師や社内の技術問い合わせの回答などをしています。
この記事は[NTTテクノクロスアドベントカレンダー2024](https://qiita.com/advent-calendar/2024/ntt-tx) 14日目の記事です。
今回は「Microsoft Teamsの投稿を手軽にまとめたい。できたらオシャレな見た目で公開したい！」を実現する方法について考えた結果を記載します。

# 経緯
当社ではMicrosoft Teamsを使って業務を行っています。
Microsoft Teamsでのやりとりはフロー情報で、時間が経つにつれて埋もれていきます。ただ社内手続きについての質問と回答や、会社近くのオススメごはん屋さんなど、内容によってはストック情報として蓄積したり、共有したくなることがあります。その内容をひとつずつ投稿を転記したり、情報を加工し共有するのは手間です。そこで、X(旧Twitter)を手軽にまとめるサイト[Togetter](https://togetter.com/)のように、まとめて共有出来ないか模索したのが本記事の内容です。
特に以下の2点を実現したいです。

- Microsoft Teamsの投稿を簡単に転記したい
- 手軽に共有したい

本記事はPower Automateの設定に慣れていることを前提とし、ポイントになる設定を中心に解説します。

# 完成図
X(旧Twitter)風にMicrosoft Teamsの投稿をまとめます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309010/287d4437-32a8-9b99-3862-a20613a7ad59.png)

# 全体の流れ
1. Power AutomateでMicrosoft Teamsの投稿をポチっと選択したら
1. 共有するために他のサービス(Excel,Microsoft Lists)に転記する
1. よくばりなので、まとめサイトとしてオシャレな見た目にする:heart:

の3ステップで行っていきます。

# Power Automateで全体のフローを作成する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309010/f3af4a3c-716c-0ca8-9415-b8473e341495.png)

Power Automateの自動化したクラウドフローを、`選択したメッセージ` トリガーで新規作成します。まとめる際に転記したい情報を`ユーザープロフィールの取得`と`メッセージ詳細を取得する`で取得します。
`メッセージ詳細を取得する`の親メッセージIDは、返信メッセージIDを設定します。

- `ユーザープロフィールの取得`
    - 投稿者のプロフィールに設定している画像を表示するため、投稿者のメールを取得する
- `メッセージ詳細を取得する`
    - CreateDateTimeなど`選択したメッセージの場合`で取得できない項目を取得する

# 共有するために他のサービス(Excel,Microsoft Lists)に転記する
## 転記先の項目を作成する
ExcelでもMicrosoft ListsでもOKです。Excel、Microsoft Listsに転記する項目を作成します。Excelの場合はテーブルを、Microsoft Listsの場合は列を作成します。Excelの場合は`表に行を追加`、Microsoft Listsの場合は`項目の作成`で、転記したい項目を指定します。本記事と同様に設定したい場合は[View requirements](https://github.com/pnp/List-Formatting/tree/master/view-samples/twitter-timeline#view-requirements)に合わせて項目を作っておくと◎です。

# よくばりなので、まとめサイトとしてオシャレな見た目にする:heart:
Microsoft Listsのデフォルトデザインもシンプルで良いのですが、今回はX(旧Twitter)風な見た目に整えていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309010/71cc287a-795c-da6b-f601-371393a4fe0a.png)

## Microsoft Listsの列にjsonを設定する
[列の書式を設定して外観を変更する](https://support.microsoft.com/ja-jp/office/6ed2f787-0e9e-4908-b861-0d06571c256d)の通り、詳細モードでカスタマイズした表示の設定が可能です。
[Microsoft Learn Challenge](https://learn.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/column-formatting)でも紹介されてるように[SharePoint/sp-dev-column-formatting リポジトリ](https://github.com/pnp/List-Formatting/tree/master)にすぐに使えるサンプルが沢山あります。[Twitter Timeline](https://github.com/pnp/List-Formatting/tree/master/view-samples/twitter-timeline)というドンピシャなデザインがあるので、このフォーマットを使っていきます。

## Microsoft Listsにデザインをあてる


`全てのアイテム`＞`現在のビューの書式設定`＞`詳細設定`に[Twitter Timeline](https://github.com/pnp/List-Formatting/tree/master/view-samples/twitter-timeline)のJSONを設定します。その中で一部項目を修正します。

39行目の`src`を修正します。
```
"elmType": "img",
    "attributes": {
    "src": "[$TwitterProfilePic]",
    "title": "[$TweetBy]",
    "target": "_blank"
    }
```
今回は投稿者のユーザーアイコンを表示したいため、以下に変更します。`TweetBy`は`ユーザープロフィールの取得`で取得したメールアドレスです。
```
"elmType": "img",
    "attributes": {
    "src": "='/_layouts/15/userphoto.aspx?size=L&accountname=' + [$TweetBy]",
    "title": "[$TweetBy]",
    "target": "_blank"
    }
```

128行目の`txtContent`を修正します。
```
"txtContent": "[$TweetFormattedDate]"
```
投稿日時を[View requirements](https://github.com/pnp/List-Formatting/tree/master/view-samples/twitter-timeline#view-requirements)の通りに変換する~~のが面倒~~手間を省くために、`TweetDate`を表示します。`メッセージ詳細を取得する`で取得した`CreateDateTime`です。
```
"txtContent": "[$TweetDate]"
```

# 使い方
実際に動かしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309010/53e15f16-9790-5fba-6ebf-7f658c09d61d.png)
Microsoft Teamsで投稿の三点リーダーから、作成したPower Automateの`投稿をトゥギャる`をポチっと押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309010/287d4437-32a8-9b99-3862-a20613a7ad59.png)
ポチッと押すだけで、設定したMicrosoft Listsにオシャレな見た目で転記できました🎅

# おわりに
今回はデザインにtwitter-timelineを適用しましたが、どのチームから転記したのか、その投稿のタイトルなどを出力してもいいですね。Microsoft Teamsはプライベートなチームもあります。転記した内容の公開範囲に注意して効率的な情報共有をしていきましょう！

明日以降も[NTTテクノクロスアドベントカレンダー2024](https://qiita.com/advent-calendar/2024/ntt-tx)をお楽しみに🎄