はじめに
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 ファイルを変更します。
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 をクリックすると、
いったん同意画面を挟んで、
結果が返されました。
おわりに
開発作業に必要なものをインストールし、サンプルプロジェクトを動かしてみました。
ところで、サーバーサイドプログラムはどこで動いているのだろ？
開発用の無償環境とかあるのかな？