Instagram用Messenger APIサポートのサンプルエクスペリエンス - Original Coast Clothing

Original Coast Clothing (OC)は、優れたカスタマーエクスペリエンスを提供するInstagramプラットフォームの主な機能を紹介するために作成された架空のファッションブランドです。このデモを参考にすれば、自動化機能とリアルタイムのカスタマーサポートの両方を備えた快適なInstagramのMessenger APIサポートエクスペリエンスを誰でも作成できます。アプリのオープンソースのコードと、ローカル環境またはリモートサーバーにエクスペリエンスをデプロイする方法に関するガイドが用意されています。これと同様のサンプルMessengerエクスペリエンスもあります。 @originalcoastclothingにメッセージを送信するか、投稿にコメントして、今すぐお試しください。

プラットフォームの機能

このエクスペリエンスは、以下のプラットフォーム機能を利用します。ページにこのエクスペリエンスをデプロイすることにした場合、コードは以下の機能をすべて使用します:

• メッセージ

  • テキスト、画像、リンクのプレビュー
  • 一般テンプレート
• Webhooks
• クイック返信
• ユーザープロフィール
• 非公開返信
• Icebreaker

このエクスペリエンスをInstagramにデプロイする

このガイドの手順を完了すると、完全なInstagramアプリをサーバー上で実行でき、アカウントからメッセージに応答できるようになります。

このエクスペリエンスを実現するコードはオープンソースです。どなたでも簡単に優れたメッセージエクスペリエンスの開発を始められます。

コードはBSDライセンスのもとでリリースされているので、実際のニーズに合わせて自由に使用できます。コードは、今後も参照できるようにGitHubでホストされています。

Instagramアプリをデプロイするための要件

• Instagramプロアカウント(クリエイターアカウントまたはビジネスアカウント)。
• 上記のInstagramアカウントにリンクされているFacebookページ。ユーザーとつながる際にInstagramプロアカウントのアイデンティティを表すFacebookページがあることを確認します。新しいページを作成するには、https://www.facebook.com/pages/createにアクセスします。また、テストページを設定して始めることもできます。
• ページに対してタスクを実行できる開発者アカウント。Facebook統合の中核となる新しいアプリを作成するための開発者アカウント。開発者として登録するには、Facebook開発者ウェブサイトにアクセスして、[スタート]ボタンをクリックします。
• 基本設定が構成されているFacebookアプリ。新しいアプリを作成するには、https://developers.facebook.com/にアクセスして、[新しいアプリを追加]をクリックします

セットアップ手順

このセクションの目的は、Instagramアプリがメッセージを正常に送受信するために必要なすべてのアクセストークンとIDを収集することです。開始する前に、前述の要件をすべて満たしていることを確認してください。この時点で、ページ、登録済みのFacebookアプリ、およびInstagramプロアカウントがあるはずです。

新しいFacebookアプリを作成したばかりであれば、開発モードになっているはずです。このモードのアプリは、アプリに接続している人(管理者、開発者、テスター)にのみメッセージを送信できます。開発モードのままでもこのガイドの作業を進められますが、アプリを公開する準備ができたら、instagram_manage_messagesアクセス許可を取得するためにアプリレビューを受ける必要があります。詳しくは、アプリレビューをご覧ください

1. スタートガイドドキュメントに従って、Instagram統合を構成します。
2. エクスペリエンスのテストに使うInstagramテストアカウントをいくつか追加します。

この時点で、次のものが揃っているはずです。

• アプリID
• app secret
• ページID
• ページアクセストークン
• ページにリンクされたInstagramアカウント
• テスト用アカウントとして登録されたInstagramアカウント

インストール

以下が必要です。

• Node 10.x以上
• 使用するコードのサーバー。オプションは次のとおりです。

  • ngrokなどのローカルトンネリングサービス
  • HerokuやGlitchなどのリモートサーバーサービス
  • 自分のウェブサーバー

HerokuまたはGlitchを使用したワンクリックデプロイ

以下のボタンを使用して、HerokuまたはGlitchにエクスペリエンスを自動的にデプロイできます。セットアップを完了するために必要な環境変数を入力するように求められます。

ngrokを使用してローカルにデプロイする

トンネリングサービスを使用すると、FacebookのWebhookがアクセスできる外部URLにローカルウェブサーバーを公開できます。そのようなサービスは数多くあります。この例では、ngrokを使用します。

1. リポジトリのクローンを作成する

ローカルマシンにリポジトリのクローンを作成します。

git clone https://github.com/fbsamples/original-coast-clothing-ig.git
cd original-coast-clothing-ig

2. トンネリングサービスをインストールする

ngrokがまだインストールされていなければ、ダウンロードしてインストールするか、コマンドラインで次のように指定してインストールしてください。

$ npm install -g ngrok

このリポジトリのディレクトリで、任意のポートを指定してローカルサーバーへのトンネルをリクエストします:

$ ngrok http 3000

画面にngrokのステータスが次のように表示されます:

Session Status                online
Account                       Redacted (Plan:iuluufkccebegkhifrlgfhudrtbthgln 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

ローカルマシンに転送される外部サーバーのhttps URLをメモします。上記の例では、https://1c3b838deacb.ngrok.ioです。

3. 依存関係をインストールする

同じリポジトリのディレクトリで、新しいターミナルタブを開きます。

$ npm install

または、Yarnを使うこともできます。

$ yarn install

4. .envファイルをセットアップする

ファイル.sample.envを.envにコピーします:

$ cp .sample.env .env

.envファイルを編集して、アプリとページの値をすべて追加します。

5. ローカルでアプリを実行する

$ node app.js

これで、ブラウザーからhttp://localhost:3000にあるアプリのデフォルトページにアクセスできるようになりました。

ステップ2でメモした外部URLからもアプリにアクセスできることを確認してください。

Herokuを使用してデプロイする

1. リポジトリのクローンを作成する

ローカルマシンにリポジトリのクローンを作成します。

git clone https://github.com/fbsamples/original-coast-clothing-ig.git
cd original-coast-clothing-ig

2. Heroku CLIをインストールする

ディレクトリがまだgitリポジトリでない場合は、gitリポジトリを作成します:

$ git init
Initialized empty Git repository in .git/
$ git add .
$ git commit -m "My first commit"     

3. Heroku CLIをインストールする

Heroku CLIがまだインストールされていない場合は、ダウンロードしてインストールします。

4. CLIでアプリを作成する

$ heroku apps:create

Creating app... done, ⬢ mystic-wind-83
Created http://mystic-wind-83.herokuapp.com/ | git@heroku.com:mystic-wind-83.git

アプリに与えられた名前をメモします。この例では、mystic-wind-83です。

5. 環境変数を設定する

Herokuアプリダッシュボードでアプリを見つけて、ファイル.sample.env内のコメントに従って構成変数を設定します。

または、コマンドラインで次のように環境変数を設定することもできます。

$ heroku config:set PAGE_ID=XXXX

6. コードをデプロイする

$ git push heroku master

7. ログ出力を表示する

$ heroku logs --tail

Webhookをリンクする

以上でサーバーが実行されるようになりました。Webhookエンドポイントはパス/webhookにあります。上記のHerokuの例では、パスはhttp://mystic-wind-83.herokuapp.com/webhookになります。

[MessengerプラットフォームWebhooksガイド] (https://developers.facebook.com/docs/messenger-platform/webhooks)に従って、Webhookを設定します。

Webhookのサブスクリプション登録を確認したら、以下のイベントをサブスクリプション登録します。

• comments
• messages
• messaging_postbacks

サブスクリプション登録したイベントの横にある[テスト]ボタンをクリックして、Webhookをテストします。サーバーのログ出力にテストイベントが表示されるはずです。

アプリのセットアップが成功したかどうかをテストする

「Instagramテスター」の役割でアカウントにログインした状態で、ページにリンクされているInstagramアカウントにメッセージを送信するか、投稿にコメントを残します。

Instagramにメッセージへの応答が表示されたら、アプリのセットアップは成功しています。うまくいきましたか？

トラブルシューティング

アプリが自分にのみ返信し、他のユーザーに返信しない

Facebookアプリが開発モードのままになっている可能性があります。他のユーザーをアプリのテスターとして追加できます。そのユーザーが承認すれば、アプリからメッセージを送信できます。準備ができたら、誰にでも返信できるようにinstagram_manage_messagesアクセス許可をリクエストしてください。

その他の問題

このガイドに間違いを見つけた場合は、問題をお知らせください。