ボット構成エクスペリエンスのクイック スタート ガイド
注:
ボット構成エクスペリエンスは、チャネルまたはグループ チャットスコープでのみサポートされています。
最初の Teams アプリを使用して Microsoft Teams アプリの開発を開始します。 Javascript を使用して Teams でボット アプリを作成できます。
このクイック スタート ガイドは、Teams Toolkit を使用して構成可能なボットを構築するのに役立ちます。 このガイドを完了すると、次の出力が表示されます。
前提条件
アプリをビルドして展開するための次のツールを必ずインストールしてください。
インストール | 使用するには... | |
---|---|---|
Teams ツールキット | アプリのプロジェクト スキャフォールディングを作成する Microsoft Visual Studio Code 拡張機能。 最新バージョンを使用します。 | |
Microsoft Teams | Microsoft Teams、チャット、会議、通話を 1 か所で行うためにアプリを通じて作業するすべてのユーザーと共同作業を行うことができます。 | |
Node.js と NPM | バックエンド JavaScript ランタイム環境。 詳細については、「 プロジェクトの種類Node.js バージョン互換性テーブル」を参照してください。 | |
Microsoft Edge (推奨) または Google Chrome | 開発者ツールを備えたブラウザー。 | |
Visual Studio Code | JavaScript、TypeScript、または SharePoint Framework (SPFx) ビルド環境。 最新バージョンを使用します。 | |
開発トンネル | Teams アプリの機能 (会話型ボット、メッセージ拡張機能、受信 Webhook) には、受信接続が必要です。 トンネルは、開発システムを Teams に接続します。 開発トンネルは、localhost をインターネットに安全に開き、アクセス権を持つユーザーを制御するための強力なツールです。 開発トンネルは、Visual Studio 2022 バージョン 17.7.0 以降で使用できます。 または ngrok をトンネルとして使用して、開発システムを Teams に接続することもできます。 タブのみを含むアプリには必要ありません。 このパッケージは、(npm devDependencies を使用して) プロジェクト ディレクトリ内にインストールされます。 |
注:
ngrok をダウンロードしたら、サインアップして authtoken をインストールします。
ローカル環境を設定する
Microsoft Teamsサンプルを開きます。
[ コード] を選択します。 ドロップダウン メニューから、[ GitHub Desktop で開く] を選択します。
[ 複製] を選択します。
ローカル Web サーバーのトンネルを設定する
ngrok またはコマンド プロンプトを使用して、ローカルで実行されている Web サーバーのパブリックに利用可能な HTTPS エンドポイントへのトンネルを作成します。 ngrok で次のコマンドを実行します。
ngrok http --host-header=localhost 3978
ヒント
ERR_NGROK_4018が発生した場合は、コマンド プロンプトに記載されている手順に従ってサインアップし、ngrok を認証します。
ngrok http --host-header=localhost 3978
コマンドを実行します。
ウィンドウに HTTPS URL が表示されます。
アプリの作成と実行
Visual Studio Code に移動します。
[ フォルダーを開く] を選択し、[ Microsoft-Teams-Samples>サンプル>bot-configuration-app ] に移動し、[フォルダーの選択] を 選択します。
左側のウィンドウで、[ Teams ツールキット] を選択します。
[ ACCOUNTS] で、次の手順に従ってサインインします。
- Microsoft 365 アカウント
- Azure アカウント
アプリをデバッグするには、「 F5」と入力します。
ブラウザー タブで、ボットをテナントに追加するように要求する Teams Web クライアントが開きます。
[ 追加] の横にあるドロップダウンから、[ チームに追加] または [ チャットに追加] を選択します。
検索フィールドにチャットの名前を入力します。
[ ボットのセットアップ] を選択します。
ボットがチャットにインストールされます。
ボットを再構成する
チャットに移動し、メッセージ作成領域でボットを @mention し、[送信] を選択 します。
会話からボットにカーソルを合わせると、アダプティブ カードが表示されます。 アダプティブ カードの [設定] アイコンを選択します。
ボット構成アダプティブ カードが表示されます。
ボットの設定を再構成し、[送信] を選択 します。
ボットは応答メッセージを送信します。
課題の完了
このようなものを思いついたのですか?
おめでとうございます。
これで、ボットの構成を開始するためのチュートリアルが完了しました。
このセクションに問題がある場合 このセクションを改善できるよう、フィードバックをお送りください。
Platform Docs