Bot Builder v4 : テンプレートを使って Node.js でボットを作る

今回は Node.js 版での BotBuilder 開発の始め方を紹介します。手順は Windows 10 で試しましたが、他の OS でもほぼ同じです。

[情報元: Bot Framework SDK for JavaScript を使用したボットの作成](https://docs.microsoft.com/ja-jp/azure/bot-service/javascript/bot-builder-javascript-quickstart?view=azure-bot-service-4.0)
[GitHub: BotBuilder node.js 版ソース](https://github.com/Microsoft/botbuilder-js)

# 準備

まずツールやテンプレートの準備からします。

1\. 以下のリンクから各種ツールをインストール。

[Node.js](https://nodejs.org/ja/download/)
[Visual Studio Code](https://code.visualstudio.com/Download) 
[Botframework Emulator](https://github.com/microsoft/BotFramework-Emulator/releases/)

2\. 管理者として実行したコマンドプロンプトで以下のコマンドで Windows ビルド ツールのインストール。※この手順は Windows 環境のみ必要

```shell
npm install -g windows-build-tools
```
3\. 以下のコマンドで Yeoman とテンプレートをインストール。

```shell
npm install -g yo generator-botbuilder
```

# テンプレートからボットの作成

BotBuilder は複数の要素をもったソリューションであるため、より簡単に始められるようテンプレートが用意されてます。開発言語は JavaScript または TypeScript が選択できます。またテンプレートは Echo/Core/Empty という 3 種類から選択できます。

[GitHub: テンプレートのソース](https://github.com/Microsoft/BotBuilder-Samples/tree/master/generators/generator-botbuilder)

## オウム返しボット

1\. 管理者としてコマンドプロンプトを実行し、以下コマンドでボットの作成。作成先のフォルダは任意。

```shell
mkdir mybot
cd mybot
yo botbuider
```

2\. 名前、説明、言語を選択。最後にテンプレートを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/eb641ef6-68b5-0126-ce1e-6c768010aa5c.png)

3\. テンプレート展開後、npm install が実行されるので、終わるまで待機。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/aad2d39a-2086-1d54-0f99-85cea6a3ee34.png)

4\. 以下コマンドでボットを実行。

```shell
cd mybot
npm start
```

5\. Bot エミュレーターを起動し、File | Open Bot をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/facf9e7d-5a98-89e4-454d-8deb906a3c9a.png)

6\. http://localhost:3978/api/messages 入力して Connect をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/dada4eda-acb6-d8fb-b3af-dcb775e32952.png)

7\. ボットに話しかけるとオウム返しされることを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/461fd358-b6c2-c445-e417-ea7994af2eeb.png)

## コンテキストを管理してくれるボット

BotBuilder では前回質問した答えなど会話の状態を保持するボットを作ることが出来ます。コードは少し複雑になりますがこちらもテンプレートが用意されています。

1\. 管理者としてコマンドプロンプトを実行し、以下コマンドでボットの作成。作成先のフォルダは任意。

```shell
mkdir mycorebot
cd mycorebot
yo botbuider
```

2\. 名前、説明、言語を選択。最後にテンプレートを選択。今回は CoreBot を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/7d135d93-c05c-b7b1-5f8a-a4da0da936fd.png)

3\. テンプレート展開後、npm install が実行されるので、終わるまで待機。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/aad2d39a-2086-1d54-0f99-85cea6a3ee34.png)

4\. 以下コマンドでボットを実行。

```shell
cd mycorebot
npm start
```

5\. 先ほどと同じ手順でエミュレーターでボットに接続。接続するとすぐ以下のようなWelcome メッセージが届く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/b1eb3833-3f94-42b9-1e56-909577c48136.png)

6\. 何かしらメッセージを送ると、LUIS が構成されていないというメッセージと共に、旅行予約に関するメッセージが送られてくるので、それに回答。前回の回答がボット側で管理されていることを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/01b4755c-1636-c524-0005-6dff3a634148.png)

# 参考リンク
[C# Microsoft Bot Framework v4 完全制覇 : 目次](https://qiita.com/kenakamu/items/6dc043cfc1f199032883)
[Azure Bot Service について](https://docs.microsoft.com/ja-jp/azure/bot-service/bot-service-overview-introduction?view=azure-bot-service-4.0)
[ボットのしくみ](https://docs.microsoft.com/ja-jp/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0&tabs=javascript)