Hello World with Blazor - Teams

Blazor を使用すると、JavaScript ではなく C# を使用して対話型の Web UI を構築できます。

Blazor と最新バージョンの Visual Studio を使用して、タブアプリとボットアプリを作成できます。

ステップバイステップガイドが正常に完了した後にタブ、ボット、メッセージ拡張機能の出力が表示されている Blazor アプリのスクリーンショット。

注:

Teams Toolkit では、メッセージ拡張機能機能はサポートされていません。

前提条件

残り 8 分

アプリのビルドとデプロイに必要なツールの一覧を次に示します。

	インストール	使用するには...
	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 ツールキットは、アプリのクラウドリソースのプロビジョニングとデプロイ、Microsoft Teams ストアへの発行などのツールを使用して、開発プロセスを簡素化するのに役立ちます。
ツールキットは、Visual Studio または teamsfx と呼ばれる CLI (コマンドラインインターフェイス) で使用できます。

Visual Studio
コマンドライン

最新バージョンの Visual Studio をダウンロードします。
ダウンロードフォルダーから vs_enterprise__3bed52501a604464b1eff2ce580fd4eb.exe を開きます。
Visual Studio インストーラー ページで [続行] を選択して、インストールを構成します。
[ワークロード ] で [ASP.NET と Web 開発 ] を選択 します。
[インストールMicrosoft Teams詳細] で [開発ツール ] を 選択します。
[インストール] を選択します。

Visual Studio は数分でインストールされます。

TeamsFx CLI をインストールするには、npm パッケージマネージャーを使用します。

npm install -g @microsoft/teamsfx-cli

構成によっては、CLI をインストールするために sudo を使用しなければならないこともあります。

sudo npm install -g --unsafe-perm @microsoft/teamsfx-cli

Linux および macOS システムではこの条件はより一般的です。

npm グローバルキャッシュが PATH に追加されていることを確認します。この手順は通常、Node.js インストーラーの一部として行われます。

CLI で teamsfx コマンドを指定して使用できます。 teamsfx -h を実行して、このコマンドが動作していることを確認します。

注意

PowerShell ターミナルで TeamsFx を実行するには、PowerShell のリモート署名付き実行ポリシーを有効にする必要があります。

Teams 開発テナントを設定する

テナントは、Teams の組織のスペースまたはコンテナーのようなもので、チャット、ファイルの共有、会議の実行を行います。この領域は、カスタムアプリをアップロードしてテストする場所でもあります。テナントを使って開発する準備ができているかどうかを確認しましょう。

カスタムアプリのアップロードを有効にする

アプリを作成したら、アプリを配布せずに Teams に読み込む必要があります。このプロセスは、カスタムアプリのアップロードと呼ばれます。このオプションを表示するには、Microsoft 365 アカウントにサインインします。

Teams クライアントで、[ アプリ ] アイコンを選択します。
[アプリの管理] を選択します。
[ アプリのアップロード] を選択します。
[カスタムアプリのアップロード] オプションを探します。オプションが表示された場合は、カスタムアプリのアップロードが有効になります。

注:

カスタムアプリをアップロードするオプションがない場合は、Teams 管理者に問い合わせてください。

無料の Teams 開発者テナントを作成する (省略可能)

Teams 開発者アカウントをお持ちでない場合は、無料で入手できます。 Microsoft 365 開発者プログラムに参加します。

Microsoft 365 開発者プログラムに移動します。
[今すぐ参加] を選択し、画面の指示に従います。
ようこそ画面で、[E5 サブスクリプションの設定] を選択します。
管理者アカウントを設定します。完了すると、次の画面が表示されます。
設定した管理者アカウントを使用して Teams にサインインします。 Teams に [カスタムアプリのアップロード] オプションがあることを確認します。

無料の Azure アカウントを取得します。

Azure でアプリやアクセスリソースをホストする場合には、Azure サブスクリプションが必要です。開始する前に無料でアカウントを作成してください。

これで、アカウントを設定するためのツールがすべて揃いました。次に、開発環境を設定し、ビルドを開始しましょう。最初に作成するアプリを選択します。

タブアプリ用のプロジェクトワークスペースを作成する

残り 7 分

Visual Studio を開きます。
[ 新しいプロジェクトの作成] を選択します。

[ 新しいプロジェクトの作成] ページが表示されます。
検索ボックスに「Microsoft Teams」と入力します。検索結果から、[ アプリMicrosoft Teams選択します。
[次へ] を選択します。
「プロジェクト名」と入力し、[作成] を選択します。
アプリの機能として [タブ] を選択します。
[作成] を選択します。

Teams タブアプリは数秒で作成されます。

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 タブアプリをビルドして実行する

残り 6 分

Teams Toolkit を使用してプロジェクトワークスペースを設定したら、次にタブプロジェクトをビルドします。

アプリをビルドして実行するには:

[ Project>Teams Toolkit>Prepare Teams アプリの依存関係] を選択します。
Microsoft 365 アカウントにサインインし、[続行] を選択します。
[デバッグ>デバッグの開始] を選択するか、[F5] を選択します。
[セキュリティ警告] ダイアログが表示されたら、[はい] を選択します。
[ 追加] を 選択して、Teams にアプリをインストールします。

これで、最初のタブアプリがローカル環境で実行されます。
Microsoft Graph を使用してアプリでユーザーの詳細を取得できるようにするには、[承認] を選択 します。
[同意する] を選択します。
[ 個人用] タブに写真と詳細が表示されます。

他の Web アプリケーションと同様に、プレークポイントの設定など通常のデバッグ作業を行うことができます。このアプリはホットリロードをサポートしています。プロジェクト内のファイルを変更すると、ページが再読み込みされます。
Visual Studio でデバッグを停止します。

最初の Teams タブアプリをプレビューする

残り 5 分

タブ機能を使用して Teams アプリを作成、ビルド、実行する方法について学習しました。次の最後の手順では、Teams で Azure とプレビューにアプリをデプロイします。

Teams Toolkit を使用して、Microsoft Azure でタブ機能を持つ最初のアプリをデプロイしましょう。

Azure でタブアプリをプロビジョニングするには

クラウドで [Project>Teams Toolkit>Provision] を選択します。
[ プロビジョニング ] ダイアログで、サブスクリプションとリソースグループの詳細を入力します。
1. ドロップダウンリストから サブスクリプション名 を選択します。
2. ドロップダウンリストから [リソースグループ] を選択します。
3. 既存のリソースグループがない場合は、新しいリソースグループを作成できます。新しいリソースグループを作成するには、[新規] を選択>リソース名を入力>[OK] を選択します。新しいリソースグループの場所ドロップダウンリストから場所を選択します。
4. [プロビジョニング] を選択します。
Teams Toolkit の警告ダイアログが表示されます。
[プロビジョニング] を選択します。

リソースグループがクラウドでプロビジョニングされるまでに数分かかります。
[OK] を選択します。
[ プロビジョニングされたリソースの表示 ] を選択して、Azure portal で表示します。
Azure ポータルにサインインします。

app-dev-rg が表示されます。

リソースは Azure portal でプロビジョニングされます。

タブアプリをクラウドにデプロイするには

[ Project>Teams Toolkit>Deploy to the Cloud... を選択します。
[OK] を選択します。

タブアプリがクラウドに正常にデプロイされました。

Teams でタブアプリをプレビューするには

[ Project>Teams Toolkit>Preview in Teams] を選択します。
[追加] を選択します。

これで、最初のタブアプリが Azure 環境で実行されています。
[承認] を選択して、Microsoft Graph を使用してアプリがユーザーの詳細を取得できるようにします。
[同意する] を選択します。

[ 個人用] タブに写真と詳細が表示されます。

ボットアプリ用のプロジェクトワークスペースを作成する

残り 4 分

最初のアプリを作成して、Teams アプリ開発を開始します。このアプリはボット機能を使用します。

ボットアプリのワークスペースを表示しているスクリーンショット。

ボットプロジェクトを作成する

Visual Studio を開きます。
[ 新しいプロジェクトの作成] を選択します。

[ 新しいプロジェクトの作成] ページが表示されます。
検索ボックスに「Microsoft Teams」と入力します。検索結果から、[ アプリMicrosoft Teams選択します。
[次へ] を選択します。

[ 新しいプロジェクトの構成] ウィンドウが表示されます。
「プロジェクト名」と入力し、[作成] を選択します。

[ 新しい Teams アプリケーションの作成 ] ウィンドウが表示されます。
[Teams アプリ機能] を選択します。
アプリの機能として コマンドボット アプリを選択します。
[作成] を選択します。

Teams ボットアプリは数秒で作成されます。

Teams ボットアプリを作成する簡単な要約。

Teams ボットアプリを作成するためのこの短い要約をご覧ください。

グラフィカルな表現は、jTeams ボットアプリを作成するプロセスを示しています。

Teams ボットアプリのソースコードを見る

プロジェクトが作成されると、基本的な個人用アプリをビルドするためのコンポーネントが準備できたことになります。プロジェクトディレクトリ構造は、最新の Visual Studio の ソリューションエクスプローラー 領域で表示できます。

BlazorApp が強調表示されているソリューションエクスプローラーのスクリーンショット。

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 コントローラーをアプリケーションに追加します。

最初のボットアプリをビルドして実行する

残り 3 分

アプリをローカルに構築して実行するには、以下のようにします。

トンネルを作成する

dev tunnel
ngrok

Visual Studio を開きます。
[ 新しいプロジェクトの作成] を選択します。
検索ボックスに「ASP.NET」と入力します。検索結果から [ ASP.NET Core Web App] を選択します。
[次へ] を選択します。
「プロジェクト名」と入力し、[次へ] を選択します。
[作成] を選択します。

概要ウィンドウが表示されます。
デバッグドロップダウンリストで、[Dev Tunnel (アクティブトンネルなし)]>[トンネルの作成]を選択します。...

ポップアップウィンドウが表示されます。
ポップアップウィンドウで次の詳細を更新します。
1. アカウント: Microsoft または GitHub アカウントを入力します。
2. [名前]: トンネルの名前を入力します。
3. トンネルの種類: ドロップダウンリストから [ 一時] を選択します。
4. アクセス: ドロップダウンリストから [パブリック] を選択 します。
[OK] を選択します。

開発トンネルが正常に作成されたことを示すポップアップウィンドウが表示されます。
[OK] を選択します。

作成したトンネルは、次のようにデバッグドロップダウンリストにあります。
F5 キーを押して、デバッグモードでアプリケーションを実行します。
[セキュリティ警告] ダイアログが表示されたら、[はい] を選択します。

ポップアップウィンドウが表示されます。
[続行] を選択します。

開発トンネルのホームページが新しいブラウザーウィンドウで開き、開発トンネルがアクティブになりました。
Visual Studio に移動し、[ 表示] > [出力] を選択します。
[出力コンソール] ドロップダウンメニューで、[Dev Tunnels]\(開発トンネル\) を選択します。

出力コンソールには、開発トンネル URL が表示されます。

ngrok またはコマンドプロンプトを使用して、ローカルで実行されている Web サーバーのパブリックに利用可能な HTTPS エンドポイントへのトンネルを作成します。 ngrok で次のコマンドを実行します。

ngrok http --host-header=localhost 3978

ヒント

ERR_NGROK_4018が発生した場合は、コマンドプロンプトに記載されている手順に従ってサインアップし、ngrok を認証します。 ngrok http --host-header=localhost 3978 コマンドを実行します。

ウィンドウに HTTPS URL が表示されます。

ngrok HTTPS URL を示すスクリーンショット。

[ Project>Teams Toolkit>Prepare Teams アプリの依存関係] を選択します。
Microsoft 365 アカウントにサインインし、[続行] を選択します。
[ デバッグ>デバッグの開始 ] を選択するか、 F5 を選択してデバッグモードでアプリを実行します。
[追加] を選択します。

これで、ボットは Teams で正常に実行されるようになりました。アプリが読み込まれると、ボットを使用したチャットセッションが表示されます。

「 helloworld 」と入力すると、アダプティブカードの概要カードを表示できます。

他の Web アプリケーションと同様に、プレークポイントの設定など通常のデバッグ作業を行うことができます。このアプリはホットリロードをサポートしています。プロジェクト内のファイルを変更すると、ページが再読み込みされます。

アプリがローカルで実行されない場合のトラブルシューティング方法について説明します。

Teams でアプリを正常に実行するには、Teams アカウントでカスタムアプリのアップロードが有効になっていることを確認します。カスタムアプリのアップロードの詳細については、「前提条件」セクションを参照してください。

最初のボットアプリをプレビューする

残り 2 分

Azure でボットアプリをプロビジョニングするには

クラウドで [Project>Teams Toolkit>Provision] を選択します。
[ プロビジョニング ] ダイアログで、サブスクリプションとリソースグループの詳細を入力します。
1. ドロップダウンリストから サブスクリプション名 を選択します。
2. ドロップダウンリストから [リソースグループ] を選択します。
3. 既存のリソースグループがない場合は、新しいリソースグループを作成できます。新しいリソースグループを作成するには、[新規] を選択>リソース名を入力>[OK] を選択します。 [新しいリソースグループの場所] ドロップダウンリストから場所を選択します。
4. [プロビジョニング] を選択します。
  
  Teams Toolkit の警告ダイアログが表示されます。
[プロビジョニング] を選択します。

リソースグループがクラウドでプロビジョニングされるまでに数分かかります。
プロビジョニングが完了したら、[ OK] を選択します。
[ プロビジョニングされたリソースの表示 ] を選択して、Azure portal で表示します。
Azure ポータルにサインインします。

app-dev-rg が表示されます。

リソースは Azure portal でプロビジョニングされます。

ボットアプリをクラウドにデプロイするには

[ Project>Teams Toolkit>Deploy to the Cloud] を選択します。
[OK] を選択します。

ボットアプリがクラウドに正常にデプロイされました。

Teams でボットアプリをプレビューするには

[ Project>Teams Toolkit>Preview in Teams] を選択します。
[追加] を選択します。

これで、ボットは Teams で正常に実行されるようになりました。アプリが読み込まれると、ボットを使用したチャットセッションが表示されます。
「 helloworld 」と入力すると、アダプティブカードの概要カードを表示できます。

おめでとうございます!

100% 完了しました

これで完了です。

タブアプリとボットアプリという異なる機能を持つ 2 つのアプリを作成しました。

Blazor を使用してアプリをビルドするためのチュートリアルを完了しました。

次の方法で共有

Blazor を使用して初めてのアプリを構築する

前提条件

Microsoft Teams Toolkit をインストールする

Teams 開発テナントを設定する

カスタムアプリのアップロードを有効にする

無料の Teams 開発者テナントを作成する (省略可能)

無料の Azure アカウントを取得します。

タブアプリ用のプロジェクトワークスペースを作成する

Teams タブアプリのソースコードを見る

最初の Teams タブアプリをビルドして実行する

最初の Teams タブアプリをプレビューする

Azure でタブアプリをプロビジョニングするには

タブアプリをクラウドにデプロイするには

Teams でタブアプリをプレビューするには

ボットアプリ用のプロジェクトワークスペースを作成する

ボットプロジェクトを作成する

Teams ボットアプリのソースコードを見る

最初のボットアプリをビルドして実行する

最初のボットアプリをプレビューする

Azure でボットアプリをプロビジョニングするには

ボットアプリをクラウドにデプロイするには

Teams でボットアプリをプレビューするには

おめでとうございます!

次の方法で共有

Blazor を使用して初めてのアプリを構築する

前提条件

Microsoft Teams Toolkit をインストールする

Teams 開発テナントを設定する

カスタム アプリのアップロードを有効にする

無料の Teams 開発者テナントを作成する (省略可能)

無料の Azure アカウントを取得します。

タブ アプリ用のプロジェクト ワークスペースを作成する

Teams タブ アプリのソース コードを見る

最初の Teams タブ アプリをビルドして実行する

最初の Teams タブ アプリをプレビューする

Azure でタブ アプリをプロビジョニングするには

タブ アプリをクラウドにデプロイするには

Teams でタブ アプリをプレビューするには

ボット アプリ用のプロジェクト ワークスペースを作成する

ボット プロジェクトを作成する

Teams ボット アプリのソース コードを見る

最初のボット アプリをビルドして実行する

最初のボット アプリをプレビューする

Azure でボット アプリをプロビジョニングするには

ボット アプリをクラウドにデプロイするには

Teams でボット アプリをプレビューするには

おめでとうございます!

カスタムアプリのアップロードを有効にする

タブアプリ用のプロジェクトワークスペースを作成する

Teams タブアプリのソースコードを見る

最初の Teams タブアプリをビルドして実行する

最初の Teams タブアプリをプレビューする

Azure でタブアプリをプロビジョニングするには

タブアプリをクラウドにデプロイするには

Teams でタブアプリをプレビューするには

ボットアプリ用のプロジェクトワークスペースを作成する

ボットプロジェクトを作成する

Teams ボットアプリのソースコードを見る

最初のボットアプリをビルドして実行する

最初のボットアプリをプレビューする

Azure でボットアプリをプロビジョニングするには

ボットアプリをクラウドにデプロイするには

Teams でボットアプリをプレビューするには