【エンジニアじゃなくてもできる】一切お金をかけずにブラウザ上で10分でFacebook Messenger Botを作る方法
はじめに
Facebook Messenger Apiが開放されて、Bot作ってみた系を沢山見かけるようになりましたが、作り方がよくわからないという方も結構らっしゃるのではないでしょうかでしょうか。 Messenger Botを動かすには、プログラムを書く必要があるのは勿論のことながら、 サーバーを用意しなきゃだったり、 SSL証明書を用意しなきゃだったり、 等々色々やることがあり、この辺の知識がない状態で必要な環境を自分で用意するとなると結構骨が折れます。(とはいっても調べながらやればなんとななるとは思いますが!) 色々調べてみたところ、技術的な前提知識がなくてもとりあえずMessengerで遊べる方法があったので、まとめてみました。 実現したいゴールは先日書いたこちらのLINE版の記事と一緒ですが、
【エンジニアじゃなくてもできる】一切お金をかけずにブラウザ上で10分でLINE BOTを作る方法 – FJMK.jp
【宣伝】Botに関する情報共有用のFacebookグループを作ってみました。 記事の内容についてやBotについての質問があれば、ここに書いていただければ分かる範囲でお答えするので、興味がある方は是非入って下さい! こちらです ↓↓↓
Posted by fjmk.jp on Sunday, April 17, 2016
この記事で目指すゴール
プログラミング未経験/初心者の方でも、お金をかけずに最短距離でとりあえず動くFacebook Messenger Botを作って遊ぶことをゴールとして記事を書きました。 こんな風に、ある文字列を送信したら、予め決めておいた返事が返ってくるようなBotを作ります。
利用するサービスの都合上、マイナーな言語を使うので正直ベストな方法ではありませんが、難しいことをしなくてもこの通りやればMessenger Botをすぐに作れるよくらいに考えていただければと思います。 ※ 無料サービスを使うので、7日間しか動かないです (作りなおせばまた7日間使えます) ※ エンジニアじゃなくても分かるとかいたものの、多少はITの前提知識がないと厳しいかもしれないです…笑
Facebook Messenger APIでできること
この記事を見ておけば、Facebook Messenger APIでできることを一通り把握できると思います。今回はこの辺を読まなくても作れますが、時間があるときにでも読んでみてください。
Facebook Messenger Platform BETAでできる全ての事を試してみた(LINE BOT APIとの比較あり) - Qiita
Messenger Platform
作り方
それでは順を追って説明していきます。 Facebook Pageの作成と、Facebook Appの作成、そしてWebscriptというサービスにコードを書いてAPIを作成します。
WebScript登録
上記の通り、Facebook Messenger Botを動かすには、BotのAPIを用意する必要があります。 普通にやろうとすると自分でサーバーを立てたり環境構築をしたりSSL証明書を取得したりと面倒なので、今回はWebScriptというサービスを使います。 webscript - scripting on the web Lua言語というあまり使われない言語ですが、基本的な書き方については他の言語と大して変わりません。 まず、webscriptにアクセスしてください。
webscript - scripting on the web
右上のlogin/signupをクリック
sign up for free を押します。
メールアドレスとパスワードを入力して Sign Upをクリック
これでwebscriptにアカウント登録がされました。右上のLogin/Signupを押してログインに進みます。 (正しく入力しててもこんな風にエラーがでてしまうことがあるのですが、気にせずログインできるか試してみてください。)
ログインしたら利用規約確認画面が出るのでAcceptをクリック。 それでは実装に入っていきます。 `
利用規約を承諾するとこの画面になると思うので(なってなかったらScriptと書いてある上部のタブを押してください)、左側にある “Create New Script"をクリックします。
するとこんなポップアップが出るので、お好きなアルファベット文字列を入力してください 。ここではmessenger-exampleとしています。(他の人と被った文字列は使えません) これが今回作るAPIのURLになります。 入力したら"Create"を押して下さい。
こちらのコードを入力して、saveを押してください。
-- 認証情報 設定内容に応じて書き換えてください。 messenger_token = 'tokenexample' -- Facebookとの疎通確認時に使うトークン(webhookで設定したものです) access_token = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' -- 利用するFacebookページのアクセストークン -- GETリクエストがきたら、疎通確認を実行 if request.method == 'GET' then -- 自分で設定したtokenとFacebookからリクエストされたtokenが一致していたら、hub.challengeパラメータに入っている値を返す(これが返されてるかどうかで疎通確認が行われます) if request.query['hub.verify_token'] == messenger_token then return request.query['hub.challenge'] else return false end -- POSTリクエストがきたら、メッセージを返す処理を実行 elseif request.method == 'POST' then -- 受信したリクエストの中の、メッセージに関する情報をmessaging変数に代入 messaging = json.parse(request.body).entry[1].messaging[1] -- messagging内にmessageというパラメータとmessage.testというパラメータが入っていたらメッセージ解析処理に入る if messaging.message and messaging.message.text then -- 変数received_messageに空欄を一旦代入(メッセージ) received_message = messaging.message.text -- 変数received_messageに受信したメッセージ内容を代入 --- メッセージを決める処理 if received_message == 'おはよう' then response_message = 'おはようございます!今日もがんばりましょう!' --- 変数received_messageの中身が「おはよう」だったら、「おはようございます!今日もがんばりましょう!」を変数response_messageに代入 (以下コピペで条件を追加していけます) elseif received_message == 'おやすみ' then response_message = '今日も一日お疲れ様でした' elseif received_message == 'やられたらやり返す' then response_message = '倍返しだ!' else --- 上のどの条件にも該当しなかったら、変数response_messageに「[送信内容]? ちょっとなに言ってるかわからない」を代入 \n は改行するコードです。 response_message = received_message .. '? \nちょっとなに言ってるかわかんない' end else -- messagging内にmessageというパラメータとmessage.testというパラメータが入っていなかったら(=スタンプや位置情報だったら)以下のメッセージを代入 response_message = '正しく入力して下さい!' end -- Facebook側に返すデータ作成 data = { ['recipient'] = { ['id'] = messaging.sender.id }, ['message'] = { ['text'] = response_message }, } -- メッセージ送信処理 local response = http.request { method = 'POST', url = 'https://graph.facebook.com/v2.6/me/messages?access_token=' .. access_token, data = json.stringify(data), headers = { ['Content-Type'] = 'application/json; charser=UTF-8', } } end
-- 変数received_messageに受信したメッセージ内容を代入
こんな風に所々解説を書いていますが、– (ハイフン2個)に続く文字列は"コメント"といってプログラム上では無視されます。 (Lua言語では – ですが、他の言語では // や # や / / が使われることが多いです)
Facebook Page作成
まず以下のリンクに飛んでFacebookページを作ります。
Facebookページを作成
ページの種類はどれでもいいのですが、今回はBrand or Productを選択します。 (記事を書いてから、MessnegerではなくMessngerになってることに気づきました笑)
ページのタイプ(ここではApp Pageを選択)とページ名(ここでは Messenger Bot Test に)を選択し、Get Startedを押します。
入力してもいいですが、今回はテストなのでSkipします。
アイコン選択も同様にSkip。 ちなみに、ここで選択した画像がBotのアイコンになるので、設定したい方は設定してください。
お気に入り追加するかどうか設定。こちらはお好きにどうぞ。
対象ユーザーの設定。入力してもいいですが、今回はスキップします。
これでFacebookページができました。
FB App登録
次にFacebookアプリを作成します。 まず、こちらのページにアクセスしてください。
Quick Starts - 開発者向けFacebook
どのプラットフォーム上でのFacebookのアプリを作るかきかれるので、wwwを選択してください。(どれでも大丈夫といえば大丈夫ですが、今回はこれでいきます)
アプリ名を適当に入力してCreate New Facebook App IDをクリック。
メールアドレスを入力して、Categoryを選択。 どれでもいいですが、今回はApps for Pagesを選択しました。 Create App IDをクリック。。
こんな画面に遷移するので、下にスクロールしてください。
webサイトのURLを聞かれるので、URLを入力します。 自分のサイトを持っていたら自分のサイトのURLで。なければ適当なURLでも大丈夫です。
これでFacebookアプリができたので、Skip To Developer Dashboardをクリックすると、アプリのダッシュボードに飛びます。
これでFacebook Appができました。 ダッシュボードはこちらから飛べるので、見失ったらこちらをクリックしてください。
All Apps - Facebook for Developers- - -
疎通確認
Botを使うにはFacebook Appと自作APIの間でリクエストが通るかどうかチェックする必要があるので、その作業を行います。
まず、Facebook Appのダッシュボードでmessengerタブを開く(左下のMessengerを押して下さい)
Get Startedをクリック
webhooksをクリックします。
webscriptで設定したURLと、tokenとして適当な文字列(ここではtokenexample)を入力し、messagesにチェックを入れVerify and Saveを押します。 もしここでtokenexampleから他の文字列に変えていたら、webscript上の
-- 認証情報 設定内容に応じて書き換えてください。
messenger_token = 'tokenexample' -- Facebookとの疎通確認時に使うトークン(webhookで設定したものです)
access_token = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' -- 利用するFacebookページのアクセストークン
ここでtokenexampleとなっているところも変更してください。 この時に裏で設定したCallback URLに対してGETリクエストが飛ばせれ、webscriptに入力した
-- GETリクエストがきたら、疎通確認を実行
if request.method == 'GET' then
-- 自分で設定したtokenとFacebookからリクエストされたtokenが一致していたら、hub.challengeパラメータに入っている値を返す(これが返されてるかどうかで疎通確認が行われます)
if request.query['hub.verify_token'] == messenger_token then
return request.query['hub.challenge']
else
return false
end
この部分が呼ばれ、Facebookと自作のAPIが正しく疎通できているか確認されます。
問題なく疎通確認できたらこの通りCmpleteが表示されるので、次はその下のSelect a Pageで今回作ったFacebook Pageを選択
こんなダイアログがでるのでOkayをクリック。
次もOkayをクリック。
ページが選択されたので、Subscribeをクリックします。
最後に、ダッシュボード上部のToken Generationの欄の Select a Pageで今回作ったFacebookページを選択し、表示された長い文字列をコピーします。(クリックするとコピーされます。) そして、webscriptの編集画面で
-- 認証情報 設定内容に応じて書き換えてください。 messenger_token = 'tokenexample' -- Facebookとの疎通確認時に使うトークン(webhookで設定したものです) access_token = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' -- 利用するFacebookページのアクセストークン
ここのXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXとなっているところに貼り付けてください。 そして、Saveを押します。
動作確認
ここまで上手くいっていればBot動くはずなので、動作確認をしようと思います。 まず今回作ったFacebook ページにアクセスしてください。
Messageをクリック
チャットボックスが表示されるので何か文字を入力してください。
完成
返事がきたら成功です!
スマホでも勿論動作します。
if messaging.message and messaging.message.text then -- 変数received_messageに空欄を一旦代入(メッセージ) received_message = messaging.message.text -- 変数received_messageに受信したメッセージ内容を代入 --- メッセージを決める処理 if received_message == 'おはよう' then response_message = 'おはようございます!今日もがんばりましょう!' --- 変数received_messageの中身が「おはよう」だったら、「おはようございます!今日もがんばりましょう!」を変数response_messageに代入 (以下コピペで条件を追加していけます) elseif received_message == 'おやすみ' then response_message = '今日も一日お疲れ様でした' elseif received_message == 'やられたらやり返す' then response_message = '倍返しだ!' else --- 上のどの条件にも該当しなかったら、変数response_messageに「[送信内容]? ちょっとなに言ってるかわからない」を代入 \n は改行するコードです。 response_message = received_message .. '? \nちょっとなに言ってるかわかんない' end else -- messagging内にmessageというパラメータとmessage.testというパラメータが入っていなかったら(=スタンプや位置情報だったら)以下のメッセージを代入 response_message = '正しく入力して下さい!' end
コードのこの辺をいじるとメッセージの条件を変えられるので色々いじって遊んでみましょう (変更したらsaveを押すのを忘れずに!)
最後に
作ったBotはちゃんと動きましたでしょうか? webscriptはあくまでプロトタイプ用なので、これが上手くうごいたら次はサーバーを用意するなりして他の言語 (rubyとかphpだと情報源が多そうです)でもうちょっと高度なBot作成も試してみてください。 また、Botに関する情報共有用のFacebookグループを作ってみました。 記事の内容についてやBotについての質問があれば、ここに書いていただければ分かる範囲でお答えするので、興味がある方は是非入って下さい! こちらです ↓↓↓
Posted by fjmk.jp on Sunday, April 17, 2016