Dialogflowだけでオリジナルの3択クイズを作ろう

More than 1 year has passed since last update.


1.はじめに

Dialogflowの使い方を理解する目的で簡単な3択クイズを作ってみました。

問題文と回答の部分だけ書き換えればオリジナルのクイズになります。

作ったクイズはGoogle Homeで実際に使うこともできますし、なくてもお手持ちのスマホでGoogle Assistantアプリから使うことができますよ!


2.用意するもの

Googleアカウントのみです


3.こうなります

IMB_keDYPu.GIF


4.作り方


まずDialogflowに入りましょう

Dialogflow

Googleアカウントがあればログインできます

スクリーンショット 2018-06-29 0.06.03.png


こんな感じの画面が開きます

スクリーンショット 2018-06-29 0.07.11.png


Agentを作りましょう

Agentを作り、その中で設定を加えていきます。

スクリーンショット 2018-06-29 0.08.59.png

スクリーンショット_2018-06-29_0_20_35.png

スクリーンショット_2018-06-29_0_28_19.png


Intentを作りましょう(ファイルをアップロードします)

CREATE INTENTの右側にあるボタンをクリックしてUploadIntentをクリック

スクリーンショット 2018-06-29 0.36.31.png

Choose Fileをクリック

スクリーンショット_2018-06-29_0_53_29.png

配布しているjsonファイルをクリックするとアップロードされて・・・

こうなればOK!

スクリーンショット 2018-06-29 0.58.47.png


Fulfillmentを設定しましょう

Fulfillmentをクリック

スクリーンショット 2018-06-29 1.01.06.png

Inline Editorを有効にします

スクリーンショット_2018-06-29_1_02_47.png

コードの部分は全部消して・・・

スクリーンショット 2018-06-29 1.05.00.png

下のコードをコピー&ペーストします

// See https://github.com/dialogflow/dialogflow-fulfillment-nodejs

// for Dialogflow fulfillment library docs, samples, and to report issues
'use strict';

const functions = require('firebase-functions');
const {WebhookClient} = require('dialogflow-fulfillment');
const {Card, Suggestion} = require('dialogflow-fulfillment');

const quiz = [
{ question : "一番高い建物は?", one : "東京タワー", two : "スカイツリー", three : "エッフェル塔", correct : 2},
{ question : "一番カロリーが高いのは?", one : "おにぎり", two : "サンドイッチ", three : "ラーメン", correct : 3},
{ question : "お茶に含まれる栄養素は?", one : "カテキン", two : "ヒカキン", three : "セイキン", correct : 1}
];

process.env.DEBUG = 'dialogflow:debug'; // enables lib debugging statements

exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {
const agent = new WebhookClient({ request, response });
console.log('Dialogflow Request headers: ' + JSON.stringify(request.headers));
console.log('Dialogflow Request body: ' + JSON.stringify(request.body));

function defwelcome(agent) {
agent.add(`Welcome to my agent!`);
}

function fallback(agent) {
agent.add(`I didn't understand`);
agent.add(`I'm sorry, can you try again?`);
}

function welcome(agent) {
agent.add(`3択クイズを出してやる。スタートと言うのだ。`);
}

function start(agent) {

var random = Math.floor( Math.random() * 3 );

let myQuiz = quiz[random];

agent.add(`問題だ!番号で答えてね!` + myQuiz.question);
agent.add("1番、" + myQuiz.one + "。2番、" + myQuiz.two + "。3番、" + myQuiz.three);

//答えを格納
agent.setContext({ name: 'start', lifespan: 1, parameters: { correct: myQuiz.correct}});

}

function answer(agent){
// 回答を取得
var answer = request.body.queryResult.parameters.number;
console.log("answer : " + answer);

// 正解を取得
var context = agent.getContext('start');
console.log("context : " +JSON.stringify(context));

var correct = context.parameters.correct;
console.log("correct : " + correct);

if(answer === correct){
agent.add("正解です!!")
} else {
agent.add("残念!!正解は" + correct +"番でした")
}
}

let intentMap = new Map();
intentMap.set('Default Welcome Intent', defwelcome);
intentMap.set('Default Fallback Intent', fallback);
intentMap.set('WelcomeIntent', welcome);
intentMap.set('StartIntent', start);
intentMap.set('AnswerIntent', answer);
// intentMap.set('your intent name here', yourFunctionHandler);
// intentMap.set('your intent name here', googleAssistantHandler);
agent.handleRequest(intentMap);
});

最後にDeployを押せば完成です!

スクリーンショット_2018-06-29_1_16_19.png