#MSBuild 2022 Teams アプリ開発セッションの参考リンク集

2022 年 5月 26日、Microsoft グローバルの公式イベントの『[Microsoft Build 2022](https://mybuild.microsoft.com/ja-JP/home?WT.mc_id=spatial-build-machiy&ocid=MSlearn)』で
[Microsoft Learn の Teams アプリ開発モジュールを紹介するセッション](https://mybuild.microsoft.com/ja-JP/sessions/26b0ce9d-1798-4ffb-8015-c4d5fa8a827e?source=sessions&WT.mc_id=spatial-build-machiy&ocid=MSlearn)をさせていただくことになりました。

React (TypeScript) + Graph API で
Microsoft Teams (のタブ) 上で動くオレオレアプリを開発します。（bot 開発とは別）

そのセッション内でたくさんのページや資料を紹介しているので、それらをこの記事にまとめました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/fb3b3488-596e-f459-6849-831c364edc8e.png)


## 該当セッションページ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/40eaee91-b404-c231-f4e0-23be600a4a5b.png)

https://mybuild.microsoft.com/ja-JP/sessions/26b0ce9d-1798-4ffb-8015-c4d5fa8a827e?source=sessions&WT.mc_id=spatial-build-machiy&ocid=MSlearn

『[Microsoft Teams用のインタラクティブな会議アプリを作成する](https://mybuild.microsoft.com/ja-JP/sessions/26b0ce9d-1798-4ffb-8015-c4d5fa8a827e?source=sessions&WT.mc_id=spatial-build-machiy&ocid=MSlearn)』

## 該当 Learn モジュール

『[Microsoft Teams 用のインタラクティブ会議アプリを作成](https://docs.microsoft.com/ja-jp/learn/modules/msteams-meetings-apps/?WT.mc_id=learnlive-20220524K-JP)』

チュートリアル形式なので、セッションではこれをランスルーしていく形になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/902cdc9f-17e1-dbdc-608e-8dd8769dfe50.png)

https://docs.microsoft.com/ja-jp/learn/modules/msteams-meetings-apps/?WT.mc_id=learnlive-20220524K-JP

## M365 デベロッパーセンター

無料で開発権限のあるテナントをゲット (もちろん Teams も入ってる)
『[Microsoft 365 デベロッパーセンター](https://developer.microsoft.com/ja-jp/microsoft-365/dev-program/?WT.mc_id=spatial-build-machiy&ocid=MSlearn)』

https://developer.microsoft.com/ja-jp/microsoft-365/dev-program/?WT.mc_id=spatial-build-machiy&ocid=MSlearn

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/0947a99c-f0ea-7b55-560e-f090bd7f4393.png)

## Azure 無料トライアル

今回のモジュール (セッション) では Azure (クラウドプラットフォーム) を使わなくても進めることはできます (このチュートリアルではアプリをローカルでしか実行しないので) が、
実際に運用するとなるとどこかのサーバーに上げる必要があるので
その時はホスト先のクラウドサービスがあると安心です

https://aka.ms/azure-free-trial-build22

## デモアプリのソースコード

https://github.com/OfficeDev/TrainingContent/tree/master/Teams/90%20Create%20interactive%20meeting%20apps%20for%20Microsoft%20Teams

[Microsoft Teams Training Module - Create interactive meeting apps for Microsoft Teams](https://github.com/OfficeDev/TrainingContent/tree/master/Teams/90%20Create%20interactive%20meeting%20apps%20for%20Microsoft%20Teams)

## セッションスピーカーのツイッターアカウント

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/4bb58b62-2c65-9d66-317b-dce70604f5ce.png)

https://twitter.com/chomado

https://twitter.com/okazuki

## モジュールのデモアプリの認証エラーについて

この Learn モジュール（セッションで紹介した手順）でのデモアプリ（Teams 会議アプリ）ですが、
この Build イベントの少し前に接続先の Graph API の仕様変更があり
会議主催者以外でアプリを使うと認証エラーがおきます。

この Build セッションで我々がしたように、主催者（このセッションだとかずきさん）のアカウントだけで入る分には問題なく動きます。

現在、この問題を修正するために対応中とのことですので修正が完了したらこちらも追記いたします

## npm install 

演習1の「[ユーザー エクスペリエンスの依存関係をインストールする](https://docs.microsoft.com/ja-jp/learn/modules/msteams-meetings-apps/3-exercise-create-meeting-app)」 npm コマンドですが
 npm のバージョンアップによりエラーが発生するようになってしまいました。

エラーを回避するには以下のように `fluentui/react-teams` のインストールの際にオプション `--legacy-peer-deps` を追加してください。


```shell
npm install lodash@4.17.21 -SE
npm install @types/lodash@4.14.178 -DE
npm install @fluentui/react-teams@6.0.0 -SE --legacy-peer-deps
```