facebook messenger bot の作り方と作ってみた

Takaaki Kusumoto@kussuue

BOT 祭り！ LT 会！ 2016/05/13 @ カラビナテクノロジー

自己紹介

Takaaki Kusumoto

フリーランスエンジニアBlog : http://kussuue.com/

twitter : @kussuue

1982 年生まれ。 Web サイト作ったり、 Android,iOS アプリ作ったりシステムいじったりする人。今年 3 月、東京→福岡へ移住 (U ターン ) しました。

Android , iOS アプリリリースしたりしています！アプリ名 : eigoApp

http://eigoapp-welcome.kussuue.com/

ところで

「 2016 年はチャット bot の年になる」引用： http://www.gizmodo.jp/2016/04/facebook_bot.html

とか言われてますが、、、

facebook bot ってどうやって作るの？

調べてみた。

まずは、

公式ドキュメント

➤ https://developers.facebook.com/docs/messenger-platform

公式ドキュメント読めばいいのはわかった！

けど面倒だから手取り早くざっくり流れを知りたい！

messenger bot の作り方

➤ 1,Facebook developer 登録➤ 2,Facebook ページ作成➤ 3,Facebook アプリ作成➤ 4,Messenger 有効化、アクセストークン取得➤ 5, サーバーを用意する➤ 6, プログラム＆デプロイ➤ 7,Facebook Webhooks 設定➤ 8, アプリ登録➤ 9 ，完成

手順

➤ 1,Facebook developer 登録➤ 2,Facebook ページ作成➤ 3,Facebook アプリ作成➤ 4,Messenger 有効化、アクセストークン取得➤ 5, サーバーを用意する➤ 6, プログラム＆デプロイ➤ 7,Facebook Webhooks 設定➤ 8, アプリ登録➤ 9 ，完成

➤ こちらのサイトから開発者登録します！　　　　　　　　　　https://developers.facebook.com/

➤ 1,Facebook developer 登録➤ 2,Facebook ページ作成➤ 3,Facebook アプリ作成➤ 4,Messenger 有効化、アクセストークン取得➤ 5, サーバーを用意する➤ 6, プログラム＆デプロイ➤ 7,Facebook Webhooks 設定➤ 8, アプリ登録➤ 9 ，完成

➤ facebook のアカウントメニューから「 facebook ページを作成」します。　　　　　　　　　

➤ 1,Facebook developer 登録➤ 2,Facebook ページ作成➤ 3,Facebook アプリ作成➤ 4,Messenger 有効化、アクセストークン取得➤ 5, サーバーを用意する➤ 6, プログラム＆デプロイ➤ 7,Facebook Webhooks 設定➤ 8, アプリ登録➤ 9 ，完成

➤ facebook developer ページのアカウントメニューから「新しいアプリを追加」します。　　　　　　　　　

➤ 1,Facebook developer 登録➤ 2,Facebook ページ作成➤ 3,Facebook アプリ作成➤ 4,Messenger 有効化、アクセストークン取得➤ 5, サーバーを用意する➤ 6, プログラム＆デプロイ➤ 7,Facebook Webhooks 設定➤ 8, アプリ登録➤ 9 ，完成

➤ facebook developer ページのアプリ設定画面で「 messenger 」を選択します。　　　　　　　　　

➤ Messenger プラットフォームウィザードに従い、進めます！　　　　　　　　→ Messenger 有効化されます

➤ さきほど作成した facebook ページを選択してページアクセストークンを取得します！

➤ 1,Facebook developer 登録➤ 2,Facebook ページ作成➤ 3,Facebook アプリ作成➤ 4,Messenger 有効化、アクセストークン取得➤ 5, サーバーを用意する➤ 6, プログラム＆デプロイ➤ 7,Facebook Webhooks 設定➤ 8, アプリ登録➤ 9 ，完成

➤ Heroku とか AWS とか、、

➤ 1,Facebook developer 登録➤ 2,Facebook ページ作成➤ 3,Facebook アプリ作成➤ 4,Messenger 有効化、アクセストークン取得➤ 5, サーバーを用意する➤ 6, プログラム＆デプロイ➤ 7,Facebook Webhooks 設定➤ 8, アプリ登録➤ 9 ，完成

プログラム作って、サーバーにデプロイします

➤ 1,Facebook developer 登録➤ 2,Facebook ページ作成➤ 3,Facebook アプリ作成➤ 4,Messenger 有効化、アクセストークン取得➤ 5, サーバーを用意する➤ 6, プログラム＆デプロイ➤ 7,Facebook Webhooks 設定➤ 8, アプリ登録➤ 9 ，完成

➤ デプロイ後に facebook developer ページから Webhooks を設定します

➤ 情報を入力しますコールバック URL : https://<APP NAME>.herokuapp.com/callback

トークンを確認 : 自分で文字列を設定フォロー入力欄 : messages にチェック

➤ 1,Facebook developer 登録➤ 2,Facebook ページ作成➤ 3,Facebook アプリ作成➤ 4,Messenger 有効化、アクセストークン取得➤ 5, サーバーを用意する➤ 6, プログラム＆デプロイ➤ 7,Facebook Webhooks 設定➤ 8, アプリ登録➤ 9 ，完成

➤ ターミナルを立ち上げて、以下コマンドを実行します

<Mac の場合 >curl -ik -X POST “https://graph.facebook.com/v2.6/me/subscribed_apps?access_token=＜ PAGE_ACCESS_TOKEN ＞”<Windows の場合 >curl.exe -ik -X POST "https://graph.facebook.com/v2.6/me/subscribed_apps?access_token= ＜ PAGE_ACCESS_TOKEN ＞ "

➤ 1,Facebook developer 登録➤ 2,Facebook ページ作成➤ 3,Facebook アプリ作成➤ 4,Messenger 有効化、アクセストークン取得➤ 5, サーバーを用意する➤ 6, プログラム＆デプロイ➤ 7,Facebook Webhooks 設定➤ 8, アプリ登録➤ 9 ，完成

作ってみた

➤ YouTube 動画を検索する bot

➤ 開発環境➤ サーバー： heroku

➤ 言語： php

➤ API ： YouTube Data API (v3)

ソースコード

時間の都合上、割愛 www

➤ demo

作った bot を一般公開するには・・・

➤ facebook による審査が必要 ポリシーに準拠しているもののみ承認される

➤ 個人的に楽しむ bot ならば気軽に作って遊べる！➤ 一般公開予定ならば公式ドキュメントのポリシーなどをチェックしてから作成したほうがいいかも。

これ！

< 公式ドキュメント >

https://developers.facebook.com/docs/messenger-platform/app-review

作ってみて感じた事など

・ Generic Message template の利用テンプレートを使ったほうが見た目も操作性もいい。

・ Button の利用

・フレンドリーな会話、対話bot だからこそ、人間味のあるフレンドリーなメッセージ文がいい。何気ない会話のやり取りもできるといい。

< テンプレートあり >< テンプレートなし >

← これ

・ facebook ボットエンジンの利用facebook ボットエンジン * を利用して bot の話す内容を教育する。送受信 API と併用可。※ 現在 β 版http://venturebeat.com/2016/04/12/facebooks-bot-engine-lets-you-teach-chatbots-what-to-say-with-ai/

・定期的なメッセージ送信定期的に bot からメッセージを送り、そこからユーザーのアクションを期待したほうがいいかもしれない。 ( アクティブユーザー獲得 )

e.x.) web サイトにアクセスする。買い物する。 etc…

参考サイト

・公式ドキュメントhttps://developers.facebook.com/docs/messenger-platform

・ Facebook が、開発者向けの年次カンファレンス「 F8 」で発表した新サービス・新機能を一挙紹介http://thebridge.jp/2016/04/everything-facebook-announced-at-f8-2016-so-far

・ジャスト 30 分！ FB メッセンジャー bot をとりあえず作ってみる手順まとめ - BITA デジマラボhttps://bita.jp/dml/facebookbot_exp

・ Facebook Messenger Bot を使って地震情報を取得する Bot を作成https://www.sho-yamane.me/entry/2016/04/21/180049

・ Facebook Messenger Platform で画像検索 BOT を作ってみた | ITANDI Blog

http://tech.itandi.co.jp/2016/04/facebook-bot/

・ Facebook Messenger BOT の作り方 - 【 metabirds 公式】 metabirds (Botbird/SLMaMe) HELP

http://helpblog.slmame.com/e1578731.html

ありがとうございました。