SPFx を使用して初めてのアプリをビルドする
アプリ開発Microsoft Teams開始するには、タブ、ボット、またはメッセージ拡張機能を使用して最初の Teams アプリをビルドします。
このチュートリアルでは以下を学習します。
- 新しいプロジェクトを設定する方法。
- C# と Microsoft Visual Studio 2022 を使用してタブ機能を使用してアプリを構築する方法。
このステップ バイ ステップ ガイドは、Microsoft 365 Agents Toolkit (以前は Teams Toolkit と呼ばれる) を使用してタブを作成するのに役立ちます。 このガイドを完了すると、次の出力が表示されます。
前提条件
Teams アプリをビルドして展開するためにインストールする必要があるツールの一覧を次に示します。
| インストール | 使用するには... | |
|---|---|---|
| Microsoft Teams | Microsoft Teams、チャット、会議、通話を 1 か所で行うためにアプリを通じて作業するすべてのユーザーと共同作業を行うことができます。 | |
|
Visual Studio 2022 |
Visual Studio 2022 でエンタープライズ バージョンをインストールし、ASP.NET および Web 開発ワークロードをインストールできます。 最新バージョンを使用します。 | |
| Microsoft 365 Agents Toolkit | アプリのプロジェクト スキャフォールディングを作成する Visual Studio 拡張機能。 最新バージョンを使用します。 |
エージェント ツールキットをインストールする
Agents Toolkit は、アプリのプロジェクト スキャフォールディングを作成するためのツールを使用して開発プロセスを簡略化するのに役立ちます。 選択したすべての機能に必要なディレクトリ構造が作成され、必要なファイルが配置され、プロジェクトをビルドする準備が整います。
最新の Visual Studio インストーラーをダウンロードできます。 エージェント ツールキットは、Visual Studio の拡張機能として使用できます。
Visual Studio インストーラーを開いた後、ポップアップ ワークロード ウィンドウで。
[ ASP.NET と Web 開発] を選択します。
[ インストールの詳細>オプション] で、[ Microsoft Teams開発ツール] を選択します。
[インストール] を選択します。
[ 起動] を選択します。 Visual Studio 2022 アプリ ウィンドウが表示されます。
[拡張機能>管理拡張機能] に移動します。
![[拡張機能] の選択を示すスクリーンショット。](assets/images/sbs-csharp/select-extension.png)
[拡張機能の管理] ウィンドウが表示されます。
![[拡張機能の管理] を示すスクリーンショット。](assets/images/sbs-csharp/manage-ext.png)
左側のウィンドウで、[ インストール済み] を選択します。 Microsoft 365 Agents Toolkit 拡張機能は使用できません。
![[拡張機能の管理] を示すスクリーンショット。](assets/images/sbs-csharp/manage-extension.png#lightbox)
Teams 開発テナントを設定する
テナントは、Teams のorganizationのスペースまたはコンテナーのようなもので、チャット、ファイルの共有、会議の実行を行います。 この領域は、カスタム アプリをアップロードしてテストする場所でもあります。 テナントを使って開発する準備ができているかどうかを確認しましょう。
カスタム アプリのアップロード オプションを確認する
アプリを作成したら、アプリを配布せずに Teams に読み込む必要があります。 このプロセスは、カスタム アプリのアップロードと呼ばれます。 このオプションを表示するには、Microsoft 365 アカウントにサインインします。
注:
Teams ローカル環境でアプリをプレビューおよびテストするために、カスタム アプリのアップロードが必要です。 有効になっていない場合、Teams ローカル環境でアプリをプレビューしてテストすることはできません。
テナントと管理者アクセス権は既にありますか? 行う場合は、チェックしましょう。
Teams でカスタム アプリをアップロードできるかどうかを確認します。
Microsoft Teams開き、[ アプリ ] アイコンを選択します。
[アプリの管理] を選択します。
[ アプリのアップロード] を選択します。
[カスタム アプリのアップロード] オプションを探します。 オプションが表示された場合は、カスタム アプリのアップロードが有効になります。
注:
カスタム アプリをアップロードするオプションが見つからない場合は、Teams 管理者に問い合わせてください。
無料の Teams 開発者テナントを作成する (省略可能)
Teams アカウントをお持ちでない場合は、無料で入手できます。 Microsoft 365 開発者プログラムに参加します。
Microsoft 365 開発者プログラムに移動します。
[今すぐ参加] を選択し、画面の指示に従います。
ようこそ画面で、[ セットアップ E5 サブスクリプション] を選択します。
管理者アカウントを設定します。 完了すると、次の画面が表示されます。
セットアップした管理者アカウントを使用して Teams にサインインします。 Teams で [カスタム アプリのアップロード] オプションがあることを確認します。
無料の Azure アカウントを取得します。
アプリをホストするか、Azure でリソースにアクセスする場合は、 Azure サブスクリプションが必要です。 開始する前に無料でアカウントを作成してください。
これで、アカウントを設定するためのツールがすべて揃いました。 次に、開発環境を設定し、ビルドを開始しましょう。 最初に作成するアプリを選択します。
C を使用してタブ アプリのプロジェクト ワークスペースを作成する#
最初のアプリを作成して、Microsoft Teams アプリ開発を開始します。 このアプリは、タブ機能を使用します。
前提条件を満たしている場合は開始します。
次の手順は、Visual Studio でタブ アプリのプロジェクト ワークスペースを作成するのに役立ちます。
Visual Studio を開きます。
[ 新しいプロジェクト] を選択します。
![Visual Studio の [新しいプロジェクト] の選択を示すスクリーンショット。](assets/images/sbs-csharp/visual-studio-welcome.png)
検索ボックスに「Teams」と入力 します。
[Microsoft 365 Agents>Next] を選択します。
次の詳細を入力して、新しいプロジェクトを構成します。
- [プロジェクト名] に必要な プロジェクト名を入力します。
- プロジェクト ファイルとフォルダーを保存するために必要な場所を選択します。
- [作成] を選択します。
[Tab>Create] を選択します。
Teams タブ アプリは数秒で作成されます。
タブ アプリのソース コードを見る
Agents Toolkit には、アプリをビルドするためのすべてのコンポーネントが用意されています。 プロジェクトを作成した後、プロジェクト フォルダーとファイルをソリューション エクスプローラーで表示できます。
C を使用して最初のタブ アプリをビルドして実行する#
Agents Toolkit を使用してプロジェクト ワークスペースを設定したら、タブ アプリをビルドします。
Microsoft 365 アカウントにサインインする
Microsoft 365 アカウントを使用して Teams にサインインします。 Microsoft 365 開発者プログラム テナントを使用している場合は、Microsoft 365 アカウントは、登録中に設定した管理者アカウントです。
ソリューション エクスプローラーの [ソリューション MyTeamsApp] で、MyTeamsApp を右クリックします。
[ Microsoft 365 Agents Toolkit>Microsoft 365 アカウントを選択します。
[Microsoft 365 アカウント>Continue] を選択します。
Visual Studio でアプリをローカルでビルドして実行する
アプリをローカルに構築して実行するには、以下のようにします。
[デバッグ>デバッグの開始] を選択するか、[F5] を選択します。
Visual Studio はデバッグ プロセスを開始し、ブラウザーで Teams Web クライアントを開きます。 メッセージが表示されたら、Microsoft 365 アカウントを使用してサインインします。
[追加] を選択します。
[ 開く ] を選択して、個人用スコープでアプリを開きます。
または、検索して必要なスコープを選択するか、一覧からチャネルまたはチャットを選択し、ダイアログ内を移動して [移動] を選択することもできます。
これで、最初のタブ アプリが Teams で実行されます。
アプリがローカルで実行されない場合のトラブルシューティング方法について説明します。
Teams でアプリを正常に実行するには、Teams アカウントでカスタム アプリのアップロードが有効になっていることを確認します。 カスタム アプリのアップロードの詳細については、「前提条件」セクション を 参照してください。
おめでとうございます!
C# を使用してタブ アプリが正常に作成されました。 Agents Toolkit によって、アプリのディレクトリ構造に必要なスキャフォールディングが追加されました。 これでチュートリアルは完了です。
このセクションに問題がある場合 このセクションを改善できるよう、フィードバックをお送りください。
Platform Docs