フュージョン開発アプローチによるボットの開発: Teams Toolkit によるボットのデプロイ

はじめに

本記事は、ビジネス要件に詳しい市民開発者、高度なプログラミング技術を持つプロ開発者らが協業してソリューションを開発する、フュージョン開発アプローチに関する記事の一つです。

Microsoft は、「The future of bot building」という記事で、フュージョン開発アプローチをサポートするものとして、下記を紹介しています。

• Power Virtual Agents と Bot Framework Composer の統合
• Power Virtual Agents と Microsoft Azure Bot Service の両方を双方向のスキルとして使用する機能

前回の記事では、前者の手順をご紹介しました。
今回は、後者の最初のステップとして、Teams Toolkit、Bot Framework SDK を使って Microsoft Azure Bot Service に Microsoft Teams のボットをデプロイしてみます。

Teams Toolkit

Microsoft Azure Bot Service に Microsoft Teams のボットをデプロイする方法はいくつかありますが、Teams Toolkit を使用すると、Visual Studio Code 上で簡単にボットの開発、プロビジョニング、デプロイを行うことができます。
Teams Toolkit は Visual Studio Code の 拡張機能 として提供されています。
利用するには、Visual Studio Code のアクティビティバーから拡張機能アイコンを選択し、Teams Toolkit を検索、インストールします。

作成するボットの仕様

今回は、ユーザーが入力したメッセージをオウム返しする、単純なエコーボットを作成します。
処理されたことを明確にするために、返却するメッセージには、先頭に「Echo: 」を付与することとします。

プロジェクト ワークスペースの作成

Visual Studio Code アクティビティバーの Teams Toolkit アイコンを選択し、「新しいアプリを作成する」ボタンを押します。

アプリや開発環境に関するいくつかのオプションが表示されますが、今回は下記のように選択します。

• 「新しい Teams アプリを作成する」/「サンプルから開始する」
  ->「新しい Teams アプリを作成する」
• 「機能を選択する」下の機能オプション
  ->「ボット」
• 「JavaScript」/「TypeScript」
  ->「TypeScript」
• プロジェクトの作成先フォルダー
  ->「規定のフォルダー」
• Application name
  ->「EchoBot」と入力

入力が完了すると、プロジェクト ワークスペースが作成されます。

プロジェクト ワークスペースの構成

プロジェクト ワークスペースのフォルダ構成は下記のようになっています。

├─.fx            -- Teams、Azure 上でアプリをカスタマイズするための設定ファイル
├─.vscode        -- デバッグ時のメニュー構成など Visual Studio Code の設定ファイル
├─bot            -- 実行時に必要なボット本体のコード。
└─templates
    ├─appPackage -- アプリのパッケージに必要なマニフェストやアイコンなど
    └─azure      -- Azure へのデプロイに必要な Bicep ファイルなど

一部のソースコードについても簡単に説明します。

bot/index.ts

サーバーのエントリポイント。ボットのフレームワークには、restify という Express をさらに軽量化したようなフレームワークが使用されています。
ボットに関する API のエンドポイントは/api/messagesとなっており、このパスへのリクエストは TeamsBot クラスで処理するようにルーティングされています。
botbuilder というライブラリが使われていますが、これが Bot Framework SDK で提供されているものになります。

bot/teamsBot.ts

ボットの主要な処理が実装されています。TeamsBot クラスを定義、export しています。

エコー処理の実装

受信したメッセージの先頭に「Echo: 」を付与してメッセージを返す、エコー処理を実装します。ここでは、簡単なプログラミングを行います。

bot/teamsBot.tsの onMessage() にメッセージ受信時の処理が実装されており、受信したメッセージと定義済のコマンドを比較して処理する switch 文が存在しますが、ここに下記を追加します。

        default: {
          await context.sendActivity(`Echo: ${removedMentionText}`);
          break;
        }

Microsoft 365 アカウントにサインインする

Teams の利用、Azure AD へのアプリケーションの登録のため、Microsoft 365 アカウントにサインインします。
Visual Studio Code アクティビティバーの Teams Toolkit アイコンを選択し、「ACCOUNTS」下の「Microsoft 365 にサインインする」メニューを実行、Microsoft 365 にサインインします。

ローカル環境でのビルド、実行

Visual Studio Code アクティビティバーの 「実行とデバッグ」アイコンを選択すると、メニューの上部にデバッグオプションが表示されます。「Debug (Edge)」または「Debug (Chrome)」のいずれかを選択した状態で「デバッグの開始」ボタンを押す（または F5 キーを押す）と、ビルドが開始されます。

選択したブラウザから Teams が起動されます。サインインを要求された場合はサインインします。すると、下記のようなボットのインストール画面が表示されます。

ボットのインストール画面で「追加」を押すと、初期メッセージとともにボットとのチャット画面が表示されます。

ここで任意のメッセージを送ると、「Echo: 」を付与したメッセージが返却されます。

Azure にサインインする

ボットを Azure へデプロイします。Azure 上でリソースを作成できるサブスクリプションとアカウントが必要です。
Visual Studio Code アクティビティバーの Teams Toolkit アイコンを選択し、「ACCOUNTS」下の「Azure にサインイン」メニューを実行、Azure にサインインします。

Azure へのデプロイ

Visual Studio Code アクティビティバーの Teams Toolkit アイコンを選択し、「DEPLOYMENT」下の「クラウドでのプロビジョニング」メニューを実行し、Azure サブスクリプション、リソースグループを選択、プロビジョニングを実行します。

プロビジョニングが完了すると、指定したリソースグループ上に、Azure ボット、App Service プラン、App Service、マネージド ID が作成されます。

次に、作成したリソースにボットをデプロイします。

Teams Toolkit の「DEPLOYMENT」下「クラウドへのデプロイ」メニューを実行すると、デプロイが開始され、完了すると下記のようなメッセージが表示されます。

デプロイされたアプリを実行する

Visual Studio Code アクティビティバーの 「実行とデバッグ」アイコンを選択し、メニュー上部のデバッグオプションから「Launch Remote (Edge)」または「Launch Remote (Chrome)」のいずれかを選択した状態で「デバッグの開始」ボタンを押します。

ローカル環境と同様、選択したブラウザから Teams が起動され、ボットのインストール画面で「追加」を押すと、初期メッセージとともにボットとのチャット画面が表示されます。

ここで任意のメッセージを送ると、ローカル環境と同様、「Echo: 」を付与したメッセージが返却されます。

まとめ

今回の記事では、Teams Toolkit、Bot Framework SDK を使って、簡単なエコーボットを Azure にデプロイしてみました。ボットの実装にはプログラミング技術が必要ですが、ビルドやデプロイは Visual Studio Code 上で簡単に行えることが確認できたと思います。
次回はこのエコーボットを、スキルとして呼び出せるようにします。