Blazor を使用して初めてのアプリを構築する
Blazor を使用すると、JavaScript の代わりに C# を使用して対話型 Web UI を構築できます。
Blazor と Visual Studio の最新バージョンを使用して、タブ アプリとボット アプリを作成できます。
注意
現時点では、Teams Toolkit はメッセージ拡張機能機能をサポートしていません。
前提条件
アプリのビルドとデプロイに必要なツールの一覧を次に示します。
| インストール | 使用するには... | |
|---|---|---|
| 必須 | ||
| Visual Studio バージョン 17.2.0 プレビュー 2.1 | Visual Studio Enterprise 2022 プレビュー (バージョン 17.2.0 プレビュー 2.1) を選択します。 | |
| Microsoft Teams | Microsoft Teams を使用して、チャット、会議、通話用のアプリを通じて共同作業を行うすべてのユーザーと 1 か所で共同作業を行うことができます。 | |
| Microsoft Edge (推奨) または Google Chrome | 開発者ツールを備えたブラウザー。 |
開発環境を準備する
必要なツールをインストールしたら、開発環境を設定します。
Microsoft Teams Toolkit をインストールする
Teams Toolkit を使用すると、アプリのクラウド リソースのプロビジョニングとデプロイ、Teams ストアへの公開などを行うツールにより、開発プロセスを簡略化できます。 このツールキットは Visual Studio で使用することも、CLI (呼び出し) teamsfxとして使用することもできます。
Visual Studio の最新バージョンを使用して、.NET で Blazor Server を使用して Teams アプリを開発できます。
Microsoft Teams Toolkit 拡張機能をインストールするには:
Visual Studio の最新バージョンをダウンロードします。
ダウンロード フォルダーから開きます
vs_enterprise__3bed52501a604464b1eff2ce580fd4eb.exe。Visual Studio インストーラー ページで [続行] を選択してインストールを構成します。
![[続行] を選択してインストールを構成する](assets/images/teams-toolkit-v2/blazor/visual-studio-installer.png)
ワークロード の下で ASP.NET と Web 開発 を選択します。
Microsoft Teams 開発ツールを選択します。
[インストール] を選択します。
Visual Studio は数分でインストールされます。
Teams 開発テナントを設定する
テナント とは、チャット、ファイルの共有、会議の実行を行う Teams の組織のスペースまたはコンテナーのようなものです。 このスペースは、アプリをサイドロードしてテストする場所でもあります。 テナントを使って開発する準備ができているかどうかを確認しましょう。
サイドローディングのオプションを有効にする
アプリを作成したら、アプリを配布せずに Teams に読み込む必要があります。 このプロセスはサイドローディングと呼ばれます。 このオプションを表示するには、Microsoft 365 アカウントにサインインします。
既にテナントがあり、管理者アクセス権がありますか? 実際にそうかどうかを確認しましょう。
Teams でアプリをサイドロードできるかどうかを確認します。
Teams クライアントで、[Store] アイコンを選択します。
[アプリの管理] を選択します。
[カスタム アプリのアップロード] オプションを探します。 オプションが表示された場合は、アプリのサイドローディングが有効です。
注意
Teams にカスタム アプリをアップロードするオプションが表示されない場合は、Teams 管理者に接続します。
無料の Teams 開発者テナントを作成する (省略可能)
Teams 開発者アカウントをお持ちでない場合は、無料で入手できます。 Microsoft 365 開発者プログラムに参加します。
Microsoft 365 開発者プログラムに移動します。
[今すぐ参加] を選択し、画面の指示に従います。
ようこそ画面で、[E5 サブスクリプションの設定] を選択します。
管理者アカウントを設定します。 完了すると、次の画面が表示されます。
設定した管理者アカウントを使用して Teams にサインインします。 Teams に [カスタム アプリのアップロード] オプションがあることを確認します。
無料の Azure アカウントを取得します。
アプリをホストする場合、または Azure でリソースにアクセスする場合は、Azure サブスクリプションが必要です。開始する前に、無料アカウントを作成 してください。
これで、すべてのツールを取得し、アカウントを設定しました。 次に、開発環境を設定し、ビルドを開始しましょう。
タブ アプリ用のプロジェクト ワークスペースを作成する
最初のアプリを作成して Teams アプリ開発を開始します。 このアプリは、タブ機能を使用します。
このチュートリアルでは、.NET/Blazor を使用して最初の Teams アプリを作成、実行、デプロイする手順について説明します。
このセクションでは、次の情報を学習できます。
タブ プロジェクトを作成する
Teams Toolkit を使用して最初のプロジェクトを作成します。 ツールキットを使用すると、Teams アプリ プロジェクトを作成および構成するための一連のページが表示されます。
- 新しいプロジェクト ページの作成 : プロジェクトの種類を選択します。
- 新しいプロジェクト ページを構成 する: プロジェクトの詳細を入力します。
- 新しい Teams アプリケーション ページを作成 する: Teams アプリの機能を選択します。
タブ プロジェクト ワークスペースを作成するには
Visual Studio の最新バージョンを開きます。
[ 新しいプロジェクトの作成] を選択します。
[ 新しいプロジェクトの作成] ページが表示されます。
プロジェクトの詳細を選択します。
プロジェクトの種類を選択します。
[すべてのプラットフォーム] ドロップダウン リストから Microsoft Teams を 選択します。
テンプレートとして Microsoft Teams アプリ を選択します。
[次へ] を選択します。
[ 新しいプロジェクトの構成] ページが表示されます。
新しいプロジェクトの詳細を構成します。
次のプロジェクト構成を選択します。
プロジェクトに適した名前を入力します。
注意
入力したプロジェクト名は 、ソリューション 名としても自動的に入力されることに注意してください。 必要に応じて、プロジェクト名に影響を与えずにソリューション名を変更できます。
プロジェクト ワークスペースを作成するフォルダー パスを選択します。
必要に応じて、別のソリューション名を入力します。
必要に応じて、プロジェクトとソリューションを同じフォルダーに保存するオプションをオンにします。 このチュートリアルでは、このオプションは必要ありません。
[作成] を選択します。
[ 新しい Teams アプリケーションの作成 ] ページが表示されます。
Teams アプリ機能を選択します。
アプリの機能を選択します。
アプリの機能として Tab アプリ を選択します。
[作成] を選択します。
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 。 |
Pages/Tab.razor |
Teams 用開発者ポータルを使用して発行するためのアプリ マニフェストは、次の場所に Properties/manifest.json格納されます。 |
TeamsFx.cs と JS/src/index.js |
コンテンツは、Teams ホストとの通信を初期化するために使用されます。 |
バックエンド機能を追加するには、他の ASP.NET Core コントローラーをアプリケーションに追加します。
最初の Teams タブ アプリをビルドして実行する
Teams Toolkit を使用してプロジェクト ワークスペースを設定したら、次にタブ プロジェクトをビルドします。
アプリをビルドして実行するには:
[Project > Teams Toolkit > Configure your Microsoft Teams] を選択します。
Microsoft 365 アカウントを選択するか 、サインインするアカウントを追加 します。
デバッグ > 開始デバッグを 選択するか 、F5 を選択して、デバッグ モードでアプリを実行します。
デバッガーでアプリをローカルに実行した場合に発生することを説明します。
F5 を選択すると、Teams Toolkit:
- Azure Active Directory にアプリケーションを登録します。
- Teams でアプリケーションを "サイドローディング" に登録します。
- ローカルで実行されているアプリケーション バックエンドを開始します。
- ローカルでホストされているアプリケーション フロントエンドを開始します。
- アプリケーションをサイド ロードするように Teams に指示するコマンドを使用して、Web ブラウザーで Teams を起動します (URL はアプリケーション マニフェスト内に登録されます)。
要求された場合は、ローカル デバッグ用の自己署名証明書をインストールします。
Teams は Web ブラウザーに読み込まれます。
アプリを Teams にインストールするように求められたら、[ 追加] を選択します。
おめでとうございます。最初のタブ アプリはローカル環境で実行されています。
ページ内を移動して、ユーザーの詳細を表示します。
![ユーザー情報にアクセスするための [承認] ボタンのスクリーンショット](assets/images/teams-toolkit-v2/blazor-vs-preview2/authorize-user-info.png)
[承認] を選択して、Microsoft Graph を使用してアプリがユーザーの詳細を取得できるようにします。
アプリは、ユーザーの詳細を表示するためのアクセス権を付与するアクセス許可を要求します。
[同意する] を選択して、アプリがユーザーの詳細情報にアクセスできるようにします。
写真と詳細が 個人用タブ に表示されます。
他の Web アプリケーションと同様に、プレークポイントの設定など通常のデバッグ作業を行うことができます。 このアプリはホット リロードをサポートしています。 プロジェクト内のファイルを変更すると、ページが再読み込みされます。
アプリがローカルで実行されない場合のトラブルシューティング方法について説明します。
Teams でアプリを実行するには、アプリのサイドローディングを許可する Microsoft 365 開発アカウントが必要です。 詳細については、「前提条件」セクションを参照してください。
最初の Teams タブ アプリをプレビューする
タブ機能を使用して Teams アプリを作成、ビルド、実行する方法を学習しました。 最後の手順は、Azure にアプリをデプロイし、Teams でプレビューすることです。 内容は次のとおりです。
- クラウドでタブ アプリをプロビジョニングする: クラウドでタブ アプリをプロビジョニングできます。
- タブ アプリをクラウドにデプロイする: タブ アプリをクラウドにデプロイできます。
- Teams でタブ アプリをプレビューする: タブ アプリが Teams で開きます。
Teams Toolkit を使用して、タブ機能を備えた最初のアプリを Azure にデプロイしましょう。
クラウドでタブ アプリをプロビジョニングするには
クラウドで Project > Teams Toolkit > のプロビジョニングを 選択します。
[プロビジョニング] ダイアログで次のように入力します。
- サブスクリプション名: Visual Studio Enterprise サブスクリプション。
- リソース グループ: [新規 ] を選択して、アプリ用に生成されたリソース グループを追加します。
- リージョンを選択 します。
- [ プロビジョニング] を選択します。
プロビジョニングの警告が表示されます。
[ プロビジョニング] を選択します。
リソース グループがクラウドでプロビジョニングされるまで数分かかります。
プロビジョニングが完了したら、[OK] を選択 します。
[プロビジョニングされたリソースの表示] を選択して、Azure portalに表示します。
サインイン プロンプトでAzure portal アカウントにサインインします。
app-dev-rg が表示されます。
リソースはAzure portalでプロビジョニングされます。
タブ アプリをクラウドにデプロイするには
Project > Teams Toolkit > Deploy to the Cloud を 選択します。
[OK] を選択します。
タブ アプリがクラウドに正常にデプロイされました。
Teams でタブ アプリをプレビューするには
Project > Teams Toolkit > プレビュー Teams アプリを選択します。
アプリを Teams にインストールするように求められたら、[ 追加] を選択します。
おめでとうございます。最初のタブ アプリは Azure 環境で実行されています。
ページ内を移動して、ユーザーの詳細を表示します。
[承認] を選択して、Microsoft Graph を使用してアプリがユーザーの詳細を取得できるようにします。
アプリは、ユーザーの詳細を表示するためのアクセス権を付与するアクセス許可を要求します。
[同意する] を選択して、アプリがユーザーの詳細情報にアクセスできるようにします。
写真と詳細が 個人用タブ に表示されます。
ボット アプリ用のプロジェクト ワークスペースを作成する
最初のアプリを作成して Teams アプリ開発を開始します。 このアプリでは、ボット機能を使用します。
このチュートリアルでは、.NET/Blazor を使用して最初の Teams アプリを作成、実行、デプロイする手順について説明します。
このセクションでは、次の情報を学習できます。
ボット プロジェクトを作成する
Teams Toolkit を使用して最初のプロジェクトを作成します。 ツールキットを使用すると、Teams アプリ プロジェクトを作成および構成するための一連のページが表示されます。
- 新しいプロジェクト ページの作成 : プロジェクトの種類を選択します。
- 新しいプロジェクト ページを構成 する: プロジェクトの詳細を入力します。
- 新しい Teams アプリケーション ページを作成 する: Teams アプリの機能を選択します。
ボット プロジェクト ワークスペースを作成するには
Visual Studio の最新バージョンを開きます。
[ 新しいプロジェクトの作成] を選択します。
[ 新しいプロジェクトの作成] ページが表示されます。
プロジェクトの詳細を選択します。
プロジェクトの種類を選択します。
[すべてのプラットフォーム] ドロップダウン リストから Microsoft Teams を 選択します。
テンプレートとして Microsoft Teams アプリ を選択します。
[次へ] を選択します。
[ 新しいプロジェクトの構成] ページが表示されます。
新しいプロジェクトの詳細を構成します。
次のプロジェクト構成を選択します。
プロジェクトに適した名前を入力します。
注意
入力したプロジェクト名は 、ソリューション 名としても自動的に入力されることに注意してください。 必要に応じて、プロジェクト名に影響を与えずにソリューション名を変更できます。
プロジェクト ワークスペースを作成するフォルダー パスを選択します。
必要に応じて、別のソリューション名を入力します。
必要に応じて、プロジェクトとソリューションを同じフォルダーに保存するオプションをオンにします。 このチュートリアルでは、このオプションは必要ありません。
[作成] を選択します。
[ 新しい Teams アプリケーションの作成 ] ページが表示されます。
Teams アプリ機能を選択します。
アプリの機能を選択します。
アプリの機能として ボット アプリ を選択します。
[作成] を選択します。
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 コントローラーをアプリケーションに追加します。
最初のボット アプリをビルドして実行する
アプリをローカルに構築して実行するには、以下のようにします。
[Project > Teams Toolkit > Configure your Microsoft Teams] を選択します。
Microsoft 365 アカウントを選択するか 、サインインするアカウントを追加 します。
ngrok またはコマンド プロンプトを使用して、ローカルで実行されている Web サーバーのパブリックに利用可能な HTTPS エンドポイントへのトンネルを作成します。 ngrok で次のコマンドを実行します。
ngrok http -host-header=localhost 2544デバッグ > 開始デバッグを 選択するか 、F5 を選択して、デバッグ モードでアプリを実行します。
デバッガーでアプリをローカルに実行した場合に発生することを説明します。
F5 を選択すると、Teams Toolkit:
- Azure Active Directory にアプリケーションを登録します。
- Teams でアプリケーションを "サイドローディング" に登録します。
- ローカルで実行されているアプリケーション バックエンドを開始します。
- ローカルでホストされているアプリケーション フロントエンドを開始します。
- アプリケーションをサイド ロードするように Teams に指示するコマンドを使用して、Web ブラウザーで Teams を起動します (URL はアプリケーション マニフェスト内に登録されます)。
注意
アプリを初めて実行すると、すべての依存関係がダウンロードされ、アプリがビルドされます。 ビルドが完了すると、自動的にブラウザー ウィンドウが開きます。 この処理には 3 ～ 5 分かかります。
Web ブラウザーでアプリの実行が開始されます。
ローカル マシン上の Teams にアプリをサイドロードするように求められたら、[追加] を選択します。
これで、ボットは Teams で正常に実行されるようになりました。 アプリが読み込まれると、ボットを使用したチャット セッションが表示されます。
welcomeを入力すると概要カードが表示され、learnと入力するとアダプティブ カードとボット コマンド ドキュメントが示されます。
他の Web アプリケーションと同様に、プレークポイントの設定など通常のデバッグ作業を行うことができます。 このアプリはホット リロードをサポートしています。 プロジェクト内のファイルを変更すると、ページが再読み込みされます。
アプリがローカルで実行されない場合のトラブルシューティング方法について説明します。
Teams でアプリを正常に実行するには、Teams アカウントでサイドローディングが有効になっていることを確認します。 「前提条件」セクションで、サイドローディングの詳細について確認できます。
最初のボット アプリをプレビューする
ボット機能を使用して Teams アプリを作成、ビルド、実行することを学習しました。 最後の手順は、Azure にアプリをデプロイし、Teams でプレビューすることです。 内容は次のとおりです。
- クラウドでボット アプリをプロビジョニングする: クラウドでボット アプリをプロビジョニングできます。
- ボット アプリをクラウドにデプロイする: ボット アプリをクラウドにデプロイできます。
- Teams でボット アプリをプレビューする: ボット アプリは Teams で開きます。
Teams Toolkit を使用して Azure に最初のボット アプリをデプロイしましょう。
クラウドでボット アプリをプロビジョニングするには
クラウドで Project > Teams Toolkit > のプロビジョニングを 選択します。
[プロビジョニング] ダイアログで次のように入力します。
サブスクリプション名: TTL を使用した Teams Cloud - Dev Test = 3 日間。
リソース グループ: [新規 ] を選択して、アプリ用に生成されたリソース グループを追加します。
リージョンを選択 します。
[ プロビジョニング] を選択します。
![[プロビジョニングの編集] ウィンドウ](assets/images/teams-toolkit-v2/blazor-vs-preview2/provision-azure.png)
プロビジョニングの警告が表示されます。
[ プロビジョニング] を選択します。
リソース グループがクラウドでプロビジョニングされるまで数分かかります。
プロビジョニングが完了したら、[OK] を選択 します。
[プロビジョニングされたリソースの表示] を選択して、Azure portalに表示します。
サインイン プロンプトでAzure portal アカウントにサインインします。
app-dev-rg が表示されます。
リソースはAzure portalでプロビジョニングされます。
ボット アプリをクラウドにデプロイするには
Project > Teams Toolkit > Deploy to the Cloud を 選択します。
[OK] を選択します。
ボット アプリがクラウドに正常にデプロイされました。
Teams でボット アプリをプレビューするには
Project > Teams Toolkit > プレビュー Teams アプリを選択します。
アプリを Teams にインストールするように求められたら、[ 追加] を選択します。
これで、ボットは Teams で正常に実行されるようになりました。 アプリが読み込まれると、ボットを使用したチャット セッションが表示されます。
入力
welcomeすると、概要カードを表示できます。
アダプティブ カードとボットコマンドのドキュメントに入力
learnして移動できます。
おめでとうございます!
これで完了です。
それぞれ異なる機能を持つ 2 つのアプリを作成しました。タブ アプリとボット アプリです。
Blazor を使用してアプリをビルドするためのチュートリアルを完了しました。
このセクションに問題がある場合 このセクションを改善できるよう、フィードバックをお送りください。