見出し画像

Flow XOはノーコードでチャットボットが作り込める

年末の忘年会(サシ飲みです)で営業部の後輩が「うちの会社は見積もりもすぐ出せなくてマニュアル見ながら電卓はじいてる」と嘆いていたのでブチ切れて年末年始の間にFlow XOで簡易見積りシステムを作ってみました。
これがあればスマホでもPCでもどこでも見積りが出せます。

こんなの

これ、画像では伝わらないのですが、商品選択やサイズ選択で、選択肢をタップするだけなので1商品30秒くらいで見積りができます。
ただ、ここから印刷代なども計算できるようにする予定です。

マジカルナンバー4とか7とかに合わせて(詳しくは調べてください)1回の選択肢を少なくし、使う側にとって早く見積り計算ができるようにしました。
逆に言えば、早く開発することが目的だったので見積書作成機能とかメール転送機能とか、他の機能はないです。
作りこめばできると思いますが、それなら最初から専用の見積りシステムを導入すればいいので(というか会社で導入されてるけど使いづらいという噂)機能を絞っています。

ノーコード開発については、以下の記事を読んでからすごく意識しています。何もかも、システムを簡便に作れる時代になったなぁ、だからこそ乗り遅れたら時代に取り残される…と危機感を抱いています。

どうしてFlow XOを選んだか

以下のページを参考にしました。

比較したのはhubspot、anybot、Tayori、Dialogflowなど。

hubspot…CRM(顧客管理システム)としては利用しやすそうです。LPに入れておきたいですね。

anybot…以下のページの「株式会社イシカワ」様の事例のように、ずらずら商品名が並んでいて数量を入力する方法にすれば実装できそうです。

※もしかしたらこっちの方が使いやすいかもしれません。今、その後輩に聞いてみているところです。
ただ、「チラシ・A4・コート紙・片面カラー+片面2色」で製造原価が出るとして、これを全パターン並べてそこから探すのは大変なんじゃないかと思うところです。

また、簡易計算機能があり、今回作ろうとしたものができそうな気もしましたが、料金改定があったときの修正などを考えると、料金はDBで保持して取得したかったため、こちらは諦めました。
個人的には、マニュアルが少なく感じたのも諦めた理由の1つです。まだ歴史の浅いサービスだからかと思います。(その代わりウェブミーティングへのお誘いがありました)

Tayori…お問い合わせフォームを作成する感覚でチャットボットが作れそうです。

Dialogflow…難しくて諦めてしまいました。

Flow XOで作ったもの

左が処理、右が実際のチャットをイメージした画面です

いくつか条件を選択した後、HTTPリクエストを投げて外部DBに保存されている料金を取得し、部数を掛けて料金を算出しています。

HTTPリクエストの方法は、こちらに記載されています。(Flow XOでWeb上のデータを利用する方法)

上記の例では為替レートを表示しています。

それでは外部DBをどうしているかというと、別で使用しているレンタルサーバーにPHPとMySQLを用意し、データベースに接続して条件に合わせてSELECTし、その結果をJSON形式で表示しています。

「JSON形式で表示」というのは、PHPで{ "price": '○○' }と出力しているだけです。
ウェブサーバーにはBasic認証をかけていますが、JSONファイルをそのまま置いてしまうと全商品の原価が一覧で表示されてしまうので、PHPで出すようにしました。(Flow XO側での処理が分からなかったのもあります)
※この実装方法でセキュリティホールはあまりないと思うのですが、強いて言えばレンタルサーバーのコントロールパネル情報が漏れたら全情報が流出するくらいでしょうか…?

取得したデータが変数に入ってきます。変数の表示方法はこちらを参考にしました。

その他、システムの組み方としては以下を参考にしました。

なんでこの記事をQiitaに書かなかったのか

エンジニアではない、noteを読んでいる方たちにもチャットボット作成を身近に感じていただきたかったというのと、
実装手順を細かく掲載するのは面倒だったからです…。

ちなみに、こうしたらもっと簡単に問題解決できるという案がありましたらこっそり教えてほしいです。

とりあえず、今回のチャットボットはせっかく作ったので、実際に利用開始されるところまで持っていきたいです。

お気持ちいただけたらとっても嬉しいです!