チュートリアル - タスク管理アプリを構築する - Teams

Microsoft Teams コネクタは Model-View-Controller (MVC) サンプルタスク管理アプリケーションであり、ASP.NET Web アプリケーションテンプレートを使用して生成されます。ほとんどのコードは、基本的な MVC 構成またはタスク管理システムに関連しています。 Microsoft 365 グループ用の既存のコネクタを追加することも、Teams 内に新しいコネクタを構築することもできます。

コネクタコードの種類

ConnectorController.cs: アクションを設定して保存します。
TaskController.cs: アクションを作成および更新します。

Microsoft Teams コネクタの主な機能

実際のタスク管理システムをシミュレートします。
ユーザーがタスクを作成および表示できるようにします。
コンテンツをランダムに生成します。
Microsoft Teams チャネルに送信される通知をシミュレートします。

このステップバイステップガイドは、Microsoft Teamsでコネクタを作成してテストするのに役立ちます。次の出力が表示されます。

ステップバイステップガイドが正常に完了した後のビルドチームコネクタの出力のスクリーンショット。

前提条件

残り 10 分

次のツールをインストールし、開発環境を設定していることを確認します。

	インストール	使用するには...
	Microsoft Teams	Microsoft Teams、チャット、会議、通話のアプリを通じて作業するすべてのユーザーと 1 か所で共同作業を行うことができます。
	Visual Studio 2022	Visual Studio 2022 でエンタープライズバージョンをインストールし、ASP.NET および Web 開発ワークロードをインストールできます。最新バージョンを使用します。
	.NET Core SDK	ローカルデバッグと Azure Functions アプリのデプロイ用にカスタマイズされたバインド。最新バージョンを使用するか、移植可能なバージョンをインストールします。
	開発トンネル	Teams アプリの機能 (会話型ボット、メッセージ拡張機能、受信 Webhook) には、受信接続が必要です。トンネルは、開発システムを Teams に接続します。開発トンネルは、localhost をインターネットに安全に開き、アクセス権を持つユーザーを制御するための強力なツールです。開発トンネルは、Visual Studio 2022 バージョン 17.7.0 以降で使用できます。または ngrok をトンネルとして使用して、開発システムを Teams に接続することもできます。タブのみを含むアプリには必要ありません。このパッケージはプロジェクトディレクトリ内にインストールされます (npm `devDependencies` を使用)。

注:

ngrok をダウンロードしたら、サインアップして authtoken をインストールします。

ローカル環境を設定する

残り 9 分

Microsoft-Teams-Samples を開きます。
[ コード] を選択します。
ドロップダウンメニューから、[ GitHub Desktop で開く] を選択します。
[ 複製] を選択します。

開発者向けプレビューを有効にする

残り 8 分

テナントの管理コンソールでアプリのアップロードを有効にします。
1. 管理者の資格情報で Microsoft 365 管理センターにサインインします。
2. 左側のウィンドウで、[ すべて表示] を選択します。
3. [ Teams] を選択します。
左側のウィンドウで、[ Teams アプリ] を選択します。
[ セットアップポリシー] を選択します。
[ グローバル] (組織全体の既定値) を選択します。
[ カスタムアプリのアップロード ] トグルをオンにします。
[保存] を選択します。

テストテナントでカスタムアプリのアップロードを許可できるようになりました。

ヒント

カスタムアプリのアップロードがアクティブになるまでに少し時間がかかります。
[Microsoft Teams] に移動します。
Teams の右上隅にある [ ...] を選択します。
[情報]>[開発者向けプレビュー] を選択します。
[ 開発者プレビューに切り替える] を選択します。

コネクタを構成する

残り 7 分

複製したリポジトリから Visual Studio で TeamsToDoAppconnector.sln を開きます。

トンネルを作成する
- dev tunnel
- ngrok
1. Visual Studio を開きます。
2. [ 新しいプロジェクトの作成] を選択します。
3. 検索ボックスに「ASP.NET」と入力します。検索結果から [ ASP.NET Core Web App] を選択します。
4. [次へ] を選択します。
5. 「プロジェクト名」と入力し、[次へ] を選択します。
6. [作成] を選択します。
  
  概要ウィンドウが表示されます。
7. デバッグドロップダウンリストで、[Dev Tunnel (アクティブトンネルなし)]>[トンネルの作成]を選択します。...
  
  ポップアップウィンドウが表示されます。
8. ポップアップウィンドウで次の詳細を更新します。
  1. アカウント: Microsoft または GitHub アカウントを入力します。
  2. [名前]: トンネルの名前を入力します。
  3. トンネルの種類: ドロップダウンリストから [ 一時] を選択します。
  4. アクセス: ドロップダウンリストから [パブリック] を選択 します。
9. [OK] を選択します。
  
  開発トンネルが正常に作成されたことを示すポップアップウィンドウが表示されます。
10. [OK] を選択します。
  
  作成したトンネルは、次のようにデバッグドロップダウンリストにあります。
11. F5 キーを押して、デバッグモードでアプリケーションを実行します。
12. [セキュリティ警告] ダイアログが表示されたら、[はい] を選択します。
  
  ポップアップウィンドウが表示されます。
13. [続行] を選択します。
  
  開発トンネルのホームページが新しいブラウザーウィンドウで開き、開発トンネルがアクティブになりました。
14. Visual Studio に移動し、[ 表示] > [出力] を選択します。
15. [出力コンソール] ドロップダウンメニューで、[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 が表示されます。
[コネクタ開発者ポータル] に移動します。
[新しいコネクタ] を選択します。
次の詳細を入力して、新しいコネクタを登録します。
- コネクタ名。
- ロゴ
- アプリの簡単な説明 (10 語以下)。
- コネクタの動作の詳細な説明 (3 から 5 文)。
- 会社の Web サイト。
- https://[BASE_URI]/connector/setupとしてのコネクタの [構成] ページ。
- [有効なドメイン] を [https>//[Base URI]] に設定します。
- [ はい] を 選択して、コネクタカードでアクションを有効にします。
- [アクション URL] を [https://[BASE_URI]/Task/Update] に設定します。
- [ アプリ開発者契約の使用条件に同意する] を選択します。
- [保存] を選択します。
新しいコネクタが正常に登録されました。登録されているコネクタ ID が表示されたウィンドウが表示されます。

ヒント

後で参照するためにコネクタ ID を保存します。
複製されたリポジトリから TeamsToDoAppConnector.csproj ファイルを開きます。
複製したリポジトリで、 Microsoft-Teams-Samples>サンプル>connector-todo-notification>csharp に移動します。
Visual Studio で appsettings.json ファイルを開き、次の更新を行います。
- BASE_URLをngork URLまたはdev tunnel URLに置き換えます。
- CONNECTOR_IDを作成したコネクタ ID に置き換えます。
複製したリポジトリで、 Microsoft-Teams-Samples>samples>connector-todo-notification>csharp>TeamsAppPackages に移動します。
Visual Studio で manifest.json ファイルを開き、次の変更を行います。
- CONNECTOR_IDを作成したコネクタ ID に置き換えます。
- VALID-DOMAINを、https:// を除く ngrok OR 開発トンネルドメインに置き換えます。
F5 キーを押してプロジェクトを実行します。 Web ページが開きます。

Microsoft Teamsのテストコネクタ

残り 6 分

Manifest フォルダーに存在する次のファイルを含む .zip ファイルを作成します。
- manifest.json
- outline-icon.png
- color-icon.png
[Microsoft Teams] に移動します。
1. 左側のウィンドウで、[ アプリ ] アイコンを選択します。
2. [アプリの管理] を選択します。
3. [ アプリのアップロード] を選択します。
4. [カスタムアプリのアップロード] オプションを探します。
マニフェスト フォルダーで作成した .zip ファイルを選択し、[開く] を選択します。
[ チームに追加] を選択します。
一覧からチーム名またはチャネル名を選択します。
[ コネクタのセットアップ] を選択します。
左側のウィンドウで、検索バーで Teams ToDo コネクタを検索し、[ 構成] を選択します。
登録ページで [ 作成] または [ 更新済み ] を選択し、[保存] を選択 します。

構成後、チャネルに通知が表示され、 タスクマネージャーポータルへのリンクが表示されます。
[タスクマネージャーポータル] に移動します。
[ 新規作成] を選択します。
新しいタスクの詳細を入力します。
- タイトル
- 説明
- 割り当て先
[保存] を選択します。

登録されている Teams チャネルにメッセージカードが表示されます。

ヒント

メッセージカードで使用可能なアクション可能なボタンを試すことができます。