BotServiceのDirectLineでチャットボット作っててIE11で動かないんだけど！って言われたので調べてみた。っていうかIE11使ってるユーザー（企業）結構多いよね…
#私のローカル開発環境
- エディタ：Visual Studio Code
- Windows10
- Windows版Gitインストール済
#説明すること/しないこと
- 説明すること
- Azure BotService（WebBotでもFunctionsBotでも同じ）のDirectLineチャンネルとつなぐ方法
- IE11対応したjsスクリプトを使う方法
- 説明しないこと
- BotServiceでチャットボットを実装する（デプロイ済前提）
- Webデザイン部分（html/cssなどフロント部分はご自身のお好きなデザインで…）
#完成形
最近よくあるパターンのやつ。右下にガジェットが表れてクリックすると
こんな感じでチャット画面が表示されてチャットボット使えるっていうやつ
#手順
##AzureBotServiceのDirectLineチャンネルを有効にする
私はサーバレスが好みなのでFunctionsBot使ってますがWebBotでも同じ手順になると思います。
AzureBotServiceの左メニューから[チャンネル]＞[DirectLineアイコン]をクリックします。
以下のような画面が表示されるのでシークレットキーをコピっておきます。
メニューの[設定]＞ボットハンドルもメモしときます。
※これホントに必要かは微妙だけど毎回やってる。違ってたら教えてください。
##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上にあったファイルが
なんかめっちゃ増えた。（不思議でもなんでもないのでしょうが私にはなぜこれで増えたのかはよくわかっていない）
##使うjs/cssファイルを確認
つっても使うのはこの2ファイルのみ。
※もし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変えてお楽しみあそばせ。
こんなの作ったよ！っていうのあれば是非教えてください♪
#参考情報
- BotFramework-WebChat
https://github.com/Microsoft/BotFramework-WebChat - Azure BOT ServiceのWebChatのUIをカスタマイズする方法
https://qiita.com/bigplants/items/9d0bdc314cace8b4937f - Polyfills and the evolution of the Web
https://www.w3.org/2001/tag/doc/polyfills/