hachidoriを使用したノンプログラミングなBot作成

# はじめに

[Bot Frameworkと雑談対話APIを使用したチャットBot](https://qiita.com/Shota_Fukuda/items/9aead1445b902183d6ec)
[ハングアウトBotを作ってみる](https://qiita.com/Shota_Fukuda/items/bd36c543ac6fbefb685e)
などでBotを作成しましたが、いずれもプログラミングが必要でした。

Botは継続的にアップデートしていくことで、使い勝手が良くなっていくのですが、プログラミングが必要なのはアップデートのハードルが上がってしまいます。
プログラムがハードルになるのならばプログラムしないでBotを作ればいいのです。

ノンプログラミングでBotを作成出来るサービスはいくつかあるのですが、
今回は[hachidori](https://hachidori.io/)を使用してBotを作っていきます。

# hachidoriって

- ブラウザからGUIを操作してBotシナリオを作成出来る。
- 外部のWEB APIを使用することが出来る。
- LINE、Facebook Messenger、Webチャットに対応 ※Webチャットはhachidori plusという別プランのみ
- Botから有人オペレーターへの切り替えなども出来る。

とノンプログラミングでBotが作ることができ、外部のWEB APIが使えるようです。
最低限のBotを作成することが出来そうです。

# 実際に作ってみる

## 前提条件

- hachidoriアカウント ※プランはFREEでOK
- 開発者登録されたLINEアカウント ※登録方法は[ここ](https://developers.line.me/ja/docs/messaging-api/getting-started/)から確認。新規チャネルまで作成しておく。
- 何かしら使えるWEB API

## Botの新規作成

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/0620cc46-82a6-09db-4734-e8fcb03e7fc2.png)

hachidoriアカウントにログインするとBotの一覧を画面が表示されるので**新しいBOTを作成する**をクリック。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/a47bc175-53dd-6c4c-6306-c93f3653c0e0.png)

Botを動作させるプラットフォームを選択します。今回はLINEで作成。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/f4a93009-07f7-1112-302f-38943bc00b29.png)

名前とアイコンを設定。アイコンはデフォルトのままでもOK。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/81029766-9170-f003-a06b-db58f9db479e.png)

LINEとの連携設定を実施します。基本的に番号順に書いてある通りに実施したら連携設定は完了します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/b01aa9ec-a564-ce00-e6f7-3f60d24c6407.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/ff84d813-ffa2-00dc-9317-b32c2bb64bad.png)

hachidoriに設定する必要があるLINEの項目はChannel基本設定の以上の項目。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/7465289b-3b8f-7345-9b97-88b7d3888f77.png)

7番内のフォームにLINEの各値を設定。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/594db2af-7a1f-e9a8-b914-ee6941ca96e7.png)

8番内のボタンからLINE側のプランを設定。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/6143d216-f5dd-33e4-5b3b-0bf308948bb9.png)

プランまで設定し問題が無かった場合、登録完了画面が表示されます。
完了画面にある通り、Botの情報をLINE側に設定していきます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/52686d99-d9ac-30ca-47ee-82af559cf0b7.png)

LINE連携設定と同様に基本的に番号順に書いてある通りに実施したら設定は完了します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/800005fc-f1fa-f794-8e26-6624d4d389c0.png)

LINEの設定の自動応答メッセージは**利用しない**にしてください。
デフォルト利用するなのですが、利用するだと設定したメッセージの返答しかしません。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/fd219581-ba15-3a76-5535-c6eb101fa6e8.png)

LINEに設定する必要のあるhichidoriの設定はWebhookURLのみです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/ec57cb6e-4570-cd25-c054-cb3a2bf741de.png)

hachidoriのWebhookURLをLINEに設定し、Webhook送信を**利用する**に変更します。
変更後、接続確認をクリックし設定が問題無い場合は成功しましたと表示されます。
エラーとなった場合は設定などを再度確認してください。

これでBotの作成は完了です。
新規作成をした場合、チュートリアルシナリオが設定済みのため、作成したLINEのチャネルと友達になればチュートリアルシナリオでBotとやりとりが出来ます。

## チュートリアルを動かしてみる。

<img width="375" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/199859/202da6ee-90c3-b9b9-70ab-21a0851b3333.png">

<img width="375" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/199859/d0dfc699-1fce-6ca4-661c-b788793b859b.png">

実際に動かした結果のキャプチャです。
黒塗り部分はLINEアカウントに登録している名前が表示されています。

実際の動きと作成済みのシナリオを確認することでhachidoriで行えることがほぼ確認出来ます。
というよりチュートリアルシナリオの説明的なものはありますが、ヘルプはほぼない感じなので考えるな感じろというやつなのかもしれません。

## WEB APIを呼んでみる

### APIを呼ぶための事前準備

hachidoriの特徴として、外部のWEB APIを呼ぶことが出来ます。
チュートリアルではWEB APIの呼び方などは触れていないので試していきます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/cdbc1f9e-b401-824d-6149-5a4e53ad46a3.png)

hachidoriのエディタに連携設定とあるのでクリック。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/b4c62ac5-0cae-b629-677f-fa730692cb01.png)

新しいテンプレートを作るをクリック。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/1ef9d16d-6de8-6de6-dee3-a6ff78af94c3.png)

今回使用しているWEB APIは社内書庫の本の未返却数をレスポンスとして返すものです。
クエリパラメータもリクエストヘッダ・ボディも設定はしません。
URLとテストURLに同一のURLを設定し、**登録する**をクリックします。


![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/0d61087a-9f62-789b-ef9e-29c829b81f2c.png)

テンプレート連携が作成されました。
詳細を見るで詳細を開きます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/3beda95b-3acf-ed07-a957-d2349df3ea85.png)

テストURLとAPIモードの間にテストURLを実行し、戻ってきたレスポンスの項目が表示されます。
この項目がBot内で使用出来るようになります。

クエリパラメータを使用しないAPIだけでは面白くないのでもう1つAPIを登録します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/929398ed-f496-b36a-34d1-9c8cfe0341b3.png)

APIとしては`name`パラメータに検索したい本の単語などを設定すると、その単語を含む本の検索結果を返すものです。

URLには実際のパラメータが設定される箇所に`;#オウム;`と設定しています。
これは`オウム`クエリーでユーザーが直前に入力した言葉を覚えてくれるものです。

テストURLには実際に検索したい単語を設定し**登録する**をクリックします。今回はamazonにしています。


![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/af613cdf-27f4-2a6f-bdea-ca4f32ea3c21.png)

テストURLで実行し、戻ってきたレスポンスの項目が表示されます。
このAPIは複数の検索結果がある場合、JSONの配列で返ってきますが要素0番目の項目のみが表示されています。

APIの準備はこれで完了です。

### APIを呼ぶシナリオ作成

#### 未返却数確認

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/63bbad90-27f5-6d16-db57-7fe6a68be984.png)

説明を省いていますがシナリオ画面です。
未返却数の確認と本を検索するシナリオを追加します。
シナリオを追加をクリック。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/a16d43f4-d250-64e2-fa12-f2f44f080c4c.png)

シナリオタイトルを入力し、作成をクリック。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/81cfb64e-ef01-92e1-95b9-16416ab083cc.png)

シナリオを作成して行きます。
ユーザーが未返却数確認と入力したらAPIを実行し、表示する流れにします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/41d3b4eb-e9ff-b650-9cbd-0339a48fa50a.png)

Botアクションの追加で`APIリクエスト`を選択します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/99025aea-4bbf-3a19-f338-b3dafa0bf2da.png)

APIリクエストのBotアクションが追加されました。実行するAPIは左下から選択します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/44f0094f-f0e5-6764-a568-04ea190d7dc0.png)

登録済みのAPIが表示され、選択すると帰って来るレスポンスも表示されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/b17474f2-a629-e15f-3936-697ae14c2c2a.png)

Botアクションのテキストを追加します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/3a687cdf-e1db-c358-14ef-4851abe046e7.png)

エディタの右側にAPIのレスポンス項目があるので、今回使用する`quantity`をクリックし、追加したテキストの上で再度クリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/dd089f66-3ea2-6d21-c91e-816bc1ad90df.png)

実行したAPIのレスポンスを表示するための形にし追加してくれます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/a56f1386-4481-0686-0ae6-4b4b80162780.png)

回答の体裁を整えたら未返却数の確認のシナリオは完了です。

#### 本の検索

シナリオを追加します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/74ac57ca-923e-2718-bc72-5a50b56f43e9.png)

ユーザーが検索と入力すると検索したい単語を聞き、入力された単語を元に検索するシナリオにします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/4d2c1c16-de79-b9ab-ec3a-13f3af7bac3c.png)

Botアクションでテキストを追加し、単語を聞く言葉を返します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/020c039d-ed63-4cb6-0b87-25cf8831208c.png)

ブロックを追加するをクリック。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/6f8de6a3-3c13-dafe-a397-e883b828fc27.png)

ユーザーアクションが追加されます。クエリーを指定しますをクリック。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/0cdcaa9d-e1f0-59ba-d26a-7433782a26fc.png)

APIでも指定した`オウム`クエリーを指定します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/aeec83d1-3d0f-f1ae-ec73-ab454bb4b9c4.png)

BotアクションAPIリクエストを追加し、本の検索をするAPIを指定します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/af3403dd-d0aa-0f89-3785-1b01d14fd16c.png)

Botアクションテキストを追加し、APIのレスポンスから本の名前を返すレスポンスを指定します。

これで本の検索シナリオも完了です。

### 動かしてみる

<img width="375" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/199859/a5ed0ba7-d551-5311-4ad0-842ca797655a.png">

未返却数確認を動かしてみた結果です。
シナリオ通りに動いています。

<img width="375" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/199859/a086b47d-136d-5615-96fc-31fbce1fd199.png">

本の検索を動かしてみた結果です。
シナリオ通りに動いているような気がします。
しかし、googleを含む本の数は複数存在するのですが1冊目の結果のみ表示されています。
シナリオでも`;@本の検索(value.rentals[0].object.name);`を使用していたので1冊目が表示されるのは正しいのですが、検索結果は全て表示して欲しい気がします。

色々試してみたのですが、データの件数分表示するみたいなことは出来ませんでした…。
出来る方法を知っている方がいたら教えて欲しいです。

ちょっと気になる点も残りましたが、外部APIを呼びBotがプログラミング無しで作成することが出来ました。
プログラミング出来なくてもBotが作れるのは色々とハードルが下がるなと思います。

# 終わりに

- やっぱりプログラミングしなくてBot作れるのはすごい。
- ヘルプが充実するともっと作りやすいのではと思う。
- 外部APIの利用はhachidoriで利用する前提の設計をしていると、とても使いやすくなるのではと思う。
- 同じような問い合わせがよく来る部門はこれでBotを作ってみるといいのでは。