Bot Framework Composer GA! デスクトップアプリでチャットボットをコードレス開発(1): Todo テンプレートで挙動確認

[Microsoft Bot Framework](https://dev.botframework.com/) をベースとしたチャットボットアプリを GUI で作成するツール、Bot Framework Composer が V1.0 として正式リリースされました。デスクトップアプリ (Win|Mac|Linux) として利用できるようになりましたので、インストールしてチャットボットをコードレスで作成してみます。

> Web アプリ版の動作を確認するには、こちらの記事を参照してください。(※内容はプレビュー時点)
> [Bot Framework Composer で チャットボットをノンコーディング開発 (1) ひとまず EchoBot 編](https://qiita.com/annie/items/93ffbbc2f0981257751e)

# 準備

## Bot Framework Composer のインストール

下記リンクからデスクトップアプリをダウンロード、インストールします。

[Win](https://aka.ms/bf-composer-download-win) | [Mac](https://aka.ms/bf-composer-download-mac) | [Linux](https://aka.ms/bf-composer-download-linux)

> Web アプリバージョン (Node.js) や Preview 版は Github から確認、ダウンロードできます。
> [Github > Bot Framework Composer](https://github.com/microsoft/BotFramework-Composer)

## Bot Framework Emulator のインストール

Bot Framework Composer で作成されたチャットボットは、疑似的に Web API として起動するので、そのチャットボットとコミュニケーションするツールとして Bot Framework Emulator を利用します。

下記 Github から環境 (Win|Mac|Linux) に合わせてダウンロード、インストールします。

[Github > Bot Framework Emulator / releases](https://github.com/Microsoft/BotFramework-Emulator/releases)

# 手順

## 1. Bot Framework Composer の起動、新規プロジェクトの作成

Bot Framework Composer を起動します。初期画面から **[+New]** をクリックして、新規プロジェクトを作成します。

![20200521_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117583/ac91ab8d-d6c1-5a13-deb0-14780283c6aa.png)

*Create bot from template or scratch?* ダイアログウインドウで、用意されているテンプレートから新規プロジェクトを作成します。

- **Create from template** を選択
- 今回は **Simple Todo** を選択してみます

ウインドウ右下の **[Next]** をクリックして次に進みます。

![20200521_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117583/edb2937b-b9a0-3223-f635-a2198e67adbc.png)

*Define comversation objective* ダイアログウインドウで、プロジェクト名や保存先を設定します。

- Name: ご自分で識別しやすい名前を入力
- Location: デフォルトでは **C:\User\CURRENT_USER** になっているので、お好みの場所を設定します

ウインドウ右下の **[Next]** をクリックすると、新規プロジェクトが作成されます。

![20200521_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117583/d488374e-9271-7723-91de-c83c7c4a3115.png)

## 2. Simple Todo テンプレートの内容と動作の確認

プロジェクトが作成されると、初期画面に遷移します。プロジェクト (ここでは *TodoSamples*) のトップページが表示されます。 表示されていない場合は、左列の一覧から一番上のプロジェクト名 (ここでは **TodoSamples**) を選択します。

![20200521_04-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117583/6d8d1047-5964-a096-d7c8-e9fc0b516f41.png)

### 自然言語処理 と Intent

この Simple Todo テンプレートでは、ユーザー入力を Regular Expression (正規表現) で識別します。
右列の *Language Understanding* が **Regular Expression** になっているのを確認してください。

![20200521_04-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117583/77e6160b-b0e7-c29c-ac26-8ba69ac3ce36.png)

### Greeting Intent

他のテンプレートや Scratch 作成 の場合にも共通で、新規ユーザーが追加された(＝新規ユーザーがアクセスした) 場合、*Greeting* Intent が起動します。左列の一覧から **Greeting** をクリックして内容を確認します。

![20200521_04-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117583/988b52f8-f54a-da36-2222-3f79352f5748.png)

*Greeting* Intent では、初期メッセージ (*'Hi! I'm a ToDo bot. Say "add a todo named first" to get started.'*) を表示します。この初期メッセージ通りに *'add todo'* といった文言を入力すると、*AddIntent* が起動します。左列のダイアログ一覧から **AddIntent** をクリックして、*AddIntent* Intent の内容を確認します。

![20200521_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117583/c6db4d3b-22f5-3060-919e-26fa0bf648b9.png)

### AddIntent & addtodo

*AddIntent* では *addtodo* ダイアログを起動して、Todo の登録を行います。**addtodo** をクリックして内容を確認します。

![20200521_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117583/680bf086-1478-9f9a-ad47-b20ffb7cb241.png)

*addtodo* ダイアログでは、ユーザーの入力(Todo のタイトル) を取得し、*user.todo* という Array (配列) に追加します。**Edit an array property** というアクションをクリックすると右列に詳細が表示されます。**Type of change** に *Push*、***Vaule* に **=dialog.value** が設定されているのを確認してください。

![20200521_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117583/2c9a5a3e-6f5e-aa8e-fa1e-a9f16e00ab9d.png)

### showIntent & showtodos

追加された Todo を確認するダイアログは **showtodos** ですが、これが起動される条件を確認します。プロジェクト名 (ここでは **TodoSample**) > **ShowIntent** の順にクリックします。

ShowIntent は *Show todos* といった文章が入力されると **showtodos** ダイアログを起動します。

ShowIntent と判断される条件として、右列の **Trigger Phrase** に **(?i)(?:show|see|view) .*(?:to-do|todo|task)** といった正規表現が入力されているのを確認してください。'see to-do' や 'view task' といった入力でも ShowIntent と判断されることが分かります。

![20200521_08-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117583/8205eeef-5f99-5589-f187-dd4f71d68051.png)

ここで、*showtodos* ダイアログの内容を確認します。**showtodo** をクリックします。

![20200521_08-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117583/f3d76cbd-9258-53b5-9f2a-75f15bdb18c0.png)

*showtodos* ダイアログでは、*user.todo* が null でなければ、その内容を表示します。

![20200521_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117583/e7cf1228-1531-dda5-641b-d5ab9939d3a9.png)


## 3. Simple Todo の起動と Bot Framework Emulator からのアクセス

画面右上の **[Start Bot]** をクリックして、Simple Todo のチャットボットを起動します。

![20200521_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117583/e0007119-10bb-557d-6d6c-d252c39c5e4c.png)

チャットボットを起動すると表示される **[Test in Emulator]** をクリック、ローカルにインストールした Bot Framework Emulator が起動されるまで待ちます。

![20200521_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117583/69cdd240-1b1d-09b2-10c3-cfbbe442df05.png)

Bot Framework Emulator から入力を行います。初期メッセージが表示されたら、**add todo** と入力して ToDo を入力します。その後、**show todo** と入力して、登録した ToDo が表示されることを確認してください。

![20200521_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117583/4ff7ecd0-3465-1a30-437e-67b9b9dd0ad2.png)