facebook messenger platform で始める bot 開発

Facebook Messenger Platformで始めるBot開発

尾崎翔太

はじめに

Facebook Messenger Platform を

やったことがあるひと

Bot開発したことがある

プログラミングしたことがある

今日に向けてアイデアを考えてきた

メンターも付くので大丈夫！がんばってみましょう！

目次

なぜBot開発ハッカソンなのか

Facebook Messenger Platform のしくみ

開発時のサーバについて

Facebook Messenger Platform を利用した「オウム返しBot」までの道


プラットフォームが盛り上がってきている

LINE, Facebook, Twitter, Slack, …etc

簡単なサポートやエンターテイメントとしてボットを

提供する企業が出てきている

機械の発展で高度なこともできるようになってきている

技術×プラットフォームという土台が整いつつある今がアツい！

Facebook Messenger Platform とは？

参照：https://developers.facebook.com/products/messenger/


Facebook Messger 上で動くボット

簡単なテキストメッセージだけでなく、用意されているテンプレート沿ったメッセージやボタンのあるメッセージを送ることができる

Facebook Messenger Platform の仕組み

メッセージはこのように流れていきます

メッセージ送信メッセージ送信


画像などの処理をしたい場合はFacebookに対して取得しにいく必要があります

画像送信

画像があるよ

画像を取得


メッセージの送信は真逆になるだけです

メッセージ送信メッセージ送信


画像などのメディアがある場合も同じです

画像である旨のメッセージを送るとFacebookが取得しに来ます

画像送信

画像があるよ

画像を取得

余談：しっかりとBotを運用するならば？

余談：しっかりとBotを運用するならば？

受付窓口キュー

ボット処理バッチ


サーバを用意してあります。

オウム返しをするBotをサンプルとして設置済み。

必要なものの準備：ツール編

Windows

SSH：PuTTy

FTP：WinSCP

Mac/Linux

SSH：ターミナル（標準で入っています）

FTP：CyberDuck / FileZilla

配られている情報でサーバにログインできるか確認してください

Facebookページ作成

URL：https://www.facebook.com/pages/create

ページタイプ：※ 何でもOK

※ その他はスキップ

必要なものの準備：Facebookページの作成

必要なものの準備：Facebookアプリの作成

https://developers.facebook.com/ へアクセス

1. 「マイアプリ」からアプリ作成画面へ移行

2. 「新しいアプリを作成」からアプリ追加


1. 「表示名」を入力（なんでもOK）

2. 「連絡先メールアドレス」入力

3. 「カテゴリ」を選択（一番近いカテゴリ選択）


必要なものの準備：Facebookアプリの設定

「製品追加」からMessangerを追加


ページアクセストークン生成

Facebookページ：先ほど作ったページを選択

※このトークンはあとで使うのでどこかにコピーしておいてください


アプリトークン確認

設定 → ベーシック → アプリID / app secret

※このトークンはあとで使うのでどこかにコピーしておいてください

必要なものの準備：WebhookのためのBotの設定

ページアクセストークンの設定

好きな言語を選んで、ページアクセストークンにコピーした値を設定する


コールバックトークンの設定

好きな言語を選んで、コールバックトークンに好きな値を設定する

デフォルト： my_callback_token


アプリトークンの設定

好きな言語を選んで、アプリトークンに確認した値を設定する


Botの設定

好きな言語を選んで、コールバックトークンに好きな値を設定する

デフォルト： my_callback_token

必要なものの準備：Botの起動

Botの起動

SSH接続して選んだ言語のBotを起動する

言語コマンド

PHP php –S localhost:ポート番号 index.php

Ruby bundler exec shotgun –p ポート番号

Python python3 main.py –p ポート番号

Node.js npm start -- -p ポート番号


WebHook設定

コールバックURL：※配られているURL

トークン：※サーバ側で設定したトークン(任意の文字列)

Botの動作確認

Botにメッセージを送ってみましょう

Botプログラムの簡単な説明

トークンの検証を行っていますメッセージの改ざんをチェックするためです

受信したメッセージにテキストメッセージが含まれている場合

その文言をテキストメッセージ送信処理します

それ以外の場合 Not supported という文言を送信します

テキストメッセージを送信する処理しかありません画像や動画、ボタンなどを送信したい場合は自分で作りましょう☆

説明おわり

自由な発想で、身の回りの人の課題が解決できるような

Botが出来上がることを楽しみにしています！

facebook messenger platform で始める bot 開発

Engineering