Web チャットの概要Web Chat overview

適用対象: SDK v4APPLIES TO: SDK v4

この記事には、Bot Framework の Web チャット コンポーネントの詳細が含まれています。This article contains details of the Bot Framework Web Chat component. Bot Framework の Web チャット コンポーネントは、Bot Framework V4 SDK 用の高度にカスタマイズ可能な Web ベースのクライアントです。The Bot Framework Web Chat component is a highly customizable web-based client for the Bot Framework V4 SDK. Bot Framework SDK v4 により、開発者は、会話をモデル化して、高度なボット アプリケーションを構築できます。The Bot Framework SDK v4 enables developers to model conversation and build sophisticated bot applications.

Web チャット v3 から v4 への移行を検討している場合は、移行のセクションに進んでください。If you're looking to migrate from Web Chat v3 to v4, jump ahead to the migration section.

使用方法How to use

注意

以前のバージョンの Web チャット (v3) の場合は、Web チャット v3 のブランチを参照してください。For previous versions of Web Chat (v3), visit the Web Chat v3 branch.

まず、Azure Bot Service を使用してボットを作成します。First, create a bot using Azure Bot Service. ボットが作成されたら、Azure portal でボットの Web チャット シークレットを取得する必要があります。Once the bot is created, you will need to obtain the bot's Web Chat secret in Azure Portal. シークレットを使用して、トークンを生成し、それを Web チャットに渡します。Then use the secret to generate a token and pass it to your Web Chat.

Web チャットコントロールを web サイトに追加する方法を次の例に示します。The following examples shows how to add a Web Chat control to a website.

<!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>

userIDusernamelocalebotAvatarInitialsuserAvatarInitials はすべて、renderWebChat メソッドに渡すためのオプションのパラメーターです。userID, username, locale, botAvatarInitials, and userAvatarInitials are all optional parameters to pass into the renderWebChat method. スタイルの詳細については、「スタイル オプションの理由」を参照してください。For more information about style, see Why styleOptions?. Web Chat のプロパティの詳細については、「 Web CHAT API リファレンス 」セクションを参照してください。To learn more about Web Chat properties, look at the Web Chat API Reference section.

JavaScript との統合Integrate with JavaScript

Web チャットは、JavaScript または React を使用して既存の Web サイトと統合するように設計されています。Web Chat is designed to integrate with your existing website using JavaScript or React. JavaScript と統合することで、一部のスタイル設定とカスタマイズ可能性を得ることができます。詳細については、「Web チャットを Web サイトに統合する」の記事をご覧ください。Integrating with JavaScript will give you some styling and customizability, for more information see the article Integrate Web Chat into your website.

最もよく使われる機能を含んだ、完全で一般的な Web チャット パッケージを使用できます。You can use the full, typical webchat package that contains the most typically used features.

<!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 チャット バンドルの作業サンプルを参照してください。See the working sample of the full Web Chat bundle.

React との統合Integrate with React

完全なカスタマイズ性を得るためには、React を使用して Web チャットのコンポーネントを再構成できます。For full customizability, you can use React to recompose components of Web Chat.

npm から運用ビルドをインストールするには、npm install botframework-webchat を実行します。To install the production build from npm, run 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 ブランチと同期されている開発ビルドをインストールすることもできます。You can also run npm install botframework-webchat@master to install a development build that is synced with Web Chat's GitHub master branch.

React を介してレンダリングされる Web チャットの実稼働するサンプルを参照してください。See a working sample of Web Chat rendered via React.

ヒント

React と jsx を初めて使用する場合は、Reacts の「概要」ページにトレーニングがあります。If you are new to React and jsx you can find training on Reacts Getting Started page.

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

Web チャットは、ソース コードのフォークなしでカスタマイズできるように設計されています。Web Chat is designed to be customizable without forking the source code. 次の表は、Web チャットをさまざまな方法でインポートするときに実現可能なカスタマイズの種類を示しています。The table below outlines what kind of customizations you can achieve when you are importing Web Chat in different ways. このリストは全てを網羅しているわけではありません。This list is not exhaustive.

カスタマイズCustomization CDN バンドルCDN bundle ReactReact
色の変更Change colors ✔️ ✔️
サイズの変更Change sizes ✔️ ✔️
CSS スタイルの更新/置換Update/replace CSS styles ✔️ ✔️
イベントのリッスンListen to events ✔️ ✔️
ホスティング Web ページとのやりとりInteract with hosting webpage ✔️ ✔️
カスタム レンダーのアクティビティCustom render activities ✔️
カスタム レンダーの添付ファイルCustom render attachments ✔️
新しい UI コンポーネントの追加Add new UI components ✔️
UI 全体の再構成Recompose the whole UI ✔️

カスタマイズの詳細については、Web チャットのカスタマイズの詳細を参照してください。See more about customizing Web Chat to learn more on customization.

注意

コンテンツ配信ネットワーク (CDN) の詳細については、「コンテンツ配信ネットワーク (CDN)」をご覧ください。For information on Content Delivery Networks (CDNs) See Content delivery networks (CDNs)

Web チャット v3 から v4 への移行Migrating from Web Chat v3 to v4

v3 から v4 に移行する際に、移行される可能性があるパスは 3 つあります。There are three possible paths that migration might take when migrating from v3 to v4. まず、最初のシナリオを以下に示すものと比較してください。First, please compare your beginning scenario with the one listed below.

  • に埋め込まれている Web チャットコントロールをアップグレードするには <iframe>埋め込みパッケージの web チャットリポジトリにあるドキュメントを参照してください。To upgrade a Web Chat control embedded in an <iframe>, see the documentation in the Web Chat repo for the embed package.
  • 少ししか使用しない Web チャットコントロールをアップグレードする場合は、Web Chat の 00. migration/a v3-v4 のサンプルを確認してください。このサンプルでは、プロセスについて説明しています。To upgrade a Web Chat control that uses little to no customization, review the Web Chat 00.migration/a.v3-to-v4 sample, which describes the process.
  • 多数のカスタマイズでフォークされたバージョンの Web Chat v3 をアップグレードする方法については、Web チャットの 移行に関するガイダンスを参照してください。To upgrade a forked version of Web Chat v3 with a lot of customization, see the Web Chat migration guidance.

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

Web チャット React コンポーネント (<ReactWebChat>) または renderWebChat() メソッドに渡すことができるプロパティがいくつかあります。There are several properties that you might pass into your Web Chat React Component (<ReactWebChat>) or the renderWebChat() method. 使用できるプロパティの簡単な説明については、「 Web CHAT API リファレンス」を参照してください。For a short description of the available properties, see Web Chat API Reference. また、で始まるソースコードを自由に確認して packages/component/src/Composer.js ください。Also, feel free to examine the source code starting with packages/component/src/Composer.js.

ブラウザーとの互換性Browser compatibility

Web チャットは、Chrome、Microsoft Edge、FireFox などの最近のブラウザーの最新の 2 つのバージョンをサポートしています。Web Chat supports the latest 2 versions of modern browsers like Chrome, Edge, and FireFox. Internet Explorer 11 で Web チャットが必要な場合は、ES5 バンドルおよびデモを参照してください。If you need Web Chat in Internet Explorer 11, please see the ES5 bundle and demo.

ただし、次の点に注意してください。Please note, however:

  • Web チャットは、Internet Explorer 11 より前のバージョンをサポートしていません。Web Chat does not support Internet Explorer older than version 11
  • ES5 以外のサンプルに示されているカスタマイズは、Internet Explorer ではサポートされていません。Customization as shown in non-ES5 samples are not supported for Internet Explorer. IE11 は最新ではないブラウザーであるため、ES6 はサポートされていません。矢印関数と最新の promise を使用する多くのサンプルは、手動で ES5 に変換する必要があります。Because IE11 is a non-modern browser, it does not support ES6, and many samples that use arrow functions and modern promises would need to be manually converted to ES5. アプリのカスタマイズを大幅に行う必要がある場合は、Google Chrome や Microsoft Edge などの最新のブラウザー用にアプリを開発することを強くお勧めします。If you are in need of heavy customization for your app, we strongly recommend developing your app for a modern browser like Google Chrome or Edge.
  • Web チャットは、IE11 (ES5) のサンプルをサポートする予定はありません。Web Chat has no plan to support samples for IE11 (ES5).
    • 他のサンプルを IE11 で動作するように手動で書き換えるお客様は、babel のようなポリフィルやトランスパイラーを使用した ES6+ から ES5 へのコードの変換を検討することをお勧めします。For customers who wish to manually rewrite our other samples to work in IE11, we recommend looking into converting code from ES6+ to ES5 using polyfills and transpilers like babel.

Web チャットの最新のビットを使用してテストする方法How to test with Web Chat's latest bits

リリースされていない機能のテストは、現時点では MyGet パッケージを介してのみ可能です。Testing unreleased features is only available via MyGet packaging at this time.

まだリリースされていない機能やバグ修正をテストする場合は、Web チャット パッケージを、公式の npmjs フィードではなく、Web チャットの毎日のフィードをポイントするようにします。If you want to test a feature or bug fix that has not yet been released, you will want to point your Web Chat package to Web Chat's daily feed, as opposed the official npmjs feed.

現在は、MyGet フィードをサブスクライブすることによって、Web チャットの毎日のフィードにアクセスできます。Currently, you may access Web Chat's dailies by subscribing to our MyGet feed. これを行うには、プロジェクトのレジストリを更新する必要があります。To do this, you will need to update the registry in your project. この変更は元に戻すことができ、指示には、公式リリースのサブスクライブに戻る方法が含まれています。 .This change is reversible, and our directions include how to revert back to subscribing to the official release.

myget.org で、最新のビットを購読します。Subscribe to latest bits on myget.org

これを行うには、パッケージを追加してから、プロジェクトのレジストリを変更します。To do this you may add your packages and then change the registry of your project.

  1. Web チャット以外のプロジェクトの依存関係を追加します。Add your project dependencies other than Web Chat.
  2. プロジェクトのルート ディレクトリに、.npmrc ファイルを作成します。In your project's root directory, create a .npmrc file
  3. ファイルに次の行を追加します: registry=https://botbuilder.myget.org/F/botframework-webchat/npm/Add the following line to your file: registry=https://botbuilder.myget.org/F/botframework-webchat/npm/
  4. プロジェクトの依存関係に Web チャットを追加します npm i botframework-webchat --saveAdd Web Chat to your project dependencies npm i botframework-webchat --save
  5. あなたの package-lock.json では、指しているレジストリは MyGet になっています。Note that in your package-lock.json, the registries pointed to are now MyGet. Web チャット プロジェクトでアップストリーム ソース プロキシが有効になっています。これにより、MyGet 以外のパッケージが npmjs.com にリダイレクトされます。The Web Chat project has upstream source proxy enabled, which will redirect non-MyGet packages to npmjs.com.

npmjs.com の公式リリースを再購読します。Re-subscribe to official release on npmjs.com

再購読するには、レジストリをリセットする必要があります。Re-subscribing requires that you reset your registry.

  1. .npmrc file を削除します。Delete your .npmrc file
  2. ルート package-lock.json を削除します。Delete your root package-lock.json
  3. node_modules ディレクトリを削除します。Remove your node_modules directory
  4. npm i を使用して、パッケージを再インストールします。Reinstall your packages with npm i
  5. あなたの package-lock.json では、レジストリは再び https://npmjs.com/ を指しています。Note that in your package-lock.json, the registries are pointing to https://npmjs.com/ again.

寄与Contributing

プロジェクトのビルド方法およびプル リクエストのリポジトリのガイドラインの詳細は、寄与のページ を参照してください。See our Contributing page for details on how to build the project and our repository guidelines for Pull Requests.

このプロジェクトは、「Microsoft のオープン ソースの倫理規定」を採用しています。This project has adopted the Microsoft Open Source Code of Conduct. 詳細については論理規定についてのよくある質問をご覧ください。また、追加の質問やコメントがある場合はopencode@microsoft.comにお問い合わせください。For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

セキュリティの問題の報告Reporting Security Issues

セキュリティの問題やバグは、secure@microsoft.com の Microsoft セキュリティ レスポンス センター (MSRC) にメールによって非公開で報告する必要があります。Security issues and bugs should be reported privately, via email, to the Microsoft Security Response Center (MSRC) at secure@microsoft.com. 24 時間以内に応答が返されます。You should receive a response within 24 hours. 何らかの理由で応答がなかった場合、メールでフォローアップして、元のメッセージを私たちが受信したことを確認してください。If for some reason you do not, please follow up via email to ensure we received your original message. MSRC PGP キーなどの詳細情報は、Security TechCenter を参照してください。Further information, including the MSRC PGP key, can be found in the Security TechCenter.

Copyright (c) Microsoft Corporation.Copyright (c) Microsoft Corporation. All rights reserved.All rights reserved.