JavaScript を使用した通知ボットのビルド

[アーティクル]
Developer (初級)
完了まで 6 分

通知ボットは、Teams チャネルまたはグループチャットまたは個人用チャットでメッセージを事前に送信します。通知ボットは、カードやテキストなどの HTTP 要求でトリガーできます。

このチュートリアルでは、次の情報を学習します。

Teams Toolkit を使用して新しい通知ボットを作成する方法。
アプリのディレクトリ構造について。
複数の通知を送信する方法。

このステップバイステップガイドは、Teams Toolkit を使用して通知ボットを構築するのに役立ちます。次の出力を確認できます。

トリガー出力

前提条件

残り 5 分

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

	インストール	を使用する場合
	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 バージョン 14 および 16 でテストされています。このガイドの手順は他のバージョンで動作する可能性がありますが、テストされていません。

開発環境を準備する

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

Teams Toolkit のインストール

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

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

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

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

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

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

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

npm install -g @microsoft/teamsfx-cli

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

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 に [カスタムアプリのアップロード] オプションがあることを確認します。

通知ボットをビルドする

残り 4 分

Visual Studio Code を使用して通知ボットを構築するには

Visual Studio Code を開きます。
Visual Studio Code アクティビティバーの [Teams Toolkit] アイコンを選択します。
[新しいアプリCreate] を選択します。
[ ボット ] を選択して、新しいボットプロジェクトを作成します。
アプリでビルドするアプリ機能として [ チャット通知メッセージ ] が選択されていることを確認します。
トリガーとして [HTTP トリガー Restify Server] を選択します。
プログラミング言語として [JavaScript] を選択します。
[既定のフォルダー] を選択して、プロジェクトのルートフォルダーを既定の場所に格納します。

次の手順で既定の場所を変更することもできます。
1. [ 参照] を選択します。
2. プロジェクトワークスペースの場所を選択します。
3. [ フォルダーの選択] を選択します。
アプリに適した名前を入力します。
Enter キーを押します。
アプリが作成されると、Teams Toolkit に次のメッセージが表示されます。

通知ボットアプリは数秒で作成されます。
Visual Studio Code アクティビティバーの [実行とデバッグ] アイコンを選択します。
ドロップダウンリスト から [Teams でのデバッグ (Edge)] または [Teams でのデバッグ (Chrome)] を選択します。
[ デバッグの開始] ボタンを 選択します。
[追加] を選択します。

通知ボットアプリが Teams クライアントにアップロードされます。

リアルタイムでは、通知ボットがユーザーに通知を送信する原因となるサードパーティの API など、外部ソースによってイベントがトリガーされます。イベントトリガーをエミュレートするには、powershell またはターミナルを使用してイベントを手動で送信します。
イベントを呼び出して通知をトリガーするには、次のいずれかの方法を使用します。
- Windows を使用する場合は、次の手順に従います。
  1. Windows PowerShellを開きます。
  2. Invoke-Webrequest -Method POST -URI http://localhost:3978/api/notification コマンドを実行します。
- Windows を使用しない場合は、次の手順に従います。
  1. Visual Studio Code で、[ ターミナル>] [新しいターミナル ] に移動して別のターミナルを開きます。
  2. curl -X POST http://localhost:3978/api/notification コマンドを実行します。
Teams では、次の出力が得られます。

注:

アプリを Outlook と Microsoft 365 に拡張する場合は、Visual Studio Code の [ 実行とデバッグ ] ドロップダウンから、Outlook と Microsoft 365 を使用してアプリをデバッグできます。

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

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

構造タグ

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

フォルダー/ファイル名	コンテンツ
`.vscode`	デバッグ用の VSCode ファイル。
`appPackage`	アプリマニフェスト (以前は Teams アプリマニフェストと呼ばれる) のテンプレート。
`env`	名前と値のペアは環境ファイルに格納され、teamsapp.ymlによってプロビジョニングとデプロイの規則をカスタマイズするために使用されます。
`infra`	Azure リソースをプロビジョニングするためのテンプレート。
`src\`	通知 Teams アプリケーションのソースコード。
`src\index.js`	通知のアプリケーションエントリポイントと `restify` ハンドラー。
`src\teamsbot.js`	ボットのカスタマイズのための空の teams アクティビティハンドラー。
`src\adaptiveCards\notification-default.json`	Teams に送信される生成されたアダプティブカード。
`teamsapp.yml`	メインプロジェクトファイルは、アプリケーションの構成について説明し、各ライフサイクルステージで実行するアクションのセットを定義します。
`teamsapp.local.yml`	これは、ローカル実行 `teamsapp.yml` とデバッグを有効にするアクションでオーバーライドされます。

Teams チャネルに通知を送信する

残り 3 分

Teams チャネルに通知を送信するには

Visual Studio Code の [エクスプローラー] で、[ MYNOTIFICATIONBOT> src> index.js] を選択します。

次のページを参照してください。

Visual Studio Code の後 for (const target of await bot.notification.installations()) { に次のコードを使用します。

if (target.type === "Channel") {
  const members = await target.members();
  await target.sendMessage("This is a message to channel: " + members.length + " members.");
  for (const member of members) {
    await member.sendMessage("This is a message to Member: " + member.account.email);
  }
}
/*

ストレージをカスタマイズするには (省略可能):

Visual Studio Code の [エクスプローラー] で、[ MYNOTIFICATIONBOT> src> internal> initialize.js] を選択します。

次のページを参照してください。

initialize.js ファイル内の次のコードを更新して、ストレージをカスタマイズします。

const myStorage = new MyStorage(...);

// initialize ConversationBot with notification enabled and customized storage
const bot = new ConversationBot({
    // The bot id and password to create BotFrameworkAdapter.
    // See https://aka.ms/about-bot-adapter to learn more about adapters.
    adapterConfig: {
        appId: process.env.BOT_ID,
        appPassword: process.env.BOT_PASSWORD,
    },
    // Enable notification
    notification: {
        enabled: true,
        storage: myStorage,
    },
 });

MyStorage の代わりに、独自のストレージの場所を使用します。

注:

運用環境に独自のストレージを使用する必要があります。ストレージが指定されていない場合、既定のローカルファイルストレージが考慮されます。

Visual Studio Code サイドバーから [ 実行とデバッグ ] アイコンを選択します。
ドロップダウンリスト から [Teams でのデバッグ (Edge)] または [Teams でのデバッグ (Chrome)] を選択します。
[ デバッグの開始] ボタンを 選択します。

Teams では次の出力が得られます。
ドロップダウンリスト で [チームに追加] を選択します。
[Search ボックスにチャネルを追加します。
[ ボットのセットアップ] を選択します。

次の画面が表示されます。
Windows PowerShellを開きます。
Invoke-Webrequest -Method POST -URI http://localhost:3978/api/notification コマンドを実行します。

Teams チャネルで通知を受け取ります。

個人用チャットで通知を受け取ります。

最初の Teams アプリをデプロイする

残り 2 分

通知ボット機能を使用して Teams アプリをビルドして実行する方法について学習しました。最後の手順では、アプリを Azure にデプロイします。

Teams Toolkit を使用して、Azure に通知ボット機能を備えた最初のアプリをデプロイしましょう。

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

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

ヒント

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

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

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

これで Teams アプリが作成されました。次に、Teams Toolkit を使用していずれかのアプリを Azure にデプロイする方法について説明します。

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

[ デプロイ] で、必要なクラウドリソースをプロビジョニングでき、アプリのコードが作成されたクラウドリソースにコピーされます。

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

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

注:

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

プロビジョニングプロセスでは、Azure クラウドにリソースが作成されます。進行状況を監視するには、右下隅にあるダイアログを観察します。

プロビジョニングされたリソースを表示するオプションが表示されます。このチュートリアルでは、リソースを表示する必要はありません。
プロビジョニングが完了した後、[ライフサイクル] で [デプロイ] を選択します。
[展開] を選択します。

デプロイには時間がかかります。ダイアログの進行状況は、右下隅で監視できます。