Facebook Messenger Platform で始める Bot 開発

Facebook Messenger Platformで始めるBot開発

尾崎 翔太

はじめに

Facebook Messenger Platform を

やったことがあるひと

Bot開発したことがある

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

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

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

目次

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

Facebook Messenger Platform のしくみ

開発時のサーバについて

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

目次

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

Facebook Messenger Platform のしくみ

開発時のサーバについて

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

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

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

LINE, Facebook, Twitter, Slack, …etc

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

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

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

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

目次

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

Facebook Messenger Platform のしくみ

開発時のサーバについて

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

Facebook Messenger Platform とは？

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

Facebook Messenger Platform とは？

Facebook Messger 上で動くボット

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

Facebook Messenger Platform とは？

Facebook Messenger Platform の仕組み

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

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

Facebook Messenger Platform の仕組み

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

画像送信

画像があるよ

画像を取得

Facebook Messenger Platform の仕組み

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

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

Facebook Messenger Platform の仕組み

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

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

画像送信

画像があるよ

画像を取得

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

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

受付窓口 キュー

ボット処理バッチ

目次

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

Facebook Messenger Platform のしくみ

開発時のサーバについて

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

開発時のサーバについて

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

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

目次

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

Facebook Messenger Platform のしくみ

開発時のサーバについて

Facebook Messenger Platform を利用した「オウム返し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. 「新しいアプリを作成」からアプリ追加

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

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

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

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

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

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

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

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

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

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

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

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

アプリトークン確認

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

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

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

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

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

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

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

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

デフォルト： my_callback_token

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

アプリトークンの設定

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

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

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 ポート番号

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

WebHook設定

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

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

Botの動作確認

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

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

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

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

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

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

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

説明おわり

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

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