paiza開発日誌

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

プログラミング不要!Googleフォームを「チャットボット」に変換できる「Fobi.io」を使ってみた!

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

今回は、誰でも簡単に「チャットボット」を作って公開することができる無料のWebサービスをご紹介します!

必要な準備は「Googleフォーム」を1つ用意するだけ!

プログラミングは一切不要で、すべてブラウザ上で完結できるスグレモノですよ。

Fobi.io

f:id:paiza:20170628153331j:plain

Googleフォームを作ろう!

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

Fobi.io」を利用するには、最初に「Googleフォーム」を作る必要があるので、まずはフォーム作りから始めましょう。


Googleフォーム」を作るには、Googleドライブ上から新規作成すればOK!
f:id:paiza:20170628153424j:plain


もしくは、公式ページからでもフォームの新規作成が行えます!
f:id:paiza:20170628153442j:plain


「フォーム作成エディタ」が起動したら、あとは「① 追加ボタン」で要素をどんどん追加していき、「② フォーム部品」からタイプを選択していきましょう。
f:id:paiza:20170628153452j:plain


Fobi.io」は、Googleフォームの要素を読み込んでチャットボットに変換するため、なるべく会話をしているような「質問文」を書くのがポイントです!
f:id:paiza:20170628153509j:plain


ちなみに「Fobi.io」は、ほぼすべてのフォーム部品に対応しているので、自分の好きなようにカスタマイズできるのが特徴です。
f:id:paiza:20170628153627j:plain


ある程度、フォームが完成したら「送信」ボタンをクリック!
f:id:paiza:20170628153639j:plain


リンクが生成されるので、「コピー」ボタンをクリックしておきましょう!
f:id:paiza:20170628153651j:plain
あとは、このリンクを使って実際にチャットボットを作ってみます!

■チャットボットに変換しよう!

それでは、Googleフォームをチャットボットに変換してみましょう!

…と言っても、方法はとても簡単です。


先ほどコピーしたリンクを、「Fobi.io」のトップページに貼り付けるだけです!
f:id:paiza:20170628153714j:plain


すると、フォーム要素の内容が読み込まれているのが分かります。
f:id:paiza:20170628153725j:plain


いろいろ設定もできるのですが、ひとまず画面下の「SAVE BOT」ボタンをクリックしましょう!
f:id:paiza:20170628153748j:plain


たったこれだけで、チャットボットへの変換が完了です!
f:id:paiza:20170628153801j:plain
簡単ですね。

専用のURLが生成されているので、コピーしておいてください!

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

それでは、先ほど生成されたURLをブラウザで開いてみてください!

トップページが表示されるので、「Let’s go」ボタンをクリックします。
f:id:paiza:20170628164006j:plain


すると、Googleフォームが見事に「チャットボット化」されているのが分かります!
f:id:paiza:20170628164016j:plain


Googleフォームのままだと、かなりシンプルなデザインとなりますが…
f:id:paiza:20170628164029j:plain


会話形式のチャットボットにすることで、見た目の印象は大きく変わるでしょう。
f:id:paiza:20170628164038j:plain


また、トップページの文章は、設定画面から好きなように書き換えることができます。
f:id:paiza:20170628164052j:plain


変換すると、こうなります!
f:id:paiza:20170628164110j:plain


さらに、よりチャットボットらしくするために、ユーザーが回答したあとのメッセージをカスタマイズすることも可能!
f:id:paiza:20170628164123j:plain
メッセージは「+」アイコンから、どんどん追加することができます。


変換されると、こうなります!
f:id:paiza:20170628164138j:plain
メッセージのカスタマイズ次第では、面白いチャットボットが作れそうですね。


また、回答してもらったデータは、自動的にGoogleフォームに集計されていくので便利です。
f:id:paiza:20170628164150j:plain


もちろん、スマホにも最適化されているので、PC・スマホ問わず利用してもらうことができます!
f:id:paiza:20170628164201j:plain
生成されたURLをSNSやメールなどで配布するだけなので、イベントの申し込みフォームやユーザーの事前登録など、さまざまな種類のフォームをチャットボットに変換して楽しむことができます!
(ブログやサイトにリンクとして貼り付けるのもOK)

また、集計データはスプレッドシートに変換したりCSVでダウンロードもできるので、あとから分析するのも簡単ですね。

■まとめ

今回ご紹介した「Fobi.io」を活用すれば、とにかく簡単に短時間でチャットボットを作って公開することが出来ます。

ベースになっているのが誰でも扱いやすいGoogleフォームなので、初心者でもカスタマイズしやすい環境と言えるでしょう。

ぜひ、みなさんもオリジナルの「チャットボット」を作って公開してみてはいかがでしょうか!


<参考>





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

現在、普段有料公開しているPHP、DB/SQL、Webアプリ開発入門(PHP+MySQL編)のレッスンを、期間限定で連続無料公開中ですのでぜひごらんください。

↓詳しくはこちら
paiza.jp

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

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