Google Assistantを超デキるVoice Recognition Systemとして使う

#この記事は何？
IFTTTとの連携は数分でできることは確認したので、次は好きにGoogle Assistantを使えないのか？を試してみた記録です。

# 実装すること
Google Assistantが持つ超デキるVoiceRecognitionを操るAction on Googleをフロントエンドとし、そして裏側のビジネスロジックはJavaScript(Node.js)でゴリゴリ書きます。
もう少し簡単に言うと、Google Homeへの声の司令で、あんなことや、こんなことが自分の思うようにカスタマイズを実現させる為の基本を実装します。

#事前準備
## アカウントとか
- Googleアカウントがあること
- Action on Googleを利用できること
- Google Cloud Platformが利用できること
 
## 知識
- Action on Googleの知識
- JavaScriptの知識

#実装
アカウントの作成等は省略します。

##プロジェクトの新規作成
名前を決めて、Project nameの欄に入力します。IMPORT PROJECTをクリックすると次のページに進みます。
<img width="600" alt="Screen Shot 2017-10-20 at 11.02.23 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/2e790775-b40c-ee53-bf22-52305a1e87e5.png">

## DialogflowでActionsを作る
青いボタンをクリックしてください。
<img width="600" alt="Screen Shot 2017-10-20 at 11.03.11 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/2c980859-fd85-dfec-2b96-2a90d39ba46f.png">

## Actionsの名前を決定
画面上のActionsの名前をつけます。Assistantを日本語に設定している場合はDEFAULT LANGUAGEを「Japanese-jp」にしてください。
<img width="600" alt="Screen Shot 2017-10-20 at 11.04.45 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/dee657d1-86a4-41a2-6932-9685535d2486.png">

## Entitiesの作成
EntitiesはIntentsの中でのキーワードの集合です。ここに書き込んだ言葉にAssistantoは反応してビジネスロジックを作成することになります。
<img width="600" alt="Screen Shot 2017-10-21 at 12.42.27 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/827286f5-0cb8-c4fd-113f-9e3b0575a637.png">

## Intentsの作成
ユーザーが訪ねてくるであろう質問を文章で書き込みます。10〜12くらいの質問されるであろう文章を書くことを推奨します。この個数あるとDialogflowをある程度訓練することが可能です。
ここでは「tell_fact」という名前のActionにします。画面上と、真ん中に書き込みます。これをキーにFulfillmentの実行を行いますので書き込み忘れると想定通りに動作しません。
<img width="600" alt="Screen Shot 2017-10-21 at 12.00.26 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/3159233d-0f22-ad2b-96b2-eca5501383b6.png">


## Fulfillmentの作成
ユーザーからの質問がIntentで認識され、更にそこからEntitiesの中の言葉として抽出されます。その言葉でどんなビジネスロジックを動かすか、を定義するのですがその定義をスクリプトでカスタマイズできるのがFulfillmentです。Dialogflowの中では実行できないので、外部に用意した自前のサーバ、もしくはFirebase上に設置することが可能です。Firebase上に設置する場合、Dialogflowの画面上、またはLocalの環境からデプロイする2つの方法がありますが、ここではDialogflowの画面上で編集します。
[GitHub上にスクリプトを置いています](https://github.com/ryoyakawai/assistant_factaboutgoogle/blob/master/functions/index-jp.js)のでコピペして、右下のDEPLOYボタンでデプロイします。

<img width="600" alt="Screen Shot 2017-10-20 at 11.15.16 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/440c5d58-8772-f36c-28ce-dc47fa36d830.png">

## Webhookに紐付けをする
先程作成したActionの「tell_fact」とFulfillmentの紐付けを行います。左メニュー（ハンバーガーメニュー）からIntents > tell_factと辿り、画面下のFilfillmentの欄にある「Use webhook」にチェックを入れます。
<img width="600" alt="Screen Shot 2017-10-20 at 11.16.09 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/d34566e6-c32c-e658-52d1-f3264b3205d6.png">

## 終わり(quit)とヘルプのIntentsを作成
アプリケーションを終わる時の動作、またアプリを使い始める時の例えば「何ができるの？」という質問に答えるIntentsを作成します。アプリケーションの終わりのIntentsの画面下のGoogle Assistantの「End Conversation」にチェックを入れることでIntentsの動作終了後にアプリケーションを終了することができます。
<img width="600" alt="Screen Shot 2017-10-20 at 11.17.37 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/3a082750-cd4b-34d0-11fa-383e26e200ed.png">

<img width="600" alt="Screen Shot 2017-10-20 at 11.19.13 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/20062be3-ea81-28d2-d8b5-20444ef90046.png">

## 動作のテストを行う準備をする
左メニュー（ハンバーガメニューから）「Integrations」を選択すると下の画面になります。ここで「Google Assistant」をONの状態にしてクリックすると、設定画面が表示されます。
<img width="600" alt="Screen Shot 2017-10-21 at 12.47.00 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/cfdd0530-2332-359f-3af1-41c6d0708041.png">
ダイアログ右下の「TEST」をクリックして少し待つと画面が更新されます。
<img width="600" alt="Screen Shot 2017-10-20 at 11.23.12 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/3c9a2dd4-b7f2-f4cc-776c-ce1ec9adc531.png">
更新された画面の「VIEW」をクリックすることで
<img width="600" alt="Screen Shot 2017-10-20 at 11.23.24 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/7202a4e6-240c-09e5-e1f6-a4c9d907310b.png">

## Simulatorでテストを行う
<img width="1191" alt="Screen Shot 2017-10-21 at 1.24.49 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/fb375fd3-3158-c736-d5fc-6ede47fc95fa.png">

動作の確認をして実装は完了です。

## Fulfillmentのデバッグ
Firebase側にスクリプトを置きましたのFirebaseの画面からデバッグが可能です。
[Firebaseのトップ画面](https://console.firebase.google.com)から該当のプロジェクトを選択して、左ペインの「Functions」を表示して「LOGS」のタブを開きます。そこにconsole.hoge()で出力したログが表示されます。
<img width="1195" alt="Screen Shot 2017-10-21 at 1.28.25 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/64426fab-dc2b-758c-06c6-76d3946f152b.png">

# まとめ
画面キャプチャを中心に説明をしてきましたが、これで一通りのことはできるようになりましたし、何よりFulfillmentの中に自由にゴニョゴニョスクリプトを入れることができるので、あんなことや、こんなことまで出来ちゃう気がしますよね😁

# 補足
Fulfillmentを慣れ親しんだテキストエディタで編集したい場合は[ここ（英語）](https://developers.google.com/actions/dialogflow/first-app)の「Build fulfillment」を参照してください。そこまで難しくないと思います。

このビデオも参考にしました ＞ [Actions on Google: Building Apps for Assistant (YouTube)](https://www.youtube.com/watch?v=ZvyrvowZ4wQ)

あっ、そういえばSimulatorをPhoneにした場合に画像が表示されないのは不明です。