Facebook Messenger Platformで画像検索BOTを作ってみた

こんにちは、エンジニア永嶋です。

先日、「LINE BOT APIを使って翻訳BOTを作ってみたよ！！」という記事でLINE BOTについて書きましたが今回はFacebookのBOT APIであるところのFacebook Messenger Platformを使って画像検索BOTを作ってみたのでまとめました！

アプリの登録

Facebookのアプリ登録画面にいってアプリを登録します。アプリが登録できたら左側のメニューの「Messenger」を開きます。

今回は個人で運営しているサイトのService Safariのページに組み込みました。

Webhookの設定

メッセージが来たときにキックされるエンドポイントを設定します。

「Subscription Fields」はとりあえず「messages」だけで大丈夫です。設定を保存しようするとFB側から確認のためのリクエストが指定したURLに飛んできます。以下のようなプログラムを書いて認証をパスします。

def facebook
    case request.request_method
    when "GET"
        render json: params["hub.challenge"], status: :ok
end

ページトークンを使ってアプリをSubscribeする

設定ページの上部にある「Token生成」から組み込みたいページのaccess tokenを生成してコマンドプロンプトから以下のコマンドを実行します。tokenは生成したtokenに置き換えます。これでページに使うアプリを設定することができます。

curl -ik -X POST "https://graph.facebook.com/v2.6/me/subscribed_apps?access_token=<token>"

メッセージを受け取って返すプログラムを作る

ここまででページ宛にメッセージ来ると指定したエンドポイントに対してPOSTリクエストが飛んでくるようになったはずです。そのリクエストをフックにメッセージを送信プログラムを書きます。今回は受け取った文字列の画像を検索して返すBOTを作りました。今回はFacebook側で準備されているtemplateをつかってサムネイル等が表示されるようにしました。

def facebook

    case request.request_method
    when "GET"
        render json: params["hub.challenge"], status: :ok

    when "POST"
        request_headers = {"Content-Type": "application/json"}
        params[:entry].each do |ent|
            ent[:messaging].each do |message|
                res = JSON.parse(RestClient.get(URI.encode("https://api.photozou.jp/rest/search_public.json?keyword=#{message[:message][:text]}&limit=3")))
                elements = []
                res["info"]["photo"].each.with_index(1) do |photo, index|
                    elements << {
                        title: photo["photo_title"],
                        image_url: photo["image_url"],
                        subtitle: "「#{message[:message][:text]}」の検索結果#{index}",
                        buttons: [
                            {
                                type: "web_url",
                                url: photo["url"],
                                title: "View Web Page",
                            }
                        ]
                    }
                end
                message_data = {
                    attachment: {
                        type: "template",
                        payload: {
                            template_type: "generic",
                            elements: elements
                        }
                    }
                }
                request_params = {
                    recipient: {id: message[:sender][:id]},
                    message: message_data
                }
                RestClient.post "https://graph.facebook.com/v2.6/me/messages?access_token=#{ENV["SERVICE_SAFARI_PAGE_TOKEN"]}", request_params.to_json, request_headers
            end
        end
        render json: [], status: :ok

    end
end