![Page 1: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/1.jpg)
de:code 2019
Microsoft Teams タブアプリ開発キホンのキ!~ Teams アプリの開発から Graph API を活用したデータの取得まで一挙習得~
PR61
浅井敏之
日本ビジネスシステムズ株式会社
ビジネスソリューション本部 エンジニア
![Page 2: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/2.jpg)
https://products.office.com/ja-jp/microsoft-teams/group-chat-software
![Page 3: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/3.jpg)
![Page 4: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/4.jpg)
Step1 ハンズオンの環境について ✓ ハンズオンの環境について確認します。
Step2 ローカルデバッグ環境を設定する ✓ ローカルでデバッグするための環境を構築します。
✓ Teams 上のアプリケーションは、URLを外部に公開する
必要があります。今回は ngrok を使用します。
✓ ngrok で取得した公開URLを、Azure ADのリダイレク
トURI に登録します。
Step3 Teamsタブアプリのconfigページを作
る
✓ Teams タブアプリで必要となる設定ページを作成します。
Step4 Teamsタブアプリ固有の認証を組み
込む
✓ Azure AD認証をするために、 Teams固有の認証を組
み込みます。
Step5 App StudioでTeamsタブアプリの設
定をする
✓ Teamsのタブアプリを作成するために、開発者ツール
「App Studio」を使って、タブアプリの設定を行います。
![Page 5: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/5.jpg)
Step1 ハンズオンの環境について ✓ ハンズオンの環境について確認します。
Step2 ローカルデバッグ環境を設定する ✓ ローカルでデバッグするための環境を構築します。
✓ Teams 上のアプリケーションは、URLを外部に公開する
必要があります。今回は ngrok を使用します。
✓ ngrok で取得した公開URLを、Azure ADのリダイレク
トURI に登録します。
Step3 Teamsタブアプリのconfigページを作
る
✓ Teams タブアプリで必要となる設定ページを作成します。
Step4 Teamsタブアプリ固有の認証を組み
込む
✓ Azure AD認証をするために、 Teams固有の認証を組
み込みます。
Step5 App StudioでTeamsタブアプリの設
定をする
✓ Teamsのタブアプリを作成するために、開発者ツール
「App Studio」を使って、タブアプリの設定を行います。
![Page 6: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/6.jpg)
RDP
Azure Lab Services
Office 365
Azure Active Directory
******.ngrok.io
Webアプリ
(react/node.js)
![Page 7: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/7.jpg)
(参考) ハンズオンの環境について
![Page 8: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/8.jpg)
Lab Service
https://labs.azure.com/
Microsoft Teams
https://teams.microsoft.com/
Office365 アカウント
Office365 パスワード
!P@ssw0rd
![Page 12: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/12.jpg)
Step1 ハンズオンの環境について ✓ ハンズオンの環境について確認します。
Step2 ローカルデバッグ環境を設定する ✓ ローカルでデバッグするための環境を構築します。
✓ Teams 上のアプリケーションは、URLを外部に公開する
必要があります。今回は ngrok を使用します。
✓ ngrok で取得した公開URLを、Azure ADのリダイレク
トURI に登録します。
Step3 Teamsタブアプリのconfigページを作
る
✓ Teams タブアプリで必要となる設定ページを作成します。
Step4 Teamsタブアプリ固有の認証を組み
込む
✓ Azure AD認証をするために、 Teams固有の認証を組
み込みます。
Step5 App StudioでTeamsタブアプリの設
定をする
✓ Teamsのタブアプリを作成するために、開発者ツール
「App Studio」を使って、タブアプリの設定を行います。
![Page 13: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/13.jpg)
RDP
Azure Lab Services
Office 365
Azure Active Directory
******.ngrok.io
Webアプリ
(Node.js)
![Page 14: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/14.jpg)
ngrok by @inconshreveable (Ctrl+C to quit)
Session Status onlineUpdate update available (version 2.3.25, Ctrl-U to update)Version 2.3.15Region United States (us)Web Interface http://127.0.0.1:4040Forwarding http://ae83c4fd.ngrok.io -> http://localhost:3000Forwarding https://ae83c4fd.ngrok.io -> http://localhost:3000
Connections ttl opn rt1 rt5 p50 p900 0 0.00 0.00 0.00 0.00
![Page 15: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/15.jpg)
③
②
![Page 16: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/16.jpg)
②
④
![Page 17: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/17.jpg)
Step1 ハンズオンの環境について ✓ ハンズオンの環境について確認します。
Step2 ローカルデバッグ環境を設定する ✓ ローカルでデバッグするための環境を構築します。
✓ Teams 上のアプリケーションは、URLを外部に公開する
必要があります。今回は ngrok を使用します。
✓ ngrok で取得した公開URLを、Azure ADのリダイレク
トURI に登録します。
Step3 Teamsタブアプリのconfigページを作
る
✓ Teams タブアプリで必要となる設定ページを作成します。
Step4 Teamsタブアプリ固有の認証を組み
込む
✓ Azure AD認証をするために、 Teams固有の認証を組
み込みます。
Step5 App StudioでTeamsタブアプリの設
定をする
✓ Teamsのタブアプリを作成するために、開発者ツール
「App Studio」を使って、タブアプリの設定を行います。
![Page 18: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/18.jpg)
Step3. Teamsタブアプリの設定ページを作る
![Page 19: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/19.jpg)
(参考) 設定ページの作り方
![Page 20: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/20.jpg)
Step1 ハンズオンの環境について ✓ ハンズオンの環境について確認します。
Step2 ローカルデバッグ環境を設定する ✓ ローカルでデバッグするための環境を構築します。
✓ Teams 上のアプリケーションは、URLを外部に公開する
必要があります。今回は ngrok を使用します。
✓ ngrok で取得した公開URLを、Azure ADのリダイレク
トURI に登録します。
Step3 Teamsタブアプリのconfigページを作
る
✓ Teams タブアプリで必要となる設定ページを作成します。
Step4 Teamsタブアプリ固有の認証を組み
込む
✓ Azure AD認証をするために、 Teams固有の認証を組
み込みます。
Step5 App StudioでTeamsタブアプリの設
定をする
✓ Teamsのタブアプリを作成するために、開発者ツール
「App Studio」を使って、タブアプリの設定を行います。
![Page 21: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/21.jpg)
https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/authentication/auth-flow-tab
![Page 22: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/22.jpg)
(参考) Teamsタブアプリの固有の認証を組み込む
![Page 23: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/23.jpg)
(参考) Teamsタブアプリの固有の認証を組み込む
![Page 24: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/24.jpg)
Step1 ハンズオンの環境について ✓ ハンズオンの環境について確認します。
Step2 ローカルデバッグ環境を設定する ✓ ローカルでデバッグするための環境を構築します。
✓ Teams 上のアプリケーションは、URLを外部に公開する
必要があります。今回は ngrok を使用します。
✓ ngrok で取得した公開URLを、Azure ADのリダイレク
トURI に登録します。
Step3 Teamsタブアプリのconfigページを作
る
✓ Teams タブアプリで必要となる設定ページを作成します。
Step4 Teamsタブアプリ固有の認証を組み
込む
✓ Azure AD認証をするために、 Teams固有の認証を組
み込みます。
Step5 App StudioでTeamsタブアプリの設
定をする
✓ Teamsのタブアプリを作成するために、開発者ツール
「App Studio」を使って、タブアプリの設定を行います。
![Page 26: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/26.jpg)
⑤
⑥⑦
⑧
![Page 27: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/27.jpg)
⑨
![Page 28: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/28.jpg)
①
②③
④
![Page 29: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/29.jpg)
①
![Page 30: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/30.jpg)
①
②
![Page 31: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/31.jpg)
②①
③
⑤④
![Page 32: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/32.jpg)
⑥
⑦
![Page 33: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/33.jpg)
⑨⑧
⑩ ⑪
![Page 34: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/34.jpg)
①
②
![Page 36: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/36.jpg)
![Page 37: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/37.jpg)
①
②
![Page 38: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/38.jpg)
④
⑤
③
![Page 39: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/39.jpg)
①
②
![Page 40: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/40.jpg)
![Page 41: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/41.jpg)
①
②
Goal
![Page 42: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/42.jpg)
Step1 ハンズオンの環境について ✓ ハンズオンの環境について確認します。
Step2 ローカルデバッグ環境を設定する ✓ ローカルでデバッグするための環境を構築します。
✓ Teams 上のアプリケーションは、URLを外部に公開する
必要があります。今回は ngrok を使用します。
✓ ngrok で取得した公開URLを、Azure ADのリダイレク
トURI に登録します。
Step3 Teamsタブアプリのconfigページを作
る
✓ Teams タブアプリで必要となる設定ページを作成します。
Step4 Teamsタブアプリ固有の認証を組み
込む
✓ Azure AD認証をするために、 Teams固有の認証を組
み込みます。
Step5 App StudioでTeamsタブアプリの設
定をする
✓ Teamsのタブアプリを作成するために、開発者ツール
「App Studio」を使って、タブアプリの設定を行います。
![Page 43: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/43.jpg)
https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/authentication/auth-flow-tab
![Page 44: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/44.jpg)
![Page 45: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/45.jpg)
https://developer.microsoft.com/ja-jp/microsoft-teams
https://docs.microsoft.com/en-us/microsoftteams/platform/get-started/get-started-nodejs-app-
studio
https://docs.microsoft.com/en-us/microsoftteams/platform/get-started/get-started-app-studio
https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/tabs/tabs-configuration
リンク集
![Page 46: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/46.jpg)
https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/authentication/auth-flow-tab
https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/authentication/auth-tab-aad
https://docs.microsoft.com/ja-jp/microsoftteams/tenant-apps-catalog-teams
https://docs.microsoft.com/ja-jp/azure/active-directory/develop/quickstart-register-app
リンク集
![Page 47: Microsoft Teams タブアプリ開発キホンのキ!...Microsoft Teams タブアプリ開発キホンのキ! ~Teams アプリの開発からGraph API を活用したデータの取得まで一挙習得~](https://reader033.vdocuments.net/reader033/viewer/2022050106/5f44d5228c48987322543c95/html5/thumbnails/47.jpg)
© 2018 Microsoft Corporation. All rights reserved.
本情報の内容(添付文書、リンク先などを含む)は、作成日時点でのものであり、予告なく変更される場合があります。
© 2019 Japan Business Systems, Inc. All rights reserved.
本情報の内容 (添付文書、リンク先などを含む) は、de:code 2019 開催日 (2019年5月29~30日) 時点のものであり、予告なく変更される場合があります。
本コンテンツの著作権、および本コンテンツ中に出てくる商標権、団体名、ロゴ、製品、サービスなどはそれぞれ、各権利保有者に帰属します。