2022 年 5月 26日、Microsoft グローバルの公式イベントの『Microsoft Build 2022』で
Microsoft Learn の Teams アプリ開発モジュールを紹介するセッションをさせていただくことになりました。
React (TypeScript) + Graph API で
Microsoft Teams (のタブ) 上で動くオレオレアプリを開発します。(bot 開発とは別)
そのセッション内でたくさんのページや資料を紹介しているので、それらをこの記事にまとめました。
該当セッションページ
『Microsoft Teams用のインタラクティブな会議アプリを作成する』
該当 Learn モジュール
『Microsoft Teams 用のインタラクティブ会議アプリを作成』
チュートリアル形式なので、セッションではこれをランスルーしていく形になります。
M365 デベロッパーセンター
無料で開発権限のあるテナントをゲット (もちろん Teams も入ってる)
『Microsoft 365 デベロッパーセンター』
Azure 無料トライアル
今回のモジュール (セッション) では Azure (クラウドプラットフォーム) を使わなくても進めることはできます (このチュートリアルではアプリをローカルでしか実行しないので) が、
実際に運用するとなるとどこかのサーバーに上げる必要があるので
その時はホスト先のクラウドサービスがあると安心です
デモアプリのソースコード
Microsoft Teams Training Module - Create interactive meeting apps for Microsoft Teams
セッションスピーカーのツイッターアカウント
モジュールのデモアプリの認証エラーについて
この Learn モジュール(セッションで紹介した手順)でのデモアプリ(Teams 会議アプリ)ですが、
この Build イベントの少し前に接続先の Graph API の仕様変更があり
会議主催者以外でアプリを使うと認証エラーがおきます。
この Build セッションで我々がしたように、主催者(このセッションだとかずきさん)のアカウントだけで入る分には問題なく動きます。
現在、この問題を修正するために対応中とのことですので修正が完了したらこちらも追記いたします
npm install
演習1の「ユーザー エクスペリエンスの依存関係をインストールする」 npm コマンドですが
npm のバージョンアップによりエラーが発生するようになってしまいました。
エラーを回避するには以下のように fluentui/react-teams
のインストールの際にオプション --legacy-peer-deps
を追加してください。
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