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

Messenger

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

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

アプリの登録

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

Service Safari   開発者向けFacebook

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

Webhookの設定

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

12057143_211110782612505_894181129_n

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

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

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

Service Safari   開発者向けFacebook

設定ページの上部にある「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

完成

テキストを打つとちゃんと画像の検索結果が返ってきます。

20160414040249 2

まとめ

Facebook Messenger Platformを使って画像検索BOTを作ってみました。リリースするためにFacebook側の審査を通さないいけないようで、これが動画の提出とかがあってなかなか手強そうです。

APIの完成度としてはLINEと比べて即実戦投入できそう感があります。将来的にできることは大きくは変わってこないと思いますが利用層が違うと思うのでうまく使い分けていきたいですね。Faecbookは広告が打てるのでそのへんうまく組み合わせてビジネスに繋げていきたいですね。

以上まとめでした。

イタンジ株式会社ではエンジニアを募集しています

募集しています!一緒に開発しましょう!

不動産業界を怠惰・短気・傲慢な気持を持って徹底的に革新するエンジニア募集! - イタンジ株式会社の新卒・インターンシップ - Wantedly