Teams でワークフローボットを構築する手順 - Teams

ワークフローボットを使用すると、ユーザーはワークフローボットアプリのアダプティブカードアクションハンドラー機能によって有効になっているアダプティブカードと対話できます。トリガーされたアダプティブカードアクションに応答すると、シーケンシャルワークフローが完了します。アダプティブカードを取得すると、入力のカードに 1 つ以上のボタンが表示されます。また、API を呼び出してから、カードアクションに応答して、会話で別のアダプティブカードを送信することもできます。このチュートリアルでは以下を学習します。

Teams Toolkit を使用してワークフローボットを構築する方法。
アプリのディレクトリ構造について。

次の出力を確認できます。

ワークフローボットの出力を示すスクリーンショット。

前提条件

残り 9 分

アプリをビルドして展開するために必要なツールの一覧を次に示します。

	インストール	を使用する場合
必須
	Visual Studio Code	JavaScript または TypeScript、ビルド環境。最新バージョンを使用します。
	Teams ツールキット	アプリのプロジェクトスキャフォールディングを作成する Microsoft Visual Studio Code 拡張機能。最新バージョンを使用します。
	Node.js	バックエンド JavaScript ランタイム環境。詳細については、「プロジェクトの種類Node.js バージョン互換性テーブル」を参照してください。
	Microsoft Teams	Microsoft Teams、チャット、会議、通話などのアプリを通じて作業するすべてのユーザーと 1 か所で共同作業を行うことができます。
	Microsoft Edge (推奨) または Google Chrome	開発者ツールを備えたブラウザー。
	Microsoft 365 開発者アカウント	アプリをインストールするための適切なアクセス許可を持つ Teams アカウントにアクセスします。

注:

このガイドは、Teams Toolkit の最新バージョンと Nodejs バージョン 18 および 20 でテストされています。このガイドの手順は他のバージョンで動作する可能性がありますが、テストされていません。

開発環境を準備する

必要なツールをインストールしたら、開発環境を設定します。

Teams Toolkit のインストール

Microsoft Teams Toolkit は、アプリのクラウドリソースをプロビジョニングしてデプロイし、Teams ストアに発行するツールを使用して、開発プロセスを簡略化するのに役立ちます。

Teams Toolkit は、Visual Studio Code または TeamsFx CLI というコマンドラインインターフェイスで使用できます。

Visual Studio Code
Command Line/コマンドライン

Visual Studio Code を開き、 拡張機能 (Ctrl + Shift + X または ビュー>Extensions) を選択します。
検索ボックスに、「Teams Toolkit」と入力します。
[インストール] を選択します。

Teams Toolkit アイコンが Visual Studio Code アクティビティバーに表示されます。

Visual Studio Code Marketplace から Teams Toolkit をインストールすることもできます。

TeamsFx CLI をインストールするには、 npm パッケージマネージャーを使用し、コマンドプロンプトで次のコマンドを入力します。

npm install -g @microsoft/teamsfx-cli

構成によっては、 sudo を使用して CLI をインストールする必要がある場合があります。

sudo npm install -g --unsafe-perm @microsoft/teamsfx-cli

Linux および macOS システムではこの条件はより一般的です。

npm グローバルキャッシュが PATH に追加されていることを確認します。この手順は通常、Node.js インストーラーの一部として行われます。

CLI で teamsfx コマンドを指定して使用できます。 teamsfx -h を実行して、このコマンドが動作していることを確認します。

注意

PowerShell ターミナルで TeamsFx を実行するには、PowerShell の リモート署名付き 実行ポリシーを有効にする必要があります。

Teams 開発テナントを設定する

テナントは、Teams のorganizationのスペースまたはコンテナーであり、チャット、ファイルの共有、会議の実行を行います。この領域は、アプリをアップロードしてテストする場所でもあります。テナントを使って開発する準備ができているかどうかを確認しましょう。

アプリのアップロードオプションを確認する

カスタムアプリを作成したら、[カスタムアプリのアップロード] オプションを使用してアプリを Teams に アップロードする 必要があります。このオプションが有効になっている場合は、Microsoft 365 アカウントにサインインしてチェックします。

次の手順は、Teams でアプリをアップロードできるかどうかを確認するのに役立ちます。

Teams クライアントで、[ アプリ ] アイコンを選択します。
[アプリの管理] を選択します。
[ アプリのアップロード] を選択します。
[カスタムアプリのアップロード] オプションを探します。オプションが表示されている場合は、カスタムアプリをアップロードできます。

注:

カスタムアプリをアップロードするオプションが見つからない場合は、Teams 管理者に問い合わせてください。

無料の Teams 開発者テナントを作成する (省略可能)

Teams 開発者アカウントをお持ちでない場合は、Microsoft 365 開発者プログラムに参加してください。

Microsoft 365 開発者プログラムに移動します。
[今すぐ参加] を選択し、画面の指示に従います。
ようこそ画面で、[E5 サブスクリプションの設定] を選択します。
管理者アカウントを設定します。完了すると、次の画面が表示されます。
設定した管理者アカウントを使用して Teams にサインインします。 Teams に [カスタムアプリのアップロード] オプションがあることを確認します。

ワークフローボットを構築する

残り 8 分

Visual Studio Code を使用してワークフローボットを構築するには、次の手順を実行します。

Visual Studio Code を開きます。
Visual Studio Code アクティビティバーの [Teams Toolkit] アイコンを選択します。
[ 新しいアプリの作成] を選択します。
[ ボット ] を選択して、新しいボットプロジェクトを作成します。
アプリでビルドするアプリ機能として、[ チャットのシーケンシャルワークフロー ] を選択します。
プログラミング言語として [TypeScript ] を選択します。
[既定のフォルダー] を選択して、プロジェクトのルートフォルダーを既定の場所に格納します。

注:

[参照]を選択して、既定の場所を変更することもできます。
アプリに適した名前を入力します。
Enter キーを押します。
ワークフローボットは数秒で作成され、スキャフォールディングを確認できます。
Visual Studio Code アクティビティバーの [実行とデバッグ アイコン] を選択します。
ドロップダウンリスト から [Teams でのデバッグ (Edge)] または [Teams でのデバッグ (Chrome)] を選択します。
[ デバッグの開始] を選択します。
[ 追加] を選択するか、ドロップダウンメニューを使用して、ワークフローボットアプリをチーム、チャット、または会議に追加します。

ワークフローボットアプリを追加するための選択を示すスクリーンショット。

ソースコードのツアーを見る

Teams Toolkit には、アプリをビルドするためのコンポーネントが用意されています。プロジェクトを作成したら、Visual Studio Code for JavaScript/TypeScript のエクスプローラー領域にあるプロジェクトフォルダーとファイルを表示できます。

ワークフローボットアプリを追加するための選択を示すスクリーンショット。

作成されたボットは、次のフォルダーを含む通常の TeamsFx プロジェクトです。

フォルダー/ファイル	コンテンツ
`teamsapp.yml`	メインプロジェクトファイルは、アプリケーションの構成について説明し、各ライフサイクルステージで実行するアクションのセットを定義します。
`teamsapp.local.yml`	これにより、ローカル実行とデバッグを有効にするアクションで `teamsapp.yml` がオーバーライドされます。
`env/`	名前と値のペアは環境ファイルに格納され、プロビジョニングとデプロイの規則をカスタマイズするために `teamsapp.yml` によって使用されます。
`.vscode/`	デバッグ用の VSCode ファイル。
`appPackage/`	Teams アプリケーションマニフェストのテンプレート。
`infra/`	Azure リソースをプロビジョニングするためのテンプレート。
`src/`	アプリケーションのソースコード。
`src/index.js`	ワークフローボットのアプリケーションエントリポイントと `express` ハンドラー。
`src/teamsBot.js`	ボットのカスタマイズのための空の teams アクティビティハンドラー。
`src/commands/helloworldCommandHandler.js`	チャットコマンドへの応答を処理する実装。
`src/adaptiveCards/helloworldCommandResponse.json`	チャットコマンドに応答して表示されるアダプティブカード (UI) を定義します。
`src/adaptiveCards/doStuffActionResponse.json`	"doStuff" アクションの応答のために Teams に送信される生成されたアダプティブカード。
`src/cardActions/doStuffActionHandler.js`	アダプティブカードに表示される `doStuff` ボタンのハンドラーを実装します。

ワークフローボットとの対話

残り 3 分

helloWorld コマンドを送信することで、Teams でボットと対話できます。

ワークフローボットアプリを追加するための選択を示すスクリーンショット。

アダプティブカードで次のコマンド応答を受け取ります。

ワークフローボットアプリを追加するための選択を示すスクリーンショット。

次に、[ DoStuff ] ボタンを選択して、次の更新されたアダプティブカードで応答するアクションを呼び出すことができます。

ワークフローボットアプリを追加するための選択を示すスクリーンショット。

課題の完了

残り 1 分

このようなものを思いついたのですか?

ワークフローボットアプリを追加するための選択を示すスクリーンショット。

おめでとうございます。

100% 完了しました

チュートリアルを完了して、Microsoft Teamsのワークフローボットの使用を開始しました。

次の方法で共有

Teams ワークフローボットを作成する

前提条件