paiza開発日誌

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

チャットボットをブラウザ上で簡単に開発・公開できる「Landbot」を使ってみた!

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

今回は、Web上で誰でも簡単に高機能なチャットボットを作成して、そのまま公開まで可能になるサービスのご紹介です!

登録フォーム、FAQ、アンケート…などを簡単にチャットボット化することが可能で、Webページとして公開できるのでブラウザさえあれば誰でも利用できます。

高度なプログラミングにも対応していますが、初心者の方でもブロックをつなげていくだけであっという間に完成するので、ぜひ挑戦してみてください!

Landbot.io

f:id:paiza:20180117115119j:plain

■「Landbot」の使い方

それでは、「Landbot」がどのようなサービスなのか実際に使いながら解説をしていきます。

まずはユーザー登録をしておきたいので、トップ画面右上にあるボタンをクリックします。
f:id:paiza:20180117115142j:plain


すると、「ユーザー名」を尋ねられるのでフォームへ入力しましょう。
f:id:paiza:20180117115205j:plain
その後、「プロジェクト名」「メールアドレス」も聞かれるので同じように入力をしておきます。


入力が終わったら、大きなボタンが表示されるのでクリック!
f:id:paiza:20180117115220j:plain


最後に、パスワードを入力して完了です。
f:id:paiza:20180117115232j:plain


すると、自分専用の「ダッシュボード」が表示されます!
f:id:paiza:20180117115249j:plain
あとは、この画面から新規のチャットボットを作成したり、ユーザーからの回答やボットのアナリティクス画面などを確認することができるようになります。

利用プランはいくつか用意されていますが、今回ご紹介する内容はすべて「無料プラン」で利用できることばかりなので、ぜひみなさんも気軽に試してみてください!

■チャットボットの作り方!

それでは、早速ですが「チャットボット」を作ってみたいと思います!

簡単なサンプルデモとして、ユーザーのメールアドレスを尋ねるだけの簡易的なチャットボットを作ってみましょう。


まずは、「ダッシュボード」から「+」アイコンをクリックして新規作成します!
f:id:paiza:20180117115319j:plain


チャットボットの開発用エディタが表示されます!
f:id:paiza:20180117115329j:plain
この画面上で、ブロック化されたボットの機能を線でつなぎながら、自分だけのチャットボットを作成していきます!


まず最初に、ユーザーが「チャットボット」にアクセスした時に表示するメッセージを作ることから始めます。

「WELCOME MESSAGE」と書かれたブロックをクリックしましょう!
f:id:paiza:20180117115344j:plain


入力フォームが表示されるので、ボットが話す言葉を入力していきます。
f:id:paiza:20180117115355j:plain
「(1)最初に表示する言葉」を入力し、そのあとにユーザーがクリックする「(2)ボタンのテキスト」も入力しておきましょう!

入力が完了したら画面上にある「SAVE」ボタンをクリックして保存します。


ついでに、すでに作成されているもう1つのブロックは不要なので削除しておきましょう。
f:id:paiza:20180117115448j:plain


今度は、ユーザーの「メールアドレス」を尋ねたいので、新しいブロックを追加します。

画面左のメニューから「ASK A QUESTION」をクリック!
f:id:paiza:20180117115503j:plain


候補の中から「EMAIL」を選びましょう!
f:id:paiza:20180117115515j:plain


先ほどと同じような入力フォームが表示されます!
f:id:paiza:20180117115531j:plain
「(1)ボットが話す言葉」を入力し、「(2)Email」が選択されていることを確認しましょう!(「Email」を選択することでメールアドレス以外が入力されないように設定できます)


あとは、最初に作ったブロックと「線」でつなげるだけでOK!
f:id:paiza:20180117115548j:plain
マウスのドラッグ&ドロップで簡単につなぐことができます。


最後に、ユーザーが「メールアドレス」を入力したあとに簡単なメッセージを表示するようにしましょう!

画面左のメニューから「SEND A MESSAGE」をクリック!
f:id:paiza:20180117115602j:plain


入力フォームに簡単なメッセージを入力して保存しておきましょう!
f:id:paiza:20180117115613j:plain


最終的に、以下のようなブロック構成になると思います。
f:id:paiza:20180117115639j:plain
たったこれだけで、メールアドレスを尋ねるチャットボットの完成です!


もっと複雑な条件分岐を作成したり多彩な機能を活用することもできますが、まずはシンプルなボット作成から始めてみるといいでしょう。

■ボットを公開してみよう!

チャットボットがだいたい完成したら、プレビュー機能でテストをしてみましょう!

画面右上にある「保存ボタン」をクリックします。
f:id:paiza:20180117115659j:plain


すると「PREVIEW」ボタンを利用できるようになるのでクリックしましょう。
f:id:paiza:20180117115710j:plain


プレビュー画面が表示され、作成したチャットボットを実際に使ってみることができます!
f:id:paiza:20180117115723j:plain


もちろん、スマホでの表示状態も確認できます。
f:id:paiza:20180117115735j:plain


プレビューで問題なければ、エディタ画面の上にある「Design」タブに切り替えましょう!
f:id:paiza:20180117115748j:plain
ここでは、チャットボットの表示を細かく調整したり、ボットのアバターを変更したりなど多彩なカスタマイズができるようになっています。


カラー、背景、アバターなどを変更するとこんな感じになります!
f:id:paiza:20180117115803j:plain


また「Settings」タブでは、各種ボタンやエラーメッセージなどを日本語に変更することも可能です!
f:id:paiza:20180117115819j:plain
他にも、SEO設定やGoogleアナリティクスの登録も可能なので便利です。


最後に「Share」タブに切り替えると、専用のURLが表示されています!
f:id:paiza:20180117115832j:plain
あとは、このURLをSNSやメールなどでシェアすれば、誰でもチャットボットを利用することが出来るようになるわけです。


今回の簡単なサンプルを実際に動かすと以下のような感じになります!

■「Landbot」の便利な機能紹介!

「Landbot」はチャットボットを作成するために便利な機能をいろいろ搭載しているのですが、なかでも特に活用したい機能をピックアップしてご紹介します!

例えば、ブロックに入力するメッセージは「HTML」での記述が可能です。
f:id:paiza:20180117115900j:plain
「HTMLボタン」をクリックして、そこへ通常のHTMLを書いていけばOKです。


次のように、外部リンクをメッセージ内に挿入することも簡単です。
f:id:paiza:20180117115915j:plain


もちろん、埋め込みタグ(iframe)なども使えるのでYouTube動画を挿入しても面白いですね。
f:id:paiza:20180117115927j:plain
HTML内に「scriptタグ」を挿入すればJavaScriptを記述することも可能なので非常に便利です。


また、条件分岐などで利用できる「ボタン」はリストからアイコンを追加することもできます。
f:id:paiza:20180117115941j:plain


アイコンを追加すると非常に分かりやすくなりますね。
f:id:paiza:20180117115955j:plain
アイコンは100種類以上から選択できるようになっているので、わざわざ画像を作る必要もありません。


ユニークな機能としては、ユーザーが入力した文字列を一時的に保存できる「変数」のような機能も用意されています。

例えば、ユーザーの名前を訪ねた時に「@name」という変数に保存しておきます。
f:id:paiza:20180117120012j:plain


すると、以降は「@name」をメッセージ内で使うことで、ユーザーが入力した名前を再利用することができるのです!
f:id:paiza:20180117120021j:plain


つまり、ユーザーが「①名前を入力」したら、その「②名前が表示される」ようになるというわけです!
f:id:paiza:20180117120033j:plain
会話している雰囲気がより強くなるのでオススメです!


さらに、「メール通知」機能もあります。

これは、あらかじめ指定したメールアドレス宛に通知を送信することができます。
f:id:paiza:20180117120054j:plain
メールアドレスは複数登録可能で、「通知ブロック」を繋げるだけでそのブロックを通過した時点で送信されるようになります。(Slack通知も可能)

これにより、任意のユーザー情報を受信したり、チャットをどのあたりまで持続したかをチェックする…など、さまざまな使い方ができるようになります。

他にも、Webhookを使って多彩なサービスと連携することもできるので、無限の可能性を秘めているといえるでしょう!

PythonJavaScriptなどの講座が完全無料!動画でプログラミングが学べるレッスン


paizaでは、プログラミング未経験者・初心者向け学習サービス「paizaラーニングを公開しています。

Landbotのようなサービスを使いつつ、自分でチャットボットなどを開発できるようになりたい方にもおすすめです。

JavaScript、HTML/CSSSQLPythonJavaC言語PHPRubyなど、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。

また、今まで有料だった「Python入門編」・「ITエンジニアの就活準備編」(※就活生じゃなくても受講できて転職活動にも役立ちます!)が、今月から【全編無料】となりましたのでぜひごらんください!

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

■まとめ

今回は、「Landbot」について駆け足でご紹介しました!

使い方はブロックを繋げるだけなので、初心者でも簡単にオリジナルのチャットボットを作ってそのまま公開することが可能です。

また、プログラミングができる方は「Landbot」専用のAPIも提供されているので、さらに複雑な処理をおこなうボットを開発して楽しむこともできます。

ぜひ、みなさんも多彩なチャットボットを作って遊んでみてはいかがでしょうか!


<参考>





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

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

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

paizaのスキルチェック