Build コマンドボットと JavaScript

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

Microsoft Teams を使用すると、コマンドボットを使用して反復的なタスクを自動化できます。アダプティブカードを使用してチャットで送信される簡単なコマンドに応答します。

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

Teams Toolkit を使用してコマンドボットを構築する方法。
アプリのディレクトリ構造について。

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

前提条件

残り 4 分

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

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

ビルドコマンドボット

残り 3 分

Visual Studio Code を使用してコマンドボットをビルドするには

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

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

コマンドボットアプリは数秒で作成されます。
Visual Studio Code アクティビティバーの [実行とデバッグ] アイコンを選択します。
ドロップダウンリスト から [Teams でのデバッグ (Edge)] または [Teams でのデバッグ (Chrome)] を選択します。
[ デバッグの開始] ボタンを 選択します。コマンドボットアプリをローカルコンピューター上の Teams にアップロードするように求められます。
[ 追加] を選択するか、ドロップダウンメニューを使用して、コマンドボットアプリをチーム、チャット、または会議に追加します。
コマンドボットを選択します。
Enter キーを押します。

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

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

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

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

UI フレームワークを使用する場合は、次のサンプルテンプレートコードに従って、React コンポーネントを含むスキャフォールディングを提供します。次の内容が含まれています。

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

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

残り 2 分

コマンドボット機能を使用して Teams アプリをビルドして実行する方法を学習しました。最後の手順は、アプリを Azure に展開することです。

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

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

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

ヒント

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

既定の Web ブラウザーが開き、アカウントにサインインできます。
1. メッセージが表示されたらブラウザーを閉じて、Visual Studio Code に戻ります。
サイドバーの [アカウント] セクションに、2 つのアカウントが個別に表示されます。また、使用可能な Azure サブスクリプションの数も一覧表示されます。使用可能な Azure サブスクリプションが少なくとも 1 つあることを確認します。ない場合は、サインアウトして別のアカウントを使用します。

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

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

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

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

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

注:

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

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

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

デプロイには時間がかかります。ダイアログの進行状況は、右下隅で監視できます。数分後に、次の通知が表示されます。
Visual Studio Code からデバッグパネル (Ctrl + Shift + D / ⌘⇧-D または View > Run) を開きます。
[起動構成] ドロップダウンから [ Teams でリモートの起動 (Edge)] を選択します。
[ デバッグの開始] ボタンを 選択します。コマンドボットアプリを Teams にアップロードするように求められます。
[ 追加] を選択するか、ドロップダウンメニューを使用して、コマンドボットアプリをチーム、チャット、または会議に追加します。
コマンドボットを選択します。
Enter キーを押します。

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