Chatbot開発が捗るFormFlow

Web開発

技術解説

連載 [第5回] :

Microsoft Bot Frameworkで作るChatbot

2017年12月12日(火)

樋口勝一

連載の5回目となる今回は、選択肢によるインターフェースを提供するFormFlowを用いて、Chatbotを拡張してみる。

FormFlowのカスタマイズ

FormFlowがダイアログに組み込めたところで、本格的に使えるようにカスタマイズしてみましょう。まずは選択項目が一つでは物足りないので、追加します。

リスト8：選択項目を追加

public enum CurryOptions { ビーフ, チキン, ポーク, ベジタブル };
public enum RiceOptions { ライス, バターライス, ナン };
public enum SizeOptions { 大, 中, 小 };
public enum ToppingOptions { トンカツ, コーン, ゆで卵, チーズ };

[Serializable]
public class CurryFormQuery
{
    public CurryOptions? Curry;
    public RiceOptions? Rice;
    public SizeOptions? Size;
    public ToppingOptions? Topping;
}

今回は、上記のリストのような選択項目を追加してみました。エミュレーターで確認してみましょう。

追加された選択項目を確認

だんだんとカレーの注文らしくなってきました。

次にカレーダイアログ終了後、Rootダイアログに戻る際のメッセージ（現状では「カレーはビーフですね」）も修正しておきましょう。RootDialog.csを開き、CurryResumeAfterDialogメソッドを修正します。

リスト9：ダイアログに戻る際のメッセージを修正

private async Task CurryResumeAfterDialog(IDialogContext context, IAwaitable<CurryFormQuery> result)
{
    var curry = await result;

    await context.PostAsync($@"カレーは {curry.Curry.ToString()}　ですね。

ライスは {curry.Rice.ToString()}　ですね。

サイズは {curry.Size.ToString()}　ですね。

トッピングは {curry.Topping.ToString()}　ですね。

");
    MenuMessage(context);
}

CurryFormQuery型で受け渡された戻り値には、各選択項目が含まれています。それぞれヒア文字列を使って、文字列型で表示しています。

ダイアログに戻る際に選択結果が受け渡されている

上記の実行結果で、カレーダイアログでの選択結果がきちんと受け渡されていることを確認できました。

今の設定では、選択項目の表示が「rice」「size」「topping」のように英語表記のままになっています。今度は、こちらをカスタマイズしてみましょう。

現状では選択項目が英語表記のままになっている

リスト10：選択項目の表示を日本語に

[Serializable]
public class CurryFormQuery
{
    [Describe("カレー")]
    public CurryOptions? Curry;
    [Describe("ライス")]
    public RiceOptions? Rice;
    [Describe("サイズ")]
    public SizeOptions? Size;
    [Describe("トッピング")]
    public ToppingOptions? Topping;
}

CurryFormQueryクラスで定義している属性に「Describe」で説明を追加することができます。それぞれに分かりやすく日本語名を追加しました。

選択項目の表示が日本語になっている

選択項目の表示が分かりやすくなりました。

複数選択を可能にする

選択項目の中には、複数の項目を選択できるようにしたいものもあります。その場合の設定方法を紹介します。例として、トッピングの種類を増やして、複数選択できるようにしてみましょう。ポイントは、「public List<ToppingOptions> Topping」の記述で、こちらはList型の属性を定義しています。

リスト11：トッピングを複数選べるようにする

public enum CurryOptions { ビーフ, チキン, ポーク, ベジタブル };
public enum RiceOptions { ライス, バターライス, ナン };
public enum SizeOptions { 大, 中, 小 };
public enum ToppingOptions { トンカツ, コーン, ゆで卵, チーズ, トマト, 辛さ増し, ハラペーニョ };

[Serializable]
public class CurryFormQuery
{
    [Describe("カレー")]
    public CurryOptions? Curry;
    [Describe("ライス")]
    public RiceOptions? Rice;
    [Describe("サイズ")]
    public SizeOptions? Size;
    [Describe("トッピング")]
    public List<ToppingOptions> Topping;
}

この記述だけで複数選択が可能となります。実行してみましょう。

トッピングは複数選べるようになった

トッピングの選択がボタン形式ではなく、数字入力となっています。半角スペースで区切って数字を入力すれば、複数項目の選択が可能です。

上記の変更に合わせて、カレーダイアログを終了してRootダイアログに戻る際のメッセージも修正しておきましょう。RootDialog.csを開きCurryResumeAfterDialogメソッドを修正します。

for文でList型のcurry.Topping.Countから選択されたトッピングを取り出します。

リスト12：ダイアログに戻る際のメッセージも修正

private async Task CurryResumeAfterDialog(IDialogContext context, IAwaitable<CurryFormQuery> result)
{
    var curry = await result;
    var topping = "";

    for (int i = 0; i < curry.Topping.Count; i++)
    {
        topping += "　" + curry.Topping[i];
    }

    await context.PostAsync($@"カレーは {curry.Curry.ToString()}　ですね。

ライスは {curry.Rice.ToString()}　ですね。

サイズは {curry.Size.ToString()}　ですね。

トッピングは {topping}　ですね。

");
    MenuMessage(context);
}