次の方法で共有

Teams アプリの新規作成

Visual Studio Code と Microsoft 365 Agents Toolkit を使用してMicrosoft Teams アプリを作成する方法について説明します。 このガイドでは、基本的な Teams アプリの構築、ディレクトリ構造の探索、使用可能なテンプレートの活用のプロセスについて説明します。 シンプルな "Hello World" アプリから始める場合でも、タスクを自動化するためのアプリを構築する場合でも、Microsoft 365 全体で Teams 機能を拡張する場合でも、この記事では開始に役立つ手順について説明します。

エージェントを構築する方法について説明します

次の種類の Teams アプリを作成できます。

アプリの種類 定義
基本的な Teams アプリ 基本的な Teams アプリには、要件に基づいて作成およびカスタマイズできる Teams タブ、ボット、またはメッセージ拡張機能アプリが含まれます。
Office 用アプリの作成 このアドインのグループは、Outlook と Office.com にインストールして実行できます。

Visual Studio Code を使用して新しい Teams アプリを作成する

新しい Teams アプリを作成するプロセスは、すべての種類のアプリに似ています。 基本的な Teams アプリを作成するには:

  1. Visual Studio Code を開きます。

  2. [Microsoft 365 Agents Toolkit]\(Microsoft 365 エージェント ツールキット>新しいエージェント/アプリの作成\) を選択>[Teams エージェントとアプリ] を選択します。

    [エージェント ツールキット] サイドバーで新しいエージェントまたはアプリを作成するオプションを示すスクリーンショット。

  3. [ その他の Teams 機能] を選択します。

    他の Teams 機能を選択するオプションを示すスクリーンショット。

  4. この例では、アプリ機能として [Tab] を選択します。

    ビルドするアプリ機能を選択するオプションを示すスクリーンショット。

  5. [既定のフォルダー] を選択して、プロジェクトのルート フォルダーを既定の場所に格納します。

    スクリーンショットは、プロジェクト ワークスペースの既定の場所を選択するオプションを示しています。

    既定の場所を変更するには、次の手順に従います。

    1. [ 参照] を選択します。

    2. プロジェクト ワークスペースの場所を選択します。

      選択するフォルダーは、プロジェクト ワークスペースの場所です。

  6. アプリケーション名として、helloworld などの適切な名前を入力します。 英数字のみを使用してください。 [Enter] キーを押します。

    アプリ名を入力するフィールドを示すスクリーンショット。

    [Teams] タブ アプリ ワークスペースは数秒で作成されます。

    スクリーンショットは、プロジェクト ワークスペースが作成されていることを示しています。

問題が発生しました

さまざまなアプリの種類のディレクトリ構造

Agents Toolkit には、アプリをビルドするためのすべてのコンポーネントが用意されています。 プロジェクト ワークスペースを作成したら、[ エクスプローラー ] セクションでプロジェクト フォルダーとファイルを表示できます。


基本的な Teams アプリのディレクトリ構造

次の例は、基本的な Teams タブ アプリのディレクトリ構造を示しています。

フォルダー名 コンテンツ
.vscode TEAMS アプリをビルドおよびデバッグするための VS Code の設定。
appPackage Teams アプリを認識するために Teams が使用したアプリ マニフェスト (以前は Teams アプリ マニフェストと呼ばれる) ファイルとアイコン ファイル。
env さまざまな環境パラメーターを格納します。
infra テンプレート ファイルをAzure bicepします。 Teams アプリをAzureにデプロイするために使用されます。
src フロントエンド アプリ、UI コンポーネント、プライバシーに関する通知、使用条件など、Tab 機能のソース コード
src/app.js Web サイトのアプリケーション エントリ ポイントと express ハンドラー。
src/views/hello.html タブ エンドポイントにバインドされる HTML テンプレート。
src/static Web サーバーは、CSS や JavaScript ファイルなどの静的資産を提供できます。
m365agents.yml この構成ファイルは、プロビジョニング、デプロイ、および発行ライフサイクルのエージェント ツールキットの動作を定義します。 このファイルをカスタマイズして、ライフサイクルごとに Agents Toolkit の動作を変更できます。
m365agents.local.yml これにより、ローカル実行とデバッグを有効にするアクションでm365agents.ymlがオーバーライドされます。

注:

ボットまたはメッセージ拡張機能アプリがある場合は、関連するフォルダーがディレクトリ構造に追加されます。

さまざまな種類の基本的な Teams アプリのディレクトリ構造の詳細については、次の表を参照してください。

アプリの種類 リンク
タブ アプリの場合 JavaScript を使用して初めてのタブ アプリを構築する
ボット アプリの場合 JavaScript を使用して初めてのボット アプリを構築する
メッセージ拡張機能アプリの場合 JavaScript を使用して最初のメッセージ拡張アプリを作成する

アプリの構築に関する詳細なステップ バイ ステップ ガイドについては、「 チュートリアル」を参照してください。

関連項目

  • Last updated on