LoginSignup
1
3

More than 5 years have passed since last update.

@takatama(高玉 広和)

GoogleHome (Googleアシスタント) で「フィードバックを送信」を作ってみる

Last updated at Posted at 2018-08-29

GoogleHome のアプリ (アクション) に「フィードバックを送信」する機能を追加して、利用者の生の声 (といっても録音した音声ではなくて音声認識した結果のテキスト) を受け取ります。

Dialogflow の Follow-up intent を使ういい練習になるので、よかったら試してみてください。Dialogflow の Inline Editorを使って、Webブラウザーだけで開発します。

頂いたフィードバックはせっかくなので、Google Apps Script (GAS) を使って Googleスプレッドシートに記録し、さらにメールで通知します。

なお、Cloud Functions から GAS を呼び出すところは、Firebase の有料プランが必要になるのでご注意ください。Google内の呼び出しなんだから無料プランでいいのにな...。

想定する利用シーン

  • ユーザー「フィードバックを送信。」
  • GoogleHome「わかりました。ご意見やご感想を教えてください。」
  • ユーザー「いい感じですよ。」
  • GoogleHome「いただいたご意見は「いい感じですよ」でよろしいでしょうか？」
  • ユーザー「はい。」
  • GoogleHome「わかりました。フィードバックをありがとうございました。」

「フィードバックを送信」ログ出力編

まずは頂いたフィードバックをログに出力するところまで作ってみます。

1. Dialogflow で Intent を作る

合計で5つの Intent を作ります。利用シーンに出てくる会話との対応も書いておきます。

- start_feedback (ユーザー「フィードバックを送信。」を処理)
  - start_feedback - custom (ユーザー「いい感じですよ。」を処理)
    - start_feedback - custom - yes (ユーザー「はい。」を処理)
    - start_feedback - custom - no
    - start_feedback - custom - cancel

start_feedback

まず、ユーザーが「フィードバックを送信」と話しかけた時の処理をする Intent (start_feedback) を作ります。

  • Intent名: start_feedback
  • Training phrases: フィードバックを送信
  • Fulfillment: Enable webhook call for this intent

スクリーンショット 2018-08-29 20.12.00.png

スクリーンショット 2018-08-29 20.12.15.png

start_feedback - custom

次に、ユーザーからのフィードバックを受け取るインテントを、start_feedback の Follow-up intent として作ります。Follow-up intent は、ある Intent に続く会話を処理するのに便利な intent です。

まず左ペインで Intents を選んで Intent 一覧を表示し、start_feedback の上にマウスオーバーすると「Add follow-up intent」と表示されるのでクリックし、「custom」を選択します。

Kobito.zDqwZl.png

Kobito.M8Fbru.png

すると、start_feedback の下に、start_feedback - custom が追加されます。

Kobito.NNc6cJ.png

Folloup-intent なので、Input context に start_feedback-followup が入っています。

次に Training phrases を設定します。ユーザーが話す全ての内容をフィードバックとして認識できるようにします。まず、Training phrases に (何でもいいですがとりあえず) 「フィードバックの内容」と書きます。

Kobito.bZryCW.png

次に、書いたテキスト全体をマウスでハイライトして、@sys.anyを選びます。

Kobito.XLYJFH.png

警告が出るんですが、今回はユーザーの話したこと丸ごと認識したいので、OK を押します。

Kobito.kRONSW.png

次に、PARAMETER NAME を any から feedback に変えておきます。

Kobito.CzlPop.png

最後に、Fulfillment の Enable webhook call for this intent を有効にして SAVE します。

  • Intent名: start_feedback - custom
  • Training phrases: feedback@sys.any
  • Fulfillment: Enable webhook call for this intent

start_feedback - custom - yes / no / cancel

GoogleHome はユーザーからもらったフィードバックの内容を繰り返し、それが正しいかを確認します。OKの場合の intent を、start_feedback - custom の Follow-up intent として作ります。

先ほどと同じように、左ペインから Intents を選択し、start_feedback - custom の上にマウスオーバーして Add follow-up intent をクリックします。次に yes を選択します。

出来上がった start_feedback - custom - yes をクリックして内容を確認します。

Training phrases は最初から入ってるので、Fulfillment の　Enable webhook call だけ有効にして　SAVE します。

同様にして、no, cancel も作り、それぞれ Fulfillment の Enable webhook call を忘れずに有効にしして SAVE します。

これで5つの Intent ができました。

スクリーンショット 2018-08-29 20.52.03.png

くどいようですが、どの Intent も Fulfillment の　Enable webhook call は有効にしてくださいね。

スクリーンショット 2018-08-29 20.12.15.png

2. Dialogflow の Fulfillment > Inline Editor で index.js にコードを追加

Dialogflow V2 の Inline Editor 用コードテンプレートに従って、index.js にコードを追加します。

'use strict';

const functions = require('firebase-functions');
// Suggestions を追加しておく
const { dialogflow, Suggestions } = require('actions-on-google');

const app = dialogflow();

app.intent('Default Welcome Intent', conv => {
    ...
});

app.intent('start_feedback', conv => {
    return conv.ask('わかりました。ご意見やご感想を教えてください。');
});

app.intent('start_feedback - custom', (conv, {feedback}) => {
    // 会話データとしてフィードバックを保存しておく
    conv.data.feedback = feedback;
    conv.ask(`いただいたご意見は「${feedback}」でよろしいでしょうか？`);
    return conv.ask(new Suggestions(['はい', 'いいえ']));
});

app.intent('start_feedback - custom - yes', conv => {
    console.log(`feedback: ${conv.data.feedback}`);
    return conv.close('わかりました。フィードバックをありがとうございました。');
});

const quitWithoutFeedback = conv => conv.close('わかりました。フィードバックは送信しません。');

app.intent('start_feedback - custom - no', conv => {
    return quitWithoutFeedback(conv);
});

app.intent('start_feedback - custom - cancel', conv => {
    return quitWithoutFeedback(conv);
});

exports.dialogflowFirebaseFulfillment = functions.https.onRequest(app);

うまく動くか試してみましょう。

「<アプリ名>を使ってフィードバックを送信」(アプリ名を設定していない時は「テスト用アプリを使ってフィードバックを送信」) で試せます。

利用シーンに従って会話をし、ログにフィードバックが出力されていれば成功です。

フィードバックを Googleスプレッドシートに記録し、さらにメールで送信する

ログに出力するだけでは見落としてしまうので、Google Apps Script (GAS) を使って改善します。

参考: Google SpreadSheet にデータを追加、更新、削除する Web API をサクッと作る

3. Firebase を有料プランにする

Cloud Functions から GAS を呼び出すところは、Firebase の有料プランが必要になります。ログに以下のような警告が出ているので気がつけます。

Error: getaddrinfo ENOTFOUND script.google.com script.google.com:443

Billing account not configured. External network is not accessible and quotas are severely limited. Configure billing account to remove these restrictions

なお、有料プラン、特に青天井の Blaze プランにすると使い過ぎが気になります。
使用量と請求をモニタリングするを参考にして、気がつけるようにしておきましょう。

4. Google スプレッドシートを作る

参考記事に従ってスプレッドシートを作り、Script Editorでコードを書き、Webアプリとして公開して、URLをメモしておきます。

2列目の1行目は feedback としておきます。

5. Firebase から HTTP POST できるように package.json を変更する。

Webアプリにフィードバックを渡すために、npm の request モジュールを追加します。

Dialogflow の左ペイン Fulfillment > Inline Editor で、package.json タブをクリックします。
dependencies に request を追加して DEPLOY します。

スクリーンショット 2018-08-29 21.55.26.png

  "dependencies": {
    ...
    "request": "^2.88.0"
  }

6. Dialogflow の Fulfillment > Inline Editor で index.js にコードを追加

HTTP API を呼び出す時は、Promise を作って intent handler から return しないと動作しません。

参考: https://developers.google.com/actions/reference/nodejs/lib-v1-migration#intent_handler_helpers_and_arguments

そこで、post 用のユーティリティ関数を作っておきます。

// 追加
const request = require('request');

// 追加
const post = (url, form) => {
    return new Promise((resolve, reject) => {
        request.post({
            url: url,
            form: form
        }, function (err, res, body) {
            if (err) {
                console.error(err);
                return reject(err);
            }
            resolve(body);
        });
    });
};

// 修正
app.intent('start_feedback - custom - yes', conv => {
    console.log(`feedback: ${conv.data.feedback}`);
    // Googleスプレッドシート Web アプリの URL
    const url = 'https://script.google.com/macros/s/XXXXXXXXXXXXXXXXXXXXXXXX-XXXXXXXXXXX_XXXXXXXX-XXXXXXXXX/exec';
    // Promise を return する
    return post(url, conv.data).then((body) => {
        console.log(body); // デバッグ用
        return conv.close('わかりました。フィードバックをありがとうございました。');
    }).catch(err => conv.close(`エラーです。${err}`));
});

...

なお、デバッグ用のログ出力はうまくいっている時は以下のように何も返却されないのが正しいです。

<!DOCTYPE html><html><head><link rel="shortcut icon" href="//ssl.gstatic.com/docs/script/images/favicon.ico"><title>Error</title><style type="text/css">body {background-color: #fff; margin: 0; padding: 0;}.errorMessage {font-family: Arial,sans-serif; font-size: 12pt; font-weight: bold; line-height: 150%; padding-top: 25px;}</style></head><body style="margin:20px"><div><img alt="Google Apps Script" src="//ssl.gstatic.com/docs/script/images/logo.png"></div><div style="text-align:center;font-family:monospace;margin:50px auto 0;max-width:600px">The script completed but did not return anything.</div></body></html>

7. メールで通知

スプレッドシートにフィードバックが追加されたら、メールで通知します。Google スプレッドシートの Web アプリを以下のように修正します。

function send(body) {
  // メールアドレス, 件名, 本文
  MailApp.sendEmail('<送信先メールアドレス>', 'フィードバック', body);
}

// 修正
function appendRow(sheet, parameter) {
  parameter['uuid'] = Utilities.getUuid();
  var row = createRow(sheet, parameter);
  sheet.appendRow(row);
  send(row.join('\n'));
}

修正が終わったら、Web アプリとして公開 (Publish > Deploy as web app...) しますが、Project version を New にすることをお忘れなく。

これで、ありがたいフィードバックを受け付けて、かつ、見落とさないようになりました！

「フィードバックを送信」を作った背景

とあるアクションで、聞き取れなかった発話をエラーログに出力し、随時コードを修正してました。あるユーザーさんがそのことに気がつき、追加機能の要望がエラーログに残るよう、何回かに分けて発話してくれていたのです。創造的な使い方に驚きました。

Actions directory にユーザーがコメントを残せるようになる前の話です。

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
3