機械翻訳について
  1. Oracle Digital Assistantの使用
  2. チャネル
  3. Facebook Messenger

43 Facebook Messenger

Facebook Messengerのチャネルを構成するには、次のものが必要になります。

  • Facebook Developerアカウント

  • Facebookページ

  • A Facebook app

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

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

  • WebフックURL

  • 検証トークン

Facebook Messengerでデジタル・アシスタント(またはスタンドアロン・スキル)を実行するには、まず、FacebookページとFacebookアプリケーションを設定する必要があります。 これに関する詳細は、「Facebook Messaging Platformのドキュメント」から参照してください。

Nutshellでは、これがどのように機能するかを示します。 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

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

ステップ1: Facebook Messengerの設定

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

  1. Facebook開発者のアカウントにログインします。

  2. ボットをホストするFacebookページを作成します。 ページに追加する説明、イメージおよびカバー・ページにより、そのユーザーはボットを識別します。

  3. 次に、このページにリンクするFacebookアプリを作成します。 これはMessengerアプリケーションであるため、「メッセンジャ向けアプリ」を選択し、「アプリケーションIDの作成」をクリックします。
    setup-fbapp.pngの説明は以下のとおりです
    「図setup-fbapp.pngの説明」

    このダイアログで「メッセンジャ向けアプリ」オプションを選択しなかった場合(たとえば、テスト・アプリケーションを作成している場合)は、左側のナビゲーション・バーで「製品の追加」をクリックし、「製品設定」ページから「メッセンジャ」を選択して、「開始」をクリックします。
    add-product.pngの説明は以下のとおりです
    「図add-product.pngの説明」

  4. Facebook appのダッシュボード・ページで、アプリケーション・シークレットをコピーし、システム上の都合のよい場所に貼り付けます。
    facebook-dashboard.pngの説明は以下のとおりです
    「図facebook-dashboard.pngの説明」

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

  5. アプリのダッシュボードで、対象のFacebookページを選択して、ページ・アクセス・トークンを生成します。
    page-access-token.pngの説明は以下のとおりです
    「図page-access-token.pngの説明」

  6. アクセス・トークンをコピーし、便利な場所に貼り付けます。

    このトークンを使用して、Digital Assistantでチャネルの定義を完了するために、Facebook AppにFacebookのMessaging APIへのアクセス権を与えます。

重要:

Facebook User Profile APIの変更には、2018年7月26日の前または後に作成したFacebookアプリの場合は、特定のユーザー・プロファイル・フィールドに対する権限を要求する必要があります。 次の権限がない場合は、ユーザー名がランダムな数値文字列として移入されます。

  • pages_messaging

  • pages_user_locale

  • pages_user_timezone

7月26日より前にアプリを作成した場合は、2019年1月29日までこれらの権限を適用する必要があります。 2018年7月26日より後にアプリを作成した場合は、可能なかぎり早急にこれらの権限を追加する必要があります。 「Messenger」ページの「Messenger」セクションの「App Review」でこれらを設定できます。

ステップ2: Digital Assistantでのチャネルの作成

チャネルの作成ダイアログを完了するには、Facebookのページ・アクセス・トークン・キーおよびアプリ・シークレット・キーを入力します。
  1. Digital Assistantで、左側のメニューの「チャネル」をクリックして、「ユーザー」を選択します。

  2. 次に、チャネルの追加をクリックして、チャネルの作成ダイアログを開きます。

  3. チャネルに名前を付けます。

  4. チャネル・タイプとして「Facebookメッセンジャ」を選択します。
    create-channel-dialog-started.pngの説明は以下のとおりです
    「図create-channel-dialog-started.pngの説明」

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

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

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

  8. チャネル・ページで、トークンの検証とWebHook URLの両方をコピーし、システム上で都合のよい場所に貼り付けます。 Facebook Webhookを構成するには、これらが必要です。
    fb-channel-complete.pngの説明は以下のとおりです
    「図fb-channel-complete.pngの説明」

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

Facebook Messengerで、前のステップでDigital Assistantによって生成されたWebフックURLを使用して、コールバックURLを定義します。

  1. Facebook Messengerで、Webhook用に最初に作成したプロジェクトを選択していることを確認します。


    fb-messenger-project.pngの説明は以下のとおりです
    図fb-messenger-project.pngの説明

  2. 「Messenger」をクリックし、「設定」を選択します。
    fb-navbar.pngの説明は以下のとおりです
    「図fb-navbar.pngの説明」

  3. 「イベントのサブスクライブ」をクリックして「新規ページ・サブスクリプション」ダイアログを開きます。

  4. Digital Assistantチャネル・ページから取得したWebフックURLをコピーし、それを「新規ページ・サブスクリプション」ダイアログの「CallBack URL」フィールドに貼り付けます。

  5. Digital Assistantによって生成される「トークンの検証」をコピーし、「トークンの検証」フィールドに貼り付けます。

  6. サブスクリプション・フィールドで、messagesおよびmessaging_postbacksのコールバック・イベントを選択します。

    messagesイベントは、だれかがFacebookページにメッセージを送信するたびにトリガーされます。

  7. 「検証および保存」をクリックします。
  8. このページをサブスクライブします。

    1. メッセンジャ設定のWebhookセクションで、デジタル・アシスタント(スタンドアロン・スキル)の場合はFacebookページを選択します。

    2. 「サブスクライブ」をクリックします。

    .

    ヒント:

    最初に「サブスクライブ解除」 → 「サブスクライブ」をクリックして、Webhookをバウンスする必要がある場合があります。

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

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

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

これで、チャネルを介してボット・スルーできます。

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

Facebook Channelとメッセージの構成が完了したら、Facebookのページ、Facebook Messenger (https://www.messenger.com/)およびFacebook Messengerアプリケーション(これはFacebookアプリ・アイコンのイメージです。)を使用して、これらのボットをテストできます。 検索でボットを見つけたら、いつでもチャットを開始できます。 ダイアログ・フローに加えた変更をリアルタイムで表示できます。
test-bot.pngの説明は以下のとおりです
「図test-bot.pngの説明」

永続メニュー

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

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


persistent-menu1.jpgの説明は以下のとおりです
図persistent-menu1.jpgの説明

永続メニュー・アイテムの作成

デジタル・アシスタントまたはスタンドアロン・スキルの永続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プラットフォームAPI」へのPOSTコールを含む永続メニュー・アイテムを設定します。

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

Digital Assistantの永続メニュー・アイテム

次に、デジタル・アシスタントの永続的なFacebookメニュー・アイテムを追加するための「Messengerプラットフォーム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プラットフォーム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\": {}"
            }
          ]
    }
  ]
}

サポートされる機能

Digital AssistantのFacebook Messengerチャネルでは、次の機能がサポートされています:

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

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

メッセージの制約

Digital AssistantのFacebookメッセンジャのチャネルには、次のメッセージ制約があります:

  • テキスト・メッセージ
    • テキスト・メッセージの最大長: 640文字。 長さが640を超えると、テキストは複数のメッセージに分割されます。
    • テキスト・アクション・ラベルの最大長: 20文字
    • 許可されるテキスト・アクションのタイプ: ポストバック、コール、URL
    • テキスト・アクションの最大数: 3。 さらにテキスト・アクションがある場合、メッセージは複数の水平カードに変換されます。その場合、各カードのタイトルと同じテキストが使用され、各カードには最大3個のアクションが含まれます。
  • 水平カード
    • タイトルの最大長: 80文字
    • 摘要の最大長: 80文字
    • カード処理ラベルの最大長: 20文字
    • カードの最大数: 10
    • カード処理の最大数: 3。 カード処理の数が3を超える場合、残りのカード処理を表示するためにカードが複製されます。
    • カード処理の最小数: 0
    • カード・リスト・アクションの最大数: 0
    • 少なくとも1つの説明、イメージまたはアクションが必要ですか: Yes
    • 許可されているカード処理のタイプ: ポストバック、コール、URL、シェア
    • カード・リスト処理のタイプ許可: N/A
  • 垂直カード
    • 未サポート
  • アタッチメント・メッセージ
    • サポート対象: Yes
    • アタッチ・アクションは許可されていますか: いいえ
  • アクション・ボタン
    • グローバル・アクション・ラベルの最大長: 20文字
    • グローバル・アクションの最大数: 11
    • 許可されるグローバル・アクションのタイプ: ポストバック

Facebook Messengerチャネル拡張機能

Facebook Messengerチャネルの場合、共通レスポンス・コンポーネントの機能を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ビューでエクスペリエンスを緊密に統合できます。 https://developers.facebook.com/docs/messenger-platform/reference/messenger-extensions-sdkを参照してください
fallback_url 有効なURL 次のいずれか:
  • "url"のプロパティが指定されているカード
  • "type": "url"のaction
 「メッセンジャ拡張機能」をサポートしていないクライアントで使用するURL。 これが定義されていない場合、urlがフォールバックとして使用されます。 指定できるのは、messenger_extensionsがtrueの場合のみです。 https://developers.facebook.com/docs/messenger-platform/reference/buttons/url#propertiesを参照してください
webview_share_button
  • hide
 次のいずれか:
  • "url"のプロパティが指定されているカード
  • "type": "url"のaction
 webビューで共有ボタンを無効にする(機密情報の)には、hideに設定します。 これは、開発者が拡張機能を使用して開始したシェアには影響しません。
share_contents 「Facebook Messengerの送信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の全般的な情報は、「チャネル固有の拡張」を参照してください。