Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

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

2018年2月5日 By KD コメントを書く

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.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。
KD
Twitter のプロフィール

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

  • 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

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手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」と怒られた時の対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • 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」と怒られた時の対処法
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
    SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • Go言語のためのVisual Studio Codeの設定方法
    Go言語のためのVisual Studio Codeの設定方法

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

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

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

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

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。
KD
Twitter のプロフィール

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

  • 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 © 2023 KD - Casual Developers Notes