Help us understand the problem. What is going on with this article?

Bot Framework Composer で チャットボットをノンコーディング開発 (1) ひとまず EchoBot 編

Bot Framework Composer は、Bot Framework をベースとしたチャットボットアプリを GUI で作成するツールです。ダイアログの作成や LUIS や QnAMaker を利用した自然言語処理の組み込みをノンコーディングで作成できます。

今回は Bot Framework Composer を利用してチャットボットをノンコーディングで開発する手順を紹介します。

Screenshot-Composer-overview.png

準備

手順

Bot Framework Composer のインストール~起動

Bot Framework Composer のフォルダー (※Zip でダウンロードした場合は展開しておきます) を任意のディレクトリーに配置します。ここでは C:\YOUR_REPO というディレクトリーに配置しています。
コマンドプロンプトを起動し、yarn install コマンドでインストールを行います。

cd C:\YOUR_REPO\BotFramework-Composer-stable\Composer
C:\YOUR_REPO\BotFramework-Composer-stable\Composer>yarn install

以下のようなメッセージが表示されて必要なコンポーネントのダウンロードとインストールが行われて、Done と表示されればインストールは完了です。(5~10分程度時間がかかります)

[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
 : (中略)
[4/4] Building fresh packages...
 : (中略)
Done in 1230.67s.

yarn build コマンドでビルドを行います。(こちらも多少時間がかかります)

C:\YOUR_REPO\BotFramework-Composer-stable\Composer>yarn build

以下のようなメッセージが表示され、Compiled successfully と表示されたらビルドは完了です。

yarn run v1.19.1
$ node scripts/begin.js && yarn build:prod
 : (中略)
Compiled successfully! Run "yarn startall" to start the web application & test runtime.
Done in 464.11s.

yarn startall コマンドで Bot Framework Composer を起動します。

C:\YOUR_REPO\BotFramework-Composer-stable\Composer>yarn startall

以下のようなメッセージが表示されたら、指示通りにブラウザーから http://localhost:3000 にアクセスします。

$ concurrently --kill-others-on-fail "npm:runtime" "npm:start"
 : (中略)
$ node build/server.js
[start] [start:server] Composer now running at:
[start] [start:server] http://localhost:3000

Bot Framework Composer の画面が表示されたら、Bot の作成に入っていきます。
20191116_02.png

基本の EchoBot 作成

Bot Framework Composer 画面の右バナーにあるサンプルを使って、基本となる EchoBot (おうむ返しBot) を作成してみます。EchoBot をクリックします。

20191116_03.png

Bot の設定ダイアログ画面で、情報を入力します。

  • Name : お好きな名前を入力
  • Description : 必要に応じて説明を入力
  • Location : デフォルトで Bot Framework Composer のインストールディレクトリ\MyBots になっています。お好みで変更します。

20191116_04.png

設定ダイアログ画面右下の [Next] をクリックすると、テンプレートから EchoBot の雛形が作成されます。

Language Understanding (LUIS) を使った自然言語処理を組み込む際は右側の Language Understanding バナーから設定します。今回は LUIS は使用せずそのまま (None) にします。

画面右上の [Start Bot] をクリックして、作成した EchoBot を起動します。

20191116_05.png

画面右上に Test in Emulator と表示されるので、クリックして Bot Framework Emulator を起動し、作成した EchoBot のテストを行います。

20191116_06.png

Bot Framework Emulator が起動したら、EchoBot にメッセージを送信します。入力した文字列がオウム返し(Echo)されたら、作成OKです。

20191116_07.png

EchoBot のソースコード確認

Bot Framework Composer で作成した EchoBot のソースコードを確認します。Bot Framework Composer を展開したフォルダー\MyBots(EchoBot名) に作成されています。

C:\YOUR_REPO\BotFramework-Composer-stable\MyBots\YOUR_BOTNAME

こちら C# のソリューションファイルになっていますので、BotProject.sln から Visual Studio で開きます。

20191116_08.png

Bot ProjectTests の 2つのプロジェクトが作成されていることが分かります。
Visual Studio からビルドして起動し、テストすることももちろん可能です。

20191116_09.png

Bot Framework Composer の終了

Bot Framework Composer を使い終わったらシャットダウンしておきます。Bot Framework Composer を起動したコマンドプロンプトで Ctrl+C を入力して終了します。

次回起動する際は、同様にコマンドプロンプトから Bot Framework Composer のインストールフォルダーにアクセスし、yarn startall コマンドで起動します。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした