GoogleHomeに話しかけて検索結果をブラウザに表示させる　❼レスポンスで音声データを返す

GoogleHome(mini)を購入したので、聞き取ったキーワードから
PCのブラウザに**Googleの検索結果1位のサイトを表示**して、そのサイトの**タイトルを読み上げる**アプリを作成しました。検索したキーワードがDBに無かった場合はキーワードとURLとタイトルを登録します。
##**最終的に出来たアプリ**
![1_noサンマルクnoライフ.png](https://qiita-image-store.s3.amazonaws.com/0/237418/9e59a816-b52f-a97f-2fae-a9e90c69a62e.png "サンマルクのパン食べ放題がワタシには至福です")


##**ワタシがやったこと**
極力Googleさんのサービスだけで完結したいなーということで、DialogflowとFirebaseを使用
Firebaseがホスティングサーバーとデータベースと関数の管理と色々サービスを担ってくれているので
全部お任せしました。
![2_ワタシがやったことjpg.png](https://qiita-image-store.s3.amazonaws.com/0/237418/ad8611c7-628d-7d79-3d09-d8805a0472cb.png "本当Firebaseって素敵なサービスです💛")


:one:　**[Dialogflowを使用して簡単なチャットボットを作成](https://qiita.com/tedkuma/items/9ceb17936c714a205a74)**
:two:　**[FirebaseのFunctions(cloud functions)を使用して、:one:で作ったボットが適切な返事するように設定](https://qiita.com/tedkuma/items/d892ec31c3cdaf35753b)**
:three:　**:two: [を実行する際に**FirebaseのDatabase**にデータを追加するように設定](https://qiita.com/tedkuma/items/38326f509e6a9f595eac)**
:four:　**:three: [のデータ追加をトリガーに**FirebaseのHosting**で作成したページ(htmlファイル)にパラメータを渡し、
　　　windowopenで対象のページを開くように設定](https://qiita.com/tedkuma/items/f35d3c7cd02778c800b6)**
:five:  　**[Google検索で一番上に表示されてるページを一発で表示させてみる(I'm feeling luckey!)](https://qiita.com/tedkuma/items/e6e2bcec1a540bf17b19)**
:six: 　**[データ登録時にページタイトルとサイトURLはオリジナルのものを保存する
　　　(webスクレイピングにはcheerio-httpcliを使用しました)](https://qiita.com/tedkuma/items/294b55074639441c00b2)**
:seven:　 フリーのMP3データを**FirebaseのStorage**に入れてレスポンスに音声データを返す(SSML)

---
##:seven: **レスポンスで音声データを返す**##
![strage.png](https://qiita-image-store.s3.amazonaws.com/0/237418/ca99e311-7e8b-c9c2-26ce-af7a08121de2.png)

今回は完全にオマケ的な機能です。音声データをDialogflowのレスポンスに返したいなーって
やってみたのでついでに書いておきます。

アプリを呼び出した時にワープ音を鳴らしてから出てきてもらうことにしました。

:woman_tone1:：OK google ホヤぼーやにつないで　
:robot:：はい、ホヤぼーやのテストバージョンにお繋ぎします。
　　  　（ワープ音が鳴る♪)..お待たせしました。ホヤぼーやです。(ボット起動)

FirebaseのStorageに音声データをアップロードして、その音声データのURLを
DialogflowのINTENTのレスポンスに追加するという仕組みです。

---
まずはネットからフリーの音声データ(MP3)を入手します。
ワタシの場合は2秒程度の短い効果音を使用しました。
気に入ったデータあるけどMP3じゃないよーという方は、WAVとか他の形式からMP3に変換してくれる便利なサイトもあるので、そーいうので変換してみてください。


ではFirebaseのStorageを選択
![Storage.png](https://qiita-image-store.s3.amazonaws.com/0/237418/cd6eb50e-f4f0-c662-9736-a72a21ac75c9.png)

ファイルをアップロードします。
![アップロード.png](https://qiita-image-store.s3.amazonaws.com/0/237418/5319bd96-050c-4a8a-d5e7-d20722b2b5ca.png)

アップロードされたデータをクリック
![データをクリック.png](https://qiita-image-store.s3.amazonaws.com/0/237418/0980f3f3-4d05-5066-3998-226aa4e501b9.png)

ファイルの場所の **∨** をクリック　
![ファイルの場所をクリック.png](https://qiita-image-store.s3.amazonaws.com/0/237418/24d3b198-a0e4-2792-41af-3e14b47758cd.png)

ダウンロードURLをクリックするとURLがコピーされます。
![DLurlを取得.png](https://qiita-image-store.s3.amazonaws.com/0/237418/77cd7d62-07cf-4074-28ee-8908f53ced08.png)


DialogflowのDefault Welcome IntentのResponsesに追記していきます。
![intentsで作業するよ.png](https://qiita-image-store.s3.amazonaws.com/0/237418/ea4e7c7a-8e61-689e-dcb1-683fd63f1a10.png)

こんな感じで書きます。audioタグの中に先ほどのURLを入れればOK

~~~SSML
<speak>
　<audio src="この中に先ほどコピーしたURLを入れます"></audio>お待たせしました。ホヤぼーやです。    
</speak>
~~~

![こんな感じで貼り付けます.png](https://qiita-image-store.s3.amazonaws.com/0/237418/cc89d7ee-4b85-a9c1-aca7-93c186a12e43.png)

ではテストしてみます。あれー！:sweat:エラー出てます。ここが個人的にハマりどころだったのですが…
expected_inputs[0].input_prompt.rich_initial_prompt.items[0].simple_response: 'ssml' could not be parsed.
SSMLを解析できませんでしたと言われています。
![こうなる.png](https://qiita-image-store.s3.amazonaws.com/0/237418/707b605e-bace-17f2-e12e-878d69763731.png)

Responsesのレスポンスに書いたURLの中に [media&token]という記述があるのですが
この **&** がよろしくないのです。 & を \&amp; に書き直すと問題が解消されます。では再度テスト
今度は大丈夫。ちゃんと再生されてエラーも解消しています。:v_tone2:
![今度はできましたー！.png](https://qiita-image-store.s3.amazonaws.com/0/237418/ac940091-93ee-4c45-7e24-4e3bd617a844.png)

もちろん他のINTENTにも設定できます。
ワタシは「おやすみ」と話しかけた時に年配の女性とアニメ声の「おやすみなさい」の音声データ2通り登録して、今夜はアニメ声だったとか、年配女性の声だったとか言って遊んでいます。

音声レスポンスに関してはコード書いてないので、何か面白いことが書けたら追記したいと思います。
これで今回の記事は以上です。　最後までご覧いただき有難うございました。　　　~完

---

　　　**以前の記事：[❶Dialogflowで簡単なチャットボットを作成](https://qiita.com/tedkuma/items/d892ec31c3cdaf35753b)**
　　　　　　　　　**[❷FirebaseのFunctionsでボットに返事をさせる(Dialogflow V2 API)](https://qiita.com/tedkuma/items/9ceb17936c714a205a74)**
　　　　　　　　　**[❸FirebaseのFunctions実行時 Databaseにデータを追加する](https://qiita.com/tedkuma/items/38326f509e6a9f595eac)**
　　　　　　　　　**[❹Databaseへのデータ追加をトリガーに特定のページへ遷移させる](https://qiita.com/tedkuma/items/f35d3c7cd02778c800b6)**
　　　　　　　　　**[❺Google検索で一番上のページを表示させる](https://qiita.com/tedkuma/items/e6e2bcec1a540bf17b19)**
　　　　　　　　　**[❻スクレイピングして検索結果のタイトルとURLを登録する](https://qiita.com/tedkuma/items/294b55074639441c00b2)**