こんにちは。今日は、VSCodeのTeams Toolkitを使ってTeamsアプリの開発を行ってみたいとおみます。
Contents
Teams Toolkitとは？
公式Docによると以下の通り。要は、VSCodeを使ってTeamsアプリ開発を効率化するためのツールです。アプリコードの開発に加えて、開発したコードのAzureへのデプロイ、Teamsへの公開などをこのツール上ワンストップで行えるようになっています。
https://docs.microsoft.com/ja-jp/microsoftteams/platform/toolkit/teams-toolkit-fundamentals
Teams Toolkit Microsoft Visual Studio コードを使用すると、統合 ID、クラウド ストレージへのアクセス、Microsoft Graph からのデータ、Azure および Microsoft 365 の他のサービスをゼロ構成アプローチで使用して、Teams アプリを作成および展開できます。
2022年3月8日現在プレビューとありますが、変更履歴を見ると2020年5月に初版が登場したようですね。比較的最近のツールのようです。
Teams Toolkitを使ったアプリ開発手順
VSCodeにTeams Toolkitをインストールする
こちらは以下の公式Docに手順が載っています。VSCode拡張機能からTeams Toolkitを探してインストールします。
https://docs.microsoft.com/ja-jp/microsoftteams/platform/toolkit/teams-toolkit-fundamentals
最初のアプリを作成する
参考ドキュメントはこちら。
https://docs.microsoft.com/ja-jp/microsoftteams/platform/toolkit/create-new-project
今回は、お試しなので、既に出来上がっているサンプルプロジェクトをベースに作成してみたいと思います。
サンプルギャラリーにある「Hello World Bot」をベースにプロジェクトの作成を行います。
M365/Azureアカウントを準備
参考ドキュメントはこちら。
https://docs.microsoft.com/ja-jp/microsoftteams/platform/toolkit/accounts
これは最終的に、アプリをインストールしたり公開するために必要となってきます。Azureアカウントは、サービスをAzure上でホストする場合に必要です。
アカウントがない場合でも、上の手順に従って、テスト用のテナントを作成し、M365/Azureアカウントを貰うことができます。
アカウントの準備ができたら、M365管理センター上で、Teams上でカスタムアプリのアップロードが許可されていることを確認します。ここが組織のポリシーなどで無効化されていると、アプリのサイドロードなどができなくなるため、自身が管理者でない場合には、事前に管理者に設定更新をしてもらうか、上述のテスト用テナント（自身が管理者になれる）を利用することを検討します。
Azureにリソースを作成 & アプリを展開する
Teamsアプリは、アプリパッケージ自体にはソースコードは含みません。アプリが呼び出すサービス自体は、どこか別のサーバ上にホストされている必要があります。
というわけで、上で作成したサンプルアプリを、今回は手っ取り早いAzure上いデプロイしていきたいと思います。
参考手順はこちら。
リソース作成
https://docs.microsoft.com/ja-jp/microsoftteams/platform/toolkit/provision
アプリの展開
https://docs.microsoft.com/ja-jp/microsoftteams/platform/toolkit/deploy
「Provision in the cloud」を選択します。ここでM365とAzureへのサインインを求められます。
すると、アプリをデプロイするAzure上のリソースグループを聞かれます。リソースグループ未作成であれば、この段階で作成可能です。
リソースグループの指定
リソースグループを指定すると、後のデプロイは自動的に進んでいきます。自動的にとはどういう仕組みだ・・？という疑問は、デプロイ中のメッセージを見ると解決します。
Azureリソースのデプロイを自動化する、ARM Templateを使ったデプロイが行われているのですね・・！
ちなみに、このリソース定義は、プロジェクトのtemplatesフォルダの中にあるようでした。
ファイルの拡張子bicepってみたことないな・・と思ったらAzureにリソースを展開するための固有言語のようですね。・・今回は覚えることはやめて、中身はそっとしておきたいと思います笑
https://docs.microsoft.com/ja-jp/azure/azure-resource-manager/bicep/overview?tabs=bicep
デプロイが完了したら、Azure上に展開されたリソースをチェックしておきます。
今回のサンプルアプリの場合、Azure Bot Service / Azure Key Vault / App Service (Web Apps + App Service Plan)が展開されていることが確認できました。
Teamsアプリを公開する
アプリをクラウド上にホストすることに成功したら、いよいよTeamsアプリとしてパッケージ化して公開を進めていきます。
手順はこちら。
上では、公開する手順の説明がありますので、そちらはDocにまかせるとして、もう一つの公開（というよりはインストール）方法である、サイドロードによる方法を試してみたので下にメモしておきます。
サイドロード
サイドロードするには、アプリパッケージのzipが必要です。
これは、VSCode > Teams Toolkit > Zip Teams metadata packageから作成できます。
作成したパッケージはローカルにダウンロードされますので
これをお使いのTeamsクライアントに直接アップロードします。
ここで先ほどのzipを指定してアップロードすると、アプリ追加オプションが出てきますので、ｓのまま「追加」！
すると、アプリが追加されて、利用できるようになりました！
以上、VS CodeのTeams Tool Kitを利用してTeamsアプリの作成～公開（インストール）を行うまでの手順メモでした！
このTeams Tool Kitもプレビュー提供ということですが、Microsoftさんどんどん新しいツールだすから覚えるだけでも大変だぞ・・・笑 今回実際に触ってみて、慣れればプロジェクト作成～公開までスムーズに行えそうなツールだということは分かりました。
この記事が少しでもお役に立ちましたら下の「いいね」ボタンをポチっていただけると励みになります！
おしまい
コメントを残す