Original Coast Clothingを使ったサンプルMessengerエクスペリエンス
Original Coast Clothing (OCC)は、Messengerプラットフォームの主な機能を紹介するために作成された架空のファッションブランドです。このガイドでは、Messengerに備わっている機能についてさらに詳しく学習するため、このサンプルアプリのコードをユーザーのローカル環境やリモートサーバーにダウンロードする方法を示しています。 複数のエントリーポイントを持つ完全なMessengerエクスペリエンスを紹介するため、この架空のビジネスには次の機能が備わっています。
|
プラットフォームの機能
このサンプルアプリでは、次の機能を利用しています。
Messengerにこのエクスペリエンスをデプロイする
このガイドを読み終わる頃には、自分のサーバーでMessengerアプリの全機能が実行され、テストページからのメッセージに応答しているはずです。
開始する前に
以下が必要になります。
- FacebookページID – ライブFacebookページまたはテストページのIDを使用できます。
- ページアクセストークン(ページで
CREATE_CONTENTタスクを実行できるユーザーがリクエストしたもの)
- GitHubに置かれているサンプルコード
開発環境、ステージング環境、本番環境を分けている場合、環境ごとにMetaアプリとFacebookページを用意する必要があります。
ローカル環境の設定
ローカル環境でサンプルアプリを実行するには、NodeJS 10.x以上が必要になります。
ステップ1. サンプルアプリのリポジトリを複製する
ローカルマシンにoriginal-coast-clothingリポジトリを複製します。
git clone https://github.com/fbsamples/original-coast-clothing.git cd original-coast-clothing
ステップ2. コードの依存関係をインストールする
yarn install
ステップ3. 外部アドレスを取得する
メッセージを受信するには、当社のサーバーからの受信Webhooksを取得できることが前提となります。
外部アドレスが必要な場合は、NodeJSアプリにトンネリングする外部httpsアドレスを提供するngrokを使用してください。
ngrokをインストールする
npm install -g ngrok
好きなポートを指定して、ローカルサーバーへのトンネルをリクエストする
ngrok http 3000
画面には次のようにngrokステータスが表示されるはずです。
Session Status online
Account Redacted (Plan: Free)
Version 2.3.35
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://1c3b838deacb.ngrok.io -> http://localhost:3000
Forwarding https://1c3b838deacb.ngrok.io -> http://localhost:3000
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
ローカルマシンへの転送を行う、外部サーバーのhttps URLに留意してください。上記の例では、https://1c3b838deacb.ngrok.ioです。
ステップ4. WebhooksとMessengerプロフィールを設定する
サンプル環境のテンプレートをアプリにコピーする
mv .sample.env .env
環境値を追加する
.envファイルを編集して、自身のFacebookアプリID、FacebookページID、ページアクセストークン、App Secretの値を追加します。VERIFY_TOKENの値を、ランダムな文字列に設定します。アプリはこの値を使ってAPI呼び出しを検証します。
ステップ5. アプリを実行する
node app.js
これで、ブラウザーからhttp://localhost:3000でアプリにアクセスできるはずです
ステップ6.アプリを設定する
次のコマンドを実行して、アプリやページMessengerプロフィールのWebhooksサブスクリプション設定を行います。.envファイルで追加したVERIFY_TOKENの値を使用する必要があります。
http://localhost:3000/profile?mode=all&verify_token=<VERIFY_TOKEN>
ステップ7. アプリの設定をテストする
Facebookから、またはMessengerで、自分のページにメッセージを送信してみてください。Webhookがイベントを受信したら、アプリの設定は完璧です。
コードを変更する
locales/en_US.jsonファイルを編集します。get_started.welcomeの下のメッセージを置き換えて、「Hi {{userFirstName}}!Welcome to Original Coast Clothing...」を別の言葉に変更してみましょう。
最初のターミナルに戻ります。コードを変更したら、その都度NodeJSサーバーを再起動する必要があります。新しいコードを再読み込みするため、Ctrl-Cでサーバーを停止してから再起動します。
node app.js
Messengerを開いて、自分のページに「こんにちは」というメッセージを送信すると、新しいメッセージが届くはずです。
Herokuの設定
Herokuインスタンスは、ビジネスアプリやウェブサイトの本番環境やステージング環境をホストする際に活用できます。
ステップ1. Herokuアプリを作成する
git init heroku apps:create # Creating app... done, ⬢ YOUR-APP-NAME # Created http://YOUR-APP-NAME.herokuapp.com/ | git@heroku.com:YOUR-APP-NAME.git
ステップ2. Herokuにコードをデプロイする
heroku git:remote -a YOUR-APP-NAME git push heroku master
ステップ3. 環境値を設定する
Herokuアプリダッシュボードの[設定]の下で、自分のアプリの環境変数を見つけます。自身のFacebookアプリID、FacebookページID、ページアクセストークン、App Secretの値を追加して、VERIFY_TOKENを作成します。
ステップ4. WebhooksとMessengerプロフィールを設定する
この時点で、アプリにアクセスできるようになっているはずです。環境変数として作成したVERIFY_TOKENを使用して、/profileエンドポイントを呼び出します。
https://YOUR-APP-NAME.herokuapp.com/profile?mode=all&verify_token=<VERIFY_TOKEN>
任意: 上記のURLはアップロードされたペルソナのIDを返します。それらのIDはメモリ内に保持されているので、返されたIDを環境変数として追加する必要があります。そうすれば再読み込み後も保持することができます。
heroku config:set PERSONA_BILLING=<PERSONA_ID> -a YOUR-APP-NAME heroku config:set PERSONA_ORDER=<PERSONA_ID> -a YOUR-APP-NAME heroku config:set PERSONA_SALES=<PERSONA_ID> -a YOUR-APP-NAME
ステップ5. アプリをテストする
FacebookからまたはMessengerで、自分のページにメッセージを送信してみます。Webhookがイベントを受信したら、アプリの設定は完璧です。
トラブルシューティング
ローカルでアプリを再実行する
ngrokを実行すると、新しい外部アドレスが提供されます。.envファイルのAPP_URLアドレスを更新してから、NodeJSサーバーを実行します。
node app.js
http://localhost:3000/profile?mode=webhook&verify_token=<VERIFY_TOKEN>にアクセスして、Facebookアプリ設定のWebhookアドレスを更新します
ページから自分には返信できるが他のユーザーに返信できない
Facebookアプリが開発モードのままになっている可能性があります。他のユーザーをアプリのテスターとして追加できます。そのユーザーが承認すれば、アプリからテスターにメッセージを送信できます。アプリを公開する準備ができたら、アプリが誰にでも返信できるように、pages_messagingアクセス許可をリクエストしてください。