Edited at

Microsoft Bot Framework v3.0 からはじめる BOT 開発

More than 1 year has passed since last update.


Microsoft Bot Framework とは

マイクロソフトが提供する、チャットのようなメッセージのやり取りを行うアプリケーションをテンプレートから簡単に作成できる&便利な機能をまとめた(→"フレームワーク"と呼ばれている)モノです。2016年3月末のイベント //Build 2016 にて v1.0 として公開、2016年7月に最新版 v3.0 が公開されました。(まだプレビュー版として公開中)

この記事では、主に v3.0 からはじめて触ってみる人向けに、"最初の一歩"を解説します。開発は Visual Studio 2015 および C# で行います。下記手順を確認している環境は、Windows10 + Visual Studio Enterprise 2015 Update3 です。

※ 順次 Windows10 + Visual Studio 2017 (C#) の環境に変更しております。


[参考] 今後のステップ

今回作成するテンプレートをベースとして、Bot Framework による BOT 開発を行う記事はこちら。(随時追加中)


Microsoft Bot Framework v3.0 からはじめるBOT開発

コミュニケーションの基本クラス - Dialog(1)

Yes/No ダイアログを表示する - Dialog(2)

〇ブウェイがBOTで注文を受付したら - FormFlow(1)

〇ブウェイ 注文受付 BOT をもっと丁寧に - FormFlow(2)

→ ここまでの手順で作成した サンプルアプリ(GitHub)

Azure で Web 公開&お手軽 Web Chat を試す

天気予報 BOT~カード表示で分かりやすく - Adaptive Cards

天気予報 BOT~自然言語を解釈する - Cognitive Services LUIS(1)

天気予報 BOT~自然言語判定を組み込む - Cognitive Services LUIS(2)

→ ここまでの手順で作成した サンプルアプリ(GitHub)

Azure Bot Service ではじめるチャットボット開発 : 祝GA!Azure Bot Service 概略&作成~公開手順



Bot Framework を使うための開発環境


Visual Studio 2017 または 2015

無償の Visual Studio 2017 Community でOKなので、既存の環境がない場合は、ダウンロードしてインストールします。

Visual Studio 2017 Community ダウンロードサイト


Bot Framework Template

Visual Studio 用の Bot Framework C# テンプレート

をダウンロードします。配置先は、Visual Studio のプロジェクトテンプレートディレクトリになります。

~ProjectTemplates\Visual C# というディレクトリの下にダウンロードしたテンプレートを ZIPファイルのまま 配置します。


デフォルトでは

C:\Users\ ユーザー名 \Documents\Visual Studio 2017\Templates\ProjectTemplates

などどなっていると思いますが、不明な場合は Visual Studio を起動して、上部のメニューバーから ツール>オプション を選択して

Visual Studio のオプション設定

プロジェクトおよびソリューション>全般 をクリックすると、プロジェクトテンプレートの場所が表示されます。

プロジェクトおよびソリューションの設定



Bot Framework Emulator

作成したBOTアプリの動作確認をするためのエミュレーターです。

Bot Framework Channel Emulator (Windows版) ※Mac/Linux は Console版 をご利用ください


早速テンプレートをつかってBOTを作成してみる


Visual Studio テンプレートから Bot アプリケーションの作成

Visual Studio 上部のメニューバーから ファイル>新規作成>プロジェクト を選択します。

Visual Studio の新規プロジェクト作成

新しいプロジェクトというダイアログの右上にある検索ボックスに bot と入力し、中央の列に表示される Bot Application をクリックします。ひとまず、(プロジェクトの)名前、(プロジェクトファイルが保存される)場所ソリューション名 はデフォルトのままで右下の OK をクリックします。

テンプレートから Bot アプリケーションの作成


プロジェクト はアプリケーションに必要なファイル一式(ソースコード、アイコンやイメージ、データなど)をまとめたもので、その他ビルドに必要な情報などを含めてソリューション に格納されます。

詳細→ MSDN: Visual Studio のソリューションおよびプロジェクト



Botアプリケーションのコード確認

ソリューションが作成されたら、ソリューションエクスプローラーで構成を確認します。(ソリューションエクスプローラーはデフォルトでは右側に表示されています。)

Controllersを開き、MessagesController.csをクリックして表示します。

Botアプリケーションのコード確認

チャットのハンドリングを行うコードは MessagesController.cs に含まれています。


MessagesController.cs

private Activity HandleSystemMessage(Activity message)

{
if (message.Type == ActivityTypes.DeleteUserData)
{
// ユーザーデータ削除時のアクション、メッセージを記載
}
else if (message.Type == ActivityTypes.ConversationUpdate)
{
// メンバー追加、削除といった会話ステータスの変更を把握
// Activity.MembersAdded, Activity.MembersRemoved,
// Activity.Action で詳細を確認
}
else if (message.Type == ActivityTypes.ContactRelationUpdate)
{
// コンタクトリストの追加、削除
// 詳細は Activity.From + Activity.Action で確認
}
else if (message.Type == ActivityTypes.Typing)
{
// 会話の入力時のアクション、メッセージを記載
}
else if (message.Type == ActivityTypes.Ping)
{
// Ping時のアクション、メッセージを記載
}

return null;
}


また、 MessagesController.cs には受信した文章を解析(文字数をカウント)して返答を作成する部分も含まれています。


MessagesController.cs

public async Task<HttpResponseMessage> Post([FromBody]Activity activity)

{
if (activity.Type == ActivityTypes.Message)
{
ConnectorClient connector = new ConnectorClient(new Uri(activity.ServiceUrl));
// 文字数をカウント
int length = (activity.Text ?? string.Empty).Length;

// 返答の文章を作成
Activity reply = activity.CreateReply(
$"You sent {activity.Text} which was {length} characters"
);
await connector.Conversations.ReplyToActivityAsync(reply);
}
else
{
HandleSystemMessage(activity);
}
var response = Request.CreateResponse(HttpStatusCode.OK);
return response;
}



Botアプリケーションのローカル実行とエミュレーターによるアクセス

ひとまずこのままで動作を確認します。Windows10 のメニューから Bot Framework Channel Emulator という名前でインストールされているエミュレーターを起動します。

Visual Studio で F5 (デバックの開始) でビルド&デバック実行を行います。ブラウザが起動して、Bot Application の画面が表示されたら、ローカルで Botアプリケーションが実行されています。

Botアプリケーションのローカル実行

このアプリケーションにエミュレーターからアクセスを行ってみます。

ブラウザに表示されている URL が http://localhost:xxxx/ の場合、エミュレーターのアクセス先(URL)は http://localhost:xxxx/api/messages になります。(xxxxの部分は環境によって異なります)

これを Bot Framework Channel Emulator の上部中央にある Bot URL に入力します。

実際にBotにメッセージを送ってみます。エミュレーターの下枠に入力(+Returnで送信)を行うと、下記のような情報が表示されます


  • 右枠:Botアプリケーション内で生成・管理されているメッセージやユーザーの情報、返答内容 (JSON形式で表示)

  • 左枠:Botとしての返答メッセージ

エミュレーターからBotアプリケーションへのアクセス

以上、Bot Framework 開発の "最初の一歩" は完了です。