Help us understand the problem. What is going on with this article?

AzureBotServiceのDirectLine使ってWebページにIE11対応の独自デザインできるチャットボットを設置

More than 1 year has passed since last update.

BotServiceのDirectLineでチャットボット作っててIE11で動かないんだけど!って言われたので調べてみた。っていうかIE11使ってるユーザー(企業)結構多いよね…

私のローカル開発環境

  • エディタ:Visual Studio Code
  • Windows10
  • Windows版Gitインストール済

説明すること/しないこと

  • 説明すること
    • Azure BotService(WebBotでもFunctionsBotでも同じ)のDirectLineチャンネルとつなぐ方法
    • IE11対応したjsスクリプトを使う方法
  • 説明しないこと
    • BotServiceでチャットボットを実装する(デプロイ済前提)
    • Webデザイン部分(html/cssなどフロント部分はご自身のお好きなデザインで…)

完成形

最近よくあるパターンのやつ。右下にガジェットが表れてクリックすると
image.png
こんな感じでチャット画面が表示されてチャットボット使えるっていうやつ
image.png

手順

AzureBotServiceのDirectLineチャンネルを有効にする

私はサーバレスが好みなのでFunctionsBot使ってますがWebBotでも同じ手順になると思います。
AzureBotServiceの左メニューから[チャンネル]>[DirectLineアイコン]をクリックします。
image.png

以下のような画面が表示されるのでシークレットキーをコピっておきます。
image.png

メニューの[設定]>ボットハンドルもメモしときます。
image.png
※これホントに必要かは微妙だけど毎回やってる。違ってたら教えてください。

WebChatソースをローカルでビルド

WebChatのGithubをZIPでダウンロードするかGit cloneでローカルに落とします

gitBash
taketakekaho@hoge MINGW64 ~
$ cd Desktop/qiitabottest/

taketakekaho@hoge MINGW64 ~/Desktop/qiitabottest
$ pwd
/c/Users/taketakekaho/Desktop/qiitabottest

taketakekaho@hoge MINGW64 ~/Desktop/qiitabottest
$ git clone https://github.com/Microsoft/BotFramework-WebChat.git
Cloning into 'BotFramework-WebChat'...
remote: Counting objects: 7305, done.
remote: Total 7305 (delta 0), reused 0 (delta 0), pack-reused 7305
Receiving objects: 100% (7305/7305), 32.73 MiB | 1.27 MiB/s, done.
Resolving deltas: 100% (5087/5087), done.

で、githubのREADMEに書いてある通りビルドしますよ。

gitBash
taketakekaho@hoge MINGW64 ~/Desktop/qiitabottest/BotFramework-WebChat (master)
$ npm install

> node-sass@4.7.2 install C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat\node_modules\microsoft-adaptivecards-scss-to-json\node_modules\node-sass
> node scripts/install.js

Cached binary found at C:\Users\taketakekaho\AppData\Roaming\npm-cache\node-sass\4.7.2\win32-x64-57_binding.node

> node-sass@4.7.2 install C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat\node_modules\node-sass
> node scripts/install.js

Cached binary found at C:\Users\taketakekaho\AppData\Roaming\npm-cache\node-sass\4.7.2\win32-x64-57_binding.node

> node-sass@4.7.2 postinstall C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat\node_modules\microsoft-adaptivecards-scss-to-json\node_modules\node-sass
> node scripts/build.js

Binary found at C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat\node_modules\microsoft-adaptivecards-scss-to-json\node_modules\node-sass\vendor\win32-x64-57\binding.node
Testing binary
Binary is fine

> node-sass@4.7.2 postinstall C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat\node_modules\node-sass
> node scripts/build.js

Binary found at C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat\node_modules\node-sass\vendor\win32-x64-57\binding.node
Testing binary
Binary is fine
npm WARN rollback Rolling back ajv@4.11.8 failed (this is probably harmless): EPERM: operation not permitted, rmdir 'C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat\node_modules\fsevents\node_modules'
npm WARN rollback Rolling back node-pre-gyp@0.6.39 failed (this is probably harmless): EPERM: operation not permitted, lstat 'C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat\node_modules\fsevents\node_modules'
npm WARN prepublish-on-install As of npm@5, `prepublish` scripts are deprecated.
npm WARN prepublish-on-install Use `prepare` for build steps and `prepublishOnly` for upload-only.
npm WARN prepublish-on-install See the deprecation note in `npm help scripts` for more information.

> botframework-webchat@0.14.1-0 prepublish C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat
> npm run build-css && npm run tslint && tsc && webpack --progress --config webpack.production.config.js


> botframework-webchat@0.14.1-0 build-css C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat
> node-sass ./src/scss/ -o . && rimraf ./includes/

Rendering Complete, saving .css file...
Wrote CSS to C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat\botchat-fullwindow.css
Rendering Complete, saving .css file...
Wrote CSS to C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat\botchat.css
Rendering Complete, saving .css file...
Wrote CSS to C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat\includes\adaptive-card-config.css
Rendering Complete, saving .css file...
Wrote CSS to C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat\includes\card-size.css
Rendering Complete, saving .css file...
Wrote CSS to C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat\includes\colors.css
Rendering Complete, saving .css file...
Wrote CSS to C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat\includes\settings.css
Wrote 6 CSS files to C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat

> botframework-webchat@0.14.1-0 tslint C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat
> tslint -p tsconfig.json

  6% [1] building modules 0/1 modules 1 active ...rk-WebChat\src\BotChatWithPolyfill.ts
[at-loader] Using typescript@2.3.4 from typescript and "tsconfig.json" from C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat/tsconfig.json.

 10% [2] building modules 0/1 modules 1 active ...-WebChat\src\CognitiveServices\lib.ts
[at-loader] Using typescript@2.3.4 from typescript and "tsconfig.json" from C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat/tsconfig.json.

 10% [1] building modules 1/1 modules 0 active
[at-loader] Using typescript@2.3.4 from typescript and "tsconfig.json" from C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat/tsconfig.json.

 45% [2] asset optimization
[at-loader] Checking started in a separate process...

[at-loader] Ok, 0.63 sec.
 86% [0] asset optimization
[at-loader] Checking started in a separate process...

[at-loader] Ok, 0.226 sec.
 96% [1] asset optimization
[at-loader] Checking started in a separate process...

[at-loader] Ok, 0.601 sec.
[1] Hash: 14900ba68a1d1454a532238e3fd423b4d61a3cf51c806dd1a6ba6bb17b93
Version: webpack 2.3.3
Child
    Hash: 14900ba68a1d1454a532
    Time: 53959ms
               Asset     Size  Chunks                    Chunk Names
        ./botchat.js   511 kB       0  [emitted]  [big]  main
    ./botchat.js.map  4.13 MB       0  [emitted]         main
       [9] ./~/react/react.js 56 bytes {0} [built]
      [10] ./~/tslib/tslib.es6.js 7.83 kB {0} [built]
      [21] ./src/Chat.tsx 14.3 kB {0} [built]
      [38] ./src/SpeechModule.ts 20.6 kB {0} [built]
      [51] ./src/Attachment.tsx 15.5 kB {0} [built]
      [52] ./~/botframework-directlinejs/built/directLine.js 22.6 kB {0} [built]
     [162] ./src/App.tsx 601 bytes {0} [built]
     [163] ./src/SpeechOptions.ts 228 bytes {0} [built]
     [170] ./src/BotChat.ts 638 bytes {0} [built]
     [196] ./~/jspeech/lib/index.js 2.19 kB {0} [built]
     [369] ./~/rxjs/add/operator/combineLatest.js 247 bytes {0} [built]
     [370] ./~/rxjs/add/operator/count.js 199 bytes {0} [built]
     [372] ./~/rxjs/add/operator/retryWhen.js 223 bytes {0} [built]
     [373] ./~/rxjs/add/operator/share.js 199 bytes {0} [built]
     [374] ./~/rxjs/add/operator/take.js 193 bytes {0} [built]
        + 407 hidden modules
Child
    Hash: 238e3fd423b4d61a3cf5
    Time: 54005ms
                   Asset     Size  Chunks                    Chunk Names
        ./botchat-es5.js   599 kB       0  [emitted]  [big]  main
    ./botchat-es5.js.map  4.67 MB       0  [emitted]         main
      [21] (webpack)/buildin/global.js 509 bytes {0} [built]
      [46] ./~/process/browser.js 5.42 kB {0} [built]
      [56] ./src/Attachment.tsx 15.5 kB {0} [built]
      [57] ./~/botframework-directlinejs/built/directLine.js 22.6 kB {0} [built]
      [60] ./~/core-js/modules/_export.js 1.6 kB {0} [built]
     [177] ./src/BotChat.ts 638 bytes {0} [built]
     [178] ./~/bluebird/js/browser/bluebird.js 179 kB {0} [built]
     [179] ./~/core-js/modules/es6.array.find-index.js 543 bytes {0} [built]
     [180] ./~/core-js/modules/es6.array.find.js 523 bytes {0} [built]
     [181] ./~/core-js/modules/es6.string.starts-with.js 767 bytes {0} [built]
     [188] ./src/App.tsx 601 bytes {0} [built]
     [189] ./src/BotChatWithPolyfill.ts 617 bytes {0} [built]
     [196] ./src/SpeechOptions.ts 228 bytes {0} [built]
     [214] ./~/core-js/modules/_string-context.js 309 bytes {0} [built]
     [460] ./~/timers-browserify/main.js 1.36 kB {0} [built]
        + 448 hidden modules
Child
    Hash: 1c806dd1a6ba6bb17b93
    Time: 33000ms
                         Asset    Size  Chunks             Chunk Names
        ./CognitiveServices.js   95 kB       0  [emitted]  CognitiveServices
    ./CognitiveServices.js.map  560 kB       0  [emitted]  CognitiveServices
       [0] ./~/microsoft-speech-browser-sdk/src/common/Exports.ts 1.16 kB {0} [built]
       [3] ./~/tslib/tslib.es6.js 7.83 kB {0} [built]
       [4] ./~/microsoft-speech-browser-sdk/src/common.browser/Exports.ts 621 bytes {0} [built]
       [6] ./~/microsoft-speech-browser-sdk/src/sdk/speech/Exports.ts 640 bytes {0} [built]
      [11] ./~/microsoft-speech-browser-sdk/src/common/EventSource.ts 2.13 kB {0} [built]
      [12] ./~/microsoft-speech-browser-sdk/src/common/InMemoryStorage.ts 1.29 kB {0} [built]
      [13] ./~/microsoft-speech-browser-sdk/src/common/List.ts 7.36 kB {0} [built]
      [14] ./~/microsoft-speech-browser-sdk/src/common/Promise.ts 14.6 kB {0} [built]
      [18] ./src/Konsole.ts 414 bytes {0} [built]
      [19] ./src/CognitiveServices/SpeechRecognition.ts 8.14 kB {0} [built]
      [20] ./src/CognitiveServices/SpeechSynthesis.ts 19.1 kB {0} [built]
      [21] ./~/microsoft-speech-browser-sdk/Speech.Browser.Sdk.ts 716 bytes {0} [built]
      [49] ./~/microsoft-speech-browser-sdk/src/sdk/speech.browser/Exports.ts 264 bytes {0} [built]
      [59] ./src/CognitiveServices/lib.ts 387 bytes {0} [built]
      [60] ./~/simple-update-in/lib/index.js 2.89 kB {0} [built]
        + 47 hidden modules
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 803 packages from 555 contributors and audited 3688 packages in 122.811s
found 69 vulnerabilities (22 low, 37 moderate, 10 high)
  run `npm audit fix` to fix them, or `npm audit` for details

taketakekaho@hoge MINGW64 ~/Desktop/qiitabottest/BotFramework-WebChat (master)
$ npm run build

> botframework-webchat@0.14.1-0 build C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat
> npm run build-css && npm run tslint && tsc && webpack --progress


> botframework-webchat@0.14.1-0 build-css C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat
> node-sass ./src/scss/ -o . && rimraf ./includes/

Rendering Complete, saving .css file...
Wrote CSS to C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat\botchat-fullwindow.css
Rendering Complete, saving .css file...
Wrote CSS to C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat\botchat.css
Rendering Complete, saving .css file...
Wrote CSS to C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat\includes\adaptive-card-config.css
Rendering Complete, saving .css file...
Wrote CSS to C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat\includes\card-size.css
Rendering Complete, saving .css file...
Wrote CSS to C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat\includes\colors.css
Rendering Complete, saving .css file...
Wrote CSS to C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat\includes\settings.css
Wrote 6 CSS files to C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat

> botframework-webchat@0.14.1-0 tslint C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat
> tslint -p tsconfig.json

 10% [2] building modules 0/1 modules 1 active ...-WebChat\src\CognitiveServices\lib.ts
[at-loader] Using typescript@2.3.4 from typescript and "tsconfig.json" from C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat/tsconfig.json.

 10% [1] building modules 1/1 modules 0 active
[at-loader] Using typescript@2.3.4 from typescript and "tsconfig.json" from C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat/tsconfig.json.

 10% [0] building modules 1/1 modules 0 active
[at-loader] Using typescript@2.3.4 from typescript and "tsconfig.json" from C:\Users\taketakekaho\Desktop\qiitabottest\BotFramework-WebChat/tsconfig.json.

 45% [2] asset optimization
[at-loader] Checking started in a separate process...

[at-loader] Ok, 0.405 sec.
 86% [0] asset optimization
[at-loader] Checking started in a separate process...

[at-loader] Ok, 0.308 sec.
 96% [1] asset optimization
[at-loader] Checking started in a separate process...

[at-loader] Ok, 0.212 sec.
[1] Hash: fea6fdda95ed8f4811677554c9f0bcd0784eaa421c806dd1a6ba6bb17b93
Version: webpack 2.3.3
Child
    Hash: fea6fdda95ed8f481167
    Time: 20853ms
               Asset     Size  Chunks                    Chunk Names
        ./botchat.js  1.71 MB       0  [emitted]  [big]  main
    ./botchat.js.map  2.14 MB       0  [emitted]         main
      [25] ./src/Chat.tsx 14.3 kB {0} [built]
      [32] ./src/Konsole.ts 414 bytes {0} [built]
      [37] ./~/react-redux/es/index.js 230 bytes {0} [built]
      [40] ./src/SpeechModule.ts 20.6 kB {0} [built]
      [55] ./src/Attachment.tsx 15.5 kB {0} [built]
      [56] ./~/botframework-directlinejs/built/directLine.js 22.6 kB {0} [built]
      [64] ./~/react-dom/index.js 59 bytes {0} [built]
     [167] ./src/App.tsx 601 bytes {0} [built]
     [168] ./src/SpeechOptions.ts 228 bytes {0} [built]
     [175] ./src/BotChat.ts 638 bytes {0} [built]
     [372] ./~/rxjs/BehaviorSubject.js 1.67 kB {0} [built]
     [377] ./~/rxjs/add/observable/dom/ajax.js 195 bytes {0} [built]
     [378] ./~/rxjs/add/observable/from.js 185 bytes {0} [built]
     [380] ./~/rxjs/add/observable/interval.js 209 bytes {0} [built]
     [388] ./~/rxjs/add/operator/take.js 193 bytes {0} [built]
        + 421 hidden modules
Child
    Hash: 7554c9f0bcd0784eaa42
    Time: 20860ms
                   Asset     Size  Chunks                    Chunk Names
        ./botchat-es5.js  1.92 MB       0  [emitted]  [big]  main
    ./botchat-es5.js.map  2.39 MB       0  [emitted]         main
       [0] ./~/process/browser.js 5.42 kB {0} [built]
     [100] ./~/core-js/modules/_add-to-unscopables.js 292 bytes {0} [built]
     [101] ./~/core-js/modules/_array-methods.js 1.56 kB {0} [built]
     [106] ./~/core-js/modules/_to-length.js 217 bytes {0} [built]
     [182] ./src/BotChat.ts 638 bytes {0} [built]
     [183] ./~/bluebird/js/browser/bluebird.js 179 kB {0} [built]
     [184] ./~/core-js/modules/es6.array.find-index.js 543 bytes {0} [built]
     [185] ./~/core-js/modules/es6.array.find.js 523 bytes {0} [built]
     [186] ./~/core-js/modules/es6.string.starts-with.js 767 bytes {0} [built]
     [193] ./src/App.tsx 601 bytes {0} [built]
     [194] ./src/BotChatWithPolyfill.ts 617 bytes {0} [built]
     [201] ./src/SpeechOptions.ts 228 bytes {0} [built]
     [209] ./~/core-js/modules/_fails-is-regexp.js 244 bytes {0} [built]
     [219] ./~/core-js/modules/_string-context.js 309 bytes {0} [built]
     [474] ./~/timers-browserify/main.js 1.36 kB {0} [built]
        + 462 hidden modules
Child
    Hash: 1c806dd1a6ba6bb17b93
    Time: 16050ms
                         Asset    Size  Chunks             Chunk Names
        ./CognitiveServices.js  223 kB       0  [emitted]  CognitiveServices
    ./CognitiveServices.js.map  349 kB       0  [emitted]  CognitiveServices
       [0] ./~/microsoft-speech-browser-sdk/src/common/Exports.ts 1.16 kB {0} [built]
       [3] ./~/tslib/tslib.es6.js 7.83 kB {0} [built]
       [4] ./~/microsoft-speech-browser-sdk/src/common.browser/Exports.ts 621 bytes {0} [built]
       [6] ./~/microsoft-speech-browser-sdk/src/sdk/speech/Exports.ts 640 bytes {0} [built]
      [11] ./~/microsoft-speech-browser-sdk/src/common/EventSource.ts 2.13 kB {0} [built]
      [12] ./~/microsoft-speech-browser-sdk/src/common/InMemoryStorage.ts 1.29 kB {0} [built]
      [13] ./~/microsoft-speech-browser-sdk/src/common/List.ts 7.36 kB {0} [built]
      [14] ./~/microsoft-speech-browser-sdk/src/common/Promise.ts 14.6 kB {0} [built]
      [18] ./src/Konsole.ts 414 bytes {0} [built]
      [19] ./src/CognitiveServices/SpeechRecognition.ts 8.14 kB {0} [built]
      [20] ./src/CognitiveServices/SpeechSynthesis.ts 19.1 kB {0} [built]
      [21] ./~/microsoft-speech-browser-sdk/Speech.Browser.Sdk.ts 716 bytes {0} [built]
      [49] ./~/microsoft-speech-browser-sdk/src/sdk/speech.browser/Exports.ts 264 bytes {0} [built]
      [59] ./src/CognitiveServices/lib.ts 387 bytes {0} [built]
      [60] ./~/simple-update-in/lib/index.js 2.89 kB {0} [built]
        + 47 hidden modules

taketakekaho@hoge MINGW64 ~/Desktop/qiitabottest/BotFramework-WebChat (master)
$

したらあら不思議。github上にあったファイルが
image.png
なんかめっちゃ増えた。(不思議でもなんでもないのでしょうが私にはなぜこれで増えたのかはよくわかっていない)
image.png

使うjs/cssファイルを確認

つっても使うのはこの2ファイルのみ。
image.png
※もしIE11不要ならbotchat.jsっていう方でOK。

設置するhtmlを編集

githubのREADMEでEasy: In your non-React website, run Web Chat inlineを参考にしてhtmlを編集します。

基本的にはheadタグの中に以下入れて(css格納場所によってディレクトリ異なるなら指定先変えて)

<link href="botchat.css" rel="stylesheet" />

bodyタグの中に以下入れてって書いてあるね。ただし、direct_line_secretとbotidにはAzure上からコピったキーとか入れてください。シングルコーテーションお忘れなく。

<div id="bot"/>
    <script src="botchat.js"></script>
    <script>
      BotChat.App({
        directLine: { secret: 'direct_line_secret' },
        user: { id: 'userid' },
        bot: { id: 'botid' },
        resize: 'detect'
      }, document.getElementById("bot"));
    </script>

そうするともうAzureBotServiceとつながったチャットができるので、あとはお好きなようにデザインやUI変えるためhtml/css変えてお楽しみあそばせ。
こんなの作ったよ!っていうのあれば是非教えてください♪

参考情報

taketakekaho
SIer企業で大規模な銀行勘定系システムのインフラエンジニアを経験しWeb系エンジニア兼プロダクトマネジメントへ転職。 興味:チャットボット/AI/インフラ/LowCode/Azure/Office365/GAS/AWS/Python/Django/Docker JAWS初心者支部運営、LINEWORKS DeveloperUGの運営やってます。
http://www.change-jp.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away