演習 - メッセージ拡張機能を作成する

完了

この演習では、メッセージ拡張ソリューションを作成します。 Visual Studio で Teams Toolkit を使用して必要なリソースを作成し、デバッグ セッションを開始し、Microsoft Teamsでテストします。

メッセージ拡張プロジェクトを作成する

まず、検索コマンドを含むメッセージ拡張機能を使用して構成された新しいMicrosoft Teams アプリ プロジェクトを作成します。 Teams Toolkit for Visual Studio Code プロジェクト テンプレートを使用してプロジェクトを作成できますが、このモジュールを完了するには、スキャフォールディングされたプロジェクトに対して変更を加える必要があります。 代わりに、npm パッケージとして使用できるカスタム プロジェクト テンプレートを使用します。 カスタム テンプレートを使用する利点は、必要なファイルと依存関係を含むソリューションを作成し、時間を節約することです。

コマンド ラインで次の手順を実行します。

1. npm create teams-msgext-searchを実行してプロジェクトの作成を開始します。 次のように質問に回答します。

   1. アプリの内部名: msgext-products。 プロジェクト ジェネレーターでは、この名前を使用して新しいフォルダーを作成します。 また、 package.json ファイルのプロジェクト名としても使用されます。 この名前は、リソースをプロビジョニングするときにも使用されます。
   2. アプリの表示名: Contoso Products。 この名前は、Microsoft Teamsに表示されます。
   3. アプリの簡単な説明: Product look up tool。 この説明は、ユーザー Microsoft Teamsアプリの目的を理解するのに役立ちます。
   4. アプリの完全な説明: Get real-time product information and share them in a conversation。 この説明は、ユーザー Microsoft Teamsアプリの目的を理解するのに役立ちます。
   5. コマンドの ID: Search。 この ID は、アプリ マニフェストの検索コマンドの内部名です。
   6. コマンドの説明: Find products by name。 この説明は、メッセージ拡張機能のポップアップに表示されます。
   7. コマンドのタイトル: Products。 このタイトルは、メッセージ拡張機能のポップアップに表示されます。
   8. パラメーターの名前: ProductName。 この名前は、アプリ マニフェストのパラメーターの内部名です。
   9. パラメーターのタイトル: Product name。 このタイトルは、Microsoft Teamsの検索コマンドに表示されます。
   10. パラメーターの説明: The name of the product as a keyword。 この説明は、メッセージ拡張機能の検索ボックスにプレースホルダー テキストとして表示されます。

2. プロジェクト ジェネレーターがプロジェクトの作成を完了するまで待ちます。

3. 作業ディレクトリを新しく作成したプロジェクト フォルダーに変更します。

4. code .を実行して Visual Studio Code を開きます。

5. Visual Studio Code が開いてプロジェクトを読み込むのを待ちます。

6. メッセージが表示されたら、[ インストール ] を選択して推奨される拡張機能をインストールします。

実行とデバッグ

Teams Toolkit を使用してアプリを初めて起動すると、プロジェクトの依存関係がインストールされ、必要なリソースが作成されます。 このプロセスでは、Microsoft 365 アカウントと Azure アカウントでサインインする必要があります。 完了すると、ブラウザー ウィンドウが開き、アプリのインストール ダイアログがMicrosoft Teams Web クライアントに表示されます。

Visual Studio Code で次の手順を実行します。

1. F5 キーを押してデバッグ セッションを開始するか、サイドバーから [実行とデバッグ] を選択し、[実行とデバッグ] の横にある緑色の再生ボタンを選択します。
2. メッセージが表示されたら、[ サインイン ] を選択し、Microsoft 365 アカウントでサインインします。
3. メッセージが表示されたら、[ サインイン ] を選択し、Azure アカウントでサインインします。
4. [Teams Toolkit がアカウントを使用して Azure にサインインできるようにする ] を選択します。
5. 一覧から Azure サブスクリプションを選択します。
6. 既存のリソース グループを選択するか、新しいリソース グループを作成する
   1. 新しいリソース グループを作成するには、[ 新規作成] を選択し、名前を入力して Enter キーを押します。
   2. 一覧から最も近い場所を選択します。
7. [ プロビジョニング] を選択して、必要なリソースを作成します。
8. ブラウザー ウィンドウが開き、アプリのインストール ダイアログがMicrosoft Teams Web クライアントに表示されるまで待ちます。
9. [アプリのインストール] ダイアログで、[ 追加 ] を選択してアプリをインストールします。

メッセージ拡張機能をテストするには:

1. 新規または既存のMicrosoft Teams チャットを開く
2. メッセージ作成領域で、[ + ] を選択してアプリ ピッカーを開きます
3. アプリの一覧で [ Contoso 製品 ] を選択して、メッセージ拡張機能を開きます
4. テキスト ボックスに「hello」と入力します。
5. 検索結果が表示されるまで待ちます
6. 結果の一覧で [hello] を選択して、カードを作成メッセージ ボックスに埋め込みます

デバッグを停止するには、ブラウザー ウィンドウを閉じます。