ユーザーが入力した情報を処理する

このガイドでは、ユーザーが入力した情報を受信して読み取る方法について説明します カード メッセージ および ダイアログで表示できます。 Chat アプリが受信、読み取り、応答するデータをユーザーは入力できる できます。ユーザーが情報を入力できるウィジェットには、次のものがあります。

カードビルダーを使用して、Chat 用アプリ用の JSON カード メッセージを設計し、プレビューします。

カードビルダーを開く

ユーザーからデータ入力を受け取ると、Chat アプリは次のことを行えるようになります。 次のとおりです。

  • カスタマー サービスのケースを更新する。
  • 作業指示書を作成する。
  • ウェブサービスで認証する。

前提条件

Node.js

インタラクティブ機能を有効にする Google Chat アプリ。新しい HTTP サービスを使用したインタラクティブな Chat アプリについては、こちらのクイックスタートを完了します。

Apps Script

インタラクティブ機能を有効にする Google Chat アプリ。新しい 対話型の Chat アプリを使用するには、このクイックスタートを完了します。

Python

インタラクティブ機能を有効にする Google Chat アプリ。新しい HTTP サービスを使用したインタラクティブな Chat アプリについては、こちらのクイックスタートを完了します。

データの受信の仕組み

Chat アプリは、 メッセージに反応します。この例では、プロンプトの入力を求めるダイアログが 連絡先の情報を TextInput および SelectionInput ウィジェット:

さまざまなウィジェットを表示するダイアログ。

完了すると、Chat アプリは JSON 形式でユーザーがダイアログに入力した インタラクション イベントです。ここで:

ユーザーが入力した内容に関するデータを取得するには、 Event.common.formInputs フィールドで確認できます。formInputs フィールドは、キーが格納されているマップです。 各ウィジェットに割り当てられた文字列 ID と値は、 表示されます。オブジェクトごとに異なる入力データ型を表します。対象 例: Event.common.formInputs.stringInputs 入力を表します。

アプリはユーザーが入力した最初の値に event.common.formInputs.NAME.stringInputs.value[0], ここで、NAME は name フィールドは TextInput ウィジェット。

カードからデータを受け取る

ユーザーがカード メッセージにデータを入力すると、 Chat アプリが Chat 用アプリを受信する イベントでトリガーされます。

JSON

{
  "type": enum (EventType),
  "eventTime": string,
  "threadKey": string,
  "message": {
    object (Message)
  },
  "user": {
    object (User)
  },
  "space": {
    object (Space)
  },
  "action": {
    object (FormAction)
  },
  "configCompleteRedirectUrl": string,
  "common": {

    // Represents user data entered in a card.
    "formInputs": {

      // Represents user data entered for a specific field in a card.
      "NAME": {

        // Represents string data entered in a card, like text input fields
        // and check boxes.
        "stringInputs": {

          // An array of strings entered by the user in a card.
          "value": [
            string
          ]
        }
      }
    },
    "parameters": {
      string: string,
      ...
    },
    "invokedFunction": string
  }
}

ダイアログからデータを受信する

ユーザーがダイアログでデータを送信すると、Chat 用アプリは 次のような別の Chat 用アプリのインタラクション イベントを受信します。 次の例をご覧ください。

JSON

{
  "type": enum (EventType),
  "eventTime": string,
  "threadKey": string,
  "message": {
    object (Message)
  },
  "user": {
    object (User)
  },
  "space": {
    object (Space)
  },
  "action": {
    object (FormAction)
  },
  "configCompleteRedirectUrl": string,

  // Indicates that this event is dialog-related.
  "isDialogEvent": true,

  // Indicates that a user clicked a button, and all data
  // they entered in the dialog is included in Event.common.formInputs.
  "dialogEventType": "SUBMIT_DIALOG",
  "common": {
    "userLocale": string,
    "hostApp": enum (HostApp),
    "platform": enum (Platform),
    "timeZone": {
      object (TimeZone)
    },

    // Represents user data entered in a dialog.
    "formInputs": {

      // Represents user data entered for a specific field in a dialog.
      "NAME": {

        // Represents string data entered in a dialog, like text input fields
        // and check boxes.
        "stringInputs": {

          // An array of strings entered by the user in a dialog.
          "value": [
            string
          ]
        }
      }
    },
    "parameters": {
      string: string,
      ...
    },
    "invokedFunction": string
  }
}

カード メッセージまたはダイアログから収集したデータに応答する

カード メッセージまたはダイアログからデータを受信した後、 Chat アプリは、受け取った通知を確認するか、 どちらもエラーを返すことにより、エラーを返します。 ActionResponse:

  • 正常に受信されたことを確認するには、 ActionResponse パラメータに "actionStatus": "OK" が含まれています。
  • エラーを返すには、 ActionResponse パラメータに "actionStatus": "ERROR MESSAGE" が含まれています。

例

次の例では、name 値が存在するかどうかを確認します。指定されていない場合、 エラーが返された場合。存在する場合、アプリはフォームデータの受信を承認します。 ダイアログが閉じます。

Node.js

/**
 * Checks for a form input error, the absence of
 * a "name" value, and returns an error if absent.
 * Otherwise, confirms successful receipt of a dialog.
 *
 * Confirms successful receipt of a dialog.
 *
 * @param {Object} event the event object from Chat API.
 *
 * @return {object} open a Dialog in Google Chat.
 */
function receiveDialog(event) {

  // Checks to make sure the user entered a name
  // in a dialog. If no name value detected, returns
  // an error message.
  if (event.common.formInputs.WIDGET_NAME.stringInputs.value[0] == "") {
    res.json({
      "actionResponse": {
        "type": "DIALOG",
        "dialogAction": {
          "actionStatus": "Don't forget to name your new contact!"
        }
      }
    });

  // Otherwise the app indicates that it received
  // form data from the dialog. Any value other than "OK"
  // gets returned as an error. "OK" is interpreted as
  // code 200, and the dialog closes.
  } else {
    res.json({
      "actionResponse": {
        "type": "DIALOG",
        "dialogAction": {
          "actionStatus": "OK"
        }
      }
    });
  }
}

Apps Script

この例では、メッセージにカード メッセージを送信する際に、 カード JSON。 また、 Apps Script カードサービス。 

/**
 * Checks for a form input error, the absence of
 * a "name" value, and returns an error if absent.
 * Otherwise, confirms successful receipt of a dialog.
 *
 * Confirms successful receipt of a dialog.
 *
 * @param {Object} event the event object from Chat API.
 *
 * @return {object} open a Dialog in Google Chat.
 */
function receiveDialog(event) {

  // Checks to make sure the user entered a name
  // in a dialog. If no name value detected, returns
  // an error message.
  if (event.common.formInputs.WIDGET_NAME[""].stringInputs.value[0] == "") {
    return {
      "actionResponse": {
        "type": "DIALOG",
        "dialogAction": {
          "actionStatus": "Don't forget to name your new contact!"
        }
      }
    };

  // Otherwise the app indicates that it received
  // form data from the dialog. Any value other than "OK"
  // gets returned as an error. "OK" is interpreted as
  // code 200, and the dialog closes.
  } else {
    return {
      "actionResponse": {
        "type": "DIALOG",
        "dialogAction": {
          "actionStatus": "OK"
        }
      }
    };
  }
}

Python

def receive_dialog(event: Mapping[str, Any]) -> Mapping[str, Any]:
  """Checks for a form input error, the absence of a "name" value, and returns
     an error if absent. Otherwise, confirms successful receipt of a dialog.

  Args:
      event (Mapping[str, Any]): the event object from Chat API.

  Returns:
      Mapping[str, Any]: the response.
  """

  if common := event.get('common'):
    if form_inputs := common.get('formInputs'):
      if contact_name := form_inputs.get('WIDGET_NAME'):
        if string_inputs := contact_name.get('stringInputs'):
          if name := string_inputs.get('value')[0]:
            return {
              'actionResponse': {
                'type': 'DIALOG',
                'dialogAction': {
                  'actionStatus': 'OK'
                }
              }
            }
          else:
            return {
              'actionResponse': {
                'type': 'DIALOG',
                'dialogAction': {
                  'actionStatus': 'Don\'t forget to name your new contact!'
                }
              }
            }

トラブルシューティング

Google Chat アプリまたは card がエラーを返した場合、 Chat のインターフェースに「エラーが発生しました」というメッセージが表示されている。 または「リクエストを処理できません」が表示されます。場合によっては、Chat の UI が エラー メッセージは表示されませんが、Chat 用アプリまたは 予期しない結果が生じた場合たとえば、カード メッセージに 表示されます。

Chat UI にエラー メッセージが表示されない場合がありますが、 エラーの修正に役立つ、わかりやすいエラー メッセージとログデータ Chat 用アプリのエラーロギングが有効になっている場合。表示のヘルプについては、 エラーの修正について詳しくは、このモジュールの Google Chat のエラーのトラブルシューティングと修正