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

重要

Microsoft 365 コネクタ (以前は Office 365 コネクタ) は非推奨に近づいています。新しい Microsoft 365 コネクタの作成は間もなくブロックされます。スケジュールの詳細と、ワークフローアプリがより柔軟で安全なエクスペリエンスを提供する方法については、 Microsoft Teams内の Microsoft 365 コネクタの廃止に関するページを参照してください。

Teams で Webhook を作成するにはどうすればよいですか?

Webhook 要求の受信時にチャットまたはチャネルに自動的に投稿するには、定義済みのワークフローテンプレートを使用するか、[ Teams Webhook 要求が受信されたとき ] トリガーを使用してワークフローを最初から作成します。詳細については、「 Microsoft Teams で Webhook 要求が受信されたときにワークフローを投稿する」を参照してください。
Teams Webhook 要求が受信されたときのトリガーの詳細については、「Microsoft Teams - Webhook」を参照してください。

Office 365 コネクタを既に構築している場合:

Power Automate コネクタを作成する: Power Automate は、Teams で広く使用されているワークフローアプリを強化します。これは、Teams との間でプログラムによってデータを送信するためのスケーラブルで安全なアプローチです。この方法を採用する場合は、製品から Teams チャネルにアラートを投稿するためのワークフローテンプレートを作成できます。この方法により、新しい方法のユーザーの導入が簡略化されます。詳細については、エンタープライズ開発者、ISV、パートナー向けの Power Automate に関するページを参照してください。
Teams アプリを更新する: 現在の Teams アプリを強化できます。たとえば、ユーザーがシステム内のトリガーイベントに基づいてプロアクティブメッセージを設定できるようにします。詳細については、ボットがプロアクティブメッセージを通じてチャネルに投稿する方法に関するページを参照してください。

既知の問題

ワークフローアプリは、プライベートチャネルでフローボットとして投稿できません。ただし、ユーザーに代わって投稿することはできます。
ワークフローでは、アダプティブカードのみがサポートされます。コネクタで使用される古いメッセージカード形式Office 365サポートされていません。ワークフローでは、メッセージカード形式の使用はサポートされていません。詳細については、コネクタメッセージカード形式をアダプティブカードに変換する方法に関するページを参照してください。
ワークフローには、DataDog や Jenkins などのサードパーティ製コネクタは用意されていません。
ワークフローは、既定の環境でのみ作成できます。

限界事項

ワークフローは、特定のユーザー (ワークフローの所有者と呼ばれます) にのみリンクされ、Teams チームまたはチャネルにはリンクされません。共同所有者が割り当てられていない場合、ワークフローは所有者が存在しない場合に孤立フローになる可能性があります。フローによって自動化されたビジネスプロセスの継続性を維持するために、管理者は 1 人以上の共同所有者を追加し、ワークフローを完全に制御できます。また、接続の認証 (存在する場合) を追加し、フローが無効になっている場合はフローを有効にすることもできます。詳細については、「孤立フローの管理」を参照してください。

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 アプリ] を選択します。
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 チャネルに表示されます。

ヒント

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