今度業務でTeamsアプリを開発することになり、まずは第一歩としてHello Worldを表示してみたので、その手順をメモ！
※今回の記事は、こちらの公式HPの内容を僕なりにかみ砕いた内容です。
![]()
![]()
概要-開始する - Teams
このモジュールでは、言語と開発環境に基づいて最初の Microsoft Teams アプリを構築し、アプリの機能、SDK を理解する方法について説明します。
learn.microsoft.com
用意するもの！
今回のTeamsアプリはWebアプリで作成。まずはこちらを用意。
Teamsアカウント
Teamsが使えるMicrosoft365アカウントを用意する。
それと、Teamsにカスタムアプリをアップロードできるよう設定する必要がある。
※設定しなくても、ONになっている場合もあるよう。
確認方法は、Teams左下の[アプリ]を選んで、[カスタムアプリをアップロード]が表示されていればOK！
もしされていないようなら、こちらの手順で設定しよう！
![]()
![]()
概要-開始する - Teams
このモジュールでは、言語と開発環境に基づいて最初の Microsoft Teams アプリを構築し、アプリの機能、SDK を理解する方法について説明します。
learn.microsoft.com
ローカルサーバーを動かす用
- Node.js
- Ngrok：TeamsのアプリコンテンツはHTTPS接続が必要なため
ngrokはここからインストールする。
![]()
![]()
ngrok | Unified Ingress Platform for Developers
ngrok is a secure unified ingress platform that combines your reverse proxy, firewall, API gateway and global load balan...
ngrok.com
開発用
- Visual Studio Code
Visual Studio CodeにToolkitを入れる
まずは、拡張機能から、Teamsのツールキットをインストールする。
インストール完了！
新しいTeams appを作成する
先ほどインストールしたツールキットを選択し、[Create a new Teams app]を選択する。もちろん、名前は何でもOK。
ワークスペースになるフォルダを選択。
すると、どんなアプリを作るか聞かれるので、とりあえず簡単なタブアプリを選択。
ひとまず個人用で作成。
するとワークスペースフォルダに、こんなファイルが作られる！
ローカルサーバー、起動！
Visual Studio Codeのターミナルを見てみると、ワークスペースまで移動してくれているので、
まずはnpm install
成功したら、npm start！
すると、ローカルサーバーが起動する！
Teamsからこのサーバーへアクセスするためには、HTTPSで通信する必要がある。
そこでngrokを起動して、ngrok http 3000と打つ
すると、HTTPSでアクセスできるようになる！
Teamsアプリから、ローカルサーバーへアクセスする
ローカルサーバーが起動したら、ワークスペースフォルダに戻って、.publishフォルダ内のDevelopment.envを開く。
そして、URLをさきほどのHTTPSのアドレスに書き換える。
そして、URLをさきほどのHTTPSのアドレスに書き換える。
保存したら、Teamsに戻って、[アプリ]→[カスタムアプリをアップロード]
ワークスペースフォルダの.publishフォルダ内のDevelopment.zipを選ぶ。
読み込まれると、こんな感じで出てくるので、
追加！！
動いた！！！
ちなみに、このサンプルアプリはReactで動いているので、src内のTab.js辺りをいじってあげると、
即時反映！！
と言うわけで、Teamsのタブとかはこんな感じで開発していくんだなー、と思いました^ ^
コメント