Dialogflowで天気情報を呼び出す

前回
[Dialogflowでチャットボットを作る](http://qiita.com/ume1126/private/5955a0680c430a1cf25f)

</br>
</br>
今回の目標
![スクリーンショット 2017-08-18 9.55.09.png](https://qiita-image-store.s3.amazonaws.com/0/192887/02a20fc4-fa41-2db0-30d8-837236b11bb4.png)
前回作ったチャットボットで、このように、天気情報を呼び出します。
</br>
</br>
</br>


# 目次
1. WORLD WEATHER ONLONE
2. webhook URLを入手する
3. 反映させる
4. ためしてみる
5. 日付対応をさせる
6. 会話をつなぐ

</br>
</br>
</br>
</br>
</br>

# 1. WORLD WEATHER ONLONE
天気情報をとるために、無料で開発者用APIを提供している[WORLD WEATHER ONLONE](https://ja.worldweatheronline.com/)を使ってみました。
様々なAPIを公開していますが、今回は、local weather APIを使用します。

![スクリーンショット 2017-08-13 16.19.39.png](https://qiita-image-store.s3.amazonaws.com/0/192887/a1f82493-8e8c-2e14-e219-6e9a0db7f434.png)


日付と地名を指定すると、世界中の気象情報を最大15日分(前後1週間ずつ)取得できるようです。
※検証の結果、日本(東京)は対象外でした…すみません…
今回はこのグローバルなお天気情報を、テキスト表示させます。

</br>
</br>
</br>
</br>
</br>

# 2. なんやかんやしてWebhook URLを入手する
Webhookとは、「〜〜したら、別のサービスからーーする」という仕組みのことです。
「メールが届いたら、スラックに通知する」だとか、
「記事が更新されたら、Facebookに更新通知をする」
というような、別のサービスへアクションをかけるフックのようなものです。
今回は「Dialogflowから日付と地名の情報が送られたら、WORLD WEATHER ONLONEから該当の気象情報を返す。」というしくみのWebhookを作ります…………が、

とってもややこしいので、わかる人に聞いてください。

<details><summary>Webhookについて、詳しく知りたい人はクリックしてください。</summary>
WORLD WEATHER ONLONEのAPI Key とgoogle Cloud Platfomeをあれやこれやして、
Webhook URLを取得し、複数の端末からアクセスできるようにクラウドへ公開しています。
そのフローはこちらに記載されております。
 →[API.AI Webhook Format](https://developers.google.com/actions/reference/v1/apiai-webhook)
ちなみにWebhookとは
 →[Webhookって何？子供でもわかるように描いてみた](http://kintone-blog.cybozu.co.jp/developer/000283.html)
</details>

</br>
</br>
</br>
</br>
</br>


Dialogflowに戻ります。
左のメニューから「Fulfillment」を開き、
URLに先ほどコピーした、Webhook URLを打ち込みます。
![スクリーンショット 2017-08-13 17.08.56.png](https://qiita-image-store.s3.amazonaws.com/0/192887/aab5e367-d0be-df5a-bef4-f074c843a6fe.png)




「SAVE」をクリックします。
これで連携ができました。
</br>
</br>
</br>
</br>
</br>


# 3. 反映させる
反映させましょう。
「Intent」→「天気」の一番下にある「Fulfillment」を開き、
「Use webhook」にチェックを入れます。
![スクリーンショット 2017-08-14 7.54.00.png](https://qiita-image-store.s3.amazonaws.com/0/192887/e98e020c-ae09-558a-edee-914d1688f433.png)
「SAVE」をします。


</br>
</br>
</br>
</br>
</br>



# 4. ためしてみる
![スクリーンショット 2017-08-15 16.45.22.png](https://qiita-image-store.s3.amazonaws.com/0/192887/243a11c7-5c3e-a9ff-bbc4-24bd375bde3e.png)
とでたら、
「Try it now」で確認してみましょう。
![スクリーンショット 2017-08-14 8.04.15.png](https://qiita-image-store.s3.amazonaws.com/0/192887/0262ed4f-c5b2-0e83-17c1-a44f5acb5b3e.png)
体裁は良く無いですが、無事に気象情報を表示させることができました。


</br>
</br>
</br>
</br>
</br>


# 5. 日付対応をさせる
調べてみると、世界中で最大15日間の天気予報を提供してくれるとのことです。
（が、検証したところ過去4日分、未来13日分の情報は取得できました。）
日付を変化させる会話要素を追加してみます。

>―――――――――――――――――――
User says：今日のシカゴのてんきは
―――――――――――――――――――

![スクリーンショット 2017-08-14 8.27.45.png](https://qiita-image-store.s3.amazonaws.com/0/192887/ae4e1ea2-409c-8377-8ff9-39572472c131.png)
</br>
</br>

日付の情報はあらかじめDialogflowに入っているので、＠sys.dateと表示されます。さすがです。
「SAVE」し、右下に![スクリーンショット 2017-08-15 16.45.22.png](https://qiita-image-store.s3.amazonaws.com/0/192887/243a11c7-5c3e-a9ff-bbc4-24bd375bde3e.png)と表示されたら、
「Try it now」から確認してみましょう。
![スクリーンショット 2017-08-14 8.30.27.png](https://qiita-image-store.s3.amazonaws.com/0/192887/0ae19d03-5c7a-5ae8-8601-7b2698c8e787.png)

昨日の日付になっていれば成功です。

</br>
</br>
</br>
</br>
</br>


# 6. 会話をつなぐ
必要な要素がない場合、次の会話で聞くということをさせてみましょう。
ex.
「今日の天気は？」→「場所はどこですか？」→「ニューヨーク」
「ロンドンの天気は？」→「いつですか？」→「明日」
contextを使って、この構文を作ります。
contextでは、前の会話情報を保持したまま、次の会話を読み込むことができます。

「Intent」→「天気」のページへ移り、
「Action」の必須要素にチェックを入れます。
場所の要素と日付の要素を必須にするため、2つのREQUIREDにチェックを入れました。
![スクリーンショット 2017-08-14 9.02.10.png](https://qiita-image-store.s3.amazonaws.com/0/192887/a813a1ab-57b8-e81c-dad5-d2867c169ee6.png)


同じAction欄の右に「PROMPTS」があります。
必須情報がなかった場合の回答を入れます。

>―――――――――――――――――――
PROMPTS：場所はどこですか？
―――――――――――――――――――

![スクリーンショット 2017-08-14 9.04.17.png](https://qiita-image-store.s3.amazonaws.com/0/192887/bc70c84e-950e-20f4-78a8-a90952943009.png)
Closeで閉じて大丈夫です。

</br>
</br>
</br>


一番上に戻り、
「Context」を押すと、二つの入力欄が出現します。
下の方の output context に「location」と入れてください。

>―――――――――――――――――――
Add output context：location
―――――――――――――――――――

自然と5という数字がくっつくと思います。
これは5回まで、情報を保持したまま次の会話に移るという意味を指します。回数は変更できます。
![スクリーンショット 2017-08-14 9.08.44.png](https://qiita-image-store.s3.amazonaws.com/0/192887/fc4508ec-742c-a5ef-8e55-fc9a4c8dc00f.png)

終わったら、必ず「SAVE」してください。


</br>
</br>
</br>
</br>
</br>



では、インプット側の会話を追加しましょう。
「CREATE INTENT」から新しい会話を作ります。

>―――――――――――――――――――
・Intent name：日付context
・Context(Add input context)：location
・User says：明日/来週月曜は？/昨日です。…など
・Response：(空欄)
・Fulfillment：✔︎Use webhook
―――――――――――――――――――

</br>
</br>
</br>

同じページの「Action」へ移ります。

>―――――――――――――――――――
・PARAMETER NAME：geo-city
・VALUE：#location.geo-city
―――――――――――――――――――

を追加してください。
![スクリーンショット 2017-08-14 9.46.50.png](https://qiita-image-store.s3.amazonaws.com/0/192887/7eda0a29-1294-7b62-4194-c9c9840e6133.png)

これで、場所情報は前の会話の中から引っ張って来ることができます。
「SAVE」して確かめてみましょう。

</br>
</br>
</br>

質問を二段階に分けます。

>―――――――――――――――――――
Try it now：ニューヨークの天気は？
―――――――――――――――――――

![スクリーンショット 2017-08-14 9.52.16.png](https://qiita-image-store.s3.amazonaws.com/0/192887/cb51c925-a2e4-6d7a-f341-a7d3761699ad.png)
</br>

場所の情報は保持されたままなので、「いつですか？」に対する答えを書きましょう。

>―――――――――――――――――――
Try it now：昨日は？
―――――――――――――――――――

![スクリーンショット 2017-08-14 9.53.49.png](https://qiita-image-store.s3.amazonaws.com/0/192887/8348ae86-4954-078a-f591-9931c9430717.png)
昨日の日付でニューヨークの天気情報が表示されました。成功です！

</br>
</br>
</br>
</br>
</br>

# おわりに

</br>
</br>

次→
・[DialogflowをSlackに連携させる](http://qiita.com/ume1126/private/1fa38c430fc0e6248be8)