SPFx を使用して初めてのアプリをビルドする
タブ、ボット、またはメッセージ拡張機能を使用して最初の Teams アプリをビルドして、Microsoft Teams アプリの開発を開始します。
このチュートリアルでは以下を学習します。
- 新しいプロジェクトを設定する方法。
- C# と Microsoft Visual Studio 2022 を使用してタブ機能を使用してアプリを構築する方法。
このステップ バイ ステップ ガイドは、Teams Toolkit を使用してタブを構築するのに役立ちます。 このガイドを完了すると、次の出力が表示されます。
前提条件
Teams アプリをビルドして展開するためにインストールする必要があるツールの一覧を次に示します。
インストール | 使用するには... | |
---|---|---|
Microsoft Teams | Microsoft Teams は、チャット、会議、通話を 1 か所で行うアプリを通じて、作業するすべてのユーザーと共同作業を行います。 | |
Visual Studio 2022 |
Visual Studio 2022 でエンタープライズ バージョンをインストールし、ASP.NET および Web 開発ワークロードをインストールできます。 最新バージョンを使用します。 | |
Teams ツールキット | アプリのプロジェクト スキャフォールディングを作成する Visual Studio 拡張機能。 最新バージョンを使用します。 |
Teams Toolkit のインストール
Teams Toolkit は、アプリのプロジェクト スキャフォールディングを作成するためのツールを使用して開発プロセスを簡略化するのに役立ちます。 選択したすべての機能に必要なディレクトリ構造が作成され、必要なファイルが配置され、プロジェクトをビルドする準備が整います。
最新の Visual Studio インストーラーをダウンロードできます。 Teams Toolkit は、Visual Studio の拡張機能として使用できます。
Visual Studio インストーラーを開いた後、ポップアップ ワークロード ウィンドウで。
[ ASP.NET と Web 開発] を選択します。
[ インストールの詳細>] [省略可能] で、[ Microsoft Teams 開発ツール] を選択します。
[インストール] を選択します。
[ 起動] を選択します。 Visual Studio 2022 アプリ ウィンドウが表示されます。
[拡張機能] [拡張機能の管理]> の順に移動します。
[拡張機能の管理] ウィンドウが表示されます。
左側のウィンドウで、[ インストール済み] を選択します。 Teams Toolkit 拡張機能は有効です。
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 を使用してタブ アプリのプロジェクト ワークスペースをCreateする#
最初のアプリを作成して、Microsoft Teams アプリ開発を開始します。 このアプリは、タブ機能を使用します。
前提条件を満たしている場合は開始します。
次の手順は、Visual Studio でタブ アプリのプロジェクト ワークスペースを作成するのに役立ちます。
Visual Studio を開きます。
[ 新しいプロジェクト] を選択します。
検索ボックスに「Teams」と入力 します。
[Microsoft Teams アプリの次へ] を>選択します。
次の詳細を入力して、新しいプロジェクトを構成します。
- [プロジェクト名] に必要な プロジェクト名を入力します。
- プロジェクト ファイルとフォルダーを保存するために必要な場所を選択します。
- [作成] を選択します。
[Tab Create] を選択します>。
Teams タブ アプリは数秒で作成されます。
タブ アプリのソース コードを見る
Teams Toolkit には、アプリをビルドするためのすべてのコンポーネントが備わっています。 プロジェクトを作成した後、プロジェクト フォルダーとファイルをソリューション エクスプローラーで表示できます。
C を使用して最初のタブ アプリをビルドして実行する#
Teams Toolkit を使用してプロジェクト ワークスペースを設定したら、タブ アプリをビルドします。
Microsoft 365 アカウントにサインインする
Microsoft 365 アカウントを使用して Teams にサインインします。 Microsoft 365 開発者プログラム テナントを使用している場合は、Microsoft 365 アカウントは、登録中に設定した管理者アカウントです。
ソリューション エクスプローラーの [ソリューション MyTeamsApp] で、MyTeamsApp を右クリックします。
[ Teams Toolkit>] [Teams アプリの依存関係の準備] の順に選択します。
[Microsoft 365 アカウントの続行] を>選択します。
Visual Studio でアプリをローカルでビルドして実行する
アプリをローカルに構築して実行するには、以下のようにします。
[ デバッグ>] [デバッグの開始] を 選択するか 、「F5」と入力します。
Visual Studio はデバッグ プロセスを開始し、ブラウザーで Teams Web クライアントを開きます。 メッセージが表示されたら、Microsoft 365 アカウントを使用してサインインします。
[追加] を選択します。
これで、最初のタブ アプリが Teams で実行されます。
アプリがローカルで実行されない場合のトラブルシューティング方法について説明します。
Teams でアプリを正常に実行するには、Teams アカウントでカスタム アプリのアップロードが有効になっていることを確認します。 カスタム アプリのアップロードの詳細については、「前提条件」セクション を 参照してください。
おめでとうございます!
C# を使用してタブ アプリが正常に作成されました。 Teams Toolkit によって、アプリのディレクトリ構造に必要なスキャフォールディングが追加されました。 これでチュートリアルは完了です。
このセクションに問題がある場合 このセクションを改善できるよう、フィードバックをお送りください。
Platform Docs