Dialogflowで湯婆婆を実装してみる

# はじめに
原作者(元ネタ)様の記事：[Javaで湯婆婆を実装してみる - Qiita](https://qiita.com/Nemesis/items/c7192a7c510788d2cba2)

何番煎じか分かりませんが、
執筆時点(2020/11/13)でDialogflowで実装して記事にされている方がいなかったので、実装してみました。

# 1. Dialogflowの設定
## 1-1. Agentを作成する

[https://dialogflow.cloud.google.com/](https://dialogflow.cloud.google.com/) にアクセスしてください。
［Sign-in with Google］ボタンをクリックします。お持ちのGoogleアカウントでログインしてください。

![s200-1](https://raw.githubusercontent.com/gaomar/katacoda-scenarios/master/deno-dialogflow-handson-playground/images/s200-1.png)

初めてDialogflowをお使いになる方は利用許可してください。

![s101](https://raw.githubusercontent.com/gaomar/katacoda-scenarios/master/dialoflow-linebot-playground/images/s101.png)

Terms of Service部分のチェックを入れてから［ACCEPT］ボタンをクリックします。

![s102](https://raw.githubusercontent.com/gaomar/katacoda-scenarios/master/dialoflow-linebot-playground/images/s102.png)

［CREATE AGENT］ボタンをクリックします。

![s103](https://raw.githubusercontent.com/gaomar/katacoda-scenarios/master/dialoflow-linebot-playground/images/s103.png)

`Yubaba` と入力し、デフォルト言語を `Japanese - ja` に選択してから［CREATE］ボタンをクリックします。

![s100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/bb81bf69-8985-54d0-4e25-698c8a43e7c2.png)

## 1-2. Intent作成
左側メニューのIntentsの右側にある①［＋］をクリックして、新規Intentを作成します。
Intent名は ②`Main` にして、Action and parameters部分に③下記設定を行います。FulfillmentカテゴリのwebhookのチェックをONにして、最後にPROMPTSにある⑤Define promptsをクリックします。

|項目|値|
|:--|:--|
|REQUIRED|チェック入れる|
|PARAMETER NAME|name|
|ENTITY|@sys.any|
|VALUE|$name|

![s101.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/c1ae826d-e829-1f51-0083-da114371ce1f.png)

Define promptsをクリックするとポップアップが表示されます。ここで、湯婆婆のセリフを入力します。Closeボタンをクリックして、右上の［SAVE］ボタンをクリックします。

![s102.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/e1e21a88-f473-7d10-1016-e9c1eba3c4c1.png)

## 1-3. プログラムを作成する
左側メニューの `Fulfillment` をクリックして、Inline Editorを有効化にします。

![s104.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/61aef33c-7a28-9822-8907-46ccee00b0d1.png)

Google Cloud Platformの設定でどうしても課金を有効化にしないと使えませんが、お金を取られることはありません。

![s105.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/0e8c912d-5220-7a6d-8548-e20c526c9b93.png)

下記コードを適用してください。コードを反映したら、［DEPLOY］ボタンをクリックします。デプロイ日時が表示されればOKです。

```javascript:index.js
'use strict';
 
const functions = require('firebase-functions');
const {dialogflow, HtmlResponse} = require('actions-on-google');

const app = dialogflow({debug: true});

app.intent('Main', (conv, {name}) => {
  const random = Math.round(Math.random() * name.length) - 1;
  const newName = name.substr(random, 1);
  conv.close(`フン。 ${name} というのかい。贅沢な名だねぇ。今からお前の名前は　${newName}　だ。いいかい、 ${newName} だよ。分かったら返事をするんだ、 ${newName} !!`);
});

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

![s106.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/782a96ca-7cd2-9292-e7d9-65f45a858d68.png)

## 1-4. Google Assistantと連携する
Google Assistantと連携して、スマホやGoogleHome（Google Nest Hub）からでも確認できるようにしましょう。
左側メニューにある `Integrations` をクリックして、 `Google Assistat` をクリックします。

![s107.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/29ffed73-b376-c441-02fe-90bc21c75e40.png)

ポップアップが表示されるので、Explicit invocationは `Main` を選択して、 Auto-preview changesを有効化にしておきます。［TEST］リンクをクリックして、Google Assistantのページへ遷移します。

![s108.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/8a8a26c7-ec0c-24ae-d4a7-67fd94aca47f.png)

①「テスト用アプリにつないで」をクリックすると「契約書だよ。そこに名前を書きな。」と言われます。②の箇所に名前を入力してエンターキーを押下します。すると結果が返ってきます。

![s109.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/048e7864-8308-04de-ed52-8e078825981b.png)

これでご自身のスマホのGoogle Assistantアプリで、「テスト用アプリにつないで」と言うと、アプリが起動するようになります。
もちろんスマートスピーカーも自動的にデプロイされて使えるようになります。