【Teamsアプリ開発】VSCodeのTeams Toolkitを使ってカスタムアプリの作成~公開までを行う

こんにちは。今日は、VSCodeのTeams Toolkitを使ってTeamsアプリの開発を行ってみたいとおみます。

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アプリとしてパッケージ化して公開を進めていきます。

手順はこちら。

https://docs.microsoft.com/ja-jp/microsoftteams/platform/toolkit/publish#publish-to-your-organization

上では、公開する手順の説明がありますので、そちらはDocにまかせるとして、もう一つの公開(というよりはインストール)方法である、サイドロードによる方法を試してみたので下にメモしておきます。

サイドロード

サイドロードするには、アプリパッケージのzipが必要です。

これは、VSCode > Teams Toolkit > Zip Teams metadata packageから作成できます。

作成したパッケージはローカルにダウンロードされますので

これをお使いのTeamsクライアントに直接アップロードします。

ここで先ほどのzipを指定してアップロードすると、アプリ追加オプションが出てきますので、sのまま「追加」!

すると、アプリが追加されて、利用できるようになりました!

以上、VS CodeのTeams Tool Kitを利用してTeamsアプリの作成~公開(インストール)を行うまでの手順メモでした!

このTeams Tool Kitもプレビュー提供ということですが、Microsoftさんどんどん新しいツールだすから覚えるだけでも大変だぞ・・・笑 今回実際に触ってみて、慣れればプロジェクト作成~公開までスムーズに行えそうなツールだということは分かりました。

この記事が少しでもお役に立ちましたら下の「いいね」ボタンをポチっていただけると励みになります!

おしまい

この記事を気に入っていただけたらシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。

ABOUT US
Yuu113
初めまして。ゆうたろうと申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。 日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。