microsoft teams タブアプリ開発キホンのキ！...microsoft teams...
TRANSCRIPT
de:code 2019
Microsoft Teams タブアプリ開発キホンのキ！～ Teams アプリの開発から Graph API を活用したデータの取得まで一挙習得～
PR61
浅井敏之
日本ビジネスシステムズ株式会社
ビジネスソリューション本部 エンジニア
https://products.office.com/ja-jp/microsoft-teams/group-chat-software
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｣を使って、タブアプリの設定を行います。
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｣を使って、タブアプリの設定を行います。
RDP
Azure Lab Services
Office 365
Azure Active Directory
******.ngrok.io
Webアプリ
(react/node.js)
(参考) ハンズオンの環境について
Lab Service
https://labs.azure.com/
Microsoft Teams
https://teams.microsoft.com/
Office365 アカウント
Office365 パスワード
!P@ssw0rd
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｣を使って、タブアプリの設定を行います。
RDP
Azure Lab Services
Office 365
Azure Active Directory
******.ngrok.io
Webアプリ
(Node.js)
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
③
②
②
④
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｣を使って、タブアプリの設定を行います。
Step3. Teamsタブアプリの設定ページを作る
(参考) 設定ページの作り方
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｣を使って、タブアプリの設定を行います。
https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/authentication/auth-flow-tab
(参考) Teamsタブアプリの固有の認証を組み込む
(参考) Teamsタブアプリの固有の認証を組み込む
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｣を使って、タブアプリの設定を行います。
⑤
⑥⑦
⑧
⑨
①
②③
④
①
①
②
②①
③
⑤④
⑥
⑦
⑨⑧
⑩ ⑪
①
②
①
②
④
⑤
③
①
②
①
②
Goal
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｣を使って、タブアプリの設定を行います。
https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/authentication/auth-flow-tab
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
リンク集
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
リンク集
© 2018 Microsoft Corporation. All rights reserved.
本情報の内容（添付文書、リンク先などを含む）は、作成日時点でのものであり、予告なく変更される場合があります。
© 2019 Japan Business Systems, Inc. All rights reserved.
本情報の内容 (添付文書、リンク先などを含む) は、de:code 2019 開催日 (2019年5月29~30日) 時点のものであり、予告なく変更される場合があります。
本コンテンツの著作権、および本コンテンツ中に出てくる商標権、団体名、ロゴ、製品、サービスなどはそれぞれ、各権利保有者に帰属します。