10
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-02-16

はじめに

Bot Frameworkと雑談対話APIを使用したチャットBot
ハングアウトBotを作ってみる
などでBotを作成しましたが、いずれもプログラミングが必要でした。

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

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

hachidoriって

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

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

実際に作ってみる

前提条件

  • hachidoriアカウント ※プランはFREEでOK
  • 開発者登録されたLINEアカウント ※登録方法はここから確認。新規チャネルまで作成しておく。
  • 何かしら使えるWEB API

Botの新規作成

image.png

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

image.png

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

image.png

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

image.png

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

image.png

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

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

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

image.png image.png

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

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

WEB APIを呼んでみる

APIを呼ぶための事前準備

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

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

image.png

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

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

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

image.png

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

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

APIを呼ぶシナリオ作成

未返却数確認

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

本の検索

シナリオを追加します。

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

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

動かしてみる

image.png

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

image.png

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

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

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

終わりに

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?