Bot Framework Composer でボット開発 : その 1 概要とインストール

このシリーズでは現在プレビューとしてオープンソースで公開されている Bot Composer について紹介します。今回は概要の紹介ということです。

[GitHub: Microsoft Bot Framework Composer [PREVIEW]](https://github.com/Microsoft/BotFramework-Composer)
[Bot Framework Composer 公式ドキュメント](https://docs.microsoft.com/en-us/composer/)

# 概要

Bot Framework Composer は Microsoft Bot Framework ベースのボットアプリケーションを GUI で開発できるツールです。多くの機能をサポートしていて、完成度の高いボットを開発することができます。

- GUI ツールで会話フローを開発
- 自然言語処理 (Language Understanding Intelligent Service - LUIS) との統合
- LUIS と QnA メーカー用のツールを統合
- 文章作成システムの統合
- 実行可能なコードの生成

![](https://github.com/microsoft/BotFramework-Composer/raw/stable/docs/Assets/Screenshot-Composer-overview.png)

# 想定される利用者と用途

README には以下のように書かれていますが、プレビューという点に注意して、誰でも好きに使ってくれればいいです。

- Bot Framework SDK のプレビュー機能である Adaptive Dialogs や Language Generation などを試したいボット開発者
- Composer と Bot Framework Adaptive Dialog はプレビューのため本番での利用は自己責任
- Composer は Web アプリとして動作するよう開発されており、将来的には独自の Web アプリに組み込めることを目指している

# インストール

※ 2020/5 に GA したため、各種 OS 用のインストーラーも利用が可能です。

1\. 必要なツールのインストール。

- [Node.js](https://nodejs.org/dist/v12.13.0/): バージョン 12.13.0
- [Yarn](https://yarnpkg.com/en/docs/install): 最新の安定版
- [Bot Framework Emulator](https://github.com/microsoft/BotFramework-Emulator/releases/latest): 最新の安定版
- [.NET Core SDK 3.1](https://dotnet.microsoft.com/download/dotnet-core/current): テストで必要

## インストーラーでインストール場合

2\. GitHub より各 OS 用のインストーラーを取得して実行。
https://github.com/microsoft/BotFramework-Composer/releases/tag/v1.0.0

## コードをコンパイルする場合

2\. GitHub をクローン。

```shell
git clone https://github.com/microsoft/BotFramework-Composer.git
cd BotFramework-Composer
```

3\. stable ブランチになっているか確認。

```shell
>git branch
* stable 
```

4\. 以下コマンドで依存関係のインストールとソリューションのビルド。

```shell
cd Composer
yarn install
yarn build
yarn startall
```
※15 分くらいかかるので、以下ビデオでも見て待つ。
[![](http://img.youtube.com/vi/Aiv95e2-Yn0/0.jpg)](http://www.youtube.com/watch?v=Aiv95e2-Yn0)

※手元の環境ではうまくいかず、以下コマンドで回避。。

```shell
cd Composer
npm install
npm run build
npm run startall
```

5\. ブラウザで http://localhost:3000 に接続。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/fcf1928f-a099-5fa8-aa93-037c5d2916ac.png)

# オウム返しボットの作成

※ GA により一部画面が変わり、新しいダイアログやトリガーは「Add」メニューが別途用意されました。シリーズの他の記事では一部古い画面のままで説明を勧めますが、適宜読み替えてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/66872679-a67d-d5d2-d328-fdd10bfa0298.png)

まずは定番のオウム返しを作ります。

1\.「New」をクリック。「Create from template」より「Echo Bot」を選択して「Next」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/6b6c3ad8-343a-4747-9783-4b272ff1d7cf.png)

2\. 任意の名前と説明を付けて「Next」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/8a984886-253b-786d-8971-b6cfdc23643e.png)

3\.「Unknown intent」を選択。これはユーザーの意図が分からない場合にトリガーされる。応答メッセージとして「You said '${turn.activity.text}'」が設定されていることを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/3c672329-dcfb-cdd5-5595-337b71861d90.png)

4\. 画面右上の「Start Bot」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/2dc78c94-ca4b-41f2-e069-8d3cf89b82fa.png)

5\. しばらくすると横に表示される「Test in Emulator」をクリック。Emulator のインストールやアップデートのポップアップが出た場合は「OK」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/60eaade7-9242-4124-82b0-10747835df97.png)

6\. エミュレーターが起動するので、メッセージを送信して、オウム返しされる事を確認。
※たまに初回起動失敗するので、動かない場合は「Restart Conversation - New User ID」ボタンをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/04d675d0-ec02-ecbf-4f65-23906505f88b.png)

7\. 応答を日本語に変更。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/511f9fd1-86a6-b7e1-e542-8bcab97036b3.png)

8\. 「Restart Bot」をクリック後、再度エミュレーターからテスト。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/00228a14-a591-9879-f607-0ced5e837918.png)

### 作成されたソリューションの確認

これまでに C# と BotBuilder で開発してきた場合は、自動生成されたファイルを見ると面白いです。詳細は割愛しますが、是非一度確認してみてください。

# まとめ

今回はとりあえず Bot Framework Composer をインストールして動かしてみました。次回はトリガーとダイアログの概要を見ていきます。

[次の記事へ](https://qiita.com/kenakamu/items/2cbdc046efa663b49968)
[目次へ戻る](https://qiita.com/kenakamu/items/6dc043cfc1f199032883#bot-framework-composer)