EnOceanのトイレセンサーをLINE Botで確認する

EnOceanのトイレセンサーをLINE Botで確認してみました。
DialogflowでLINE Bot連携をしてLIFFで監視画面を表示させるようにしました。

EnOceanでトイレセンサーを作ってみた記事はコチラをご確認ください。
https://qiita.com/h-takauma/items/e81f46c9170fed1baa18

# 完成動画
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">「トイレセンサー x LINEBot x EnOcean x React」<br>スイッチストライクエアーを使いLINEBotで状況を応答します。LIFFで可視化もできます。 <a href="https://t.co/z3GQfjJH1i">pic.twitter.com/z3GQfjJH1i</a></p>&mdash; がおまる@スマートスピーカーアプリ開発入門発売中！ (@gaomar) <a href="https://twitter.com/gaomar/status/1062517800227368960?ref_src=twsrc%5Etfw">2018年11月14日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# システム概要
EnOceanで受信した信号をラズパイでキャッチしてFirebaseに開閉状態の値を保存しています。
Reactを使ってAmazon S3に設置した静的サイトにセンサー状態を可視化しています。

Reactで可視化する部分はコチラの記事をご確認ください。
https://qiita.com/h-takauma/items/208df83887ece15f0c45

# システム構成図
* [スイッチストライクエアー](https://www.shibutani.co.jp/special/switchestrikeair.html)
* [RaspberryPi3 Model B+](https://www.amazon.co.jp/gp/product/B07CNRTCZ9/)
* [USB400J](https://www.amazon.co.jp/gp/product/B0107UUUGG/)
![トイレセンサー.001.png](https://qiita-image-store.s3.amazonaws.com/0/154355/d93e433f-06c3-5cbc-c659-e399da6aa143.png)


# 1. LINE Developerでチャネルを作成する
Messaging APIのチャネルを新規で作成します。

<img width="817" alt="スクリーンショット_2018-11-27_17_27_56.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/bce56cdb-db54-0c87-c0fd-f8386a73118b.png">

### 1-1. LIFFのURLを取得する
LIFFのURLは最近LINE Developer内で発行できるようになりました。
追加ボタンをクリックして、AmazonのCloudFrontで設定したURL(https)のサイトURLを指定してください。

LIFFのサイズはお好きなサイズを指定してください。

<img width="1376" alt="スクリーンショット_2018-11-27_17_54_38.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/a2accf09-79a7-288c-bb47-0ea117314dc9.png">

 
# 2. Dialogflowでチャットボットを作成する
Dialogflowで新規エージェントを作成してください。

### 2-1. Intentを作成する
左側メニューの`Intents`の右側にある［＋］ボタンをクリックして、Intent名は「ToiletIntent」と入力します。
ここで、大文字小文字に気をつけてください。

Traning phrasesに「トイレは」や「トイレ空いてる」など、ユーザーが入力しそうな言葉を登録します。
Fulfillment項目にある上側のフラグを有効にしてください。
この言葉に反応してToiletIntentが飛んできます。

<img width="1318" alt="スクリーンショット_2018-11-27_17_32_03.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/1ba24702-d4b5-d965-3e12-19d8ef6899b6.png">

### 2-2. Fulfillmentの設定
左側のメニューから`Fulfillment`をクリックして、Inline Editorの右側にあるチェックを有効にしてください。

<img width="1312" alt="スクリーンショット_2018-11-27_17_38_12.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/6dbd3aa2-69f7-aa6a-0b83-ea402234ccdc.png">

### 2-3. プログラムを修正する
Inline Editor上でプログラムを修正します。
Firebaseのアクセス先URLとLIFFのURLは適宜修正してください。プログラムを修正したら一番下にある［DEPLOY］ボタンをクリックします。

```javascript:index.js
'use strict';

const {dialogflow} = require('actions-on-google');
const functions = require('firebase-functions');
const app = dialogflow({debug: true}); 
const admin = require("firebase-admin");

process.env.DEBUG = 'dialogflow:debug'; // enables lib debugging statements
 
// 接続するFirebaseのRealtimeDatabaseのURLを指定する 
admin.initializeApp({
  credential: admin.credential.applicationDefault(),
  databaseURL: "https://toiletmanager-xxxxxx.firebaseio.com/"
});

// toiletのwordの値を取得しにいく
const getToiletStat = () => {
    return admin.database()
            .ref('toilet/word')
            .once('value');
};

// 2-1で決めたIntent名を指定します
app.intent('ToiletIntent', (conv) => {
    return getToiletStat().then((snapshot) => {

        // LIFFのURLは適宜修正してください
        conv.json(
            JSON.stringify({
                "fulfillmentText": `${snapshot.val()} \nline://app/xxxxxxxxxx-xxxxxxxx`
            })
        );
        
    }).catch((e) => {
        conv.json(
            JSON.stringify({
                "fulfillmentText": "エラー"
            })
        );
        
    });  
});

exports.dialogflowFirebaseFulfillment = functions.https.onRequest(app);
```

# 3. LINE BotとDialogflowを有効化する
Dialogflowの左側メニューにある`Integrations`をクリックします。
その中にあるLINEを有効化します。
<img width="1308" alt="スクリーンショット_2018-11-28_9_37_09.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/134803e8-83ff-b074-91cb-57373f969a53.png">

### 3-1. LINE Botの紐づけ
LINE Developerに表示されている`ChannelID`、`Channel Secret`、`アクセストークン`をコピペします。
Dialogflow側にあるWebhook URLはLINE DeveloperのWebhook URLへコピペします。

![line102.png](https://qiita-image-store.s3.amazonaws.com/0/154355/bc71d743-4f72-89f8-86eb-d1ff09c88b2c.png)

### 3-2. LINE Botを開始する
Dialogflow側の`START`ボタンをクリックしてLINE Botを開始します。

<img width="813" alt="line103.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/7ad50fa4-7fc5-81f3-9655-482c4fb6e9bc.png">

# まとめ
Google Homeのスキルを作る際にとても使っているDialogflowで簡単にLINE Botを使用することができました。
今後はこのようなBotが増えていくこと間違いなしかと思います。
アイデア次第で様々なBot連携が出てくるのが楽しみですね！

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