Blazor を使用して初めてのアプリを構築する
Blazor を使用すると、JavaScript ではなく C# を使用して対話型の Web UI を構築できます。
Blazor と最新バージョンの Visual Studio を使用して、タブ アプリとボット アプリを作成できます。
注:
現時点では、Teams Toolkit はメッセージ拡張機能をサポートしていません。
前提条件
アプリのビルドとデプロイに必要なツールの一覧を次に示します。
| インストール | 使用するには... | |
|---|---|---|
| Visual Studio 2022 | Visual Studio 2022 でエンタープライズ バージョンをインストールし、ASP.NET および Web 開発ワークロードをインストールできます。 最新バージョンを使用します。 | |
| Microsoft Teams | Microsoft Teams は、チャット、会議、通話をすべて 1 か所で行うアプリを通じて、作業するすべてのユーザーと共同作業を行います。 | |
| Microsoft Edge (推奨) または Google Chrome | 開発者ツールを備えたブラウザー。 | |
| 開発トンネル | Teams アプリの機能 (会話型ボット、メッセージ拡張機能、受信 Webhook) には、受信接続が必要です。 トンネルは、開発システムを Teams に接続します。 開発トンネルは、localhost をインターネットに安全に開き、アクセス権を持つユーザーを制御するための強力なツールです。 開発トンネルは、Visual Studio 2022 バージョン 17.7.0 以降で使用できます。 または 、 ngrok をトンネルとして使用して、開発システムを Teams に接続することもできます。 タブのみを含むアプリには必要ありません。 このパッケージはプロジェクト ディレクトリ内にインストールされます (npm devDependencies を使用)。 |
必要なツールをインストールしたら、開発環境を設定します。
Microsoft Teams Toolkit をインストールする
Teams Toolkit は、アプリのクラウド リソースのプロビジョニングとデプロイ、Microsoft Teams ストアへの発行などを行うツールを使用して、開発プロセスを簡素化するのに役立ちます。
ツールキットは、Visual Studio または という CLI (コマンド ライン インターフェイス) teamsfxで使用できます。
最新バージョンの Visual Studio をダウンロードします。
ダウンロード フォルダーから開きます
vs_enterprise__3bed52501a604464b1eff2ce580fd4eb.exe。[Visual Studio インストーラー] ページで [続行] を選択して、インストールを構成します。
![[続行] オプションが赤で強調表示されているVisual Studio インストーラーのスクリーンショット。](assets/images/teams-toolkit-v2/blazor/visual-studio-installer.png)
[ワークロード ] で [ASP.NET と Web 開発 ] を選択 します。
[インストールの詳細] で [Microsoft Teams 開発ツール] を選択します。
[インストール] を選択します。
Visual Studio は数分でインストールされます。
Teams 開発テナントを設定する
テナントは、Teams のorganizationのスペースまたはコンテナーのようなもので、チャット、ファイルの共有、会議の実行を行います。 この領域は、カスタム アプリをアップロードしてテストする場所でもあります。 テナントを使って開発する準備ができているかどうかを確認しましょう。
カスタム アプリのアップロードを有効にする
アプリを作成したら、アプリを配布せずに Teams に読み込む必要があります。 このプロセスは、カスタム アプリのアップロードと呼ばれます。 このオプションを表示するには、Microsoft 365 アカウントにサインインします。
Teams クライアントで、[ アプリ ] アイコンを選択します。
[アプリの管理] を選択します。
[ アプリのアップロード] を選択します。
[カスタム アプリのアップロード] オプションを探します。 オプションが表示された場合は、カスタム アプリのアップロードが有効になります。
注:
カスタム アプリをアップロードするオプションがない場合は、Teams 管理者に問い合わせてください。
無料の Teams 開発者テナントを作成する (省略可能)
Teams 開発者アカウントをお持ちでない場合は、無料で入手できます。 Microsoft 365 開発者プログラムに参加します。
Microsoft 365 開発者プログラムに移動します。
[今すぐ参加] を選択し、画面の指示に従います。
ようこそ画面で、[E5 サブスクリプションの設定] を選択します。
管理者アカウントを設定します。 完了すると、次の画面が表示されます。
設定した管理者アカウントを使用して Teams にサインインします。 Teams に [カスタム アプリのアップロード] オプションがあることを確認します。
無料の Azure アカウントを取得します。
Azure でアプリやアクセス リソースをホストする場合には、Azure サブスクリプションが必要です。 開始する前に無料でアカウントを作成してください。
これで、アカウントを設定するためのツールがすべて揃いました。 次に、開発環境を設定し、ビルドを開始しましょう。 最初に作成するアプリを選択します。
タブ アプリ用のプロジェクト ワークスペースを作成する
Visual Studio を開きます。
[ 新しいプロジェクトの作成] を選択します。
![Visual Studio と [新しいプロジェクトの作成] オプションを示すスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/vs-select-project.png)
[ 新しいプロジェクトの作成] ページが表示されます。
検索ボックスに「 Microsoft Teams」と入力します。 検索結果から [ Microsoft Teams アプリ] を選択します。
[次へ] を選択します。
![[次へ] オプションを使用して新しいプロジェクトを作成するスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/vs-select-teams-app.png)
「プロジェクト名」と入力し、[作成] を選択します。
![[作成] オプションを使用して新しいプロジェクトを構成するスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/configure-new-project.png)
アプリの機能として [タブ] を 選択します。
[作成] を選択します。
Teams タブ アプリは数秒で作成されます。
Teams タブ アプリの作成の簡単な要約。
Teams タブ アプリを作成するためのこの短い要約をご覧ください。
Teams タブ アプリのソース コードを見る
プロジェクトが作成されると、基本的な個人用アプリをビルドするためのコンポーネントが準備できたことになります。 プロジェクト ディレクトリ構造は、Visual Studio の [ソリューション エクスプローラー] ペインで表示できます。
Teams Toolkit では、選択した機能に基づいてプロジェクトのスキャフォールディングが作成されます。 その他のファイルの中でも、Teams Toolkit では次の内容が維持されます。
| フォルダー名 | コンテンツ |
|---|---|
| アプリのアイコン | アプリ アイコンは PNG ファイルとして color.png と outline.png に格納されます。 |
manifest.json |
Teams 用開発者ポータルを介して発行するためのアプリ マニフェスト (以前は Teams アプリ マニフェストと呼ばれる) は に Properties/manifest.json格納されます。 |
BackendController.cs |
バックエンド コントローラーは、認証を支援するために で Controllers/BackendController.cs 提供されます。 |
Pages/Tab.razor |
Teams 用開発者ポータルを介して発行するためのアプリ マニフェストは に Properties/manifest.json格納されます。 |
TeamsFx.cs と JS/src/index.js |
コンテンツは、Teams ホストとの通信を初期化するために使用されます。 |
バックエンド機能を追加するには、他の ASP.NET Core コントローラーをアプリケーションに追加します。
最初の Teams タブ アプリをビルドして実行する
Teams Toolkit を使用してプロジェクト ワークスペースを設定したら、次にタブ プロジェクトをビルドします。
アプリをビルドして実行するには:
[ Project>Teams ツールキット>] [Teams アプリの依存関係の準備] の順に選択します。
Microsoft 365 アカウントにサインインし、[続行] を選択します。
[デバッグ] [デバッグ>の開始] の順に選択するか、F5 キーを押します。
[セキュリティ警告] ダイアログが表示されたら、[はい] を選択します。
![[はい] オプションを使用したセキュリティ警告を示すスクリーンショット。](assets/images/teams-toolkit-v2/ssl-prompt.png)
[ 追加] を 選択して、Teams にアプリをインストールします。
これで、最初のタブ アプリがローカル環境で実行されます。
Microsoft Graph を使用してアプリでユーザーの詳細を取得できるようにするには、[承認] を選択 します。
![[承認] オプションが赤で強調表示されている Microsoft Teams のスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/authorize-user-info.png)
[同意する] を選択します。
[ 個人用] タブに写真と詳細が表示されます。
他の Web アプリケーションと同様に、プレークポイントの設定など通常のデバッグ作業を行うことができます。 このアプリはホット リロードをサポートしています。 プロジェクト内のファイルを変更すると、ページが再読み込みされます。
Visual Studio でデバッグを停止します。
最初の Teams タブ アプリをプレビューする
タブ機能を使用して Teams アプリを作成、ビルド、実行する方法について学習しました。 次の最後の手順では、Teams で Azure とプレビューにアプリをデプロイします。
Teams Toolkit を使用して、Microsoft Azure でタブ機能を持つ最初のアプリをデプロイしましょう。
Azure でタブ アプリをプロビジョニングするには
[Project Teams ToolkitProvision in the Cloud]\(クラウドのProject>Teams Toolkit> プロビジョニング\) を選択します。
![[クラウド] オプションの [プロジェクト]、[Teams ツールキット]、[プロビジョニング] の Visual Studio のスクリーンショットが赤で強調表示されています。](assets/images/teams-toolkit-v2/blazor-vs-preview2/vs-build-provision_1.png)
[ プロビジョニング ] ダイアログで、サブスクリプションとリソース グループの詳細を入力します。
- ドロップダウン リストから サブスクリプション名 を選択します。
- ドロップダウン リストから [リソース グループ] を選択します。
- 既存のリソース グループがない場合は、新しいリソース グループを作成できます。 新しいリソース グループを作成するには、[ 新規> ] を選択し、リソース名 > を入力 して [OK] を選択します。 新しいリソース グループの場所ドロップダウン リストから場所を選択します。
- [プロビジョニング] を選択します。
![[新規] と [プロビジョニング] が赤で強調表示されている [プロビジョニング] のスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/select-subscription.png)
Teams Toolkit の警告ダイアログが表示されます。
[プロビジョニング] を選択します。
![[プロビジョニング] が赤で強調表示されている Teams Toolkit のスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/provision-warning.png)
リソース グループがクラウドでプロビジョニングされるまでに数分かかります。
[OK] を選択します。
![[OK] オプションが赤で強調表示されている Teams ツールキットのスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/provision-complete.png)
[プロビジョニングされたリソースの表示] を選択して、Azure portalを表示します。
![[プロビジョニングされたリソースの表示] が赤で強調表示されている Teams Toolkit のスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/view-resource.png)
Azure ポータルにサインインします。
app-dev-rg が表示されます。
リソースは、Azure portalでプロビジョニングされます。
![[クラウド] オプションの [プロジェクト]、[Teams ツールキット]、[プロビジョニング] の Visual Studio のスクリーンショットが赤で強調表示されています。](assets/images/teams-toolkit-v2/blazor-vs-preview2/vs-build-provision_2.png#lightbox)
タブ アプリをクラウドにデプロイするには
[ProjectTeams ToolkitDeploy to the Cloud]\(Project > Teams Toolkit > Deploy to the Cloud...\) を選択します。
![Visual Studio と Project、Teams Toolkit、および [クラウドへのデプロイ] オプションが赤で強調表示されているスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/vs-build-deploytocloud_1.png)
[OK] を選択します。
![[OK] オプションを使用した Teams Toolkit のスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/deploy-success.png)
タブ アプリがクラウドに正常にデプロイされました。
![Visual Studio と Project、Teams Toolkit、および [クラウドへのデプロイ] オプションが赤で強調表示されているスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/vs-build-deploytocloud_2.png#lightbox)
Teams でタブ アプリをプレビューするには
[ Teams での Project>Teams ツールキット>プレビュー] を選択します。
[追加] を選択します。
![Blazor アプリを追加するための [追加] オプションが表示されている Teams のスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/blazor-add-app.png)
これで、最初のタブ アプリが Azure 環境で実行されています。
[承認] を選択して、Microsoft Graph を使用してアプリがユーザーの詳細を取得できるようにします。
[同意する] を選択します。
[ 個人用] タブに写真と詳細が表示されます。
![Blazor アプリを追加するための [追加] オプションが表示されている Teams のスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/blazor-add-app.png#lightbox)
ボット アプリ用のプロジェクト ワークスペースを作成する
最初のアプリを作成して、Teams アプリ開発を開始します。 このアプリはボット機能を使用します。
ボット プロジェクトを作成する
Visual Studio を開きます。
[ 新しいプロジェクトの作成] を選択します。
[ 新しいプロジェクトの作成] ページが表示されます。
検索ボックスに「 Microsoft Teams」と入力します。 検索結果から [ Microsoft Teams アプリ] を選択します。
[次へ] を選択します。
![[次へ] オプションを使用して新しいプロジェクトを作成するを示すスクリーンショット。](assets/images/teams-toolkit-v2/blazor/vs-select-teams-app.png)
[ 新しいプロジェクトの構成] ウィンドウが表示されます。
「プロジェクト名」と入力し、[作成] を選択します。
![[作成] オプションが赤で強調表示された [新しいプロジェクトの構成] のスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/configure-new-project-bot.png)
[ 新しい Teams アプリケーションの作成 ] ウィンドウが表示されます。
[Teams アプリ機能] を選択します。
アプリの機能として コマンド ボット アプリを選択します。
[作成] を選択します。
![コマンド ボットと [作成] オプションが赤で強調表示された新しい Teams アプリケーションの作成のスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/select-bot_1.png)
Teams ボット アプリは数秒で作成されます。
Teams ボット アプリを作成する簡単な要約。
Teams ボット アプリを作成するためのこの短い要約をご覧ください。
Teams ボット アプリのソース コードを見る
プロジェクトが作成されると、基本的な個人用アプリをビルドするためのコンポーネントが準備できたことになります。 プロジェクト ディレクトリ構造は、最新の Visual Studio のソリューション エクスプローラー領域で表示できます。
Teams Toolkit では、選択した機能に基づいてプロジェクトのスキャフォールディングが作成されます。 その他のファイルの中でも、Teams Toolkit では次の内容が維持されます。
| フォルダー名 | コンテンツ |
|---|---|
| アプリのアイコン | アプリ アイコンは PNG ファイルとして color.png と outline.png に格納されます。 |
manifest.json |
Teams 用開発者ポータルを介して発行するためのアプリ マニフェストは に Properties/manifest.json格納されます。 |
BackendController.cs |
バックエンド コントローラーは、認証を支援するために で Controllers/BackendController.cs 提供されます。 |
TeamsFx.cs と JS/src/index.js |
コンテンツは、Teams ホストとの通信を初期化するために使用されます。 |
バックエンド機能を追加するには、他の ASP.NET Core コントローラーをアプリケーションに追加します。
最初のボット アプリをビルドして実行する
アプリをローカルに構築して実行するには、以下のようにします。
トンネルを作成する
Visual Studio を開きます。
[ 新しいプロジェクトの作成] を選択します。
検索ボックスに「ASP.NET」 と入力します。 検索結果から [ASP.NET Core Web アプリ] を選択します。
[次へ] を選択します。
「プロジェクト名」と入力し、[次へ] を選択します。
[作成] を選択します。
概要ウィンドウが表示されます。
デバッグ ドロップダウン リストで、[Dev Tunnel (アクティブ トンネルなし)]>[トンネルの作成]を選択します。...
ポップアップ ウィンドウが表示されます。
ポップアップ ウィンドウで次の詳細を更新します。
- アカウント: Microsoft または GitHub アカウントを入力します。
- [名前]: トンネルの名前を入力します。
- トンネルの種類: ドロップダウン リストから [ 一時] を選択します。
- アクセス: ドロップダウン リストから [パブリック] を選択 します。
[OK] を選択します。
開発トンネルが正常に作成されたことを示すポップアップ ウィンドウが表示されます。
[OK] を選択します。
作成したトンネルは、次のようにデバッグ ドロップダウン リストにあります。
F5 キーを押して、デバッグ モードでアプリケーションを実行します。
[セキュリティ警告] ダイアログが表示されたら、[はい] を選択します。
ポップアップ ウィンドウが表示されます。
[続行] を選択します。
開発トンネルのホーム ページが新しいブラウザー ウィンドウで開き、開発トンネルがアクティブになりました。
Visual Studio に移動し、[出力の表示] を選択します>。
[出力コンソール] ドロップダウン メニューで、[Dev Tunnels]\(開発トンネル\) を選択します。
出力コンソールには、開発トンネル URL が表示されます。
[ Project>Teams ツールキット>] [Teams アプリの依存関係の準備] の順に選択します。
Microsoft 365 アカウントにサインインし、[続行] を選択します。
[ デバッグ>] [デバッグの開始] を選択するか 、[F5 ] を選択してデバッグ モードでアプリを実行します。
[追加] を選択します。
![Blazor アプリを追加するための [追加] オプションが表示されている Teams のスクリーンショット。[追加] オプションが赤で強調表示されています。](assets/images/teams-toolkit-v2/blazor-vs-preview2/add-bot.png)
これで、ボットは Teams で正常に実行されるようになりました。 アプリが読み込まれると、ボットを使用したチャット セッションが表示されます。
![[提案] で [ようこそ] オプションが強調表示されている Microsoft Teams のスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/bot-welcome.png)
「」と入力
helloworldして、アダプティブ カードの概要カードを表示できます。
他の Web アプリケーションと同様に、プレークポイントの設定など通常のデバッグ作業を行うことができます。 このアプリはホット リロードをサポートしています。 プロジェクト内のファイルを変更すると、ページが再読み込みされます。
アプリがローカルで実行されない場合のトラブルシューティング方法について説明します。
Teams でアプリを正常に実行するには、Teams アカウントでカスタム アプリのアップロードが有効になっていることを確認します。 カスタム アプリのアップロードの詳細については、「前提条件」セクションを参照してください。
最初のボット アプリをプレビューする
Azure でボット アプリをプロビジョニングするには
[Project Teams ToolkitProvision in the Cloud]\(クラウドのProject>Teams Toolkit> プロビジョニング\) を選択します。
[ プロビジョニング ] ダイアログで、サブスクリプションとリソース グループの詳細を入力します。
ドロップダウン リストから サブスクリプション名 を選択します。
ドロップダウン リストから [リソース グループ] を選択します。
既存のリソース グループがない場合は、新しいリソース グループを作成できます。 新しいリソース グループを作成するには、[ 新規> ] を選択し、リソース名 > を入力 して [OK] を選択します。 [新しいリソース グループの場所] ドロップダウン リストから場所を選択します。
[プロビジョニング] を選択します。
![プロビジョニング オプションが赤で強調表示されている [プロビジョニング] のスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/provision-azure_1.png)
Teams Toolkit の警告ダイアログが表示されます。
[プロビジョニング] を選択します。
![[プロビジョニング] が赤で強調表示されている Teams Toolkit のスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/permission-azure.png)
リソース グループがクラウドでプロビジョニングされるまでに数分かかります。
プロビジョニングが完了したら、[ OK] を選択します。
![[OK] オプションが赤で強調表示されている Teams ツールキットのスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/apppackage1-azure.png)
[プロビジョニングされたリソースの表示] を選択して、Azure portalを表示します。
![[プロビジョニングされたリソースの表示] が赤で強調表示されている Teams Toolkit のスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/view-resource-azure.png)
Azure ポータルにサインインします。
app-dev-rg が表示されます。
リソースは、Azure portalでプロビジョニングされます。
ボット アプリをクラウドにデプロイするには
[ProjectTeams ToolkitDeploy to the Cloud]\(Project>Teams Toolkit> のクラウドへのデプロイ\) を選択します。
![Visual Studio と Project、Teams Toolkit、および [クラウドへのデプロイ] オプションが赤で強調表示されているスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/deploy-to-cloud-azure_1.png)
[OK] を選択します。
ボット アプリがクラウドに正常にデプロイされました。
![Visual Studio と Project、Teams Toolkit、および [クラウドへのデプロイ] オプションが赤で強調表示されているスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/deploy-to-cloud-azure_2.png#lightbox)
Teams でボット アプリをプレビューするには
[ Teams での Project>Teams ツールキット>プレビュー] を選択します。
[追加] を選択します。
![Blazor アプリを追加するための [追加] オプションが表示されている Teams のスクリーンショット。](assets/images/teams-toolkit-v2/blazor-vs-preview2/add-app-azure.png)
これで、ボットは Teams で正常に実行されるようになりました。 アプリが読み込まれると、ボットを使用したチャット セッションが表示されます。
「」と入力
helloworldして、アダプティブ カードの概要カードを表示できます。
おめでとうございます!
これで完了です。
タブ アプリとボット アプリという異なる機能を持つ 2 つのアプリを作成しました。
Blazor を使用してアプリをビルドするためのチュートリアルを完了しました。
このセクションに問題がある場合 このセクションを改善できるよう、フィードバックをお送りください。
Platform Docs
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示