PR

Chatbot開発が捗るFormFlow

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);
}
ダイアログに戻る際に、複数選択したトッピングが受け渡されている

ダイアログに戻る際に、複数選択したトッピングが受け渡されている

Rootダイアログに戻る際に、複数選択の結果が取得できました。

以上紹介してきた内容以外にも、FormFlowには数多くのカスタマイズ項目が用意されています。テンプレート的な型にはまった機能とはいえ、ご希望のスタイルにかなり近づけることが可能です。開発効率アップには欠かせないFormFlow、ぜひお試しださい。

GMOインターネット株式会社 Windowsソリューション チーフエグゼクティブ

GMOインターネットでWindowsのサービス開発運用に関わって16年、数年単位で進化し続けるMicrosoftのWindowsは新しもの好きにはたまらない製品です。自動販売機に見たことのないジュースがあれば、迷わすボタンを押します。そんなチャレンジが僕の人生を明るく、楽しくしてくれています。

お名前.com デスクトップクラウド
http://www.onamae-desktop.com/

お名前.com VPS Hyper-V
http://www.onamae-server.com/vps/hyperv/

連載バックナンバー

Web開発技術解説
第10回

Chatbotから話しかける(プロアクティブメッセージの送信)

2018/5/18
連載10回目となる今回は、Chatbotから先に話しかけるための手順を紹介します。
Web開発技術解説
第9回

Chatbotで画像コミュニケーションを実現する

2018/5/14
連載9回目となる今回は、Chatbotとの文字でのやり取りに画像を追加する方法を解説します。
Web開発技術解説
第8回

FacebookでChatbotを公開する

2018/4/17
連載8回目となる今回は、FacebookのMessengerを介してChatbotとやり取りする方法を解説します。

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています