Google I/O 2017 Dialogflow(旧:API.AI) のセッションのベーグル注文を日本風で試してみる #dialogflow

## Google I/O 2017 API.AI セッション
Google I/O 2017 API.AIのセッションでベーグルを注文するデモが行われました。Google Assistant、Slackなどのチャットベースでベーグルを注文していきます。こちらのデモをそのまま紹介してもいいのですが、ベーグルではなくお寿司を注文するデモに変更したいと思います。一部日本語では対応できない機能もありますが、別の方法で対応してみたいと思います。

API.AIの紹介とデモは[こちら](https://www.youtube.com/watch?v=K4v_QnngRdg&t=724s)で見れます。
[Building Rich Cross-Platform Conversational UX with API.AI (Google I/O '17)](https://www.youtube.com/watch?v=K4v_QnngRdg&t=724s)

###ベーグル注文の会話例
ユーザー「お腹が空いた」
Bot「私はベーグル注文システムです。どんなベーグルが食べたいですか？」
ユーザー「プレーンがいいです」
Bot「かしこまりました。一緒に飲み物はいかがでしょうか。」
ユーザー「もちろん、飲みたいです！」
Bot「かしこまりました。これからベーグルをお届けいたします。」


##下準備
- [API.AI](api.ai)にサインアップorログイン 
    - Googleアカウントを使用します。
- Create new agentで新しいagentを作成
    - sushi-order-demoという名前にします。
    - 言語は日本語を選択します。
    - 入力が終わったらSaveを押します 
    
<img width="500" alt="Screen Shot 0029-05-26 at 14.41.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/4bc21168-08f9-7322-c9f8-17ad7dd395d6.png">

##Intentsの作成
Intents > Create Intentsで新しいIntentsを作成します。Intentsはユーザーのアクションにどう対応するかを定義する場所です。

- Intents nameに「Sushi Order」と入れます
- User saysに「お寿司が食べたい」と入れます
- Text Responseに「へい、かしこまりました！」と入れます
- 入力が終えたらSaveを押します。

<img width="500" alt="Screen Shot 0029-05-26 at 15.02.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/855025ae-63c0-5e36-61f5-4bc043d0aa6e.png">

<img width="500" alt="Screen Shot 0029-05-26 at 15.07.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/21a65ac7-0e44-320f-046d-d35b448a3304.png">

##とりあえずテスト！
左のテキスト入力欄に「お寿司が食べたい」と入れてみましょう、すると「へい、かしこまりました！」と返答してくれます。　※マイクを選択すれば音声入力もできます。

<img width="336" alt="Screen Shot 0029-05-26 at 15.21.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/cf280ae7-2bf6-5fe9-64dc-73db5c955e0b.png">

##わさびの有無を尋ねる機能を追加しよう
さび有りかどうかを注文を確定する前に必ず決めてもらうようにします。

###Entityの作成
Entitiesで新しいEntityを作成します。Entityは物事（時間や住所）などを特定するための辞書のようなものです。API.AIでは基本的な時間や住所はデフォルトで登録されています。今回は寿司の種類やさびの有無を特定するために使用したいと思います。

以下のようにサビの有無を登録します。

<img width="500" alt="Screen Shot 0029-05-26 at 16.13.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/94b913ba-723e-71cb-db86-c3d829148383.png">


```※わさびの有無のようにYes or Noで済むことはIntentsに[Add follow up intent]をすると簡単に作成できるのですが、まだ日本語では対応していないみたいです。。。
```

###Intentsに追加
IntentsのSushi Orderに戻ります。User saysに「さび抜きでお願いします」と入力してください。するとActionの中にWasabiが追加されます。追加を確認したら以下の情報を追加します。
- Action nameに「order」
- REQUIREDにチェック
- PROMPTSに「さびはどうさないますか？」

<img width="500" alt="Screen Shot 0029-05-26 at 15.59.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/0645f519-2185-bffe-e06b-f7dd678d88d5.png">


##テスト
先ほどと同じように左のテキスト入力欄に「お寿司が食べたい」と入れてみましょう、すると今度は「さびはどうさないますか。」と聞かれます。

<img width="342" alt="Screen Shot 0029-05-26 at 16.01.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/c4fe6a7b-f898-6f47-e4b0-a6d2568e30cd.png">

「さび抜きでと言ってみる。」

<img width="326" alt="Screen Shot 0029-05-26 at 16.01.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/90bd41a7-5667-dd0b-30b8-83f77c698874.png">

##肝心の寿司の内容を決める機能を追加しよう

###Entityの作成
新しいEntityに寿司のメニューを追加していきます。お好きなものを入れていきましょう。

<img width="500" alt="Screen Shot 0029-05-26 at 16.06.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/ba06718f-524c-cd59-7a62-2e81cb7ccb68.png">

###Intentsに追加
先ほどと同じようにMenuのEntityも追加します。ここで気をつけたいことはREQUIREDだけではなく、IS LISTにもチェックを入れ複数に注文に対応できるようにします。

- REQUIREDにチェック
- IS LISTにチェック
- PROMPTSに「何を食べたいですか？」

<img width="500" alt="Screen Shot 0029-05-26 at 16.14.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/ca93ae2b-cbf3-1274-0b89-493fed7d2aa0.png">

##テスト
まぐろとサーモンをさび入りで注文してみます。

###「お寿司が食べたい」
<img width="333" alt="Screen Shot 0029-05-26 at 16.16.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/37044b38-c494-835d-12c0-a7140d1d4d48.png">


###「さび有りで！」
<img width="344" alt="Screen Shot 0029-05-26 at 16.17.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/b2b80897-b652-fef8-87cc-e56bd62eec39.png">

###「まぐろとサーモンをお願いします。」
<img width="344" alt="Screen Shot 0029-05-26 at 16.17.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/6649ea55-cd7e-8c16-2c65-b2cb5c1b27b9.png">

##Slackで試してみよう
api.aiではFacebookやSlackなどのメッセージングBotに簡単に対応できます。本当はGoogle Assistantで試したかったのですが、現在は日本語未対応なのでSlackで実行してみたいと思います。

####IntegrationsのSlackをOnにしてください。
<img width="880" alt="Screen Shot 0029-05-26 at 16.21.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/0159d6b3-ecbc-7556-0f10-8af6285d7d26.png">

####TEST IN SLACK を選択し好きなSlackに登録してください。

<img width="400" alt="Screen Shot 0029-05-26 at 16.22.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/091ea1b1-4809-ae22-dd65-e55e79f06679.png">


<img width="400" alt="Screen Shot 0029-05-26 at 16.24.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/85aff602-2cb1-9a16-1170-776d69b51402.png">

####登録が終わるとBotが登録され簡単にテストができます。
<img width="317" alt="Screen Shot 0029-05-26 at 16.32.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/18aef17a-47d7-eb0c-e0ea-3a7f3d7099ea.png">

##おまけ
もし意図した反応が無かった時はトレーニングをすることで頭が良くなります。
例えば「寿司食べたい」に反応しなかったとします。

<img width="341" alt="Screen Shot 0029-05-26 at 16.36.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/cd008d98-92a0-7449-6a96-67f811df2f47.png">

TrainingのWhat's the sound of a tieから「寿司食べたい」を選択します。
<img width="500" alt="Screen Shot 0029-05-26 at 16.38.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/4b42da19-b3a7-972a-b921-1e1c962a8aa2.png">

そしてClick to Assign から Sushi Orderを選択しAPPROVEを押します。
<img width="500" alt="Screen Shot 0029-05-26 at 16.39.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/9555bcdc-a779-a472-cae2-9b77ab029d7c.png">

もう一度「寿司食べたい」と入れてみましょう。意図した返答があれば成功です！
<img width="340" alt="Screen Shot 0029-05-26 at 16.45.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/20b6dcbb-b188-04ad-6a9d-025769e6d38e.png">

##ネクストチャレンジ
[API.AIのイベントをCloud functionsで受け取りユーザーにテキストを返してみる](http://qiita.com/flatfisher/items/c96959a0d8d2daf619d2)

##参考リンク
- [Building Rich Cross-Platform Conversational UX with API.AI (Google I/O '17)](https://www.youtube.com/watch?v=K4v_QnngRdg&t=724s)

##API.AIの記事
- [自然言語処理を容易に実装できるAPI.AIを使ってみる](http://qiita.com/flatfisher/items/76bc86b65e5f2150a1a0)
- [API.AI Python SDKを使ってみる](http://qiita.com/flatfisher/items/53923e33ce1f23b3820a)
- [API.AIのイベントをCloud functionsで受け取りユーザーにテキストを返してみる](http://qiita.com/flatfisher/items/c96959a0d8d2daf619d2)