paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

コーディング不要・初心者でもブラウザだけで万能チャットボットを作れる「Tars」の使い方大公開!

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

今回は、誰でもプログラミング不要、「チャットボット」を制作して公開できるWebサービスのご紹介です!

作れるボットの種類も幅広く、例えば…予約注文、カスタマーサポート、FAQ…などに対応するチャットボットを簡単に構築可能です!

活用次第では、自分自身を紹介するポートフォリオボットや、イベントなどの告知ボット、仕事の打ち合わせ用にスケジュール調整ボット…などなど、とにかく広い用途に作れて楽しいので、ぜひトライしてみてください!

Tars

f:id:paiza:20170427113324j:plain

■「Tars」の始め方!

それでは早速ですが、実際に「Tars」を使いながら、どのようなサービスなのかを見ていきましょう!

まずは、サイトにアクセスして「ユーザー登録用」のボタンをクリックします。
f:id:paiza:20170427111334j:plain


「ユーザー名」「メルアド」「パスワード」を入力すれば、登録完了です!
f:id:paiza:20170427111349j:plain


すると、自分専用の「ダッシュボード」が表示されます!
f:id:paiza:20170427111400j:plain
この画面から、自分が作りたい「チャットボット」をどんどん作っていくことができます。

■チャットボットを作ってみよう!

それでは、実際にチャットボットを作ってみましょう。

まず、最初に「ダッシュボード」から、「ボット作成」ボタンをクリックします。
f:id:paiza:20170427111416j:plain


そして、「テンプレート」を使って作成するのか、「空」のプロジェクトから新しく作成するのかを決めます。
f:id:paiza:20170427111426j:plain
テンプレートには、スケジュール管理ボット、予約注文ボット、FAQボット…など、さまざまなケースに対応した「ボット」をサクッと作れるようになっています。


しかし、今回はチュートリアルも兼ねているので、「空」のプロジェクトから新規作成ボタンをクリックしましょう!

すると、ボット作成用のエディタが表示されます!
f:id:paiza:20170427111439j:plain
この画面で、「ボット」がどのように受け答えするのか…、あらかじめ設定をしていくことになります。

設定の内容としては、ユーザーからの入力に応じて、ボットが適切な回答をするためのロジックをどのように組み立てるか…というのが主な作業になります。


通常ならば、プログラムを組んで制御していくわけですが、「Tars」ではブロックを作って「線」で繋げていくだけなので、小学生でも簡単に作れてしまう特徴があります。
f:id:paiza:20170427111457j:plain


今回は、以下のようなユーザー登録「ボット」を作ろうと思います!
f:id:paiza:20170427111518g:plain
このくらいの内容であれば、ゼロから「ボット」を作成してネット上に公開するまで、30分くらいあれば完成しますよ!

■「ロジック」を組み立てよう!

それでは、「チャットボット」の心臓部とも言えるロジックを組み立てましょう!

Tars」でロジックを作成するには、まずブロックを1つ用意します。

エディタ上部にある「ブロック追加」ボタンをクリック!
f:id:paiza:20170427111841j:plain


すると、ブロックが1つ生成されるので、そのブロックをクリックしましょう!
f:id:paiza:20170427111905j:plain


ブロックの詳細画面が表示されました。
f:id:paiza:20170427111931j:plain
この画面で、このブロックがどのような処理をするのかを細かく設定できます。


まず最初に、このブロックでは「ユーザー登録をするかどうか…?」を問いかける処理にしたいと思います。

そこで、まずはブロックの名称を「Intro」に変更しておきました。(名称の変更は任意です…)
f:id:paiza:20170427111954j:plain


そして、「ボット」が話すセリフを入力します。
f:id:paiza:20170427114718j:plain


そして、ユーザーに「はい・いいえ」で選択してもらいたいので、「ボタン」をリストから選択します。
f:id:paiza:20170427112127j:plain


ボタンを2つ追加して、テキストを「①はい・いいえ」に変更し、条件分岐するための「②Branching」の項目にチェックを入れて保存します。
f:id:paiza:20170427112203j:plain


すると、先ほど生成されたブロックの下部に、分岐用の端子が2つ表示されているのが分かります!
f:id:paiza:20170427112226j:plain


さらにブロックを2つ追加し、「はい・いいえ」それぞれに端子を接続すればOK!
f:id:paiza:20170427112235j:plain


今度は、「いいえ」側のブロックをクリックしましょう!
f:id:paiza:20170427112254j:plain


「いいえ」をユーザーが選択したら、そのまま処理を終了したいので、リストから「Auto Page Redirection」をクリックします。
f:id:paiza:20170427112305j:plain
これで、任意のメッセージをチャット欄に投稿した後に、処理は自動的に終了します。


次に、「はい」を選択した場合のブロックをクリックし、ユーザーの「名前」を入力してもらいましょう。

リストから、「Text Input」をクリックします。
f:id:paiza:20170427112318j:plain
これだけで、ユーザーから任意のテキストを受け取ることが出来るようになります。


さらに、ブロックを追加し、同じようにメールアドレスも入力してもらいましょう!
f:id:paiza:20170427112333j:plain
今度は、「Input Type」のところを「Email」に設定しておきます。

このようにしておけば、メールアドレス以外が入力された場合にエラーとなり、再入力を求めることが出来るようになるので便利です!


また、日付を入力してもらう場合は、「Date Scroller」を設定しておきましょう!
f:id:paiza:20170427112356j:plain


すると、PC・スマホで操作しやすい「日付コントローラー」をチャット欄に表示することが出来るようになります!
f:id:paiza:20170427112424j:plain


他にも、ユーザーに「評価」を求める場合は、「Star Rating」を選択します。
f:id:paiza:20170427112436j:plain


すると、ユーザーに「星」の数で評価をしてもらうことが可能になります!
f:id:paiza:20170427112450j:plain
他にも、GPS情報を使って位置情報を取得したり、画像などのファイルを扱うこともできるので、幅広い使い方を楽しめます。


最終的に、それぞれのブロックを繋げるとこんな感じになります!
f:id:paiza:20170427112508j:plain
これで、チャットボットはもう完成です!

早速、ネット上に公開して世界中の人に使ってもらいましょう!

■公開してみよう!

作成した「チャットボット」を公開するのは簡単で、画面右上にある「①Deploy ConvBot」ボタンを選択し、「②Live Link」をクリックすればOK!
f:id:paiza:20170427112541j:plain


新規タブで、「チャットボット」が起動します!
f:id:paiza:20170427112550j:plain
あとは、このURLをメールやSNSでシェアするだけで、世界中の人に利用してもらうことが出来るわけです!


また、取得したデータは、ダッシュボードの「Check Data」タブから一覧を確認することができます。
f:id:paiza:20170427112621j:plain


さらに、埋め込みタグを自動的に生成する機能もあり、自分のブログやWebサイトへ簡単に組み込めるようになっているのも特徴的です!
f:id:paiza:20170427112630j:plain


もちろん、スマホからの操作にも対応しており、画面表示も最適化されているので便利です!
f:id:paiza:20170427112652j:plain
また、zapierとの連携や、ユーザーからの入力があった時にメール通知したり…など、他にも便利な機能が搭載されています。


さらに、詳しい使い方を公式のYouTubeチャンネルでも解説しているので、ご興味ある方はぜひ参考にしてみてください!

YouTubeチャンネル

■まとめ

今回ご紹介した「Tars」は、現在も活発にバージョンアップが行われており、今後もどんどん新しい機能を追加していくそうです。

ロジックの部分は、少し触ればすぐに理解できるシンプルな構成なので、自分がイメージするボットを素早く作成できると思います。

ぜひ、みなさんもオリジナルの「チャットボット」を作成し、ユニークなアイデアで友人・知人を驚かせてみてはいかがでしょうか!

■「Rails入門レッスン」を期間限定・無料公開中!動画で学べる「paizaラーニング


paizaラーニング」は、プログラミング未経験者・初心者向け学習サービスです。

現在、普段は有料の「Webアプリ開発入門 Rails編」の各レッスンを、期間限定で連続無料公開しております!

Webアプリ開発入門 Rails編」無料公開スケジュール


動画レッスン名無料期間
Rails入門1いつでも無料
Rails入門24/25(火)~5/1(月)まで無料
Rails入門35/2(火)~5/8(月)まで無料

↓詳しくはこちら
paiza.jp

paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza


プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編