Web チャットの概要

  • [アーティクル]

この記事の対象: SDK v4

この記事には、Bot Framework の Web チャット コンポーネントの詳細が含まれています。 Bot Framework の Web チャット コンポーネントは、Bot Framework V4 SDK 用の高度にカスタマイズ可能な Web ベースのクライアントです。 Bot Framework SDK v4 により、開発者は、会話をモデル化して、高度なボット アプリケーションを構築できます。

Web チャット v3 から v4 への移行を検討している場合は、移行のセクションに進んでください。

Web チャットを始めましょう

Note

以前のバージョンの Web チャット (v3) の場合は、Web チャット v3 のブランチを参照してください。

まず、Azure AI Bot Service を使用してボットを作成します。 ボットが作成されたら、Azure portal でボットの Web チャット シークレットを取得する必要があります。 シークレットを使用して、トークンを生成し、それを Web チャットに渡します。

次の例は、Web サイトに Web チャット コントロールを追加する方法を示しています。

<!DOCTYPE html>
<html>
   <body>
      <div id="webchat" role="main"></div>
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>

         // Set style options.
         const styleOptions = {
            botAvatarInitials: 'BF',
            userAvatarInitials: 'WC'
         };

         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  token: 'YOUR_DIRECT_LINE_TOKEN'
               }),
               userID: 'YOUR_USER_ID',
               username: 'Web Chat User',
               locale: 'en-US',
               styleOptions
            },
            document.getElementById('webchat')
         );
      </script>
   </body>
</html>

userID、username、locale、botAvatarInitials、userAvatarInitials はすべて、renderWebChat メソッドに渡すためのオプションのパラメーターです。 スタイルの詳細については、「styleOptions とは」を参照してください。 Web チャットのプロパティの詳細については、「Web チャット API リファレンス」セクションを参照してください。

さらに、ボットがリージョン ボット (つまり、ボット リソースが「グローバル」以外のリージョンにある) の場合は、window.WebChat.createDirectLine() メソッドの追加 domain フィールド に設定することで地域の直行 URL を指定する必要があります。 ドメインを europe.webchat.botframework.com、unitedstates.webchat.botframework.com または india.webchat.botframework.com の、選択したリージョンに適したいずれかとして指定します。 データ所在地の詳細については、「欧州の要望への対応: EU 内での EU のデータの保存と処理」を参照してください。

JavaScript との統合

Web チャットは、JavaScript または React を使用して既存の Web サイトと統合するように設計されています。 JavaScript と統合することで、一部のスタイル設定とカスタマイズ可能性を得ることができます。詳細については、「Web チャットを Web サイトに統合する」をご覧ください。

最もよく使われる機能を含んだ、完全で一般的な botframework-webchat パッケージを使用できます。

<!DOCTYPE html>
<html>
   <body>
      <div id="webchat" role="main"></div>
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>
         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  token: 'YOUR_DIRECT_LINE_TOKEN'
               }),
               userID: 'YOUR_USER_ID'
            },
            document.getElementById('webchat')
         );
      </script>
   </body>
</html>

完全な Web チャット バンドルの作業サンプルを参照してください。

React との統合

完全なカスタマイズ性を得るためには、React を使用して Web チャットのコンポーネントを再構成できます。

npm から運用ビルドをインストールするには、npm install botframework-webchat を実行します。

import { DirectLine } from 'botframework-directlinejs';
import React from 'react';
import ReactWebChat from 'botframework-webchat';

export default class extends React.Component {
  constructor(props) {
    super(props);

    this.directLine = new DirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' });
  }

  render() {
    return (
      <ReactWebChat directLine={ this.directLine } userID='YOUR_USER_ID' />
      element
    );
  }
}

npm install botframework-webchat@master を実行して、Web チャットの GitHub master ブランチと同期されている開発ビルドをインストールすることもできます。

React を介してレンダリングされる Web チャットの実稼働するサンプルを参照してください。

ヒント

React と jsx を初めて使用する場合は、Reacts の「はじめに」ページにトレーニングがあります。

Web チャットの UI のカスタマイズ

Web チャットは、ソース コードのフォークなしでカスタマイズできるように設計されています。 次の表は、さまざまな方法でWeb チャットをインポートするときに実現可能なカスタマイズの種類を示しています。 このリストは、包括的ではありません。

カスタマイズ CDN バンドル React
色の変更 ✔️ ✔️
サイズの変更 ✔️ ✔️
CSS スタイルの更新/置換 ✔️ ✔️
イベントのリッスン ✔️ ✔️
ホスティング Web ページとのやりとり ✔️ ✔️
カスタム レンダーのアクティビティ ✔️
カスタム レンダーの添付ファイル ✔️
新しい UI コンポーネントの追加 ✔️
UI 全体の再構成 ✔️

カスタマイズの詳細については、Web チャットのカスタマイズの詳細を参照してください。

Note

コンテンツ配信ネットワーク (CDN) の詳細については、「コンテンツ配信ネットワーク (CDN)」をご覧ください。

Web チャット v3 から v4 への移行

v3 から v4 に移行する際に、移行される可能性があるパスは 3 つあります。 最初のシナリオと以下に一覧表示されたシナリオを比較します。

  • <iframe> に埋め込まれたWeb チャット コントロールをアップグレードするには、[埋め込みパッケージ] のWeb チャット リポジトリのドキュメントを参照してください。
  • カスタマイズをほとんど使用しないWeb チャット コントロールをアップグレードするには、プロセスを説明する Web チャット 00.migration/a.v3-to-v4 サンプルを確認します。
  • 高度にカスタマイズされたWeb チャットのフォークバージョンをアップグレードするには、Web チャットの「移行ガイダンス」を参照してください。

Web チャット API リファレンス

Web チャット React コンポーネント (<ReactWebChat>) または renderWebChat() メソッドに渡すことができるプロパティがいくつかあります。 使用可能なプロパティの簡単な説明については、「Web チャット API リファレンス」を参照してください。 また、packages/component/src/Composer.js で始まるソース コードをご自由にお調べください。

ブラウザーとの互換性

Web チャットは、Chrome、Edge、FireFox などの最近のブラウザーの最新の 2 つのバージョンをサポートしています。 Internet Explorer 11 で Web チャットが必要な場合は、「ES5 バンドル」および「デモ」を参照してください。

  • Web チャットは、Internet Explorer 11 より前のバージョンをサポートしていません。
  • ES5 以外のサンプルに示されているカスタマイズは、Internet Explorer ではサポートされていません。 IE11 は最新のブラウザーではないため、ES6 はサポートされていません。アロー関数と最新のプロミスを使用する多くのサンプルは、手動で ES5 に変換する必要があります。 アプリのカスタマイズを大幅に行う必要がある場合は、Google Chrome や Edge などの最新のブラウザー用にアプリを開発することを強くお勧めします。
  • Web チャットは、IE11 (ES5) のサンプルをサポートする予定はありません。
  • 他のサンプルを IE11 で動作するように手動で書き換えるお客様は、babel のようなポリフィルやトランスパイラーを使用した ES6+ から ES5 へのコードの変換を検討することをお勧めします。

Web チャットの最新のビットを使用してテストする方法

リリースされていない機能のテストは、現時点では MyGet パッケージを介してのみ可能です。

まだリリースされていない機能やバグ修正をテストする場合は、Web チャット パッケージを、公式の npmjs フィードではなく、Web チャットの毎日のフィードをポイントするようにします。

現在は、MyGet フィードをサブスクライブすることによって、Web チャットの毎日のフィードにアクセスできます。 これを行うには、プロジェクトのレジストリを更新する必要があります。 この変更は元に戻すことができ、指示には、公式リリースのサブスクライブに戻る方法が含まれています。.

myget.org で、最新のビットを購読します。

これを行うには、パッケージを追加してから、プロジェクトのレジストリを変更します。

  1. Web チャット以外のプロジェクトの依存関係を追加します。
  2. プロジェクトのルート ディレクトリに、.npmrc ファイルを作成します。
  3. ファイルに次の行を追加します: registry=https://botbuilder.myget.org/F/botframework-webchat/npm/
  4. プロジェクトの依存関係に Web チャットを追加します npm i botframework-webchat --save
  5. package-lock.json では、指しているレジストリは MyGet になっています。 Web チャット プロジェクトでアップストリーム ソース プロキシが有効になっています。これにより、MyGet 以外のパッケージが npmjs.com にリダイレクトされます。

npmjs.com の公式リリースを再購読する。

再購読するには、レジストリをリセットする必要があります。

  1. .npmrc file を削除します。
  2. ルート package-lock.json を削除します。
  3. node_modules ディレクトリを削除します。
  4. npm i を使用して、パッケージを再インストールします。
  5. あなたの package-lock.json では、レジストリは再び https://npmjs.com/ を指しています。

投稿

プロジェクトのビルド方法およびプル リクエストのリポジトリのガイドラインの詳細は、寄与のページ を参照してください。

このプロジェクトは、「Microsoft のオープン ソースの倫理規定」を採用しています。 詳細については、倫理規定についてよくあるご質問を参照するか、opencode@microsoft.com 宛てにご質問またはコメントをお送りください。

セキュリティの問題の報告

セキュリティの問題やバグは、secure@microsoft.com の Microsoft セキュリティ レスポンス センター (MSRC) にメールによって非公開で報告する必要があります。 24 時間以内に応答が返されます。 何らかの理由で応答がなかった場合、メールでフォローアップして、あなたの元のメッセージを私たちが受信したことを確認してください。 MSRC PGP キーなどの詳細情報は、Security TechCenter を参照してください。