Bot Framework と Microsoft Graph で DevOps その 10 : フォームフロー入門編
前回はダイアログ応用編として DialogPrompt の機能など紹介しました。今回はフォームフロー (FormFlow) 入門編をお届けします。
概要
前回 DialogPrompt を利用して、イベント作成に必要な情報を集めました。しかしフォームフローはこれをさらに簡単にしてくれます。フォームフローはクラスの定義を元に、適切なダイアログを作ってくれます。百読は一コードに如かずということで早速。
フォームフローを利用したイベントの作成
モデルの作成
フォームフローはモデルベースであるため、モデルを作ります。Microsoft.Graph.Event クラスをそのままモデルに使いたいんですが、Serializable 属性ないんですよね。あと不要なフィールドなどもあるので、新規作成を。
1. Visual Studio でボットアプリプロジェクトに Models フォルダを追加。
2. Models フォルダ内に、OutlookEvent.cs を追加し、以下と差し替え。Serializable 属性忘れないように。
using System;
namespace O365Bot.Models
{
[Serializable]
public class OutlookEvent
{
public string Subject { get; set; }
public string Description { get; set; }
public DateTime Start { get; set; }
public bool IsAllDay { get; set; }
public double Hours { get; set; }
}
}
CreateEventDialog.cs の変更
PromptDialog によるチェーンではなく、フォームフローを直接利用するようにします。以下のコードに差し替え。コード短くなりましたね。
using Autofac;
using Microsoft.Bot.Builder.Dialogs;
using Microsoft.Bot.Builder.FormFlow;
using Microsoft.Graph;
using O365Bot.Models;
using O365Bot.Services;
using System;
using System.Threading.Tasks;
namespace O365Bot.Dialogs
{
[Serializable]
public class CreateEventDialog : IDialog<bool> // このダイアログが完了時に返す型
{
public async Task StartAsync(IDialogContext context)
{
// FormFlow でダイアログを作成して、呼び出し。
var outlookEventFormDialog = FormDialog.FromForm(this.BuildOutlookEventForm, FormOptions.PromptInStart);
context.Call(outlookEventFormDialog, this.ResumeAfterDialog);
}
private async Task ResumeAfterDialog(IDialogContext context, IAwaitable<OutlookEvent> result)
{
await context.PostAsync("イベントを作成しました。");
// ダイアログの完了を宣言
context.Done(true);
}
private IForm<OutlookEvent> BuildOutlookEventForm()
{
OnCompletionAsyncDelegate<OutlookEvent> processOutlookEventCreate = async (context, state) =>
{
using (var scope = WebApiApplication.Container.BeginLifetimeScope())
{
IEventService service = scope.Resolve<IEventService>(new TypedParameter(typeof(IDialogContext), context));
// TimeZone は https://graph.microsoft.com/beta/me/mailboxSettings で取得可能だがここでは一旦ハードコード
Event @event = new Event()
{
Subject = state.Subject,
Start = new DateTimeTimeZone() { DateTime = state.Start.ToString(), TimeZone = "Tokyo Standard Time" },
IsAllDay = state.IsAllDay,
End = state.IsAllDay ? null : new DateTimeTimeZone() { DateTime = state.Start.AddHours(state.Hours).ToString(), TimeZone = "Tokyo Standard Time" },
Body = new ItemBody() { Content = state.Description, ContentType = BodyType.Text }
};
await service.CreateEvent(@event);
}
};
return new FormBuilder<OutlookEvent>()
.Message("イベントを作成します。")
.AddRemainingFields() // すべてのフィールドを処理対象として追加
.OnCompletion(processOutlookEventCreate)
.Build();
}
}
}
エミュレーターによる検証
エミュレータで実行すると、以下のような感じになります。
色々文言や質問の順番がきれいではありませんが、動くのは動きますね。ではこの辺直してみましょう。
表示の改善
モデルの変更
ユーザーに対する質問や順番はモデルをいじることで変更できます。モデルをいじらない方法は次回。
モデルを以下のように変更します。属性ですべてを制御できます。また {||} のようなパターンも使えます。使えるパターンはこちら。
using Microsoft.Bot.Builder.FormFlow;
using System;
namespace O365Bot.Models
{
[Serializable]
public class OutlookEvent
{
[Prompt("件名は？")]
public string Subject { get; set; }
[Prompt("詳細は？")]
public string Description { get; set; }
[Prompt("いつから？yyyy/MM/dd HH:mm 形式で入力してください。")]
public DateTime Start { get; set; }
[Prompt("終日イベント？{||}")]
public bool IsAllDay { get; set; }
[Prompt("何時間？")]
public double Hours { get; set; }
}
}
エミュレーターによる検証
前回と同じ感じになりました。
チェックインしてテストが通るかも確認してください。(この時点では失敗するテストがあるんですが、解決は次回)
まとめ
フォームフロー簡単すぎて拍子抜けしますが、次回は応用編ということでより高度な処理について紹介します。