[Microsoft][Node.js] Teams bot開発環境を整える 2024年6月版

# はじめに

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

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

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

# あらかじめ必要なもの

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

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

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

## Node.js

macOS や Linux の場合は [nodenv](https://github.com/nodenv/nodenv?tab=readme-ov-file#installation) を使用してインストールするのが簡単です。

Windows の場合は [NVM for Windows](https://github.com/coreybutler/nvm-windows/releases) を使用してインストールするのが簡単かな？

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

自分は 20.14.0 を入れました。

## Microsoft 365 開発用テナント

[Microsoft 365 開発者プログラム](https://developer.microsoft.com/en-us/microsoft-365/dev-program) に参加することで、Microsoft 365 E5 を25ライセンス分使用できるようになります。

## TeamsFx cli

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

```bash
npm i -g @microsoft/teamsapp-cli
```

## Dev tunnel cli

macOS / Linux / Windows それぞれ[Dev tunnel cliのインストール方法](https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/get-started)が案内されています。それぞれに従ってインストールします。

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

```bash
brew install --cask devtunnel
```

## Visual Studio Code

[Visual Studio Code](https://code.visualstudio.com/) からダウンロードするなり、パッケージマネージャを使うなり、さくっとインストールします。


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

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


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

用意されているサンプルの一覧です（以下のコマンドの出力結果を加工したものです。翻訳は[ChatGTP](https://chatgpt.com/)です）。

```bash
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コンテナ化）。                          |


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

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

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

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

```bash:実行例
npx teamsapp new sample -i false bot-sso
```

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

```bash
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します。

```bash
npm i
```

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

```bash
devtunnel user login
```


![Screenshot 2024-06-16 at 09-54-50 Sign in to your account.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59475/5c61c6a2-4d11-7996-eaa0-47bd97fca58c.png)


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

```bash
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` ファイルを変更します。

```bash:env/.env.local
BOT_ENDPOINT=https://alrm462t-3978.asse.devtunnels.ms
BOT_DOMAIN=alrm462t-3978.asse.devtunnels.ms
```

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

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

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

![Screenshot 2024-06-16 at 10-07-48 Chat Otto.bot Microsoft Teams.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59475/8576063c-2d82-4d82-682f-07315315bf22.png)

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

![Screenshot 2024-06-16 at 10-09-04 sso-botlocal Microsoft Teams.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59475/4fc3e107-c92e-504a-a46f-87ca221e9bdc.png)

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

![Screenshot 2024-06-16 at 10-11-25 sso-botlocal Microsoft Teams.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59475/f245d9e1-e0fb-3a9d-37a9-bf4d8d2d70a2.png)

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

![Screenshot 2024-06-16 at 10-11-35 .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59475/190ffb48-ae0a-b0cb-b88a-9572f75efe2c.png)

![Screenshot 2024-06-16 at 10-11-54 Sign in to your account.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59475/efc14c21-ec5a-5726-18ed-d623501ebae7.png)

結果が返されました。

![Screenshot 2024-06-16 at 10-12-12 sso-botlocal Microsoft Teams.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59475/ae6e67e9-42ac-3c96-d197-6e51ee7337eb.png)

# おわりに

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

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