皆さんこんにちは、サーバサイドエンジニアの福本です。
先日、Facebookオフィシャルコミュニティである『Facebook Developer Circle』の第2回目のイベントにて、”Messengers APIを用いたライブ・コーディング”を実施しました。
ライブ・コーディングを実施するにあたり色々と準備をし、簡易的なチャットボットを作る手順をまとめてみましたので、みなさんに共有します。
Messenger APIにはFacebookが公開しているスタートガイドがありますが、そちらを進めるだけでは、思わぬポイントでハマってしまうことがあります。
今回はそういったところも含めて、開発の手順を皆さんにお伝えします。
チャットボット開発の魅力を少しでもお伝えできれば幸いです。
それでは、説明に入っていきます。
使う技術・ツール
- Node.js (javascript ES6)
- AWS cloud9(以下cloud9)
- heroku
個人の開発環境に依存せず開発を進めることができるので、当日のライブコーディングは、ブラウザIDEであるcloud9を使って開発を進めました。
また、ボットからレスポンスを返すためにアプリケーションサーバーを立てる必要がありますが、簡易的にデプロイし環境を作ることができるherokuを使用しています。
ゴール
Facebook公式のクイックスタートガイドを完了し、以下の機能を持つチャットボットを作成することがゴールです。
- ユーザーから送られたものがテキストか画像かで、自動応答の内容を変更できる
- テキストが送られた場合、内容をボットが自動でエコーバックする
- 画像が送られた場合、ポストバックを持つカルーセルとボタンを生成する
また、ゴールの状態のコードをgithub上でリポジトリ公開しておりますので、よろしければご確認ください。
チャットボットの開発
cloud9の環境構築
AWSのアカウント設定などは公式ガイドやGoogleにノウハウが転がっていますので、こちらでは割愛します。
cloud9の環境作成について迷われる方がいらっしゃるかと思うので、少し説明します。
AWSのリージョンが米国やEUだとcloud9のインスタンスがサポートされておらず環境構築ができません。
cloud9に対応したリージョンを選択して、環境を作成してください。
（※僕は「シンガポール」に設定しました）
また、環境やリソースの設定はすべてデフォルトでOKです。
具体的には、Enviroment typeが”EC2”でInstance typeが"t2.micro"です。
すべて設定したら、最後まで進み「Create enviroment」で環境構築完了です。
（数分で環境設定が完了し、cloud9のIDEが使えるようになります）
webhookの設定
webhookとは、チャットボットにおいてメッセージを受信・処理・送信を行う場所のことで、チャットボット開発で最も大切な部分です。
webhookの設定は、基本的にはリファレンスの『Webhookの設定』通りに進めることで完了します。
今回はローカル環境ではなくcloud9上での開発なので、以下の部分にお気をつけください。
- コマンドライン上では、ホームディレクトリが/enviromentで表示されます
- 画面左のフォルダディレクトリでは、ホームディレクトリは<cloud9の環境名>で表示されます
- gitを使う場合の隠しファイル（~/.ssh）等は、ローカルと同じように使用できます
- cloud9のポート番号は8080ですので、1337 を指定しているコードおよびコマンドのポート番号を変更してください
herokuへデプロイ
先ほど作成したwebhookをherokuにデプロイし、Messengerからwebhookにアクセスできるようにします。また、これ以降の操作は、messenger-webhookディレクトリ上で行ってください。
コマンドラインでherokuを使えるようにする
まずはcloud9でherokuコマンドを使うために、herokuのCLIツールを導入します。
ターミナルで以下のコマンドを実行してください。
# herokuCLIツールのインストールとパスの設定
$ curl -OL https://cli-assets.heroku.com/heroku-linux-x64.tar.gz
$ tar zxf heroku-linux-x64.tar.gz && rm -f heroku-linux-x64.tar.gz
$ sudo mv heroku /usr/local
$ echo 'PATH=/usr/local/heroku/bin:$PATH' >> $HOME/.bash_profile
$ source $HOME/.bash_profile > /dev/null
# バージョンを表示し、導入に成功したかを確認
$ heroku --version
herokuへのデプロイ準備
ターミナルで以下のコマンドを実行し、herokuへのログインおよびアプリケーションの作成を行います。ちなみに、herokuログイン時は無限ログイン現象を避けるために、 --interactive オプションを指定する必要があるのでご注意ください。
# herokuログイン
$ heroku login --interactive
# herokuアプリケーション作成(<appname>は自由ですがアンダースコアは利用不可)
$ heroku create <appname>
Creating app... done, ⬢ xxxxx-xxxxx-xxxxx
https://xxxxx-xxxxx-xxxxx.herokuapp.com/ | https://git.heroku.com/xxxxx-xxxxx-xxxxx.git
package.jsonの修正
heroku上でNodeアプリケーションが実行されるように、packag.json ファイルを編集する必要があります。jsonの"scripts"キーを以下のように変更してください。
"scripts": {
"start": "node index.js"
},
herokuデプロイ
先ほど作成したherokuのアプリケーションをgitのリモートリポジトリに指定し、先ほど作成したwebhookをデプロイします。
# git初期化 ~ commit
$ git init
$ git add .
$ git commit -m'first commit'
# リモートリポジトリにherokuを登録
$ git remote add heroku https://git.heroku.com/xxxxx-xxxxx-xxxxx.git
# herokuがリモートリポジトリに指定されているかを確認
$ git remote
heroku
アプリケーションのURLにアクセスし、以下のようにCannot GET / という表示されれば完成です。
Facebookアプリの設定
Facebookアプリの設定ですが、基本的には以下の公式リファレンス通りに進めていくことになりますので、そちらをご覧頂ければと思います。
アプリの登録やWebhookの設定など、一部の設定方法がわかりにくいことがありますので、そちらについて解説させて頂ければと思います。
webhookの登録について迷われる方が多いと思うので、そちらについてご説明します。
（同じページの上部にある「トークンを生成」を事前に完了させてください）
- コールバックURL： https://<アプリ名>.herokuapp.com/webhookを指定（webhookのエンドポイントにあたります）
- トークンを確認：webhookの作成で利用した VERIFY_TOKENの値を指定
- サブスクリプションフィールド：messagesとmessaging_postback にチェックを入れる
また、クイックスタートガイド内の「ページトークンを環境変数として保存する」セクションではheroku上に環境変数を設定する必要がありますので、そちらについては以下の方法で設定することが可能です。
# herokuに環境変数を設定
$ heroku config:set PAGE_ACCESS_TOKEN="<「トークンを生成」で生成したトークン>"
# 環境変数が設定されているかを確認します
$ heroku config:get PAGE_ACCESS_TOKEN
テキストや画像の処理およびカルーセルの送信
以降のセクションでは、以下の公式リファレンス「ボットの作成」の流れに沿って実装を進めていくことで、問題なくボットの開発を進めることができます。
途中で送信者のユニークIDや、レスポンスの有無をアプリケーションのコンソールで確認する必要がありますが、その場合は以下のherokuコマンドを実行することで、heroku環境のログを出力することができます。
$ heroku logs --tail
完成
以上でチュートリアルの解説は終了です。
正しく開発が進められていれば、ボットはユーザーのアクションによって以下のような挙動を取ります。（書く画像はチュートリアルから引用しています）
テキストが送られた場合
ユーザーが送ったテキストの内容を、ボットが自動でエコーバックします。
画像が送られた場合
ユーザーが送った画像が挿入されたカルーセルと、ポストバックを持つボタンを生成し、ユーザーに送信されます。
（生成された）ボタンをタップした場合
タップしたボタンのラベル（チュートリアルでは”Yes!”もしくは”No!”）のテキストが、ユーザに送信されます。
ちなみに、冒頭で紹介した僕のサンプルリポジトリのボットがありますので、同じ挙動をするかどうか確認してみてください。
今回のチュートリアルを通じて、チャットボットの開発に興味を持って頂ける方がいらっしゃれば嬉しいです。
また、Facebook Dveloper CirlceではMessengerのAPIを含む様々なFacebookのAPIやツールの活用を通じて、様々なエンジニアの方との交流も行われておりますので、よろしければ今後の活動もチェックしてください。
