はじめに

Teamsで動くbotを作ろうと調べ始めると、どうにもたくさん情報があってよくわかりません。

自分のためにまとめ直してみます。

2024年6月時点の情報です。

あらかじめ必要なもの

あらかじめ必要なものたちです。

Node.js
Microsoft 365 開発用テナント
TeamsFx cli
Dev tunnel cli
（任意）Visual Studio Code

ひとつずつみていきます。

Node.js

macOS や Linux の場合は nodenv を使用してインストールするのが簡単です。

Windows の場合は NVM for Windows を使用してインストールするのが簡単かな？

Node.js のバージョンは、18か20を使います。

自分は 20.14.0 を入れました。

Microsoft 365 開発用テナント

Microsoft 365 開発者プログラムに参加することで、Microsoft 365 E5 を25ライセンス分使用できるようになります。

TeamsFx cli

npm からインストールします。

npm i -g @microsoft/teamsapp-cli

Dev tunnel cli

macOS / Linux / Windows それぞれDev tunnel cliのインストール方法が案内されています。それぞれに従ってインストールします。

macOSの場合は、Homebrewでいっぱつです。

brew install --cask devtunnel

Visual Studio Code

Visual Studio Code からダウンロードするなり、パッケージマネージャを使うなり、さくっとインストールします。

サンプルプロジェクトを生成

TeamsFx cliを使用してプロジェクトを生成します。

用意されているサンプルの一覧

用意されているサンプルの一覧です（以下のコマンドの出力結果を加工したものです。翻訳はChatGTPです）。

npx teamsapp list samples

サンプルID	説明
hello-world-tab-with-backend	バックエンドサービスを持つMicrosoft Teams TabアプリのHello Worldアプリ
graph-toolkit-contact-exporter	Microsoft Teams Tabアプリの連絡先エクスポーターアプリ。
bot-sso	SSOを使用したMicrosoft Teams BotアプリのHello Worldアプリ
todo-list-SPFx	SharePointでホストされるToDoリストアプリ
hello-world-in-meeting	Teamsミーティングのコンテキストで使用するアプリのテンプレート
todo-list-with-Azure-backend-M365	Teams、Outlook、Officeを含むMicrosoft 365全体で実行されるToDoリストアプリ
NPM-search-connector-M365	TeamsおよびOutlook(Web)でNPMパッケージを検索して共有するアプリ
bot-proactive-messaging-teamsfx	ユーザーにプロアクティブなメッセージを送信する方法を示すアプリ。
adaptive-card-notification	ユーザーにアダプティブカード通知を送信する方法を示すアプリ。
incoming-webhook-notification	Incoming Webhookを使用して通知を送信する方法を示すアプリ。
stocks-update-notification-bot	Microsoft Teamsで最新の株価を追跡するアプリ。
query-org-user-with-message-extension-sso	メッセージ拡張機能SSOで組織ユーザーをクエリするアプリ。
team-central-dashboard	Microsoft Graphからのデータチャットとコンテンツを表示するシングルダッシュボード。
graph-connector-app	カスタムグラフコネクタを構築する方法を示すアプリ。
graph-toolkit-one-productivity-hub	カレンダーイベント、ToDoタスク、ファイルフォルダーを表示するためのSSOを使用したMicrosoft Teamsタブアプリ。
todo-list-with-Azure-backend	Azure FunctionsバックエンドとAzure SQLデータベースを備えたToDoリストアプリ。
share-now	タブとメッセージ拡張機能を含むナレッジ共有アプリ。
hello-world-teams-tab-and-outlook-add-in	Teams TabとOutlookアドイン機能を含むHello Worldプロジェクト。
outlook-add-in-set-signature	ユーザーの署名を設定するOutlookアドイン。
developer-assist-dashboard	Azure DevOps、Githubの課題、Plannerタスクと統合するダッシュボード。
live-share-dice-roller	Microsoft Live ShareとAzure Fluid Relayを使用して複数のユーザー間で共有体験を可能にするサンプル。
teams-chef-bot	Microsoft Teams AIライブラリを使用したボットの構築方法を示すサンプル。
spfx-productivity-dashboard	SharePoint Frameworkを使用したMicrosoft Teams Tabアプリで、カレンダーイベント、ToDoタスク、ファイルフォルダーを表示する。
react-retail-dashboard	SharePoint Frameworkを使用したMicrosoft Teams Tabアプリで、デモサンプルデータに基づくContoso小売ダッシュボードを表示する。
sso-enabled-tab-via-apim-proxy	APIMをプロキシとして使用したSSO対応Microsoft Teams Tabアプリ。
large-scale-notification	Teams Toolkitによって作成されたTeams通知ボットアプリがテナント内の多数のユーザーに個別のチャットメッセージを送信するアーキテクチャを示すサンプル。
graph-connector-bot	Microsoft GraphにカスタムデータをクエリするTeamsコマンドボットを構築する方法を示すサンプルアプリ。
bot-conversation-python	基本的な会話フローをTeamsアプリケーションに統合する方法を示すサンプル。
msgext-search-python	検索ベースのメッセージング拡張機能を構築する方法を示すサンプル。
gc-nodejs-typescript-food-catalog	カスタムAPIからMicrosoft GraphにデータをインジェストするMicrosoft Graphコネクタを作成するプロジェクトのサンプル。
reddit-link-unfurling	RedditリンクをAdaptive CardにフォーマットするTeamsアプリケーションを構築するサンプル。
meetings-live-code-interview	live share SDKを使用してTeamsミーティングステージでライブコーディングをデモするサンプル。
intelligent-data-chart-generator	Azure OpenAIによって動作するMicrosoft Teams Tabアプリで、ユーザー入力を解釈してAzure SQLからデータチャートを生成する。
bot-sso-docker	SSOとMicrosoft Graphを使用したTeams Botの作成方法を示すサンプル（Dockerコンテナ化）。
hello-world-tab-docker	バックエンドサービスを持つMicrosoft Teams TabアプリのHello Worldアプリ（Dockerコンテナ化）。

サンプルプロジェクトを生成

以下のコマンドで生成します。

npx teamsapp new sample -i false サンプルID

サンプルIDと同名のディレクトリ内に出力されます。

実行例

npx teamsapp new sample -i false bot-sso

一応Git初期コミットしておきます。

cd サンプルID
gitignore visualstudiocode >> .gitignore
git init
git add .
git commit -m 'Initial commit.'

サンプルプロジェクトの内容

bot-sso サンプルの内容です。

├── README.md
├── aad.manifest.json
├── appPackage
│   ├── color.png
│   ├── manifest.json
│   └── outline.png
├── assets
│   ├── sample.json
│   ├── sampleDemo.gif
│   └── thumbnail.png
├── env
├── infra
│   ├── azure.bicep
│   ├── azure.parameters.json
│   └── botRegistration
│       ├── azurebot.bicep
│       └── readme.md
├── package.json
├── public
│   ├── auth-end.html
│   └── auth-start.html
├── src
│   ├── authConfig.ts
│   ├── commands
│   │   ├── SSOCommand.ts
│   │   ├── SSOCommandMap.ts
│   │   └── showUserProfile.ts
│   ├── config.ts
│   ├── index.ts
│   ├── ssoDialog.ts
│   └── teamsBot.ts
├── teamsapp.local.yml
├── teamsapp.yml
├── tsconfig.json
└── web.config

ディレクトリがたくさんできました。

srcの下がサーバーサイドのプログラム、infraの下がAzureデプロイ用リソース定義と思われます。appPackage、assets、publicの下は謎です。追い追い調べます。

サンプルプロジェクトを実行する

README.md ファイルに実行方法が書かれています。

とりあえずnpm installします。

npm i

Microsoft 365にログインします。ブラウザが起動します。

devtunnel user login

トンネルサービスを起動します。

devtunnel host -p 3978 --protocol http --allow-anonymous

以下の様なメッセージが出力されます。

Hosting port: 3978
Connect via browser: https://alrm462t-3978.asse.devtunnels.ms
Inspect network activity: https://alrm462t-3978-inspect.asse.devtunnels.ms

Ready to accept connections for tunnel: look-foot-043b42c

メッセージにあわせて、env/.env.local ファイルを変更します。

env/.env.local

BOT_ENDPOINT=https://alrm462t-3978.asse.devtunnels.ms
BOT_DOMAIN=alrm462t-3978.asse.devtunnels.ms

以下のコマンドを順に実行します。

npx teamsapp provision --env local
npx teamsapp deploy --env local
npx teamsapp preview --env local

ブラウザでTeamsが開いて、アプリの追加画面になります。Add をクリックします。

チャット画面に遷移しました。

show と打つとメッセーが表示されました。Continue をクリックすると、

いったん同意画面を挟んで、

結果が返されました。

おわりに

開発作業に必要なものをインストールし、サンプルプロジェクトを動かしてみました。

ところで、サーバーサイドプログラムはどこで動いているのだろ？
開発用の無償環境とかあるのかな？