Teams コネクタを構築する

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

コネクタコードの種類

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

Microsoft Teams コネクタの主な機能

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

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

概要イメージ

前提条件

残り 10 分

次のツールをインストールし、開発環境を設定してください。

有効なアカウントを持つ Microsoft Teams
Visual Studio の最新バージョン
最新バージョンの ngrok (開発ボックステスト用のみ) または同等のトンネリングソリューション

注意

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

ローカル環境を設定する

残り 9 分

Microsoft Teams のサンプルを開きます。
[ コード] を選択します。
ドロップダウンメニューから[ **Open with GitHub Desktop](GitHub Desktop で開く**) を選択します。
[ 複製] を選択します。

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

残り 8 分

テナントの管理コンソールでアプリのアップロードを有効にします。
1. 管理者の資格情報で Microsoft 365 管理センターにサインインします。
2. 左側のパネルで、[ すべて表示] を選択します。
3. [ Teams] を選択します。
左側のパネルで、[ Teams アプリ] を選択します。
[セットアップポリシー] を選択します。
[ グローバル] を選択します。
[カスタムアプリのアップロード**] を [オン]** の位置に切り替えます。
[保存] を選択します。

テストテナントで、カスタムアプリのサイドローディングができるようになりました。

ヒント

サイドローディングがアクティブになるまでに時間がかかります。
Microsoft Teams に移動します。
Teams インターフェイス ...の右上隅にある [ .
[バージョン情報] を選びます。
[開発者プレビュー] を選択します。
[ 開発者向けプレビューに切り替える] を選択します。

コネクタを構成する

残り 7 分

複製されたリポジトリの TeamsToDoAppconnector.sln に移動します。
ngrok またはコマンドプロンプトを使用して、ローカルで実行されている Web サーバーのパブリックに利用可能な HTTPS エンドポイントへのトンネルを作成します。 ngrok で次のコマンドを実行します。
```
ngrok http -host-header=localhost 3978
```
ヒント

ERR_NGROK_4018 が発生した場合は、コマンドプロンプトに表示されている手順に従って、サインアップして ngrok を認証します。 ngrok http -host-header=localhost 3978 コマンドを実行します。
コネクタ開発者ポータルに移動します。
[新しいコネクタ] を選択します。
次の詳細を入力して、新しいコネクタを登録します。
- コネクタ名
- ロゴ
- アプリの簡単な説明 (10 語以下)
- コネクタの動作の詳細な説明 (3 ~ 5 文)
- 会社の Web サイト
- コネクタの [構成] ページ https://[BASE_URI]/connector/setup
- 有効なドメイン https Base URL
- [ はい ] を選択して、コネクタカードでアクションを有効にします
- アクション URL as https://[BASE_URI]/Task/Update
- [アプリ開発者契約の使用条件に同意する] を選択します
- [保存] を選びます。
新しいコネクタが正常に登録されました。ウィンドウに登録済みのコネクタ ID が表示されます。

ヒント

今後の参照用にコネクタ ID を保存します。
TeamsToDoAppConnector フォルダーから TeamsToDoAppConnector.csproj ファイル を選択します。
Visual Studio で開きます。
変数ngrok https forwarding urlを configuration.appSettings.BaseUrl .
F5 キーを押してプロジェクトを実行します。 Web ページが開きます。

Microsoft Teams のテストコネクタ

残り 6 分

複製されたリポジトリで、 TeamsToDoAppConnector > TeamsAppPackages > csharp に移動します。
マニフェスト フォルダーに存在する次のファイルを含む.zipを作成します。
- manifest.json
- icon-outline.png
- icon-color.png
Microsoft Teams に移動します。
左側のパネルで、[Store Manage your apps](アプリを *管理するストア* > ) を選択します。
[カスタムアプリをアップロードする] を選択します。
[開く] を選択して、マニフェスト フォルダーに作成した.zip ファイルをアップロードします。
[チームに追加] を選択します。
一覧からチーム名またはチャネル名を選択します。
[ コネクタのセットアップ] を選択します。
左側のパネルで、検索バー で Teams ToDo 通知 コネクタを検索し、[構成] を選択 します。
登録ページで [作成済み] または [ 更新済 み] を選択し、[保存] を選択 します。

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

メッセージカードは、登録済みの Teams チャネルに表示されます。

ヒント

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