Casual Developers Note

初級・中級のエンジニアやデザイナー向けに技術情報と英語学習情報を提供中。エンジニアもデザイナーも技術と英語を身に着けて海外に飛び立とう!

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
You are here: Home / 技術 Tips & Tutorials / ChatfuelでFacebookメッセンジャーを使うChatbot簡単入門

2018年2月5日 By Keid Leave a Comment

ChatfuelでFacebookメッセンジャーを使うChatbot簡単入門

ChatfuelでFacebookメッセンジャーを使うChatbot簡単入門

AIの流行りと共に人気が出ているChatbotですが、最近ではサービスを使って簡単に作れるようになりました。今回はChatbotサービスであるChatfuelを紹介します。

見出し

  • 1 Chatfuelとは?
  • 2 Chatfuelの始め方
    • 2.1 Facebookのアクセスを許可する
    • 2.2 Facebookのページを作る
    • 2.3 ChatfuelとFacebookページを接続する
  • 3 自動メッセージを設定する
    • 3.1 最初の挨拶とデフォルトの返答を設定する
    • 3.2 自動の返答を設定する
  • 4 Facebookメッセンジャーで試す
  • 5 最後に
    • 5.1 関連記事

Chatfuelとは?

ChatfuelはFacebookメッセンジャーを使ったChatbotを簡単に作れるサービスです。Chatbotは、人とコンピュータがインタラクティブに会話するプログラムのことですね。

Chatbotの始まりは1966年のELIZAと言われており、その後にIBMのWatson、MicrosoftのTay(問題発言で24時間で停止したのは有名な話)などが発表されてきました。最近では、iPhoneのSiriやGoogleのOk GoogleもChatbotです。チャットと言うより音声認識ですけどね。

また、少し古い記事ですが、BUSINESS INSIDERの「Messaging apps are now bigger than social networks」という記事によれば、SNSアプリよりChatアプリの方がアクティブユーザが多いそうです。私の場合はSNSは時間の無駄なのでほとんど見ていませんが、Chatアプリは毎日見ていますので、感覚的にも合っています。Chatbotが流行っているのは当然というわけです。

Chatfuelの始め方

それでは、ChatfuelでChatbotを作っていきましょう。

Facebookのアクセスを許可する

Chatfuelのサイトに行き、GET STARTED FOR FREEをクリックして下さい。

スクリーンショット 2018 01 21 0 10 00

すると、Facebookのアクセス確認の画面になりますので、「許可」をして下さい。

Facebookのページを作る

次に、Facebookのページを作るように促されるので、それに従って進みます。

スクリーンショット 2018 01 20 17 35 20

Facebookページはどれを作っても構いません。

スクリーンショット 2018 01 20 17 36 15

今回は「慈善活動またはコミュニティ」のページを作成します。

スクリーンショット 2018 01 20 18 28 58

ページ名は任意でOKです。「スタート」をクリックしたらページ作成は完了です。

ChatfuelとFacebookページを接続する

後は、「CONNECT TO PAGE」をクリックして、先程作ったFacebookページをChatfuelに接続します。

スクリーンショット 2018 01 20 18 30 02

接続が完了すると、作ったBotのページが表示されます。

スクリーンショット 2018 01 20 18 30 27

自動メッセージを設定する

次に、ユーザの入力に応じて返答するメッセージを設定していきましょう。

最初の挨拶とデフォルトの返答を設定する

右のメニューの「Automate」を選択します。

スクリーンショット 2018 01 20 22 39 09

「Welcome messege」を選びます。

スクリーンショット 2018 01 20 22 36 59

今回は以下のようにメッセージを設定してみました。SuperBotManとは我ながらセンスのない名前を付けてしまいましたが、このメッセージはこのBotが最初に表示するメッセージです。

スクリーンショット 2018 01 20 22 37 59

次に、「Default answer」を選びます。

スクリーンショット 2018 01 20 22 37 16

今回は以下のようにメッセージを設定しました。このメッセージは、ユーザの入力した内容に対して返答が用意されていない場合に、全て使われます。iPhoneのSiriがたまに言う「すみません、何とおっしゃったのかわかりません。」と同じです。

スクリーンショット 2018 01 20 22 38 47

自動の返答を設定する

それでは、ユーザの入力に合わせて返答していくルールを作っていきましょう。右のメニューの「Set UP AI」を選択します。

スクリーンショット 2018 01 20 22 39 24

今回は、デフォルトのグループを使い、日本語での会話にします。右上の言語を「Japnanese」にして下さい。

スクリーンショット 2018 01 20 22 44 10

「ADD AI RULE」でルールを設定していきます。右の「RANDOM」にチェックを入れると、返答のメッセージをランダムで表示することができます。

スクリーンショット 2018 01 20 22 43 47

この調子でいくつか返答を設定してみましょう。

スクリーンショット 2018 01 20 22 48 12

Facebookメッセンジャーで試す

オリジナルのBotができたので、Facebookメッセンジャーを使ってChatbotとして機能しているか確認していきましょう。

右上の「TEST THIS CHATBOT」をクリックします。

スクリーンショット 2018 01 20 23 16 15

すると、以下のようにFacebookログインの画面が出るのでログインします。

スクリーンショット 2018 01 20 23 16 27

その後で、先程の「TEST THIS CHATBOT」のボタンが「VIEW ON MESSANGER.COM」に変わっているので、クリックします。

スクリーンショット 2018 01 20 23 16 59

今度はFacebookメッセンジャーへのログイン画面が出るので、ログインします。

スクリーンショット 2018 01 20 23 17 09

これで、FacebookメッセンジャーのオリジナルBotのページが表示されます。試しに、メッセージを入力してみましょう。

スクリーンショット 2018 01 20 23 19 04

最初のランダムの挨拶で「お疲れ様です」が出てしまったので、少し変な会話になっていますが、想定通りの返答が返ってきていますね。

また、自分のFacebookページの右下にもMyBotのメッセンジャーが表示されていますので、通常のFacebookメッセンジャーと同じように入力できます。

スクリーンショット 2018 01 20 23 20 10

いろいろ設定を加えていけば、SiriのようなChatbotができそうですね。

最後に

いかかでしたか?自分のオリジナルのChatbotを作るのは面白いですし、開発面ではChatOpsに応用することが可能です。ではまた。

The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
Keid
Twitter のプロフィール

Keid

自由で楽しい世界を目指すフルスタックWebデベロッパー。 大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職後、新しい技術やスケールするビジネスが北米にある事に気づき、海外への挑戦を決意。全く英語ができなかっため、フィリピン留学およびカナダ留学を経て強制的に英語を上達させた。挑戦に終わりはない。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。
Keid
Twitter のプロフィール

最新記事 by Keid (全て見る)

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

  • WordPress上でBitcoinで寄付を募る方法

    Wikipediaなんかを見ていると毎回寄付してくれという表示が出ますよね。あれはかなりうざいわけですが、その甲斐があっ…

  • [tips][Kotlin] GradleでKotlin入門

    皆さん、お久しぶりです。Keidです。 気づくとかなり更新していませんでした。 え、何してたって?炎上案件に決まってるで…

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #1 開発環境準備編

    最近Electronが面白くて仕方がないです。なんてったって、Webの標準技術でデスクトップアプリが作れちゃうんですから…

  • [tips][Sublime Text]Sublime Text 3のショートカットを自作する方法

    Sublime Textのショートカットは「Preferences -> Key Bindings - Defau…

  • [tips][Perl] OLEを使ってPerlからOutlookのメールを送信する方法

    WindowsにはOLEオートメーションというWindowsのアプリケーションにアクセスするインターフェースがあります。…

カテゴリ : 技術 Tips & Tutorials タグ : chatbot, facebook

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

技術力と英語力を向上させて
あたなを次のステージへ引き上げるための無料メルマガ

Sponsored Links

About Author

Keid

自由で楽しい世界を目指すフルスタックWebデベロッパー。 大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職後、新しい技術やスケールするビジネスが北米にある事に気づき、海外への挑戦を決意。全く英語ができなかっため、フィリピン留学およびカナダ留学を経て強制的に英語を上達させた。挑戦に終わりはない。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • Herokuの無料dynoをスリープさせないで24時間稼働させる4つの方法
    Herokuの無料dynoをスリープさせないで24時間稼働させる4つの方法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • [tips][bat] バッチで明日の日付を計算する。
    [tips][bat] バッチで明日の日付を計算する。
  • PythonのためのVisual Studio Codeの設定方法
    PythonのためのVisual Studio Codeの設定方法
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • Heroku上にNginxでリバースプロキシを構築する方法
    Heroku上にNginxでリバースプロキシを構築する方法
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
Keid
Twitter のプロフィール

Keid

自由で楽しい世界を目指すフルスタックWebデベロッパー。 大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職後、新しい技術やスケールするビジネスが北米にある事に気づき、海外への挑戦を決意。全く英語ができなかっため、フィリピン留学およびカナダ留学を経て強制的に英語を上達させた。挑戦に終わりはない。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。
Keid
Twitter のプロフィール

最新記事 by Keid (全て見る)

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

  • WordPress上でBitcoinで寄付を募る方法

    Wikipediaなんかを見ていると毎回寄付してくれという表示が出ますよね。あれはかなりうざいわけですが、その甲斐があっ…

  • [tips][Kotlin] GradleでKotlin入門

    皆さん、お久しぶりです。Keidです。 気づくとかなり更新していませんでした。 え、何してたって?炎上案件に決まってるで…

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #1 開発環境準備編

    最近Electronが面白くて仕方がないです。なんてったって、Webの標準技術でデスクトップアプリが作れちゃうんですから…

  • [tips][Sublime Text]Sublime Text 3のショートカットを自作する方法

    Sublime Textのショートカットは「Preferences -> Key Bindings - Defau…

  • [tips][Perl] OLEを使ってPerlからOutlookのメールを送信する方法

    WindowsにはOLEオートメーションというWindowsのアプリケーションにアクセスするインターフェースがあります。…

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2021 Keid - Casual Developers Notes