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

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

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

前提条件

• 残り 8 分

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

必要なツールをインストールしたら、開発環境を設定します。

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

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

npm install -g @microsoft/teamsfx-cli

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

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

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

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

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

1. Teams クライアントで、[ アプリ ] アイコンを選択します。

2. [アプリの管理] を選択します。

3. [ アプリのアップロード] を選択します。

4. [カスタム アプリのアップロード] オプションを探します。 オプションが表示された場合は、カスタム アプリのアップロードが有効になります。

   

   注:

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

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

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

1. Microsoft 365 開発者プログラムに移動します。

2. [今すぐ参加] を選択し、画面の指示に従います。

3. ようこそ画面で、[E5 サブスクリプションの設定] を選択します。

4. 管理者アカウントを設定します。 完了すると、次の画面が表示されます。

   

5. 設定した管理者アカウントを使用して Teams にサインインします。 Teams に [カスタム アプリのアップロード] オプションがあることを確認します。

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

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

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

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

• 残り 7 分

1. Visual Studio を開きます。

2. [ 新しいプロジェクトの作成] を選択します。

   

   [ 新しいプロジェクトの作成] ページが表示されます。

3. 検索ボックスに「Microsoft Teams」 と入力します。 検索結果から、[ アプリMicrosoft Teams選択します。

4. [次へ] を選択します。

   

5. 「プロジェクト名」と入力し、[作成] を選択します。

   

6. アプリの機能として [タブ] を選択します。

7. [作成] を選択します。

   

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

   

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

• 残り 6 分

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

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

1. [ Project>Teams Toolkit>Prepare Teams アプリの依存関係] を選択します。

   

2. Microsoft 365 アカウントにサインインし、[続行] を選択します。

   

3. [デバッグ>デバッグの開始] を選択するか、[F5] を選択します。

4. [セキュリティ警告] ダイアログが表示されたら、[はい] を選択します。

   

5. [ 追加] を 選択して、Teams にアプリをインストールします。

   

   これで、最初のタブ アプリがローカル環境で実行されます。

   

6. Microsoft Graph を使用してアプリでユーザーの詳細を取得できるようにするには、[承認] を選択 します。

   

7. [同意する] を選択します。

   

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

   

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

9. Visual Studio でデバッグを停止します。

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

• 残り 5 分

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

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

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

1. クラウドで [Project>Teams Toolkit>Provision] を選択します。

   

2. [ プロビジョニング ] ダイアログで、サブスクリプションとリソース グループの詳細を入力します。

   1. ドロップダウン リストから サブスクリプション名 を選択します。
   2. ドロップダウン リストから [リソース グループ] を選択します。
   3. 既存のリソース グループがない場合は、新しいリソース グループを作成できます。 新しいリソース グループを作成するには、[新規] を選択>リソース名を入力>[OK] を選択します。 新しいリソース グループの場所ドロップダウン リストから場所を選択します。
   4. [プロビジョニング] を選択します。

   

   Teams Toolkit の警告ダイアログが表示されます。

3. [プロビジョニング] を選択します。

   

   リソース グループがクラウドでプロビジョニングされるまでに数分かかります。

4. [OK] を選択します。

   

5. [ プロビジョニングされたリソースの表示 ] を選択して、Azure portal で表示します。

   

6. Azure ポータルにサインインします。

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

   

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

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

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

   

2. [OK] を選択します。

   

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

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

1. [ Project>Teams Toolkit>Preview in Teams] を選択します。

   

2. [追加] を選択します。

   

   これで、最初のタブ アプリが Azure 環境で実行されています。

   

3. [承認] を選択して、Microsoft Graph を使用してアプリがユーザーの詳細を取得できるようにします。

   

4. [同意する] を選択します。

   

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

   

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

• 残り 4 分

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

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

1. Visual Studio を開きます。

2. [ 新しいプロジェクトの作成] を選択します。

   

   [ 新しいプロジェクトの作成] ページが表示されます。

3. 検索ボックスに「Microsoft Teams」 と入力します。 検索結果から、[ アプリMicrosoft Teams選択します。

4. [次へ] を選択します。

   

   [ 新しいプロジェクトの構成] ウィンドウが表示されます。

5. 「プロジェクト名」と入力し、[作成] を選択します。

   

   [ 新しい Teams アプリケーションの作成 ] ウィンドウが表示されます。

6. [Teams アプリ機能] を選択します。

7. アプリの機能として コマンド ボット アプリを選択します。

8. [作成] を選択します。

   

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

   

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

• 残り 3 分

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

トンネルを作成する

ngrok http --host-header=localhost 3978

1. [ Project>Teams Toolkit>Prepare Teams アプリの依存関係] を選択します。

   

2. Microsoft 365 アカウントにサインインし、[続行] を選択します。

   

3. [ デバッグ>デバッグの開始 ] を選択するか、 F5 を選択してデバッグ モードでアプリを実行します。

4. [追加] を選択します。

   

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

   

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

   

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

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

• 残り 2 分

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

1. クラウドで [Project>Teams Toolkit>Provision] を選択します。

   

2. [ プロビジョニング ] ダイアログで、サブスクリプションとリソース グループの詳細を入力します。

   1. ドロップダウン リストから サブスクリプション名 を選択します。

   2. ドロップダウン リストから [リソース グループ] を選択します。

   3. 既存のリソース グループがない場合は、新しいリソース グループを作成できます。 新しいリソース グループを作成するには、[新規] を選択>リソース名を入力>[OK] を選択します。 [新しいリソース グループの場所] ドロップダウン リストから場所を選択します。

   4. [プロビジョニング] を選択します。

      

      Teams Toolkit の警告ダイアログが表示されます。

3. [プロビジョニング] を選択します。

   

   リソース グループがクラウドでプロビジョニングされるまでに数分かかります。

4. プロビジョニングが完了したら、[ OK] を選択します。

   

5. [ プロビジョニングされたリソースの表示 ] を選択して、Azure portal で表示します。

   

6. Azure ポータルにサインインします。

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

   

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

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

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

   

2. [OK] を選択します。

   

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

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

1. [ Project>Teams Toolkit>Preview in Teams] を選択します。

   

2. [追加] を選択します。

   

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

   

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

   

おめでとうございます!

• 100% 完了しました

これで完了です。

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

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