Actions Builderでサイコロトークを作ってみた

2020年6月17日に行われた「[VOICE Global](https://www.voicesummit.ai/global)」というイベントでGoogleから面白い発表がありました。
そこで発表された新しい会話構築IDE「 [Actions Builder](https://developers.googleblog.com/2020/06/announcing-actions-builder-actions-sdk.html) 」を使って、簡単なアクションを作ってみました。

Actions Builderのコードラボもあるので是非試してみてください。
https://codelabs.developers.google.com/codelabs/actions-builder-1/#0
https://codelabs.developers.google.com/codelabs/actions-builder-2/#0

## 解説動画
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/261Cm8p6jyA/0.jpg)](http://www.youtube.com/watch?v=261Cm8p6jyA)

## 1. プロジェクトを作成しよう

### 1-1. Googleの権限を許可しておく
下記URLにアクセスしてお持ちのGoogleアカウントでログインしてください。
https://myaccount.google.com/activitycontrols

アクティビティ管理にある「ウェブとアプリのアクティビティ」を有効化にして、その中にある2箇所のチェックをONにしておきます。

<img width="717" alt="s100.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/f2eca4ab-649a-0362-9c21-39b2914458d8.png">

### 1-2. 新規プロジェクトを作成
下記URLにアクセスして、［New Project］ボタンをクリックします。
https://console.actions.google.com/

<img width="1000" alt="s101.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/25f11e20-3880-ae81-aa6c-39cb9886d0af.png">

プロジェクト名を入力します。お好きなプロジェクト名を入力してください。言語とリージョン国はそれぞれ日本を選択します。
［Create project］ ボタンをクリックします。

<img width="511" alt="s102.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/4334c0d8-041c-0ac9-4949-0dc5794a92fd.png">

［Custom］ を選択して、［Next］ボタンをクリックします。

<img width="1028" alt="s103.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/3ac47bff-274e-4f64-02dd-25f665923b3a.png">

［Blank project］ を選択して、［Start building］ボタンをクリックします。

<img width="1011" alt="s104.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/1cb317d4-92e9-1a15-d65b-97457f2151a3.png">

## 2. アクションの設定

### 2-1. 起動フレーズを登録する
Display nameに起動するためのフレーズを登録します。「OK グーグル！　○○につないで」の部分です。
［Save］ボタンをクリックします。

<img width="1640" alt="s105.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/d9694613-2282-9eff-265b-ebf4f8317331.png">

### 2-2. アクション起動後の発話を登録する
左側メニューの［Main invocation］をクリックします。［Send prompts］にチェックを入れて、アクションが起動した直後に発話する内容を登録します。 `YAML形式` と `JSON形式` が選べるのでお好きな方を選択してください。個人的には見やすいYAML形式が良いと思いました。

Transitionに「ようこそサイコロトークへ！」と発話が言い終わった後の処理を指定します。今回はサイコロトークを実行するかどうか確認したいので、新たな `Start` シーンを追加しました。最後に右上の［Save］ボタンをクリックします。

<img width="1390" alt="s106.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/068c9968-e112-8daa-0ef7-c8f99ebb40f0.png">

### 2-3. Startシーンを編集
左側メニューにある ［Start］ シーンをクリックします。  `On enter` の［+］ボタンをクリックします。

<img width="743" alt="s107.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/d1defe5d-3cc1-a3ee-ec57-4cee6547d0ab.png">

［Send prompts］ にチェックを入れて、サイコロトークを開始するかどうか確認するメッセージを登録してください。Insertにある `suggestions` をクリックすると項目が追加されます。設定できたら［Save］ボタンをクリックします。

```yaml:YAML
candidates:
  - first_simple:
      variants:
        - speech: サイコロトークしますか？
    suggestions:
      - title: はい
      - title: いいえ
```

<img width="1469" alt="s108.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/efff816c-3d9f-63b5-337b-4731f9ba4722.png">

suggestionsはスマートディスプレイで下部に表示されるものです。選択する項目を明記することで、視覚的にわかりやすくしています。

<img width="320" alt="s1081.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/b10d3d2a-b950-5f40-dc75-a9b5e1115b8c.png">


### 2-4. 「はい」の時の処理
「サイコロトークしますか？」の問いに「はい」と答えたときの処理を設定します。左側メニューの `Intents` カテゴリの［+］をクリックして、［New intent］に `yes` というIntentを追加します。

`Add training phrases` にサイコロトークを開始するための言葉を登録していきます。「はい」以外にも応答してほしい言葉も登録します。

<img width="1636" alt="s109.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/c3368a11-1b0a-b7b4-c775-cecf965364ad.png">

### 2-5. 「いいえ」の時の処理
「いいえ」と答えられた時の処理も同様に追加します。

<img width="1632" alt="s110.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/226fe6bc-2810-6951-cd44-7827b9c63a0c.png">

### 2-6. シーンとIntentを連動させる
Startシーンに先程作成した「はい」と「いいえ」を連動させます。左側メニューから `Start` シーンをクリックします。Custom intent handlingの［+］をクリックして、「はい」の時のIntent名 `yes` を指定します。

`Call your webhook` のチェックを入れてwebhookで呼び出すhandler名を指定します。これはスペルミスがないように気をつけてください。 Transitionはサイコロトークの結果が出た後にもう一度やるかどうか聞きたいので再度 `Start` シーンに遷移するようにしています。

<img width="1641" alt="s111.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/54a710e1-ed5b-bd71-97c4-f6314146fe26.png">

今度は「いいえ」のIntentを追加します。同様に［+］をクリックして、「いいえ」の時のIntent名 `no` を指定します。

`Send prompts` にチェックを入れて、終了するときの発話を登録します。 Transitionはもうアクションを終了したいので、終了を意味する `End conversation` を選択してください。

```yaml:YAML
candidates:
  - first_simple:
      variants:
        - speech: また遊んでね！
```

<img width="1463" alt="s112.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/da6feca4-9a4b-e1a7-d0aa-c4e360ed8153.png">

## 3. プログラムを設定する

### 3-1. Webhookを設定する
実際にサイコロトークのお題を表示するためのプログラムを実装します。左側メニューから `Webhook` をクリックして、 `Include Cloud Functions` を選択してから ［Confirm］ ボタンをクリックします。

<img width="1630" alt="s113.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/0dd176bc-5712-df4d-c243-0cfb536cf2ec.png">

### 3-2. プログラムを設定する
下記プログラムをコピペしてください。6行目にある `app.handle('start', conv => {` 部分が 2-6で指定した `start` というhandler名にあたります。なので、ここは別にstartじゃなくてもお好きな名前を指定してください。

```javascript:index.js
const { conversation } = require('@assistant/conversation');
const functions = require('firebase-functions');

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

app.handle('start', conv => {
  console.log(conv.intent);
  
    // 音楽再生先URL
    const url = `https://お好きな.mp3`;

    const wadai = ['情けない話。略して「なさばな」', 
                    '初めてまるまるした話。略して「はじまる」',
                    '信じられない話。「アンビリバボー！」',
                    '旬な話。「フレッシュ！」',
                    'シャレにならない話。略して「しゃればな」',
                    '今日の当たり目！。「おめでとー！おめでとー！」'];

    // ランダムで話題を選択する
    const wadaiIndex = Math.floor(Math.random() * wadai.length);
    const speechText = wadai[wadaiIndex];
	
    const ssml = `<speak><audio src="${url}" />${speechText}</speak>`;
    conv.add(ssml);
});

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

```

プログラムがコピペできたら、［Save Fulfillment］と［Deploy Fulfillment］ボタンを順番にクリックします。
※稀にSaveした後にDeployボタンが押せない時がありますが、画面更新すると再度押せるようになります。

<img width="1635" alt="s114.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/d60407d7-82d1-6d73-0f2f-e08b0488a32c.png">

`Your Cloud Function deployment is up to date.`と表記されるまで待ってください。数分かかる場合があります。

<img width="1363" alt="s115.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/32968ce3-03b9-ffd3-8c2d-12c545278d4e.png">

## 4. シミュレーターで確認する
Testタブをクリックして［サイコロトークデモにつないで］をクリックします。するとシミュレーターが起動して遊べるようになります。

<img width="840" alt="s116.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/2fc2ba8a-da91-49ff-96a0-ea41db2b3bf0.png">

## まとめ
Actions Builderの解説を行いました。今まではDialogflowを使っていたので少しUIの操作に手こずりましたが慣れればいけると思います。Dialogflowの画面やActions on Googleの画面を行ったり来たりしなくなったので、そこは便利になったと思いました。
今後はActions Builderでの開発にシフトしていくと思うので、今のうちに操作に慣れておきましょう！

システム化のご検討やご相談は弊社までお問い合わせください。
https://i-enter.co.jp/contact/