Hachidoriを使ったLINEbot

hachidoriというサービスがあります。
最近流行りのChatbotをGUIで作成できるツールです。

![image](https://qiita-image-store.s3.amazonaws.com/0/63125/31ffe89e-6132-7e85-ff51-d50486ce3986.png)

ちょっと最近のブームの中に、
LINEbotもあり使ってみました。

# 前提
LINE側の設定はちょっと省略。
Developer Consoleにまで到達している想定です。
hachidoriはログインした状態から開始です。

# hachidoriの初期設定
ログインするとこんな画面です。
「新しいBOTを作成する」をクリックします。
![image](https://qiita-image-store.s3.amazonaws.com/0/63125/a55b7884-2fcc-1143-9dde-d098eddedb95.png)

LINEを選択して、右下の「次へ」（次への位置がわかりにくい）
![image](https://qiita-image-store.s3.amazonaws.com/0/63125/8d2fe0b4-7e80-cb91-f9e4-6ee4218bb83d.png)

BOTの名前を入力し、画像をアップロードします。
これはhachidoriでの管理上の画像で、LINE側とは関係ありません。
そして「次へ」
![image](https://qiita-image-store.s3.amazonaws.com/0/63125/c0485693-543d-1e4c-568d-78f411ad56c0.png)

ここにも細かいBussiness Centerの記述が。
つまり、ユーザーの登録ストーリーとして、
　LINE bot -> hachidori
ではなく
　hachidori -> LINE bot
という感じなんですかね。
![image](https://qiita-image-store.s3.amazonaws.com/0/63125/09252ffa-b63b-9345-faf1-09f0dec0ddd6.png)

2の「Channel ID,Channel Secret,Channel Access Tokenを取得する」をクリックすると
以下のような画面が出てきます。
ここにChannel ID,Channel Secret,Channel Access Tokenを登録します。
なんか変更できないっぽいので、間違えないように注意。
![image](https://qiita-image-store.s3.amazonaws.com/0/63125/179e4f6a-99bd-f4ac-7f90-c5356e616279.png)

これで完成。
![image](https://qiita-image-store.s3.amazonaws.com/0/63125/7884295c-7a9b-64ea-244c-c969bc1d2de3.png)

callbackのURLが表示されるので、
LINE側に登録し、verifyしておきましょう。

# シナリオを編集する
基本的にはシナリオを作成していくことになります。
bot作成すると、すでにチュートリアルが用意されており、機能説明があります。
![image](https://qiita-image-store.s3.amazonaws.com/0/63125/cd3adbcb-fcff-9321-a5bd-8e2d2ca2d77f.png)

ここで、「シナリオを追加する」から必要なシナリオを定義するのですが、
専用の変数みたいなものがあります。
`;#userinfo_displayName;`みたいに書くことで、LINEのユーザー情報を取得できます。
ほかにも
`;#userinfo_longitude;`
`;#userinfo_latitude;`
があり、位置情報を送られたときに取得できるっぽいですね。
![image](https://qiita-image-store.s3.amazonaws.com/0/63125/b7f0f732-d84d-5c8a-0360-d9f780b4af7d.png)

シナリオはクエリ、シソーラス、ライブラリを駆使して作ります。
こっちから送信できるのは、通常テキスト以外に

* イメージボタン
* 画像・動画
* カルーセル
* ボタン
* ２択

がありました。

イメージボタンのエディタは非常に使いやすかった。
イメージボタンは、画像にボタンがマッピングしてあって、
画像の特定の位置をタップするとリンクに飛ばしたり、アクションを起こしたりできます。

# クエリー
![image](https://qiita-image-store.s3.amazonaws.com/0/63125/7bfeaeb1-a597-ef84-2be6-7e8b42d14a8c.png)
キーワードを、グループごとにカテゴライズが出来ます。

* 「炭水化物」グループ
  * ごはん
  * パン
  * うごん
  * パスタ  
  
とか

* 「地名」グループ
    * 埼玉
    * 東京
    * 大阪

みたいな感じです。
ユーザーが「埼玉」と言ったら、それは地名だ！と判定してくれるんですね。

# シソーラス
![image](https://qiita-image-store.s3.amazonaws.com/0/63125/d0aff5a6-4663-7a6d-c2e0-2bdbcaf36656.png)

なるほど。文字のゆらぎを吸収してくれるらしい。
こんな感じで、クエリの下にぶら下がるイメージなのでしょうかね。

* 「地名」グループ
    * 埼玉
        * さいたま
        * SAITAMA
    * 東京
        * とうきょう
        * TOKYO
    * 大阪
        * おおさか
        * OSAKA
        * OOSAKA


# ライブラリ
クエリで判別したキーワードをMappingして、
返す応答を設定できます。
こちらは数が多くなることを想定してか、csvでのインポートができます。
地元の地区とゴミの分別から、ゴミの収集日を応答するようなライブラリにしてみました。

![image](https://qiita-image-store.s3.amazonaws.com/0/63125/f3f4586f-1c26-dc21-8135-6c66cc62cc3e.png)

そしたらうまく動かない。
なんでだー？と思ってたら、
なぜかエクセルから、出力したcsvをインポートしたら先頭に空白が。
前の現場で、似たようなの踏んだなーー。

![image](https://qiita-image-store.s3.amazonaws.com/0/63125/3116c258-f24a-f857-6cfb-ebd8dea7c976.png)

とりあえず、手動で修正！

動きました。
![image](https://qiita-image-store.s3.amazonaws.com/0/63125/69bb2366-8557-bb8e-bfbc-75ec476fc67c.png)


# 感想
* LINEbotが簡単に作れるのはうれしい。
* 特にイメージボタンはすごく便利
* すでに対応のシナリオが決まっているようなヘルプデスクの作業とかが向いているかもしれません。
* 外部API連携できるのは嬉しいが、OutBoundのみなのでrequest,responseをMappingしてシナリオで使用できると  天気とかタイムリーな情報の提供できるのになと思った  
* クエリ、シソーラス編集からBotの管理画面に戻れるようにしてほしい