読者です 読者をやめる 読者になる 読者になる

サーバーレスでFaceBook Bot

サーバーレスでFaceBook Bot

こんばんは、久保田です。先日のLineBotの記事からすっかりBotの動向が気になっている僕が、今回はFaceBookのMessengerでBotを作ってみます。 決して前回のLineBotの記事が我がアドウェイズエンジニアブログの週間人気記事にランクインしたからと言ってもう一度あの感動を味わいたい、こんなのみんな好きなんでしょ?のような邪な思いはありません。決して。

では早速やっていきましょう!

ゴール

FaceBook Messenger API(Bot)では普通のテキストや画像でのやり取りの他に、いろいろできるっぽいです。

今回は、 - テキストの受付 - テキストの送信 - 画像の送信 - ボタンの送信 - カルーセルの送信

までやりたいと思います。 本当はユーザーのFaceBook情報をとって、とかやりたかったのですが、これはFaceBookに申請して許可を得ないとできないので、今回は断念して基本的なことをやれるようにします。

フローはこんな感じです。

必要なもの

- FaceBookページ
- FaceBookのデベロッパーアプリ
- FaceBookからの確認のGetリクエストを受付るエンドポイント
- Messengerから投稿があった時にPOSTを受付るエンドポイント

以上の4つが必要になります。エンドポイントが2つ必要なのは特徴的なところですね。

環境

エンドポイントを作るために、サーバーが必要です。 前回のLineBotではhttpsサーバーを自前で用意しましたが、同じことやっても面白くないので、今回は今流行りのサーバーレスでマイクロサービスっぽくやります。 使用したのは以下の2つです。

- Lambda(AWS)
- API Gateway(AWS)

API Gatewayでエンドポイントを作り、Lambda(今回はNode.js 4.3)にコードを置いて処理をしよう、という感じです。 最近よく見るやつですね。

Lambda

Lambda

プログラムの置き場、イベントが起きたら実行させることができるシステムです。

まずはGetリクエストを受付るコードを用意します。 メニューからLambdaを選んで、左上の「Create a Lambda Function」を選択して、 BluePrintを選択せず、右下のSkipを押してコードを実装できる画面に移動します。

ここに名前をつけて、コードを書いていきます。

var validationToken = "hogehogehogheo";
exports.handler = function(event, context) {
    console.log('Received event:', JSON.stringify(event, null, 2));

    if (event["hub.verify_token"] === validationToken) {
        context.done(null, Number(event["hub.challenge"]));
    } else {
        context.fail("validation failed");
    }
};

FaceBookからhub.challengeというパラメータをそのまま返せばOKです。 validationTokenというのはFaceBookで設定できるTokenです。好きな値にしておけばvalidationができます。

次はMessengerに投稿があった時に実行させるコードです。

とりあえずログ出すだけ

今はログを出すだけにします。後ほど返事をするように作り直します。

API Gateway

gateway

先ほど作ったLambdaにエンドポイントを与えます。

メニューから API GateWayを選択して、Resourceを作成し、POSTとGetのエンドポイントを作成します。 そしてLambdaを紐づければOKなのですが、Getだけ注意が必要です。

Getで送られてきた時、受付るパラメータを登録しなければいけません。僕はここでめちゃくちゃハマりました。

ここでhub.challengehub.verify_tokenを許可しておきます。

そしてDeployして公開しておきます。

FaceBookページの作成

FaceBookのページを作る必要があります。そしてそのページ自体がMessengerのアカウントになります。

FaceBookにアプリ登録

ここで先ほど作った、エンドポイントを登録します。

画像

Getのエンドポイントが正常に動いていれば、ここで緑の許可がおります。

実行

作ったページのMessengerに対して、投稿します!

すると、AWSのCloud Watchを見てみると、ログが流れているはずです!

画像

返事をできるようにする

先ほど Lambdaで作ったPOSTのコードを改修します。 ちょっと長いのでGitHubにあげておきました。 FaceBookページを作るともらえるTokenを使うので、それだけコピーしておいてください。

gistc04d1aa30bc864c5eee094dccc96f9fd

これで

  • テキストの受付
  • テキストの送信
  • 画像の送信
  • ボタンの送信
  • カルーセルの送信

ができます!

やってみましょう。

画像 画像

いい感じですね!

これで基本的なことはできるようになったので、次回はFaceBookのBotならではのことをしてみようと思います! ではまた!