導入
MDC Advent Calendar 2020も最終日になりました。
最後はエンタメ感満載で締め括りたいと思います。
昨年、バチェラー・ジャパン シーズン３を題材にアプリを開発した私ですが、今年もバチェロレッテを題材に何を作ろうかと楽しみに観ていました。しかし、とうとうネタが見つからないまま見終わってしまいました。
とはいえ、Qiitaでトレンドの湯婆婆に流されるのも気が乗らないので、昨年のリバイバルとして皆さんにあの人を思い出してもらう機会としたいと思います。
結婚への祝辞も込めて、このアプリを贈ります。
なにを作るか
早い話が、昨年のWebアプリをChatBotで再現してみようと思います。
もしスマートスピーカーと繋げれば、Googleアシスタントのボイスで友永さんになりきってもらう選択肢も出てきます。
ガートナーが「ChatBotがWebアプリを駆逐する」などと言いだしてから久しいものの、Webアプリ全盛な状況は変わらずな気もしますが、特定の用途では徐々にシェアを広げて来ている様子もあって、伸び代はまだまだ期待できる分野かなと思います。
身近な例だと、Pascoのキャンペーンは面白いと思いました。
購入のエビデンスを、QRコードのシールなどでなく、レシートの画像をBotに送る仕掛けを作ってます。
他にも、地元の小さい肉屋さんでもLINEアカウントを作って集客しているのはDXの一端を感じました。
で、出来上がったアプリがこれです。
お友達登録すれば誰でも使えるので遊んでください。
どう作るか
利用するサービスなどの基本構成は、先日挙げた記事と同様にしています。
インテントの構成は、4分岐としました。
一問一答で作る
Web版で一問一答と名付けてた機能を、チャット形式の対話でエンティティを埋める形で実装しました。
これはDialogflowで完結します。文章から作る
Web版では「文章から作る」としていた機能ですが、ほぼそのまま再利用します。
文章をそのままgooラボ固有表現抽出APIに投げて、人名、地名、時刻などなどパラメータを取り出し、文章を作ります。
外部APIが登場するのでfulfillmentが必要です。単語から作る
Web版では「文章から作る」のエラーハンドリング用に実装していた機能です。
入力の文章に情報が少なく、goo APIに投げてもパラメータがあまり埋まらない場合、何か取れた単語を使ってGoogle検索のサジェストから別の単語を連想させて、文章を作るように実装していました。
（バチェロレッテ→福田、みたいな）
ChatBot（Dialogflow）の制約上、文章でも単語でも同じインテントに割り振るのが難しかったため、単語専用として別出ししました。写真から作る
Web版そのままで、画像URLをAzure Computer Vision APIに投げて、キーワードを取り出し、文章を生成します。
次の章から、一つずつ詳しく解説します。
一問一答で
インテントのフレーズには文章形式で入力してもパラメータを拾えるような設定を入れています。
しかしパラメータが多すぎるのか、文章が長すぎるのか、このまま入力しても該当のインテントには進めますが、パラメータは色と金額の2つが取得できませんでした。Dialogflowの限界のようです。
しかもユーザーのフリー入力はこの文章とは全く違ったものであるはずで、うまくこのインテントだと判別するのは不可能なので、基本は「一問一答」のキーワードでこのインテントに分岐することになります。
パラメータについてご覧の設定をしており、一部必須入力にしているため、不足する場合はプロンプトに記載の質問でユーザーから聞き出すようになっています。
「@sys.color」など、エンティティとして特定の条件、選択肢のなかで自動的に取り込んでくれるので、お任せでいい感じにしてくれます。例えば@sys.dateに対して「昨日」と入力すれば、昨日の日付をyyyy-mm-ddの形で取り込んでくれます。
パラメータが取得できれば、あとはレスポンスするだけです。
文章から
一問一答と同様、「入力としたい文章をインテントのフレーズにすることはできない」ため、「文章で作る」などのキーワードによって分岐します。
そして肝心の入力文章は、アクション＆パラメータの設定によって分岐後にユーザーから聞き出します。
必須入力としているのと、「@sys.any:何を入力しようとこの変数に当てはめる」のがポイントです。
FulfillmentでGASのAPIを呼び、文章をgooラボ固有表現抽出APIに投げて解析します。
単語から
こちらも同様に、「単語から作る」といったワードから分岐します。
単語のピックアップは、文章と同じくアクション＆パラメータで取ることもできますが、レスポンスで「Card」を利用するとユーザー操作をいい感じにアテンドできるので、インテントを2段構えにして受け取ります。
最初のインテントは、特にそれ以上の入力は受け取らずこのCardだけ返します。
子のインテントをぶら下げ、「@sys.any」でキーワードを受け取り、Googleサジェストに投げ、文章を生成して返します。
写真から
とても残念なことに、LINEで画像を入力しても、Dialogflowはどのインテントでもフックしてくれませんでした。
仕方なく、画像はURL形式で、テキストメッセージとしてのみ受け取ることにします。
ユーザーがいきなりURLを投げるのも不自然ですので、これも「写真から作る」などのキーワードをトリガーに分岐します。
こちらも「単語から」と同様にCardを返してユーザーの入力をアテンドします。
Cardのサンプルから選択するとサンプルのURLが入力されるし、ユーザーが別のURLを貼り付けてもOKです。
子のインテントでURLを受け取り、fulfillmentでGASに投げます。
GASではAzure Computer Vision APIにより画像からタグ情報を取り出し、文章に反映します。
ついでに、文章だけなのも殺風景なのでURLも画像の形でレスポンスしてあげます。（リプライでなくプッシュメッセージ）
さいごに
またしてもくだらないアプリをこの世に生み出してしまいましたが、今回も楽しかったです。
構成を考えていたときは、「スマートスピーカーにも転用できる構成」とか考えてましたが結局、画像を返したりCardを使ったり、すっかりLINE依存のコンテンツになってしまいました。
Botは、アプリに血が通ってる感じがするし、血を通わせるための作り込みを考える必要があって、開発体験として新鮮ですね。
皆さんもBotアプリ開発、楽しみながら界隈を盛り上げていきましょう。
