このページは Cloud Translation API によって翻訳されました。

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

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

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

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

Chat アプリは、Google Chat でアクションを実行するために、次のような操作を行えます。

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

前提条件

インタラクティブ機能を有効にする Google Chat アプリ。インタラクティブな Chat アプリを作成するには、使用するアプリのアーキテクチャに基づいて、次のいずれかのクイックスタートを完了します。

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

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

メッセージ 1 枚以上のカードを含むメッセージを表示できます
ホームページこれは、[ホーム] タブから直接表示されるカードです。やり取りできます。
ダイアログ: 開くカードです。メッセージとホームページから新しいウィンドウを表示できます

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

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

以下では、3 種類の日付と 3 種類の日付で構成されるカードを表示します。時間入力:

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

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

ユーザーがボタンをクリックするたびに、Chat アプリはインタラクションに関する情報を含む CARD_CLICKED インタラクションイベントを受信します。CARD_CLICKED インタラクションイベントのペイロードには、ユーザーが入力した値を含む common.formInputs オブジェクトが含まれます。

オブジェクトから値を取得できます。 common.formInputs.WIDGET_NAME、ここで WIDGET_NAME は、ウィジェットに指定した name フィールドです。値は、ウィジェットの特定のデータ型（Inputs オブジェクトとして表されます）として返されます。次の例では、テキストメッセージを使って連絡先情報を収集するカード入力、日時選択ツール、選択入力ウィジェット:

{
  "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 インタラクションイベントの一部を示しています。ユーザーがウィジェットごとに入力した値:

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 アプリはユーザーがウィジェットに入力した値を取得するために使用できます。次の表に、特定のフォーム入力ウィジェットの値を取得する方法を示します。表には、各ウィジェットが受け入れるデータ型、インタラクションイベントに値が保存される場所、値の例が表示されます。

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

別のカードにデータを移行する

ユーザーがカードから情報を送信した後、返品が必要カードを追加して、次の操作を行うことができます。

長いフォームを入力する際にユーザーが混乱しないように、個別のセクションを作成します。
最初のカードの情報を確認して確認できるようにし、送信する前に回答を確認できるようにします。
フォームの残りの部分を動的に入力する。たとえば、ユーザーに予約を作成するよう求める Chat アプリは、予約の理由を尋ねる最初のカードを表示し、予約の種類に基づいて空き時間が表示される別のカードを表示します。

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

{
  "buttonList": {
    "buttons": [{
      "text": "Submit",
      "onClick": {
        "action": {
          "function": "openNextCard",
          "parameters": [{
            "key": "WIDGET_NAME",
            "value": "USER_INPUT_VALUE"
          }]
        }
      }
    }]
  }
}

ここで、WIDGET_NAME はウィジェットの name で、 USER_INPUT_VALUE はユーザーが入力する内容です。たとえば、テキスト入力個人の名前を収集する入力です。ウィジェット名は contactName、（例: Kai O）。

ユーザーがボタンをクリックすると、Chat アプリは CARD_CLICKED インタラクションイベント。値を取得するには、event.common.parameters オブジェクトを使用します。

以下は、ユーザーを含むパラメータを渡す方法の例を示しています。次のカードを開く関数に入力データを渡します。

Node.js

// Respond to button clicks on cards or dialogs
if (event.type === "CARD_CLICKED") {

  // Open another card.
  if (event.common.invokedFunction === "openNextCard") {
    const parameters = event.common.parameters;
    openNextCard(event);
  }
}

Python

  # Respond to button clicks on cards or dialogs
  if request.get('type') == 'CARD_CLICKED':
    if invoked_function := request.get('common', dict()).get('invokedFunction'):
      if invoked_function == 'open_next_card':
        parameters = request.get('common', dict()).get('parameters'),
        return open_next_card(parameters)

Apps Script

// Respond to button clicks on cards or dialogs
function onCardClick(event) {
  if (event.common.invokedFunction === "openNextCard") {
    const parameters = event.common.parameters;
    return openNextCard(parameters);
  }
}

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

カードメッセージまたはダイアログからデータを受信した後、 Chat アプリは、受け取った通知を確認するか、エラーを返す場合があります。

次の例では、Chat 用アプリがテキストメッセージを送信し、送信されたフォームが正常に受信されたことを確認する表示されます。

Apps Script

function submitCardForm(contactName, contactBirthdate, contactType) {
    return {
      "text": "You entered the following contact information:\n\n" +
      "*Name:* " + contactName + "\n" +
      "*Birthdate:* " + contactBirthdate + "\n" +
      "*Type:* " + contactType
      }
}

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

トラブルシューティング

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

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

連絡先管理ツールのサンプルを表示します。これは、カードメッセージとダイアログから連絡先フォームに記入するようユーザーに求める Chat アプリです。
インタラクティブダイアログを開く

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

前提条件

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

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

操作イベントを処理する

HTTP

Apps Script

別のカードにデータを移行する

Node.js

Python

Apps Script

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

Apps Script

トラブルシューティング

関連トピック