paiza times

paizaがお届けする、テック・キャリア・マネジメント領域における「今必要な情報」を届けるWebメディア

logo

paizaがお届けする、テック・キャリア・マネジメント領域の「今必要な情報」を届けるWebメディア

ノーコードでチャットボットのプロトタイプ作成からテストまで実現する「Botsociety」を使ってみた!

f:id:paiza:20210324133913j:plain
どうも、まさとらん(@0310lan)です!

今回は、誰でも簡単にチャットボットのプロトタイプを作成して、多数の人にシェアすることで検証テストまで実現するWebサービスをご紹介します!

大規模なチャットボットの開発を行う前に、自分がイメージしているボットを素早くカタチにして繰り返し検証する用途に特化しているのが特徴です。また、テキストだけでなくAlexaなどの音声チャットもデザインできるので、ご興味ある方はぜひ参考にしてみてください!

Botsociety

f:id:paiza:20210324133756j:plain

■「Botsociety」の使い方

それでは、「Botsociety」をどのように使えばいいのか詳しく見ていきましょう!

まずはサイトにアクセスして【Get started for free】ボタンをクリックして無料のユーザー登録をしておきます。

f:id:paiza:20210324133934j:plain


ユーザー名、メールアドレス、パスワードを設定すればOKです。(Googleアカウントでも登録できます)

f:id:paiza:20210324133949j:plain

設定したメールアドレス宛に認証用のリンクが送られてくるので、クリックして承認しておきましょう。


チャットボットのテンプレートを選択する画面が表示されたら、ひとまず右上の「✕」ボタンをクリックします。

f:id:paiza:20210324134004j:plain


以下のようなダッシュボード画面が表示されたら準備は完了です!

f:id:paiza:20210324134023j:plain

この画面からチャットボットを作成したり、フォルダを作成して複数のボットを管理・整理していくこともできます。

またドキュメントや簡単なチュートリアルなども豊富に提供されているので、最初に確認しておくといいでしょう。

■チャットボットをデザインしてみよう!

それでは「Botsociety」の基本的な機能を紹介しながら、簡単なボットの作り方を見ていきましょう。

まず最初にダッシュボードから【New Design】を選択します。

f:id:paiza:20210324134048j:plain


Messenger, SMS, Instagram, Slack...など、さまざまなテンプレートが表示されるので好きなものを選択します。(今回はデフォルトのWebアプリ用を選択します)

f:id:paiza:20210324134100j:plain

選択したら、画面下部の【Start Designing】ボタンをクリックしましょう。


編集エディタが表示されるので、青色の【Bot says】ボタンをクリックします。

f:id:paiza:20210324134113j:plain


ここでボット側が話すメッセージを入力できるようになります。

f:id:paiza:20210324134125j:plain

【Add】ボタンをクリックして決定しましょう。


するとチャットエディタにボット側のメッセージが表示されます。

f:id:paiza:20210324134139j:plain


同じように赤色の【User says】ボタンをクリックすると、相手側(ユーザー)のメッセージが入力できます。

f:id:paiza:20210324134150j:plain

このように「ボット側」と「ユーザー側」を操作して、自分がイメージしているチャットのシナリオを作成していくことができるわけです。


また、上部のオプションを選択すると、テキスト以外にもボタンなどのインタラクティブなアクションも設定できます。

f:id:paiza:20210324134210j:plain


アクションの種類としては、複数の選択肢を持つ「ボタン」、画像付きのリッチなボタンを作れる「カルーセル」、簡単な質問にすぐ答えられる「クイックリプライ」などがあります。

f:id:paiza:20210324134221j:plain

ちなみに、InstagramやSlackなど他のテンプレートを選択している場合は、それぞれ固有のアクションが追加で表示されます。


複数の選択肢を持つボタンについては、3つの条件分岐ができるようになっています。

f:id:paiza:20210324134238j:plain

条件分岐の内容は以下のとおりです。

  1. それぞれのボタンに新規シナリオを作成する
  2. どのボタンを選択しても現在のシナリオを続行する
  3. 1つのボタンとそれ以外の2パターンのシナリオを作成する


条件分岐すると視覚的に分かりやすいように、それぞれのシナリオが矢印で接続されるようになります。

f:id:paiza:20210324134311j:plain

接続先のシナリオはこれまでと同じようにテキストやボタンなどを利用して、チャットを作成していくことができます。

■チャットボットをプレビューしよう!

チャットボットのデザインができたら、どのような動作をするのかプレビューで確認してみましょう。

画面上部にある再生ボタンをクリックしてください。

f:id:paiza:20210324134330j:plain


するとリアルタイムにチャットが自動再生されます。

f:id:paiza:20210324134341j:plain


実際のプレビューは以下のGIFを参考にしてみてください!

f:id:paiza:20210324134357g:plain

条件分岐する箇所については、画面左側に選択肢が表示されるのでクリックできるようになっています。


ちなみに、プレビュー画面は選択したテンプレートによって最適化されるようになっており、例えばSlackのボットであれば以下のようになります。

f:id:paiza:20210324134803j:plain

目的のプラットフォームに合わせた画面になるので、よりイメージがしやすくなる工夫がされています。


Alexaなどの音声チャットであれば、プレビューは実際に声でしゃべってくれます。

f:id:paiza:20210324134817j:plain


言語設定を「Japanese」にすれば、ボット側とユーザー側の音声を「女性の声」「男性の声」から選択できるようになっています。

f:id:paiza:20210324134827j:plain

■チャットボットの検証テストをしよう!

プレビューで特に問題がなければ、次のステップとして誰かにチャットボットを使ってもらいましょう。

「Botsociety」では、URL1つで誰でもテスターになってもらえる機能が提供されており、使い方も簡単なので合わせてご紹介しておきます。


まずは画面上部にある【Share】ボタンをクリックします。

f:id:paiza:20210324134842j:plain


【Copy link for testers】をクリックすると、テスター向けの専用URLをコピーできます。

f:id:paiza:20210324134851j:plain

あとはこのURLをSNSやメールなどでシェアするだけです。


テスター側は「Botsociety」のアカウントを持っている必要はありません。ブラウザからシェアされたURLにアクセスするだけでチャットボットを試すことができるので便利です。

f:id:paiza:20210324134903j:plain


テスターはチャットボックスへ自由にテキストを入力したり、ボタンなどの選択肢をクリックしたりできるので、実際に動くプロトタイプとしてチャットを体験できるようになっています。


チャットボットをシェアした側は、プロトタイプモードを表示することでテスターの状況を確認できるようになっています。

f:id:paiza:20210324135105j:plain

テスターがどの箇所でストップしているのか、どんなテキストを入力したのか…など、自分が想定しているチャットボットが正しく機能しているのかをリアルタイムに把握できるので便利です。

もしテスターの動向を確認していて問題が発見できたら、またチャットボットを作り直してテストしてもらうという流れがスムーズにできるわけです。


ちなみにですが【Download】ボタンをクリックすると、チャットボットの流れを動画ファイルとしてダウンロードしたり、全体像をPDFで保存することも可能です。

f:id:paiza:20210324135122j:plain

さらに埋め込みコードを取得すれば、自分のWebサイトに作成したチャットボットを貼り付けることも可能です。

これにより不特定多数の人にチャットボットを実際に試してもらうこともできるので便利です。

■【おまけ】便利な機能について

「Botsociety」にはより高度なチャットボットを作成するためのオプションがいくつか提供されており、例えばチャットボットのプラットフォームとして知られる「Dialogflow」や「Rasa」と連携させることができます。

手順としては、画面左側のメニューから「ビルドモード」を選択してから、任意のプラットフォームを選ぶだけです。

f:id:paiza:20210324135204j:plain


「Dialogflow」であれば、Googleのアカウントと連携すればすぐに利用できます。

f:id:paiza:20210324150342j:plain

これらのプラットフォームと連携することで、作成したチャットボットをさらに作り込んでいくことができます。


またプログマー向けに「Botsociety」のAPIを利用してチャットボットを独自にカスタマイズできる機能も提供されています。

現在はまだプレビュー版ですが、npmパッケージも作成されておりGitHubでも公開されています。

botsociety node client

f:id:paiza:20210324135317j:plain

このように「Botsociety」はチャットボットのプロトタイプ作りから検証テストを経て、本格的な開発まで完結できるプラットフォームとして利用できるわけです。

■まとめ

今回は誰でもノーコードでチャットボットのプロトタイプ作りから検証テストまで行えるWebサービスをご紹介しました!

「Botsociety」には他にも便利な機能として、複数人で共同作業ができるリアルタイムコラボ機能や、ボットのデザインをコンポーネント化して再利用しやすくする機能なども提供されています。

チャットボットの利用を検討している人や、これから開発を予定している人も含めてぜひ自分だけのチャットボットを作成&シェアしてみてはいかがでしょうか。


<参考リンク>




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら
paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら
paizaのスキルチェック

paizaのおすすめコンテンツ

CGC codemonster プログラミングゲーム「初恋プログラミング研究会 ~海に行こうよ~」 CGC codemonster プログラミングゲーム「コードモンスター大図鑑 プログラミングでゲットだぜ!」
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.