Dialogflow(Googleのチャットボット)を試してみる（４）Fulfillmentの基礎
まだ全然、Dialogflowのfulfillment（V2）のjavascriptでの記載方法が分からない。
とりあえず、以下のサイトを写経してみる。
Dialogflow入門については、こちらのページが分かりやすいです。
（開発環境）
Windows 8.1 Pro (MacでもLinuxでも同じです。)
Chrome
Googleアカウント（無料）
（０）内容
ユーザー 「明日の京都の天気は？」
AI 「京都は晴れです。」
ユーザー 「明日の大阪の天気は？」
AI 「大阪は雨です。」
ユーザー 「明日の天気は？」
AI 「どちらの天気ですか？大阪？京都？東京？」
ユーザー 「東京」
AI 「東京は雪です。」
という感じのものを作りたい。
（１）Dialogflowにログインと、新規Agentの作成
以下のリンク先へ行き、Googleアカウントでログイン。
https://console.dialogflow.com/api-client/#/login
Create New Agent で、新しいAgentを作成。今回は、weather_osakaという名前をつけた。
（２）Entitiyの作成
メニュー ＞ Entities の右横の + をクリック して、新規Entitiyを作成する。
一番上に、weather_place と入力し、下のClick here to edit entry をクリックして、
京都、大阪、兵庫、東京などを入力してから、SAVE をクリック
（３）Intentの作成
天気の質問をするIntentを作成します。
メニュー ＞ Intents の右横の + をクリック して、新規Intentを作成する。
Hows_the_weather_of と入力し、Training phrases の、ADD TRAINING PHRASESをクリックして、Add user expressionのところに、以下のように入力して、SAVE をクリック
下の方へ行き、Action and parameters の、weather_place のところの左横の REQUIREDのチェックボックスをONにする
すると、一番右に、Define prompts… という青い表示が出てくるので、それをクリック
「どちらの天気ですか？大阪？京都？東京？」と入力して、CLOSE
この操作により、地域の入力がない場合は、聞き返してくれるようになります。
さらに下の方へ行って、Fulfillmentの右側の 矢印ボタンをクリック
ENABLE FULFILLMENT をクリック
Enable webhook call for this intent を、ON にします。
最後にもう一度、右上の、SAVE をクリック。
（４）Fulfillmentの作成
メニュー ＞ Fulfillment をクリック
Inline Editor の右側の図の部分をクリックして、DISABLED を、ENABLED にします。
index.js の中身をすべて消去して、以下の文章をコピペします。
（こちらのページのほぼコピペです。）
'use strict';
const functions = require('firebase-functions');
const { dialogflow } = require('actions-on-google');
const app = dialogflow();
app.intent('Hows_the_weather_of', (conv,{weather_place}) => {
if (weather_place == '京都'){
conv.ask('京都は晴れです');
}else if (weather_place == '大阪'){
conv.ask('大阪は雨です');
}else if (weather_place == '東京'){
conv.ask('東京は雪です');
}else{
conv.ask('京都と大阪と東京以外わかりません');
}
});
exports.dialogflowFirebaseFulfillment = functions.https.onRequest(app);
その後、画面右下の、DEPLOY をクリック。
少し時間がかかります。
（５）Google Assistant Simulator で確認
画面右上の、青文字の、Google Assistant をクリック
数秒待つと、以下のようあ画面になるので、カーソルを画面真ん中下の、「テスト用アプリにつないで」にあわせてから、Enter
図の部分に、天気？ などと入力して、応答を確認する。
Simulator（シミュレーター）では、うまくいっているようである。
（６）チャットボットを、WordpressなどのWEBページに掲載する。
メニュー ＞ Integrations をクリック
Web Demo をクリック
画面右上の、スライドの部分をクリックして、ON にする
ONにすると出てくる、<iframe… ></iframe> の部分をコピーして、WorpressやWebページにコピペする。
こちらの下にコピペしてみます。
うまくいったかな？
やはりうまくいかない。。。
これは厳しい。。。V2ではなく、V1でやれということなのかもしれない。。。
かなりググってみたが、それらしき質問が一個見つかっただけで、質問に対する解決策の回答もなく、行き詰まってしまった、、、
https://stackoverflow.com/questions/49997623/google-actions-webhook
参考：https://dialogflow.com/docs/samples
2018/9/12追記
なんと、上記写経元サイトのyuta様より、コメントを頂きました。
本当にありがとうございます！
conv.ask('京都は晴れです');
の部分を、
conv.json(
JSON.stringify({
“fulfillmentText”: “京都は晴れです。”
})
);
といった感じに変更するとうまくいくかもしれないとのことでした。
やってみます。
（７）Fulfillmentの変更
メニュー ＞ Fulfillment ＞ Inline Editor
こちらの中身を、以下のように書き換えてみます。（Googleアシスタントから、Web Demoで利用できるように変更）
（こちらのページのほぼコピペです。）
'use strict';
const functions = require('firebase-functions');
const { dialogflow } = require('actions-on-google');
const app = dialogflow();
app.intent('Hows_the_weather_of', (conv,{weather_place}) => {
if (weather_place == '京都'){
conv.json(JSON.stringify({"fulfillmentText": "京都は晴れです。"}));
}else if (weather_place == '大阪'){
conv.json(JSON.stringify({"fulfillmentText": "大阪は雨です。"}));
}else if (weather_place == '東京'){
conv.json(JSON.stringify({"fulfillmentText": "東京は雪です。"}));
}else{
conv.json(JSON.stringify({"fulfillmentText": "京都と大阪と東京以外わかりません"}));
}
});
exports.dialogflowFirebaseFulfillment = functions.https.onRequest(app);
その後、画面右下の、DEPLOY をクリック。
Web Demoを、以下にコピペしてみます。
試してみます。
やったー！
https://yutakami.work/?p=447 の方のコメントのおかげで、
なんか2週間くらいモヤモヤしていたものが一気に晴れました！
感謝感激です。
これなら、これからDialogflow、楽しめそうです！