GoogleHome
dialogflow

GoogleHomeに話しかけて検索結果をブラウザに表示させる ❶Dialogflowで簡単なチャットボットを作成

GoogleHome(mini)を購入したので、聞き取ったキーワードから
PCのブラウザにGoogleの検索結果1位のサイトを表示して、そのサイトのタイトルを読み上げるアプリを作成しました。検索したキーワードがDBに無かった場合はキーワードとURLとタイトルを登録します。

最終的に出来たアプリ

1_牛正大好き💛.png

ワタシがやったこと

極力Googleさんのサービスだけで完結したいなーということで、DialogflowとFirebaseを使用
Firebaseがホスティングサーバーとデータベースと関数の管理と色々サービスを担ってくれているので
全部お任せしました。
2_ワタシがやったことjpg.png

:one: Dialogflowを使用して簡単なチャットボットを作成
:two: FirebaseのFunctions(cloud functions)を使用して、:one:で作ったボットが適切な返事するように設定
:three:  :two: を実行する際にFirebaseのDatabaseにデータを追加するように設定
:four:  :three: のデータ追加をトリガーにFirebaseのHostingで作成したページ(htmlファイル)にパラメータを渡し、
   windowopenで対象のページを開くように設定
:five:  Google検索で一番上に表示されてるページを一発で表示させてみる(I'm feeling luckey!)
:six:  データ登録時にページタイトルとサイトURLはオリジナルのものを保存する
   (webスクレイピングにはcheerio-httpcliを使用しました )
:seven:  フリーのMP3データをFirebaseのStorageに入れてレスポンスに音声データを返す(SSML)


:one: Dialogflowを使用して簡単なチャットボットを作成

3_stage1.png

ワタシも横文字弱いので、突っかかった言葉は解説したりわかりやすい言葉で書いていきます。
まずチャットボットってなに??「対話(chat)」する「ロボット(bot)」でchatbotです。

 :person_frowning_tone1::OK google ホヤぼーやにつないで  ※ホヤぼーやはワタシが付けたアプリの名前です。
 :robot::はい、ホヤぼーやのテストバージョンにお繋ぎします。
    ...お待たせしました。ホヤぼーやです。(ボット起動)
 :person_frowning_tone1::おはよう
 :robot::おはようございます。ご機嫌いかがですか?
 :person_frowning_tone1::まぁまぁかな。
 :robot::それは何よりです。
 :person_frowning_tone1::バイバーイ
 :robot::また何かあったら呼んでください。ブツッ(ボット終了)

こんなのを最初に作りました。一切プログラムを書かなくても、
自分が話す言葉とスピーカーに返事してほしい言葉を登録すればとその通りに返してくれます。
そんなチャットボットが作れるツールを提供しているサービス それがDialogflowです。

では、早速 ここをクリックしてDialogflowをスタート‼

わわわ!英語出てきたよ~:scream:‼‼と怖がる必要はありません。ワタシも一緒です。下図のように進めて下さい。
何書いてるかわからないのに安易にクリック出来るかい!って方はこれで翻訳してみて下さいね。
4_Dialogflow入口.png

5_Google_Login.png

うわー!英語いっぱい出てきたー!
でも私にはGoogle翻訳さんがついているから全然怖くないのね♪    ☟右図のように快適になります。
6_DFアカウントの設定.png

はい、ではエージェントを作成してみます。

7_エージェントを作成.png

今回はエージェント名をFirstAPPとしてみました。
DEFAULT LANGUAGE(既定の言語)が英語になってるので日本語に直してCREATEボタンを押します
8_FirstAPP作成.png

少し待つと...ジャーン!新しいエージェントが作成されました。
左上のdialogflowのロゴの下にFirstAPPと表示されています。9_エージェントが出来ました.png

左側に何やら見慣れない言葉が並んでいます。ここで苦手意識湧いてきます(ワタシはうわーってなりました。)が、実際に今回の簡単なチャットボットを作るのには【Intents-インテンツ】と【Entities-エンティティーズ】しか使いません。

ワタシなりの解釈で書きます。
  - Entities:単語登録
  - Intents :単語を使う場面とその時の対応を予め決めておく

例えば、「おはよう」とか「おはよ」とか「おはようございます」とかを単語として登録するのが【Entities
Entitiesに登録した単語はGoogle Homeが聞き取ったら(あっ!これは知ってる言葉だぞ!)と認識してくれます。

その「おはよう」とか「おはよ」とかの単語で話しかけられたら朝の挨拶をされているよ
朝の挨拶をされたら、『おはようございます』って返すんだよというルールを設定するのが【Intents

だから、Entitiesに「おはよう」という言葉を予め登録して、
Intentsに「おはようございます」と返すんだよと設定しておけば

 :person_frowning_tone1::おはよう
 :robot::おはようございます。       と言わせるチャットボットはすぐに出来ます。

では早速Entitiesの登録から始めます。

左側のタブをEntitiesに切り替えたらCRATE ENTITIYボタンを押します。
10_Entities登録.png

今回は、Entity名を Greeting_in_the_morning にしました
こんな感じで下の入力欄におはようと認識してほしい言葉をガシガシ登録します。そして忘れずにSAVE
11_Entities登録.png

続いてIntentsの登録をします。

左側のタブをIntentsに切り替えたらCRATE INTENTボタンを押します。 さっきと一緒ですね。
12_Intents登録.png

すると...うわうわわわ:scream:...なーんて落ち着いて。翻訳してください
本当、これ作ってる時英語まみれで、翻訳の拡張知ってたらなーってしみじみ・・・。 難しくないです。
☟日本語だとこんなことが書かれています。
13_こんなことが書かれています.png

ではINTENTを登録します。今回INTENT名は朝の挨拶にしました。
続いて Traning phrases にある ADD TRAINING PHRASES をクリックします。
14_intents登録.png

Traning phrasesには おはよう と入力
続いて Responsesにある ADD RESPONSE をクリックします。
15_intents登録.png

Responsesに おはようございます と入力したらSAVEを押して保存します。
これで「おはよう」と話しかけたら「おはようございます」と返してくれるチャットボットが出来ました。
16_intents登録.png

本当かな~??というわけでテストしてみましょう!
右側の画面は何かな~と思っていた方もいたと思いますが、ここはテストをするときに使います。
17_テストしてみます.png

Try it now のところに おはようと入力してみます。18_ほらできたー!.png

おはようございますと返していますー!そしてINTENTに朝の挨拶と表示されています。
朝の挨拶をされたと認識して、おはようございますを返しているんですね。

Try it nowの横にあるマイクをクリックすれば音声でやり取りができます。
ポップアップブロックを解除してマイクを使用するにして下さい。
19_マイク使いたいときはコレ.png

こう言ったらこう返して欲しいってのをIntentsやEntitiesに
たくさん登録しておけば自然な会話ができるようになります。

では、ボットを終了するIntentsの登録方法を紹介します。
Intentsの登録時にResponsesの下にある Set this intent as end of conversation をONにすればOK!
これでバイバーイと言ったときにボットが終了します。
20_ボット終了の設定.png

そろそろ佳境です。
右側のテストする画面の See how it works in Google Assistant. をクリックします。21_Asistantと繋ぎます.png

ACCEPTを押します。
22_Simulator画面.png

このSimulator画面では、よりチャットらしいテストができます。
テスト用アプリにつないでと表示されているところでEnterしてみます。
23_Simulator画面.png

もしも、ココでつまづいたら読んでください
24_もしエラーになったら.png
エラーが出てSimulator画面が作動しない場合は、Googleのアクティビティ管理の設定を確認して下さい。
端末情報と音声アクティビティがオフになっているとエラーでシミュレーターが動かないみたいです。
設定を変更してブラウザのキャッシュを消去したら正常に動くかもしれません。
25_エラー解消法.png


おー!:clap_tone1:こんにちわ!と返してくれています。
26_シミュレーター正常に動作した場合.png

手直ししたIntentsでここまでは出来ました。
ここまでくればGoogleHomeに話しかけても同じように返答してくれます。
27_だんだん出来てきました.png

でも、:confused:もうちょっと手を加えたいです。
①テスト用アプリじゃなく「ホヤぼーやにつないで」って言いたいな
②起動した時に「こんにちわ!」じゃなく「お待たせしました。ホヤぼーやです」って言って欲しいな

・・・というわけで①ボット名を変更します。

デフォルトではテスト用アプリという設定になっているので
この名前を変えれば呼び方も「ホヤぼーやにつないで」に変更されます。

Actions on Googleの画面で左側にあるOverviewをクリックすると下図の画面が出てきます。
❷App informationのEDITボタンを押します。
28_アプリ名を変更する.png

この画面はアプリの情報を登録する画面なので、項目を埋めないとエラーっぽい画面が出ますが気にせず
今回は名前だけ登録します。そしてSAVE
29_名前登録.png

左のSimulatorを選んでシミュレーター画面に戻ると、ホヤぼーやにつないでに変更されています。
30_名前が変わりました.png

続いて②起動時のメッセージを変更します。

が、その前にデフォルトで設定されているIntentsについて説明します。
新規でエージェントを作成した時からIntentsの中にある2つは以下の応答をしています。
  - Default Fallback Intent:登録されていない文言に対する返答
  - Default Welcome Intent:ボットが呼ばれた時の返答  
31_Default Intents.png

中身を見てみると
32_Default_Intent.png

Fallback Intentの方はText responseに6つの返答が登録されています。この中からランダムで返答をします。
Welcome Intentは「こんにちわ」しか登録されていないので、起動時に毎回「こんにちわ」と返してきます。
だから、このText responseを変更すれば好きな言葉を起動時に言ってもらえます。
・・・というわけでDefault Welcome Intentを手直しして完成です。
33_完成です。.png

この他にもDialogflowにはたくさん便利機能があります。
今回は簡単なチャットボットを作るということだけに特化して、必要な箇所だけを書き出しました。

次回以降の記事でワタシが使用した機能は書いていきます。
長々と書いてしまいましたが最後まで読んでいただき有難うございました。


      次の記事:❷FirebaseのFunctionsでボットに返事をさせる(Dialogflow V2 API)