Google Chat ユーザーから情報を収集して処理する

このガイドでは、カードベースのインターフェースでフォーム入力を作成して、Google Chat アプリがユーザーから情報を収集して処理する方法について説明します。

さまざまなウィジェットが表示されたダイアログ。 — **図 1**: 連絡先情報を収集するダイアログを開くサンプル Chat アプリ。

**図 1**: 連絡先情報を収集するダイアログを開くサンプル Chat アプリ。

Chat アプリは、Chat の内外でアクションを実行するために、次のような方法でユーザーに情報をリクエストします。

設定を構成します。たとえば、ユーザーが通知設定をカスタマイズしたり、Chat アプリを 1 つ以上のスペースに構成して追加したりできるようにします。
他の Google Workspace アプリケーションで情報を作成または更新します。たとえば、ユーザーが Google カレンダーの予定を作成できるようにします。
ユーザーが他のアプリやウェブサービスの利用可能なリソースにアクセスして更新できるようにします。たとえば、Chat アプリを使用すると、ユーザーは Chat スペースから直接サポートチケットのステータスを更新できます。

前提条件

Node.js

インタラクションイベントを受信して応答する Google Chat アプリ。HTTP サービスを使用してインタラクティブな Chat アプリを作成するには、このクイックスタートを完了してください。

Python

Java

Apps Script

インタラクションイベントを受信して応答する Google Chat アプリ。Apps Script でインタラクティブな Chat アプリを作成するには、このクイックスタートを完了してください。

カードを使用してフォームを作成する

情報を収集するために、Chat アプリはフォームとその入力を設計し、カードに組み込みます。カードをユーザーに表示するために、Chat アプリは次の Chat インターフェースを使用できます。

1 つ以上のカードを含むメッセージ
[ホームページ]。Chat アプリとのダイレクトメッセージの [**ホーム**] タブに表示されるカードです。
ダイアログ。メッセージとホームページから新しいウィンドウで開くカードです。

Chat アプリは、次のウィジェットを使用してカードを作成できます。

ユーザーに情報をリクエストするフォーム入力ウィジェット。必要に応じて、フォーム入力ウィジェットに検証を追加して、ユーザーが情報を正しく入力してフォーマットできるようにします。Chat アプリは、次のフォーム入力ウィジェットを使用できます。
- テキスト入力（textInput）自由形式または候補のテキスト用。
- 選択入力（selectionInput）は、チェックボックス、ラジオボタン、プルダウンメニューなどの選択可能な UI 要素です。選択入力ウィジェットは、静的データソースまたは動的データソースから項目を入力することもできます。たとえば、ユーザーはメンバーになっている Chat スペースのリストから選択できます。
- 日付と時刻のピッカー (dateTimePicker)は、日付と時刻のエントリに使用します。
ユーザーがカードに入力した値を送信できるようにするボタンウィジェットユーザーがボタンをクリックすると、Chat アプリは受信した情報を処理できます。

次の例では、カードはテキスト入力、日時ピッカー、選択入力を使用して連絡先情報を収集します。

この連絡先フォームを使用する Chat アプリの例については、次のコードをご覧ください。

Node.js

node/contact-form-app/index.js

GitHub で表示

/**
 * The section of the contact card that contains the form input widgets. Used in a dialog and card message.
 * To add and preview widgets, use the Card Builder: https://addons.gsuite.google.com/uikit/builder
 */
const CONTACT_FORM_WIDGETS = [
  {
    "textInput": {
      "name": "contactName",
      "label": "First and last name",
      "type": "SINGLE_LINE"
    }
  },
  {
    "dateTimePicker": {
      "name": "contactBirthdate",
      "label": "Birthdate",
      "type": "DATE_ONLY"
    }
  },
  {
    "selectionInput": {
      "name": "contactType",
      "label": "Contact type",
      "type": "RADIO_BUTTON",
      "items": [
        {
          "text": "Work",
          "value": "Work",
          "selected": false
        },
        {
          "text": "Personal",
          "value": "Personal",
          "selected": false
        }
      ]
    }
  }
];

Python

python/contact-form-app/main.py

GitHub で表示

# The section of the contact card that contains the form input widgets. Used in a dialog and card message.
# To add and preview widgets, use the Card Builder: https://addons.gsuite.google.com/uikit/builder
CONTACT_FORM_WIDGETS = [
  {
    "textInput": {
      "name": "contactName",
      "label": "First and last name",
      "type": "SINGLE_LINE"
    }
  },
  {
    "dateTimePicker": {
      "name": "contactBirthdate",
      "label": "Birthdate",
      "type": "DATE_ONLY"
    }
  },
  {
    "selectionInput": {
      "name": "contactType",
      "label": "Contact type",
      "type": "RADIO_BUTTON",
      "items": [
        {
          "text": "Work",
          "value": "Work",
          "selected": False
        },
        {
          "text": "Personal",
          "value": "Personal",
          "selected": False
        }
      ]
    }
  }
]

Java

java/contact-form-app/src/main/java/com/google/chat/contact/App.java

GitHub で表示

// The section of the contact card that contains the form input widgets. Used in a dialog and card message.
// To add and preview widgets, use the Card Builder: https://addons.gsuite.google.com/uikit/builder
final static private List<GoogleAppsCardV1Widget> CONTACT_FORM_WIDGETS = List.of(
  new GoogleAppsCardV1Widget().setTextInput(new GoogleAppsCardV1TextInput()
    .setName("contactName")
    .setLabel("First and last name")
    .setType("SINGLE_LINE")),
  new GoogleAppsCardV1Widget().setDateTimePicker(new GoogleAppsCardV1DateTimePicker()
    .setName("contactBirthdate")
    .setLabel("Birthdate")
    .setType("DATE_ONLY")),
  new GoogleAppsCardV1Widget().setSelectionInput(new GoogleAppsCardV1SelectionInput()
    .setName("contactType")
    .setLabel("Contact type")
    .setType("RADIO_BUTTON")
    .setItems(List.of(
      new GoogleAppsCardV1SelectionItem()
        .setText("Work")
        .setValue("Work")
        .setSelected(false),
      new GoogleAppsCardV1SelectionItem()
        .setText("Personal")
        .setValue("Personal")
        .setSelected(false)))));

Apps Script

apps-script/contact-form-app/contactForm.gs

GitHub で表示

/**
 * The section of the contact card that contains the form input widgets. Used in a dialog and card message.
 * To add and preview widgets, use the Card Builder: https://addons.gsuite.google.com/uikit/builder
 */
const CONTACT_FORM_WIDGETS = [
  {
    "textInput": {
      "name": "contactName",
      "label": "First and last name",
      "type": "SINGLE_LINE"
    }
  },
  {
    "dateTimePicker": {
      "name": "contactBirthdate",
      "label": "Birthdate",
      "type": "DATE_ONLY"
    }
  },
  {
    "selectionInput": {
      "name": "contactType",
      "label": "Contact type",
      "type": "RADIO_BUTTON",
      "items": [
        {
          "text": "Work",
          "value": "Work",
          "selected": false
        },
        {
          "text": "Personal",
          "value": "Personal",
          "selected": false
        }
      ]
    }
  }
];

情報を収集するために使用できるインタラクティブウィジェットのその他の例については、インタラクティブなカードやダイアログを設計するをご覧ください。

インタラクティブウィジェットからデータを受信する

ユーザーがボタンをクリックすると、Chat アプリはボタンの場所に応じてインタラクションイベントを受信します。

ボタンがメッセージまたはダイアログにある場合、Chat アプリはインタラクションイベント CARD_CLICKED を受信します。 CARD_CLICKED インタラクションイベントのペイロードには、ユーザーが入力した値を含む common.formInputs オブジェクトが含まれています。

値は、オブジェクト common.formInputs.WIDGET_NAME から取得できます。ここで、 WIDGET_NAME はウィジェットに指定した name フィールドです。値は、ウィジェットの特定のデータ型（オブジェクトとして表される）として返されます。Inputs

次は、ユーザーが各ウィジェットに値を入力した CARD_CLICKED インタラクションイベントの一部を示しています。
HTTP
```
{
  "type": "CARD_CLICKED",
  "common": { "formInputs": {
    "contactName": { "stringInputs": {
      "value": ["Kai 0"]
    }},
    "contactBirthdate": { "dateInput": {
      "msSinceEpoch": 1000425600000
    }},
    "contactType": { "stringInputs": {
      "value": ["Personal"]
    }}
  }}
}
```
Apps Script
```
{
  "type": "CARD_CLICKED",
  "common": { "formInputs": {
    "contactName": { "": { "stringInputs": {
      "value": ["Kai 0"]
    }}},
    "contactBirthdate": { "": { "dateInput": {
      "msSinceEpoch": 1000425600000
    }}},
      "contactType": { "": { "stringInputs": {
      "value": ["Personal"]
    }}}
  }}
}
```

ボタンがホームページにある場合、 Chat アプリは SUBMIT_FORMインタラクションイベントを受信します。インタラクションイベントのペイロードには、ユーザーが入力した値を含む commonEventObject.formInputs オブジェクトが含まれています。

値は、オブジェクト commonEventObject.formInputs.WIDGET_NAME から取得できます。ここで、 WIDGET_NAME はウィジェットに指定した name フィールドです。値は、ウィジェットの特定のデータ型（オブジェクトとして表される）として返されます。Inputs

次は、ユーザーが各ウィジェットに値を入力した SUBMIT_FORM インタラクションイベントの一部を示しています。

HTTP

{
  "type": "SUBMIT_FORM",
  "commonEventObject": { "formInputs": {
    "contactName": { "stringInputs": {
      "value": ["Kai 0"]
    }},
    "contactBirthdate": { "dateInput": {
      "msSinceEpoch": 1000425600000
    }},
    "contactType": { "stringInputs": {
      "value": ["Personal"]
    }}
  }}
}

Apps Script

{
  "type": "SUBMIT_FORM",
  "commonEventObject": { "formInputs": {
    "contactName": { "": { "stringInputs": {
      "value": ["Kai 0"]
    }}},
    "contactBirthdate": { "": { "dateInput": {
      "msSinceEpoch": 1000425600000
    }}},
      "contactType": { "": { "stringInputs": {
      "value": ["Personal"]
    }}}
  }}
}

データを受信するには、Chat アプリがインタラクションイベントを処理して、ユーザーがウィジェットに入力した値を取得します。次の表に、特定のフォーム入力ウィジェットの値を取得する方法を示します。ウィジェットごとに、ウィジェットが受け入れるデータ型、インタラクションイベントに値が保存される場所、値の例を示します。

フォーム入力ウィジェット	入力データのタイプ	インタラクションイベントからの入力値	値の例
`textInput`	`stringInputs`	`event.common.formInputs.contactName.stringInputs.value[0]`	`Kai O`
`selectionInput`	`stringInputs`	最初または唯一の値を取得するには、`event.common.formInputs.contactType.stringInputs.value[0]`	`Personal`
日付のみを受け入れる `dateTimePicker`。	`dateInput`	`event.common.formInputs.contactBirthdate.dateInput.msSinceEpoch`。	`1000425600000`

データを別のカードに転送する

ユーザーがカードから情報を送信した後、次のいずれかを行うために追加のカードを返す必要がある場合があります。

個別のセクションを作成して、ユーザーが長いフォームを入力できるようにします。
ユーザーが最初のカードの情報をプレビューして確認できるようにします。これにより、ユーザーは送信前に回答を確認できます。
フォームの残りの部分を動的に入力します。たとえば、ユーザーに予約の作成を促すために、Chat アプリは、予約の理由をリクエストする最初のカードを表示し、予約タイプに基づいて利用可能な時間を提供する別のカードを入力できます。

最初のカードから入力されたデータを転送するには、次の例に示すように、ウィジェットの name とユーザーが入力した値を含む actionParameters を使用して button を作成します。

Node.js

node/contact-form-app/index.js

GitHub で表示

buttonList: { buttons: [{
  text: "Submit",
  onClick: { action: {
    function: "submitForm",
    parameters: [{
      key: "contactName", value: name }, {
      key: "contactBirthdate", value: birthdate }, {
      key: "contactType", value: type
    }]
  }}
}]}

Python

python/contact-form-app/main.py

GitHub で表示

'buttonList': { 'buttons': [{
  'text': "Submit",
  'onClick': { 'action': {
    'function': "submitForm",
    'parameters': [{
      'key': "contactName", 'value': name }, {
      'key': "contactBirthdate", 'value': birthdate }, {
      'key': "contactType", 'value': type
    }]
  }}
}]}

Java

java/contact-form-app/src/main/java/com/google/chat/contact/App.java

GitHub で表示

new GoogleAppsCardV1Widget().setButtonList(new GoogleAppsCardV1ButtonList().setButtons(List.of(new GoogleAppsCardV1Button()
  .setText("Submit")
  .setOnClick(new GoogleAppsCardV1OnClick().setAction(new GoogleAppsCardV1Action()
    .setFunction("submitForm")
    .setParameters(List.of(
      new GoogleAppsCardV1ActionParameter().setKey("contactName").setValue(name),
      new GoogleAppsCardV1ActionParameter().setKey("contactBirthdate").setValue(birthdate),
      new GoogleAppsCardV1ActionParameter().setKey("contactType").setValue(type))))))))));

Apps Script

apps-script/contact-form-app/main.gs

GitHub で表示

buttonList: { buttons: [{
  text: "Submit",
  onClick: { action: {
    function: "submitForm",
    parameters: [{
      key: "contactName", value: name }, {
      key: "contactBirthdate", value: birthdate }, {
      key: "contactType", value: type
    }]
  }}
}]}

ユーザーがボタンをクリックすると、Chat アプリは CARD_CLICKED インタラクションイベントを受信し、そこからデータを受信できます。

フォームの送信に応答する

カードメッセージまたはダイアログからデータを受信すると、Chat アプリは受信を確認するか、エラーを返して応答します。

次の例では、Chat アプリはテキストメッセージを送信して、ダイアログまたはカードメッセージから送信されたフォームを正常に受信したことを確認します。

Node.js

node/contact-form-app/index.js

GitHub で表示

const contactName = event.common.parameters["contactName"];
// Checks to make sure the user entered a contact name.
// If no name value detected, returns an error message.
const errorMessage = "Don't forget to name your new contact!";
if (!contactName && event.dialogEventType === "SUBMIT_DIALOG") {
  return { actionResponse: {
    type: "DIALOG",
    dialogAction: { actionStatus: {
      statusCode: "INVALID_ARGUMENT",
      userFacingMessage: errorMessage
    }}
  }};
}

Python

python/contact-form-app/main.py

GitHub で表示

contact_name = event.get('common').get('parameters')["contactName"]
# Checks to make sure the user entered a contact name.
# If no name value detected, returns an error message.
error_message = "Don't forget to name your new contact!"
if contact_name == "" and "SUBMIT_DIALOG" == event.get('dialogEventType'):
  return { 'actionResponse': {
    'type': "DIALOG",
    'dialogAction': { 'actionStatus': {
      'statusCode': "INVALID_ARGUMENT",
      'userFacingMessage': error_message
    }}
  }}

Java

java/contact-form-app/src/main/java/com/google/chat/contact/App.java

GitHub で表示

String contactName = event.at("/common/parameters/contactName").asText();
// Checks to make sure the user entered a contact name.
// If no name value detected, returns an error message.
String errorMessage = "Don't forget to name your new contact!";
if (contactName.isEmpty() && event.at("/dialogEventType") != null && "SUBMIT_DIALOG".equals(event.at("/dialogEventType").asText())) {
  return new Message().setActionResponse(new ActionResponse()
    .setType("DIALOG")
    .setDialogAction(new DialogAction().setActionStatus(new ActionStatus()
      .setStatusCode("INVALID_ARGUMENT")
      .setUserFacingMessage(errorMessage))));
}

Apps Script

apps-script/contact-form-app/main.gs

GitHub で表示

const contactName = event.common.parameters["contactName"];
// Checks to make sure the user entered a contact name.
// If no name value detected, returns an error message.
const errorMessage = "Don't forget to name your new contact!";
if (!contactName && event.dialogEventType === "SUBMIT_DIALOG") {
  return { actionResponse: {
    type: "DIALOG",
    dialogAction: { actionStatus: {
      statusCode: "INVALID_ARGUMENT",
      userFacingMessage: errorMessage
    }}
  }};
}

ダイアログを処理して閉じるには、確認メッセージを送信するか、元のメッセージまたはカードを更新するか、ダイアログを閉じるだけかを指定する ActionResponse オブジェクトを返します。手順については、ダイアログを閉じるをご覧ください。

トラブルシューティング

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

Chat UI にエラーメッセージが表示されない場合でも、 Chat アプリのエラーロギングが有効になっている場合は、エラーの修正に役立つ説明的なエラーメッセージとログデータを使用できます。エラーの表示、デバッグ、修正については、 Google Chat エラーのトラブルシューティングと修正をご覧ください。

連絡先管理ツールのサンプルをご覧ください。これは、カードメッセージとダイアログから連絡先フォームの入力を求める Chat アプリです。
インタラクティブなダイアログを開く

Google Chat ユーザーから情報を収集して処理する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

前提条件

Node.js

Python

Java

Apps Script

カードを使用してフォームを作成する

Node.js

Python

Java

Apps Script

インタラクティブ ウィジェットからデータを受信する

HTTP

Apps Script

HTTP

Apps Script

データを別のカードに転送する

Node.js

Python

Java

Apps Script

フォームの送信に応答する

Node.js

Python

Java

Apps Script

トラブルシューティング

関連トピック

Google Chat ユーザーから情報を収集して処理する

インタラクティブウィジェットからデータを受信する