プロアクティブメッセージを送信するボットを作成する - Teams

プロアクティブメッセージは、ユーザーからチャットで送信された単純なコマンドに応答してボットによって送信されるメッセージです。メッセージ応答は、次のいずれかの形式にすることができます。

ウェルカムメッセージ
予定されたメッセージ
通知

このステップバイステップガイドは、ボットからプロアクティブメッセージを送信するのに役立ちます。次の出力が表示されます。

Teams チャットのプロアクティブな hello メッセージを示すスクリーンショット。

前提条件

残り 9 分

アプリをビルドして展開するための次のツールを必ずインストールしてください。

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

開発環境を準備する

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

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

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

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

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

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

注:

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

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

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

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

プロアクティブメッセージボットを構築する

残り 7 分

Visual Studio Code を使用してプロアクティブメッセージボットを構築するには、次の手順に従います。

Visual Studio Code を開きます。
Visual Studio Code アクティビティバーの [Teams Toolkit ] アイコンを選択します。
左側のウィンドウで、[ サンプルの表示] を選択します。
サンプルの一覧から [ プロアクティブメッセージング] を選択します。デバッグの準備ができている事前構築済みのサンプルが開きます。
[作成] を選択します。
[既定のフォルダー] を選択して、プロジェクトのルートフォルダーを既定の場所に格納します。

既定の場所を変更する場合は、次の手順を実行します。
1. [ 参照] を選択します。
2. プロジェクトワークスペースの場所を選択します。
3. [ フォルダーの選択] を選択します。
プロアクティブメッセージボットは数秒で作成され、プロアクティブメッセージボットの成功ダイアログが右下隅に表示され、デバッグするオプションが表示されます。

:::
左上隅にある [ 実行とデバッグ アイコン] を選択します。
ドロップダウンリストから [デバッグ (Edge)] または [デバッグ (Chrome)] を選択します。

デバッグが成功すると、ローカルコンピューター上の Teams にプロアクティブメッセージボットをアップロードするように求められます。
[ 追加] の横にあるドロップダウンから、[ チームに追加] または [ チャットに追加] または [ 会議に追加] を選択します。
検索フィールドにチャットまたはチームの名前を入力し、[ボットの設定] を選択します。

プロアクティブメッセージボットアプリは Teams クライアントにアップロードされ、送信されたメッセージに応答して次のメッセージが表示されます。
URL をコピーして貼り付けるか、ブラウザーの URL に移動します。プロアクティブな hello メッセージがトリガーされ、チャットで共有されます。
Teams に移動します。ボットから プロアクティブな hello メッセージが表示されます。

ソースコードのツアーを開始する

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

[構造] タブを示すスクリーンショット。

新しいプロジェクトフォルダーには、次の内容が含まれています。

フォルダー/ファイル	コンテンツ
`.vscode/`	デバッグ用の Visual Studio Code ファイル。
`appManifest/`	アプリマニフェスト (以前は Teams アプリマニフェストと呼ばれる) のテンプレート。
`env/`	名前と値のペアは環境ファイルに格納され、プロビジョニングとデプロイの規則をカスタマイズするために `teamsapp.yml` によって使用されます。
`manifest.json`	Teams 用開発者ポータルを介して発行するためのアプリマニフェストは、 `Properties/manifest.json`に格納されます。
`teamsapp.yml`	メインプロジェクトファイルは、アプリの構成を記述し、各ライフサイクルステージで実行するアクションのセットを定義します。
`teamsapp.local.yml`	これにより、ローカル実行とデバッグを有効にするアクションで `teamsapp.yml` がオーバーライドされます。

プロアクティブメッセージボットをデプロイする

残り 4 分

プロアクティブなメッセージボット機能を使用して Teams アプリをビルドして実行する方法を学習しました。 Teams Toolkit を使用して、プロアクティブメッセージボット機能を備えた最初のアプリを Azure にデプロイしましょう。

アカウントを使用して Microsoft Azure portal にアクセスし、新しいクラウドリソースをプロビジョニングしてアプリをサポートします。

Visual Studio Code を開きます。
プロアクティブメッセージボットアプリを作成したプロジェクトフォルダーを開きます。
Visual Studio Code アクティビティバーの [Teams Toolkit ] アイコンを選択します。
[資格情報 を使用して Azure にサインインする ] を選択します。

ヒント

AZURE ACCOUNT 拡張機能がインストールされていて、同じアカウントを使用している場合は、この手順をスキップできます。

既定の Web ブラウザーが開き、アカウントにサインインできます。
メッセージが表示されたらブラウザーを閉じて、Visual Studio Code に戻ります。

サイドバーの [アカウント] セクションに、2 つのアカウントが個別に表示されます。また、使用可能な Azure サブスクリプションの数も一覧表示されます。使用可能な Azure サブスクリプションが少なくとも 1 つ用意されていることを確認します。ない場合は、サインアウトして別のアカウントを使用します。

アプリを Azure にデプロイする

デプロイは、2 つの手順で構成されます。まず、必要なクラウドリソースが作成されます (プロビジョニングとも呼ばれます)。次に、アプリのコードが作成されたクラウドリソースにコピーされます。このチュートリアルでは、ボットアプリをデプロイします。

プロビジョニングとデプロイの違いは何ですか?

プロビジョニング により、アプリ用の Azure と Microsoft 365 にリソースが作成されますが、コード (HTML、CSS、JavaScript) はリソースにコピーされません。 デプロイ では、プロビジョニング中に作成したリソースにアプリのコードがコピーされます。新しいリソースをプロビジョニングせずに複数回デプロイするのが一般的です。プロビジョニングの完了には時間がかかる場合があるため、デプロイとは別です。

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

Visual Studio Code アクティビティバーの [Teams Toolkit ] アイコンを選択します。
[ライフサイクル] で [ プロビジョニング ] を選択 します。
既存のサブスクリプションのいずれかを選択します。
既存のリソースグループを選択するか、新しいリソースグループを作成します。詳細については、「リソースグループの作成」を参照してください。

注:

Azure でリソースを実行するときにコストが発生する可能性があることを示すダイアログが表示されます。
[プロビジョニング] を選択します。

プロビジョニングプロセスでは、Azure クラウドにリソースが作成されます。右下隅に表示されるダイアログで進行状況を監視できます。数分後に、次のダイアログが表示されます。
[ライフサイクル] で [デプロイ] を選択します。
[展開] を選択します。

デプロイには時間がかかります。右下隅に表示されるダイアログで進行状況を監視できます。数分後に、次のダイアログが表示されます。
Visual Studio Code からデバッグパネル (Ctrl + Shift + D / ⌘⇧-D または View>Run) を開きます。
[起動構成] ドロップダウンリストから [ リモートの起動 (Edge)] を選択します。

デバッグが成功すると、プロアクティブメッセージボットアプリを Teams にアップロードするように求められます。
[ 追加] の横にあるドロップダウンから、[ チームに追加] または [ チャットに追加] または [ 会議に追加] を選択します。
検索フィールドにチャットまたはチームの名前を入力し、[ボットの設定] を選択します。

プロアクティブメッセージボットアプリは Teams クライアントにアップロードされ、送信されたメッセージに応答して次のメッセージが表示されます。
URL をコピーして貼り付けるか、ブラウザーの URL に移動します。プロアクティブな hello メッセージがトリガーされ、チャットで共有されます。
Teams に移動します。ボットから プロアクティブな hello メッセージが表示されます。