7
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-05-20

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

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

準備

Bot Framework Composer のインストール

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

Win | Mac | Linux

Web アプリバージョン (Node.js) や Preview 版は Github から確認、ダウンロードできます。
Github > Bot Framework Composer

Bot Framework Emulator のインストール

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

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

Github > Bot Framework Emulator / releases

手順

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

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

20200521_01.png

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

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

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

20200521_02.png

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

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

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

20200521_03.png

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

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

20200521_04-1.png

自然言語処理 と Intent

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

20200521_04-2.png

Greeting Intent

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

20200521_04-3.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

AddIntent & addtodo

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

20200521_06.png

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

20200521_07.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

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

20200521_08-2.png

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

20200521_09.png

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

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

20200521_10.png

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

20200521_11.png

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

20200521_12.png

7
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?