Teams デスクトップクライアントでのデバッグ

[アーティクル]
10/28/2024

Microsoft Teams Toolkit は、デスクトップクライアントでMicrosoft Teams アプリをデバッグしてプレビューするのに役立ちます。デバッグプロセス中に、Teams Toolkit によってアプリサービスが自動的に開始され、デバッガーが開き、Teams アプリがアップロードされます。デバッグ後に Teams デスクトップクライアントで Teams アプリをプレビューできます。

Teams デスクトップクライアントの利点を次に示します。

パフォーマンスを向上させます。
F5 までの時間を短縮します。
デバッグターゲットのカバレッジを向上させます。

Teams デスクトップクライアントの機能

Teams デスクトップクライアントには、Teams Toolkit によってスキャフォールディングされた次のアプリテンプレートにデバッグ機能が組み込まれています。

ボット。
Copilot エージェント。
カスタムエンジンエージェント。
メッセージ拡張機能。

前提条件

Teams デスクトップクライアントでアプリをビルドして展開するための次のツールをインストールしていることを確認します。

	インストール	使用するには...
	Teams ツールキット	アプリのプロジェクトスキャフォールディングを作成する Microsoft Visual Studio Code 拡張機能。最新のプレリリースバージョンを使用します。
	Node.js	バックエンド JavaScript ランタイム環境。詳細については、「プロジェクトの種類node.js バージョン互換性テーブル」を参照してください。
	Visual Studio Code	JavaScript、TypeScript、または SharePoint Framework (SPFx) ビルド環境。最新バージョンを使用します。
	Microsoft 365 開発者アカウント	アプリをインストールするための適切なアクセス許可を持つ Teams アカウントにアクセスします。

Teams デスクトップクライアントでのデバッグ

Teams デスクトップクライアントでカスタムエンジンエージェントアプリをデバッグするには

Visual Studio Code (VS Code) を開き、Teams Toolkit を使用して Microsoft 365 アカウントにログインします。
VS Code アクティビティバーの [Teams Toolkit ] アイコンを選択し、[新しいアプリの作成] を選択します。

$Teams Toolkit サイドバーの [Create New Project]$新しいプロジェクトの作成$ リンクの場所を示すスクリーンショット。$
[ カスタムエンジンエージェント] を選択します。
[ Basic AI Chatbot] を選択します。
[ JavaScript] を選択します。
[ OpenAI] を選択します。
OpenAI サービスキーを入力します。
[ 既定のフォルダー] を選択します。

既定の場所を変更するには、次の手順に従います。
1. [ 参照] を選択します。
2. プロジェクトワークスペースの場所を選択します。
3. [ フォルダーの選択] を選択します。
アプリに適した名前を入力し、 Enter キーを選択します。
左側のウィンドウで、[ 実行とデバッグ (Ctrl+Shift+D)] を選択し、ドロップダウンリストから [ Teams (デスクトップ)] で [デバッグ ] を選択します。
Teams デスクトップログインが Teams Toolkit で使用されている Microsoft 365 アカウントと一致していることを確認し、[ 続行] を選択します。

アプリを追加するための Teams デスクトップクライアント要求。
[追加] を選択します。

チャットウィンドウが開きます。
メッセージ作成領域から、ボットを呼び出すメッセージを送信します。

注:

アカウントの照合に関するシステムレベルの通知は、プロジェクトごとに 1 回だけ表示されます。その後のデバッグセッションでは、Teams Toolkit は VS Code 通知を通じてアカウントに関するリマインダーを送信します。
ブレークポイントを追加し、変更をホットリロードできます。次の例では、ブレークポイントが行番号の横にある赤いドットで強調表示されています。