Facebook Messenger

Facebook Messengerのチャネルを構成するには、次のものが必要です:
  • Facebook開発者アカウント

  • Facebookアプリケーション

  • Facebookページ

  • ページ・アクセス・トークン

  • アプリケーション・シークレットID

  • WebフックURL

  • 検証トークン

Facebook Messengerでデジタル・アシスタント(またはスタンドアロン・スキル)を実行するには、最初にFacebookページおよびFacebookアプリケーションを設定する必要があります。この詳細は、Facebook Messagingプラットフォームのドキュメントを参照してください。

簡単に言うと、その仕組みは次のとおりです。Facebookページは、デジタル・アシスタントをホストします。ユーザーがデスクトップ・ブラウザでチャット・ウィンドウを使用している場合は、このページを介してデジタル・アシスタントとチャットします。ユーザーがモバイル・デバイスを使用している場合は、Facebook Messenger自体を介して直接デジタル・アシスタントと対話します。このシナリオでは、デジタル・アシスタントは、Facebookアプリケーションによって、Facebook Messengerが処理するメッセージを取得できます。

Facebook Messengerチャネルを作成するには、Oracle Digital AssistantとFacebook Messengerの両方によって生成されるアーティファクトが必要です。

Oracle Digital Assistantからは、次のものが必要です:

  • デジタル・アシスタントをFacebook Messengerに接続するWebフックURL
  • Facebook Messengerがデジタル・アシスタントを識別できるようにする検証トークン

Facebook Messengerからは、次のものが必要です:

  • ページ・アクセス・トークン
  • アプリケーション・シークレットID

これらのアーティファクトをデジタル・アシスタントとFacebook Messengerの間で転送する必要があるため、チャネルを構成するときにこれら2つのプラットフォームを切り替える必要があります。

ステップ1: Facebook Messengerの設定

Facebook Messengerでアプリケーション・シークレットおよびページ・アクセス・トークンを生成します。

  1. Facebook開発者のアカウントにログインします。
  2. チャネルに使用するFacebookアプリケーションを作成します:
    1. ブラウザで、https://developers.facebook.com/apps/に移動します。
    2. 「自分のアプリケーション」タブを選択し、「アプリケーションの作成」をクリックします。
    3. アプリケーションの作成ウィザードの「アプリケーション詳細」ページで、アプリケーションに使用する名前と、アプリケーションの連絡先として使用する電子メール・アドレスを入力します。次に、「次へ」をクリックします。
    4. 「ユース・ケース」ページの「フィルタ条件」で、「ビジネス・メッセージング」を選択します。次に、「MetaからMessengerで顧客とエンゲージメント」を選択し、「次へ」をクリックします。
    5. ウィザードでページの一部をクリックしてから、「概要」ページで「アプリケーションの作成」をクリックします。
  3. アプリケーションが作成されたら、(「自分のアプリケーション」ページの左側にある)アプリケーションを選択し、「アプリケーション設定」セクションで「基本」を選択します。
  4. 「アプリケーション・シークレット」フィールドの値をコピーして、システム上の便利な場所に貼り付けます。

    Facebookチャネルの構成を完了するには、アプリ・シークレットが必要です。

  5. 「アプリケーション・ページ」セクションで、「新規ページの作成」をクリックします。
  6. 「ページの作成」ページで、必須フィールドに入力し、「ページの作成」をクリックします。
    ノート

    ページ名には、アプリケーション名を含める必要があります。
  7. アクセス・トークンを生成します。
    1. 「Tools」>「Graph API Explorer」を選択します。
    2. ページの「アクセス・トークン」セクションで、「メタ・アプリケーション」にアプリケーションの名前を選択します。
    3. 「ユーザーまたはページ」フィールドで、「トークンの取得」を選択します。
    4. 「権限」セクションで、「権限の追加」をクリックし、次の権限を選択します:
      • business_management
      • pages_manage_metadata
      • pages_messaging
      • pages_show_list
    5. 「アクセス・トークンの生成」をクリックします。
  8. このアクセス・トークンをコピーして、任意の場所に貼り付けます。

    このトークン(FacebookアプリケーションがFacebookのMessaging APIにアクセスできるようにする)を使用して、デジタル・アシスタントでチャネル定義を完了します。

ステップ2: デジタル・アシスタントでのチャネルの作成

「チャネルの作成」ダイアログを完了するには、Facebookのページ・アクセス・トークン・キーおよびアプリケーション秘密鍵を入力します。
  1. デジタル・アシスタントで、左側のメニューの「チャネル」をクリックして、「ユーザー」を選択します。
  2. 次に、「チャネルの追加」をクリックして、「チャネルの作成」ダイアログを開きます。

  3. チャネルの名前を指定します。

  4. チャネル・タイプとして「Facebook Messenger」を選択します。

  5. 「ページ・アクセス・トークン」フィールドに、Facebook Messengerの設定手順で生成したページ・アクセス・トークンを貼り付けます。

  6. 「App Secret」フィールドに、Facebook Messengerの設定手順でコピーしたアプリケーション・シークレットを貼り付けます。

  7. 「作成」をクリックします。

  8. 「チャネル」ページで、「検証トークン」と「WebフックURL」の両方をコピーして、使用中のシステムの任意の場所に貼り付けます。FacebookのWebフックを構成するには、これらが必要です。
    fb-channel-complete.pngの説明が続きます
    図fb-channel-complete.pngの説明

ステップ3: Facebook MessengerのWebフックの構成

Facebook Messengerで、前のステップでデジタル・アシスタントによって生成されたWebフックURLを使用して、コールバックURLを定義します。

  1. Facebook Messengerコンソールで、Webフック用に最初に作成したプロジェクトに移動します。
  2. 「Messenger API Settings」を選択して、「Messenger API Setup」ページを開きます。
  3. 「CallBack URL」フィールドに、デジタル・アシスタント・チャネル・ページから取得したWebフックURLを貼り付けます。
  4. Messengerコンソールの「Verify Token」フィールドに、「Digital Assistant Channels」ページから「Verify Token」を貼り付けます。
  5. 「Webhook fields」セクションで、「messages」および「messaging_postbacks」コールバック・イベントを選択します。
  6. 「Verify and Save」をクリックします。
  7. このページをサブスクライブします:
    1. Messenger API設定ページの「アクセス・トークンの生成」セクションで、チャネルのFacebookページを選択します。
    2. 「登録の追加」をクリックします。
    3. 「ページ・サブスクリプションの編集」ダイアログで、messagesおよびmessaging_postbacksが選択されていることを確認し、「確認」をクリックします。

ステップ4: Facebookチャネルの有効化

構成が完了したら、Facebookチャネルをアクティブ化できます。

  • デジタル・アシスタントで、このチャネルを選択して、「チャネル有効」コントロールをオンに切り替えます。
  • 「ルート先...」ドロップダウンのアイコンをクリックし、チャネルに関連付けるデジタル・アシスタントまたはスキルを選択します。

これで、このチャネルを介してボットをテストできるようになりました。

ステップ5: Facebook Messengerでのボットのテスト

Facebookチャネルおよびメッセージングの構成が完了したら、ご使用のデバイスでFacebookページ、Facebook Messenger (https://www.messenger.com/)およびFacebook Messengerアプリケーション(1)を使用してボットをテストできます。

  1. https://www.messenger.com/に移動します。
  2. Messengerインタフェース内で、ページを検索するページの名前を入力します。
  3. デジタル・アシスタント(またはスタンドアロン・スキル)とのチャットを開始します。

固定メニュー

Facebook Messengerでは、「Message」フィールドの横に固定メニューを作成できます。この機能の詳細は、https://developers.facebook.com/docs/messenger-platform/send-messages/persistent-menu/を参照してください。

Order PizzaおよびOrder Pastaの固定メニュー・アイテムを表示する例を次に示します:



固定メニュー・アイテムの作成

デジタル・アシスタントまたはスタンドアロン・スキルにFacebookの固定メニュー・アイテムを追加するには、次の手順を実行します:

  1. すべての前提条件(開始ボタンを含む)が設定されていることを確認します。

    これらの前提条件は、https://developers.facebook.com/docs/messenger-platform/send-messages/persistent-menu/#requirementsにリストされています

  2. Facebookの固定メニューのcall_to_actions配列に各メニュー・アイテムのアクションを追加します(https://developers.facebook.com/docs/messenger-platform/send-messages/persistent-menu/#set_menuを参照)。
  3. 固定メニュー・アイテムを設定するには、Messenger Platform APIへのPOSTコールを使用します。

    リクエストURIは、https://graph.facebook.com/v2.6/me/messenger_profile?access_token=<PAGE_ACCESS_TOKEN>です。<PAGE_ACCESS_TOKEN>は、Facebookアプリケーションのページ・アクセス・トークンです。

デジタル・アシスタントの固定メニュー・アイテム

デジタル・アシスタントにFacebookの固定メニュー・アイテムを追加する、Messenger Platform APIへのPOSTのフォーマットを次に示します:

{
  "persistent_menu":[
    {
      "locale":"default",
      "composer_input_disabled": false,
      "call_to_actions":[
            {
              "title":"menu item display name",
              "type":"postback",
              "payload":"{\"action\":\"system.textReceived\",\"variables\": {\"system.text\": \"utterance that contains the skill's invocation name\"}}"
            }
          ]
    }
  ]
}

ペイロードには、Facebook Messengerからデジタル・アシスタントにsystem.text変数を介して発話を渡すsystem.textReceivedアクションを使用します。その発話には、適切なルーティングを確実に行うために、ターゲット・スキルの起動名(つまり、明示的な起動)を含める必要があります。

Facebook Messengerでスキルの2つの固定メニュー・アイテム(Order PizzaおよびOrder Pasta)を作成する例を次に示します:

{
  "persistent_menu":[
    {
      "locale":"default",
      "composer_input_disabled": false,
      "call_to_actions":[
            {
              "title":"Order Pizza",
              "type":"postback",
              "payload":"{\"action\":\"system.textReceived\",\"variables\": {\"system.text\": \"Order pizza from Pizza Joe \"}"
            },
            {
              "title":"Order Pasta",
              "type":"postback",
              "payload":"{\"action\":\"system.textReceived\",\"variables\": {\"system.text\": \"Order pasta from Pizza Joe \"}"
            }
          ]
    }
  ]
}

スタンドアロン・スキルの固定メニュー・アイテム

スタンドアロン・スキルにFacebookの固定メニュー・アイテムを追加する、Messenger Platform APIへのPOSTのフォーマットを次に示します:

{
  "persistent_menu":[
    {
      "locale":"default",
      "composer_input_disabled": false,
      "call_to_actions":[
            {
              "title":"menu item display name",
              "type":"postback",
              "payload":"{\"action\":\"action name\",\"variables\": {}"
            }
          ]
    }
  ]
}

ペイロードは、スキルのダイアログ・フローでトリガーするフローにマップされるイベントの名前です。

次に、そのヘルプ・アクションをFacebookの固定メニューで参照します。

{
  "persistent_menu":[
    {
      "locale":"default",
      "composer_input_disabled": false,
      "call_to_actions":[
            {
              "title":"Help",
              "type":"postback",
              "payload":"{\"action\":\"help\",\"variables\": {}"
            }
          ]
    }
  ]
}

サポートされている機能

デジタル・アシスタントのFacebook Messengerチャネルでは、次の機能がサポートされています:

  • テキスト(送信と受信の両方)
  • イメージ(送信と受信の両方)
  • ファイル(送信と受信の両方)
  • 絵文字(送信と受信の両方)
  • ロケーション(ただし非推奨) (送信と受信の両方)
  • リンク
  • ポストバック
  • ロケーション・リクエスト
  • カスタム・プロパティ
  • カルーセル・コンポーネント
  • リスト・コンポーネント

異なる書式設定機能および構文を使用してスキルを複数のチャネルにターゲット指定する場合は、メッセージで基本的なHTMLマークアップを使用できます。そうすると、メッセージがチャネルに送信されると、そのマークアップがFacebook Messengerのマークダウン形式に自動的に変換されます。これは、Facebook Messengerに加えて、スキルを他のチャネルにターゲティングする場合に特に役立ちます。チャネルでのリッチ・テキスト形式を参照してください。

メッセージの制約

デジタル・アシスタントのFacebook Messengerチャネルには、次のようなメッセージの制約があります:

  • テキスト・メッセージ
    • テキスト・メッセージの最大長: 640文字。長さが640を超えると、テキストは複数のメッセージに分割されます。
    • テキスト・アクション・ラベルの最大長: 20文字
    • 許可されるテキスト・アクションのタイプ: ポストバック、コール、URL
    • テキスト・アクションの最大数: 3。テキスト・アクションがこれよりも多い場合、メッセージは複数の水平カードに変換されて、各カードで同じテキストがタイトルとして使用され、各カードに最大3つのアクションが含まれます。
  • 水平カード
    • タイトルの最大長: 80文字
    • 説明の最大長: 80文字
    • カード・アクション・ラベルの最大長: 20文字
    • カードの最大数: 10
    • カード・アクションの最大数: 3。カード・アクションの数が3を超える場合、残りのカード・アクションをレンダリングするためにカードが複製されます。
    • カード・アクションの最小数: 0
    • カード・リスト・アクションの最大数: 0
    • 説明、イメージまたはアクションが少なくとも1つ必要かどうか: はい
    • 許可されるカード・アクションのタイプ: ポストバック、コール、URL、共有
    • 許可されるカード・リスト・アクションのタイプ: なし
  • 垂直カード
    • サポート対象外
  • アタッチメント・メッセージ
    • サポートの有無: はい
    • アタッチメント・アクションが許可されるかどうか: いいえ
  • アクション・ボタン
    • グローバル・アクション・ラベルの最大長: 20文字
    • グローバル・アクションの最大数: 11
    • 許可されるグローバル・アクションのタイプ: ポストバック

Facebook Messengerチャネルの拡張機能

Facebookメッセンジャ・チャネルの場合、Facebookに固有の機能で共通レスポンス・コンポーネントの機能を拡張できます。

拡張機能にアクセスするには、共通レスポンス・コンポーネントのメタデータのchannelCustomProperties要素を使用し、適切なプロパティを設定します。コードのフォーマットは次のとおりです:

...
            channelCustomProperties:
            - channel: "facebook"
              properties:
                PROPERTY_NAME: "PROPERTY_VALUE"
...

Facebook Messengerチャネルで使用可能なカスタム・プロパティを次に示します:

プロパティ名 許可される値 適用対象 説明
top_element_style
  • compact
  • large
次の属性を持つレスポンス・アイテム:
  • type: "cards"
  • cardLayout: "vertical"
最初のカードのイメージがレンダリングされる方法を決定します。詳細は、https://developers.facebook.com/docs/messenger-platform/send-messages/template/list/#cover_imageを参照してください。

指定しない場合、Oracle Digital Assistantではこのプロパティはcompactにデフォルト設定されます。これはFacebookのデフォルトとはになります。

image_aspect_ratio
  • horizontal
  • square
次の属性を持つレスポンス・アイテム:
  • type: "cards"
  • cardLayout: "horizontal"
イメージのレンダリングに使用されるアスペクト比。デフォルトはhorizontal (1.91:1)です。squareはアスペクト比を1:1に設定します。https://developers.facebook.com/docs/messenger-platform/reference/template/generic#attachmentを参照してください
sharable
  • true
  • false
タイプがcardsのレスポンス・アイテム。 trueに設定すると、Messengerのネイティブの共有ボタンがテンプレート・メッセージに対して有効になります。デフォルトはfalseです。https://developers.facebook.com/docs/messenger-platform/reference/template/generic#attachmentを参照してください
webview_height_ratio
  • compact
  • tall
  • full
次のいずれかになります:
  • "url"プロパティが指定されているカード
  • "type": "url"action
URLボタンがタップされたとき、またはurlプロパティが指定されているカードの高さがタップされたときに開かれるWebビューの高さ。https://developers.facebook.com/docs/messenger-platform/reference/buttons/url#propertiesを参照してください
messenger_extensions
  • true
  • false
次のいずれかになります:
  • "url"プロパティが指定されているカード
  • "type": "url"action
Messengerの拡張機能を使用すると、Webビューで追加した機能をアクセス可能にすることによって、WebビューのエクスペリエンスとMessengerのエクスペリエンスを緊密に統合できます。https://developers.facebook.com/docs/messenger-platform/reference/messenger-extensions-sdkを参照してください
fallback_url 有効なURL 次のいずれかになります:
  • "url"プロパティが指定されているカード
  • "type": "url"action
Messengerの拡張機能をサポートしていないクライアントで使用するURL。これが定義されていない場合は、urlがフォールバックとして使用されます。これは、messenger_extensionsがtrueの場合にのみ指定できます。https://developers.facebook.com/docs/messenger-platform/reference/buttons/url#propertiesを参照してください
webview_share_button
  • hide
次のいずれかになります:
  • "url"プロパティが指定されているカード
  • "type": "url"action
hideに設定すると、Webビューの共有ボタンが無効になります(機密情報の場合)。これは、開発者が拡張機能を使用して開始した共有には影響しません。
share_contents Facebook Messenger Send APIで使用されるフォーマットに従います
  • "type": "share"action
共有する受信者に表示するメッセージ(このボタンがアタッチされているメッセージと異なる場合)。https://developers.facebook.com/docs/messenger-platform/reference/buttons/share#propertiesを参照してください

レスポンス・アイテム・レベル(top_element_style)とカード・レベル(webview_height_ratioおよびfallback_url)で定義されたカスタム・プロパティの例を次に示します:

responseItems:
  - type: "cards"
    cardLayout: "vertical"
    cards:
      - title: "${pizzas.name}"
        description: "${pizzas.description}"
        imageUrl: "${pizzas.image}"
        url: "${pizzas.moreInfo}"
        iteratorVariable: "pizzas"
        channelCustomProperties:
          - channel: "facebook"
            properties:
              webview_height_ratio: "compact"
              fallback_url: "http://www.oracle.com"
    channelCustomProperties:
      - channel: "facebook"
        properties:
          top_element_style: "large"
...

channelCustomPropertiesの全般的な情報は、チャネル固有の拡張機能を参照してください。