チャットボットをWOTNOTでNo Code開発した話

この記事のまとめ

• No Codeの勉強するためにNo Code Chatbotを作る
• WOTNOTというNo Code Chatbot Platformの紹介
• 作ったChatbotで使っている機能紹介

No CodeとChatbot

プログラミング不要でWebサービスとかアプリとかを作れるやつ（らしい）
ECサイトのNo CodeサービスではShopifyとかBASEとかがある
個人でECサイトとか必要ないので、Chatbotをつくってみた。

WOTNOT

No CodeでChatbot（ いろんなサイトで右下に勝手に出てきて、一切の解決策を与えてくれずにスペースを占領するクソ無能な機能）をつくってみようと思いました。そこで、No CodeでChatbotを作成するためのPlatformがNo Code Chatbot Platformです。世の中にはたくさんのNo Code Chatbot Platformが存在します。
今回は

を使ってみました。理由はなんか色味がなんか好みだったからです。あと、個人利用もできるみたいですし。Free Planでは使えないけど、FAQ Builderが良さそう。
他にも類似のサービスがあるのでまとめておきます。Zendesk Chatbotが結構規模が大きそう（chatbot.comドメイン取れてるし）。Landbotのも多分規模が大きい（？）。Kuzenは日本製だけど、フリープランはなく、資料請求しないと導入できなさそう。

• Zendesk Chatbot
• Landbot
• Kuzen

conversation数と料金

Chatbot Platformではconversation数、すなわちユーザとbotの会話数に応じて料金が変わってくるようです（従量課金制）。いい商売だと思いますし、Chatbotにむやみやたらに話しかけないようにしようと思いました。

• WOTNOT: \$499/monthで50000 conversation (それ以降は\$10/1000 converation)
• Landbot: €80/monthで2500 conversation (それ以降は€10/500 converation)

WOTNOTの機能

料金プランごとの機能はここに書いてある。その他には以下のものもあります（WOTNOT固有の機能というわけでもない）。

• GUIによるChatbotのロジック作成
• 多言語対応
• 対人間チャットへの接続
• FAQ Builder （定形的な質問文に対する返答集みたいなもの）
• API接続やJavaScriptの実行
• 無期限の無料プラン

WOTNOTでBOTを作ろう

WOTNOTで使った機能についてまとめてみました。
アイコンやテーマカラーなど色々設定できるのですが、ここでは省略します。

Collect Input

テキスト入力のボックス。このステータスのときでないとWOTNOTの入力フォームは機能しない。Email表現や正規表現で特定の形式のみの入力に制限できるのがGood。また、入力された内容は変数に保存できる。

Message

メッセージを表示する機能。Botが喋る内容をテキストで指定する。Collect Inputなどで保存した変数を表示させられる。例えばvarという変数があるとき、#var#としてテキスト入力すると変数が展開される。

Button

こんな感じでテキストといくつかのボタンを表示させる機能。どのボタンが押されたかで条件分岐ができる。ボタンにURLの埋め込みもできる。

Carousel

こんな感じで、複数のボタンがあるカードを横にいくつか表示させる機能。ちなみにカルーセルとよぶ。

Service Call

APIを呼ぶ、HTTPリクエストを送る機能。GET、POST、PUTを実行できる。GETの場合、URLに直接パラメータを入力する。URLにWOTNOT内の変数を埋め込むことも可能。https://example.com/param=#var#みたいな感じ。headerとpayloadも操作可能。

作ったChatbot

フローチャートはこんなかんじ

こちらから試せます。

Test方法

Test this botを押せば、新しいWindowが開かれてchatbotをテストできます。

Deploy方法

さて、作ったChatbotは何かしらのサービス上に載せないと意味がありません。

ここで生成されたscriptタグをhtmlのbodyの前に（headerとかに）貼り付ければデプロイできます。
とてもかんたん

注意点

WOTNOTの実行関数はmainという名前に変換（？）されるので、他にmain関数が宣言されていた場合、エラーが起こります（これはめっちゃ罠）

感想

• No Codeを初めて触りましたが、ちゃんと動くものをコードを書かずに作れて面白かったです。
  • No Codeだとコードによる知見の共有が難しいと感じました
• Chatbotのようなフローが大切なシステムでは、コードで書くよりも作りやすく、リーダブルなものができると思いました。
• 関数化みたいな機能がない（少なくともWOTNOTには）ので、機能を増やすとフロー図が巨大化してしまいそうでした。
• サービスとしてはちょっと荒削りであると感じる場面がある
  • 前の処理に戻すときのエッジ（導線）の挙動が悪い。直線的な動きしかしない。
  • WOTNOTのBot Builderの日本語入力はちょっとクセがある（入力しても自動保存されない時がある）。
  • URLの画像を読み込めない。リンク付きのテキストとして表示されてしまう（方法を知らないだけかもしれませんが）。