#FJMK blog

citrus+というバンドをやってます。 http://citrusplus.jp 平日昼間はインターネットの会社@紀尾井町でエンジニアやってます。

【エンジニアじゃなくてもできる】一切お金をかけずにブラウザ上で10分でFacebook Messenger Botを作る方法

f:id:sfjmk:20170903180610p:plain

はじめに

Facebook Messenger Apiが開放されて、Bot作ってみた系を沢山見かけるようになりましたが、作り方がよくわからないという方も結構らっしゃるのではないでしょうかでしょうか。 Messenger Botを動かすには、プログラムを書く必要があるのは勿論のことながら、 サーバーを用意しなきゃだったり、 SSL証明書を用意しなきゃだったり、 等々色々やることがあり、この辺の知識がない状態で必要な環境を自分で用意するとなると結構骨が折れます。(とはいっても調べながらやればなんとななるとは思いますが!) 色々調べてみたところ、技術的な前提知識がなくてもとりあえずMessengerで遊べる方法があったので、まとめてみました。 実現したいゴールは先日書いたこちらのLINE版の記事と一緒ですが、

【エンジニアじゃなくてもできる】一切お金をかけずにブラウザ上で10分でLINE BOTを作る方法 – FJMK.jp

【宣伝】Botに関する情報共有用のFacebookグループを作ってみました。 記事の内容についてやBotについての質問があれば、ここに書いていただければ分かる範囲でお答えするので、興味がある方は是非入って下さい! こちらです ↓↓↓

この記事で目指すゴール

プログラミング未経験/初心者の方でも、お金をかけずに最短距離でとりあえず動く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を動かすには、BotAPIを用意する必要があります。 普通にやろうとすると自分でサーバーを立てたり環境構築をしたりSSL証明書を取得したりと面倒なので、今回はWebScriptというサービスを使います。 webscript - scripting on the web Lua言語というあまり使われない言語ですが、基本的な書き方については他の言語と大して変わりません。 まず、webscriptにアクセスしてください。

webscript - scripting on the web

enter image description here

右上のlogin/signupをクリック

enter image description here

sign up for free を押します。

enter image description here

メールアドレスとパスワードを入力して Sign Upをクリック

enter image description here

これでwebscriptにアカウント登録がされました。右上のLogin/Signupを押してログインに進みます。 (正しく入力しててもこんな風にエラーがでてしまうことがあるのですが、気にせずログインできるか試してみてください。)

enter image description here

enter image description here

ログインしたら利用規約確認画面が出るのでAcceptをクリック。 それでは実装に入っていきます。 `

enter image description here

利用規約を承諾するとこの画面になると思うので(なってなかったらScriptと書いてある上部のタブを押してください)、左側にある “Create New Script"をクリックします。

enter image description here

するとこんなポップアップが出るので、お好きなアルファベット文字列を入力してください 。ここではmessenger-exampleとしています。(他の人と被った文字列は使えません) これが今回作るAPIのURLになります。 入力したら"Create"を押して下さい。

enter image description here

こちらのコードを入力して、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ページを作成

Facebook Page新規作成

ページの種類はどれでもいいのですが、今回はBrand or Productを選択します。 (記事を書いてから、MessnegerではなくMessngerになってることに気づきました笑)

Facebook Page新規作成

ページのタイプ(ここではApp Pageを選択)とページ名(ここでは Messenger Bot Test に)を選択し、Get Startedを押します。

Facebook Page About設定

入力してもいいですが、今回はテストなのでSkipします。

Facebook Page アイコン選択

アイコン選択も同様にSkip。 ちなみに、ここで選択した画像がBotのアイコンになるので、設定したい方は設定してください。

Facebook Page お気に入り追加

お気に入り追加するかどうか設定。こちらはお好きにどうぞ。

Facebook Page Audience

対象ユーザーの設定。入力してもいいですが、今回はスキップします。

Facebook Page 作成完了

これでFacebookページができました。


FB App登録

次にFacebookアプリを作成します。 まず、こちらのページにアクセスしてください。

Quick Starts - 開発者向けFacebook

FB App作成初期画面

どのプラットフォーム上でのFacebookのアプリを作るかきかれるので、wwwを選択してください。(どれでも大丈夫といえば大丈夫ですが、今回はこれでいきます)

FB App名前設定画面

アプリ名を適当に入力してCreate New Facebook App IDをクリック。

FB App連絡先Page登録画面

メールアドレスを入力して、Categoryを選択。 どれでもいいですが、今回はApps for Pagesを選択しました。 Create App IDをクリック。。

こんな画面に遷移するので、下にスクロールしてください。

webサイトのURLを聞かれるので、URLを入力します。 自分のサイトを持っていたら自分のサイトのURLで。なければ適当なURLでも大丈夫です。

FB App 初期設定完了画面

これでFacebookアプリができたので、Skip To Developer Dashboardをクリックすると、アプリのダッシュボードに飛びます。

FB App ダッシュボード

これで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 ページにアクセスしてください。

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についての質問があれば、ここに書いていただければ分かる範囲でお答えするので、興味がある方は是非入って下さい! こちらです ↓↓↓