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

1. facebook messenger botの作り方と
作ってみた
Takaaki Kusumoto
@kussuue
BOT祭り！LT会！2016/05/13 @ カラビナテクノロジー

2. 自己紹介

3. Takaaki Kusumoto
フリーランスエンジニア
Blog : http://kussuue.com/
twitter : @kussuue
1982年生まれ。 Webサイト作ったり、Android,iOSアプリ作ったり
システムいじったりする人。
今年3月、東京→福岡へ移住(Uターン)しました。
Android , iOSアプリリリースしたりしています！
アプリ名 : eigoApp
http://eigoapp-welcome.kussuue.com/

4. ところで
「2016年はチャットbotの年になる」
引用：http://www.gizmodo.jp/2016/04/facebook_bot.html
とか言われてますが、、、

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

6. 調べてみた。

7. まずは、

8. 公式ドキュメント

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

10. 公式ドキュメント読めばいいのはわか
った！
けど面倒だから
手取り早くざっくり流れを知りたい！

11. messenger botの作り方

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

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

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

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

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

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

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

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

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

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

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

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

24. ➤ HerokuとかAWSとか、、

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

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

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

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

29. ➤ 情報を入力します
コールバックURL : https://<APP NAME>.herokuapp.com/callback
トークンを確認 : 自分で文字列を設定
フォロー入力欄 : messagesにチェック

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

31. ➤ ターミナルを立ち上げて、以下コマンドを実行します
<Macの場合>
curl -ik -X POST “https://graph.facebook.com/v2.6/me/subscribed_apps?access_t
<Windowsの場合>
curl.exe -ik -X POST "https://graph.facebook.com/v2.6/me/subscribed_apps?acce

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

33. 作ってみた

34. ➤ YouTube動画を検索するbot

35. ➤ 開発環境
➤ サーバー：heroku
➤ 言語：php
➤ API：YouTube Data API (v3)

36. ソースコード

37. 時間の都合上、割愛www

38. ➤ demo

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

40. ➤ facebookによる審査が必要
ポリシーに準拠しているもののみ承認される
➤ 個人的に楽しむbotならば気軽に作って遊べる！
➤ 一般公開予定ならば公式ドキュメントのポリシーなどをチェックしてから作成したほうがいいかも
。
これ！
<公式ドキュメント>
https://developers.facebook.com/docs/messenger-platform/app-review

41. 作ってみて感じた事など

42. ・Generic Message templateの利用
テンプレートを使ったほうが見た目も操作性もいい。
・Buttonの利用
・フレンドリーな会話、対話
botだからこそ、人間味のあるフレンドリーなメッセージ文がいい。
何気ない会話のやり取りもできるといい。
<テンプレートあり><テンプレートなし>
←これ

43. ・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…

44. 参考サイト

45. ・公式ドキュメント
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

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