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サンプルを開きます。
[ コード] を選択します。
ドロップダウンメニューから、[デスクトップで開く] GitHub 選択します。
[ 複製] を選択します。

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

残り 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 ashttps://[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に移動 します。
左側のパネルで、アプリの StoreManage > を選択します。
[カスタムアプリをアップロードする] を選択します。
[開く] を選択して、マニフェスト フォルダーに作成した.zip ファイルをアップロードします。
[チームに追加] を選択します。
一覧からチーム名またはチャネル名を選択します。
[ コネクタのセットアップ] を選択します。
左側のパネルで、検索バー Teams ToDo 通知 コネクタを検索し、[構成] を選択 します。
登録ページで [作成済み] または [ 更新済 み] を選択し、[保存] を選択 します。

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

登録されたTeams チャネルにメッセージカードが表示される

ヒント

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