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

Google Chat で連絡先を収集、管理する

このチュートリアルでは、Google Chat ユーザーが個人用とビジネス用の連絡先を管理できるようにする Google Chat アプリを作成する方法について説明します。収集完了すると、Chat アプリはユーザーにカードメッセージとダイアログでお問い合わせフォームを作成します

Chat アプリの使用例:

図 1: 「 Chat アプリはスラッシュコマンド /about で、テキストメッセージとボタンお問い合わせフォームが開きます
図 2.「 Chat アプリでダイアログが開き、ユーザーは連絡先に関する情報を入力する。
図 3. Chat アプリは確認ダイアログを返します。これにより、ユーザーは送信する前に情報を確認して確認できます。
図 4.ユーザーがフォームを送信すると、Chat アプリから送信を確認する非公開のテキストメッセージが送信されます。
図 5.「 Chat アプリは、ユーザーに連絡先を追加するよう求めるメッセージも表示する。

前提条件

企業または大企業以下へのアクセス権を持つ Google Workspace アカウント Google Chat。

目標

ユーザーインターフェース（UI）の設計と構築 card オブジェクトとして指定し、メッセージとダイアログに UI を表示します。
以下を使用してユーザーが送信した情報を受信して処理するフォーム入力ウィジェットです。
スラッシュコマンドに応答するには、メッセージに返信できます。

アーキテクチャ

Chat アプリは組み込みの Google Apps Script を使用し、インタラクションイベントを処理するユーザーに返信する方法を学びました。

以下は、ユーザーが通常使用する Chat アプリ:

ユーザーが Chat アプリでダイレクトメッセージを開いた場合、または既存のスペースに Chat アプリが追加されます。
Chat アプリは、Google Chat で連絡先を追加するようにお問い合わせフォームを card 渡されます。お問い合わせフォームを表示するには、Chat 用アプリで以下のようにユーザーに対応します。
- 名前リンク付きメッセージとダイレクトメッセージに、次のカードメッセージで応答します。問い合わせフォームが含まれています。
- スラッシュコマンド /addContact に応答して、連絡先フォームを含むダイアログを開きます。
- スラッシュコマンド /about に対して、次を含むテキストメッセージで応答します。ユーザーが [連絡先を追加] ボタンをクリックすると、ダイアログが開き、お問い合わせフォーム
お問い合わせフォームが表示されると、ユーザーは次のフィールドとウィジェットに連絡先情報を入力します。
- 氏名: textInput 作成します。
- 生年月日: dateTimePicker 日付のみを受け取るウィジェットも用意されています
- 連絡先の種類: selectionInput ユーザーが 1 つの文字列を選択して送信できるラジオボタンのウィジェット値（Personal または Work のいずれか）を指定できます。
- [確認して送信] ボタン: buttonList ユーザーがクリックして送信する button ウィジェットを含む配列予測します。
Google Chat アプリは CARD_CLICKED インタラクションイベントを処理して、ユーザーが入力した値を処理し、確認カードに値を表示します。
ユーザーは確認カードを確認し、[送信] ボタンをクリックして連絡先情報を確定します。
Google Chat アプリから、プライベートなテキストメッセージが送信を確定します

環境を準備する

このセクションでは、Google Cloud プロジェクトを作成して構成する方法について説明します。 Chat アプリ。

Google Cloud プロジェクトを作成する

Google Cloud コンソール

Google Cloud コンソールで、メニューに移動します。 > IAM と管理 > [プロジェクトを作成] をクリックします。
[プロジェクトの作成] に移動
[プロジェクト名] フィールドに、プロジェクト用のわかりやすい名前を入力します。
省略可: プロジェクト ID を編集するには、[編集] をクリックします。プロジェクト ID は変更できませんそのため、有効期間中にニーズを満たす ID を選択してください。できます。
[ロケーション] フィールドで [参照] をクリックして、プロジェクトの候補となるロケーションを表示します。[選択] をクリックします。 <ph type="x-smartling-placeholder">
</ph> 注意: Google Workspace の組織が見つからない場合
Google Workspace アカウントにログインしていません。Google Workspace デベロッパードキュメントに記載されている機能の一部は、組織に関連付けられたプロジェクトでのみ使用できます。
[作成] をクリックします。Google Cloud コンソールで [ダッシュボード] ページに移動し、プロジェクトが作成される示されます

gcloud CLI

次のいずれかの開発環境で、Google Cloud コンソールに CLI（gcloud）:

Cloud Shell: gcloud CLI でオンラインターミナルを使用する Cloud Shell をアクティブにします。
Cloud Shell をアクティブにする
ローカルシェル: ローカル開発環境を使用するには、インストールと初期化使用できます。
Cloud プロジェクトを作成するには、gcloud projects create コマンドを使用します。
```
gcloud projects create PROJECT_ID
```
作成するプロジェクトの ID を設定して、PROJECT_ID を置き換えます。

認証と権限付与の設定

Google Chat アプリでは、ユーザーが Google Chat などの Google Workspace アプリケーションでアプリを承認できるように、OAuth 同意画面を構成する必要があります。

このチュートリアルでは、テストと内部使用のみを目的とした Chat アプリをデプロイするため、同意画面にプレースホルダ情報を使用できます。Chat 用アプリを公開する前に、実際の情報を含むプレースホルダの情報を除外します。

Google Cloud コンソールで メニュー > API とサービス > OAuth 同意画面。

[OAuth 同意画面] に移動
[ユーザーの種類] で [内部] を選択し、[作成] をクリックします。
[アプリ名] に「Contact Manager」と入力します。
[User support email] で、自分のメールアドレスまたは適切なできます。
[デベロッパーの連絡先情報] にメールアドレスを入力します。
[保存して次へ] をクリックします。
[スコープ] ページで、[保存して次へ] をクリックします。（Chat アプリでは OAuth スコープは必要ありません）。
概要を確認し、[ダッシュボードに戻る] をクリックします。

Chat アプリを作成してデプロイする

次のセクションでは、Terraform Registry の必要なアプリケーションをすべて含む Apps Script プロジェクト作成されるため、コードをコピーして使用する必要はありません。各ファイルを貼り付けます。

必要に応じて、GitHub でプロジェクト全体を確認できます。

GitHub で表示

各ファイルの概要は次のとおりです。

main.gs

ユーザーが Chat アプリにメッセージを送信したとき、Chat アプリのメッセージからボタンをクリックしたとき、ダイアログを開いたり閉じたりしたときのインタラクションイベントなど、すべてのアプリロジックを処理します。

`main.gs` コードを表示

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

GitHub で表示

/**
 * Copyright 2024 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * Responds to a MESSAGE interaction event in Google Chat.
 *
 * @param {Object} event the MESSAGE interaction event from Chat API.
 * @return {Object} message response that opens a dialog or sends private
 *                          message with text and card.
 */
function onMessage(event) {
  if (event.message.slashCommand) {
    switch (event.message.slashCommand.commandId) {
      case 1:
        // If the slash command is "/about", responds with a text message and button
        // that opens a dialog.
        return {
          text: "Manage your personal and business contacts 📇. To add a " +
                  "contact, use the slash command `/addContact`.",
          accessoryWidgets: [{ buttonList: { buttons: [{
            text: "Add Contact",
            onClick: { action: {
              function: "openDialog",
              interaction: "OPEN_DIALOG"
            }}
          }]}}]
        }
      case 2:
        // If the slash command is "/addContact", opens a dialog.
        return openDialog(event);
    }
  }

  // If user sends the Chat app a message without a slash command, the app responds
  // privately with a text and card to add a contact.
  return {
    privateMessageViewer: event.user,
    text: "To add a contact, try `/addContact` or complete the form below:",
    cardsV2: [{
      cardId: "addContactForm",
      card: {
        header: { title: "Add a contact" },
        sections:[{ widgets: CONTACT_FORM_WIDGETS.concat([{
          buttonList: { buttons: [{
            text: "Review and submit",
            onClick: { action: { function : "openNextCard" }}
          }]}
        }])}]
      }
    }]
  };
}

/**
 * Responds to CARD_CLICKED interaction events in Google Chat.
 *
 * @param {Object} event the CARD_CLICKED interaction event from Google Chat
 * @return {Object} message responses specific to the dialog handling.
 */
function onCardClick(event) {
  // Initial dialog form page
  if (event.common.invokedFunction === "openDialog") {
    return openDialog(event);
  // Second dialog form page
  } else if (event.common.invokedFunction === "openNextCard") {
    return openNextCard(
      event.user,
      fetchFormValue(event, "contactName"),
      fetchFormValue(event, "contactBirthdate"),
      fetchFormValue(event, "contactType"),
      event.isDialogEvent
    );
  // Dialog form submission
  } else if (event.common.invokedFunction === "submitForm") {
    const userInputs = event.common.parameters;
    return submitForm(event.user, userInputs, event.dialogEventType);
  }
}

/**
 * Extracts form input value for a given widget.
 *
 * @param {Object} event the CARD_CLICKED interaction event from Google Chat.
 * @param {String} widgetName a unique ID for the widget, specified in the widget's name field.
 * @returns the value inputted by the user, null if no value can be found.
 */
function fetchFormValue(event, widgetName) {
  const formItem = event.common.formInputs[widgetName][""];
  // For widgets that receive StringInputs data, the value input by the user.
  if (formItem.hasOwnProperty("stringInputs")) {
    const stringInput = event.common.formInputs[widgetName][""].stringInputs.value[0];
    if (stringInput != null) {
      return stringInput;
    }
  // For widgets that receive dateInput data, the value input by the user.
  } else if (formItem.hasOwnProperty("dateInput")) {
    const dateInput = event.common.formInputs[widgetName][""].dateInput.msSinceEpoch;
     if (dateInput != null) {
       return dateInput;
     }
  }

  return null;
}

/**
 * Opens a dialog that prompts users to add details about a contact.
 *
 * @return {Object} a message with an action response to open a dialog.
 */
function openDialog() {
  return { actionResponse: {
    type: "DIALOG",
    dialogAction: { dialog: { body: { sections: [{
      header: "Add new contact",
      widgets: CONTACT_FORM_WIDGETS.concat([{
        buttonList: { buttons: [{
          text: "Review and submit",
          onClick: { action: { function: "openNextCard" }}
        }]}
      }])
    }]}}}
  }};
}

/**
 * Returns a dialog or card message that displays a confirmation of contact
 * details before users submit.
 *
 * @param {String} user the user who submitted the information.
 * @param {String} contactName the contact name from the previous dialog or card.
 * @param {String} contactBirthdate the birthdate from the previous dialog or card.
 * @param {String} contactType the contact type from the previous dialog or card.
 * @param {boolean} fromDialog whether the information was submitted from a dialog.
 *
 * @return {Object} returns a dialog or private card message.
 */
function openNextCard(user, contactName, contactBirthdate, contactType, fromDialog) {
  const name = contactName ?? "<i>Not provided</i>";
  const birthdate = contactBirthdate ?? "<i>Not provided</i>";
  const type = contactType ?? "<i>Not provided</i>";
  const cardConfirmation = {
    header: "Your contact",
    widgets: [{
      textParagraph: { text: "Confirm contact information and submit:" }}, {
      textParagraph: { text: "<b>Name:</b> " + name }}, {
      textParagraph: {
        text: "<b>Birthday:</b> " + convertMillisToDateString(birthdate)
      }}, {
      textParagraph: { text: "<b>Type:</b> " + type }}, {
      buttonList: { buttons: [{
        text: "Submit",
        onClick: { action: {
          function: "submitForm",
          parameters: [{
            key: "contactName", value: name }, {
            key: "contactBirthdate", value: birthdate }, {
            key: "contactType", value: type
          }]
        }}
      }]}
    }]
  };

  // Returns a dialog with contact information that the user input.
  if (fromDialog) {
    return { action_response: {
      type: "DIALOG",
      dialogAction: { dialog: { body: { sections: [ cardConfirmation ]}}}
    }};
  }

  // Updates existing card message with contact information that the user input.
  return {
    actionResponse: { type: "UPDATE_MESSAGE" },
    privateMessageViewer: user,
    cardsV2: [{
      card: { sections: [cardConfirmation]}
    }]
  }
}

/**
  * Submits information from a dialog or card message.
  *
  * @param {Object} user the person who submitted the information.
  * @param {Object} userInputs the form input values from event parameters.
  * @param {boolean} dialogEventType "SUBMIT_DIALOG" if from a dialog.
  * @return {Object} a message response that opens a dialog or posts a private
  *                  message.
  */
function submitForm(user, userInputs, dialogEventType) {
  const contactName = userInputs["contactName"];
  // Checks to make sure the user entered a contact name.
  // If no name value detected, returns an error message.
  if (!contactName) {
    const errorMessage = "Don't forget to name your new contact!";
    if (dialogEventType === "SUBMIT_DIALOG") {
      return { actionResponse: {
        type: "DIALOG",
        dialogAction: { actionStatus: {
          statusCode: "INVALID_ARGUMENT",
          userFacingMessage: errorMessage
        }}
      }};
    } else {
      return {
        privateMessageViewer: user,
        text: errorMessage
      };
    }
  }

  // The Chat app indicates that it received form data from the dialog or card.
  // Sends private text message that confirms submission.
  const confirmationMessage = "✅ " + contactName + " has been added to your contacts.";
  if (dialogEventType === "SUBMIT_DIALOG") {
    return {
      actionResponse: {
        type: "NEW_MESSAGE",
        dialogAction: { actionStatus: {
          statusCode: "OK",
          userFacingMessage: "Success " + JSON.stringify(contactName)
        }}
      },
      privateMessageViewer: user,
      text: confirmationMessage
    }
  } else {
    return {
      actionResponse: { type: "NEW_MESSAGE" },
      privateMessageViewer: user,
      text: confirmationMessage
    };
  }
}

/**
 * Converts date in milliseconds since epoch to user-friendly string.
 *
 * @param {Object} millis the milliseconds since epoch time.
 * @return {string} Display-friend date (English US).
 */
function convertMillisToDateString(millis) {
  const date = new Date(millis);
  const options = { year: 'numeric', month: 'long', day: 'numeric' };
  return date.toLocaleDateString('en-US', options);
}

contactForm.gs

ユーザーからフォームデータを受け取るウィジェットが含まれています。これらのフォーム入力はウィジェットは、メッセージやダイアログ内のカードに表示されます。

`contactForm.gs` コードを表示

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

GitHub で表示

/**
 * Copyright 2024 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * 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
        }
      ]
    }
  }
];

appsscript.json

「 Apps Script マニフェストアプリケーションの Apps Script プロジェクトを定義、構成する Chat アプリ。

`appsscript.json` コードを表示

apps-script/contact-form-app/appsscript.json

GitHub で表示

{
  "timeZone": "America/Los_Angeles",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "chat": {}
}

Cloud プロジェクト番号と ID を確認する

Google Cloud コンソールで、Cloud プロジェクトに移動します。

Google Cloud コンソールに移動
[設定とユーティリティ] をクリックします。 > [プロジェクト設定]。
[プロジェクト番号] フィールドと [プロジェクト ID] フィールドの値をメモします。これらは、次のセクションで使用します。

Apps Script プロジェクトを作成する

Apps Script プロジェクトを作成して、 Cloud プロジェクト:

次のボタンをクリックして、Apps Script プロジェクト「Manage contacts in Google Chat」を開きます。
プロジェクトを開く
[概要] をクリックします。
概要ページで [コピーを作成] をクリックします。
Apps Script プロジェクトのコピーに名前を付けます。
1. [Google Chat での連絡先の管理のコピー] をクリックします。
2. [プロジェクトタイトル] に「Contact Manager - Google Chat app」と入力します。
3. [名前を変更] をクリックします。

Apps Script プロジェクトの Cloud プロジェクトを設定する

Apps Script プロジェクトで、 [プロジェクトの設定] をクリックします。
[Google Cloud Platform（GCP）プロジェクト] で、[プロジェクトを変更] をクリックします。
[GCP プロジェクト番号] に、Cloud プロジェクトのプロジェクト番号を貼り付けます。
[プロジェクトを設定] をクリックします。Cloud プロジェクトと Apps Script プロジェクトが接続されました。

Apps Script デプロイメントを作成する

すべてのコードが配置されたので、Apps Script をデプロイします。できます。デプロイ ID は、Google Cloud で Chat アプリを構成するときに使用します。

Apps Script で、Chat アプリのプロジェクトを開きます。

Apps Script に移動
[デプロイ] >新しいデプロイ。
[アドオン] がまだ選択されていない場合は、 [タイプを選択] でデプロイタイプをクリックし、[アドオン] を選択します。
[説明] に、このバージョンの説明を入力します（例: Test of Contact Manager。
[デプロイ] をクリックします。Apps Script レポートが正常に作成されました Deployment ID を指定します。
[コピー] をクリックしてデプロイ ID をコピーし、[完了] をクリックします。

Google Cloud コンソールで Chat 用アプリを構成する

このセクションでは、Google Cloud コンソールで Google Chat API を構成する方法について説明します。 Chat 用アプリに関する情報が表示されます。 Apps Script から作成したデプロイの ID できます。

Google Cloud コンソールで、メニュー > [その他のプロダクト] > [Google Workspace] > [プロダクトライブラリ] > [Google Chat API] > [管理] > [構成] をクリックします。

Chat API の構成に移動
[アプリ名] に「Contact Manager」と入力します。
[アバターの URL] に「https://developers.google.com/chat/images/contact-icon.png」と入力します。
[説明] に「Manage your personal and business contacts」と入力します。
[インタラクティブ機能を有効にする] をクリックしてオンにします。
[機能] で、[1:1 のメッセージを受信する] と [スペースとグループの会話に参加する] のチェックボックスをオンにします。
[Connection settings] で [Apps Script] を選択します。
[Deployment ID] に、前のセクションで Apps Script デプロイメントを作成するときにコピーした Apps Script デプロイ ID を貼り付けます。
[スラッシュコマンド] で、スラッシュコマンド /about と /addContact:
1. [スラッシュコマンドを追加] をクリックして、最初のスラッシュコマンドを設定します。
2. [名前] に「/about」と入力します。
3. [コマンド ID] に「1」と入力します。
4. [説明] に「Learn how to use this Chat app to manage your contacts」と入力します。
5. [ダイアログを開く] を選択します。
6. [完了] をクリックします。
7. [スラッシュコマンドを追加] をクリックして、別のスラッシュコマンドを設定します。
8. [名前] に「/addContact」と入力します。
9. [コマンド ID] に「2」と入力します。
10. [説明] に次のように入力します。 Submit information about a contact。
11. [ダイアログを開く] を選択します。
12. [完了] をクリックします。
[公開設定] で、 [YOUR DOMAIN 内の特定のユーザーやグループにこの Chat 用アプリの利用を許可する] チェックボックスをオンにして、メールアドレスを入力します。
[ログ] で、[エラーを Logging にロギング] を選択します。
[保存] をクリックします。構成が保存されたことを示すメッセージが表示されます。

Chat アプリをインストールして Chat でテストする準備が整いました。

Chat アプリをテストする

Chat 用アプリをテストするには、スペースを開いてダイレクトメッセージスペースを開き、メッセージを送信します。

信頼できるテスターとして自分自身を追加したときに指定した Google Workspace アカウントを使用して Google Chat を開きます。

Google Chat に移動
[ チャットを新規作成] をクリックします。
[1 人以上のユーザーを追加] フィールドに、招待する Chat アプリ。
検索結果から Chat アプリを選択します。ダイレクトメッセージが開きます。

注: 結果のリストに Chat アプリが表示されない場合は、Google Cloud コンソールの Chat API の構成ページの [公開設定] で Google Workspace アカウントが含まれていることを確認してください。

Chat 用アプリの新しいダイレクトメッセージで、「/addContact」と入力して Enter キーを押します。
表示されたダイアログで、連絡先情報を入力します。
1. [名前] テキストフィールドに名前を入力します。
2. [生年月日] 日付選択ツールで日付を選択します。
3. [Contact type] で、[Work] または [Personal] のラジオボタンを選択します。
[確認して送信] をクリックします。
確認ダイアログで、送信した情報を確認し、 [送信] をクリックします。Chat アプリからテキストメッセージが返されます。次のようなメッセージが表示されます。 ✅ CONTACT NAME has been added to your contacts.。
必要に応じて、次の URL のお問い合わせフォームをテストして送信することもできます。方法:
- /about スラッシュコマンドを使用します。Chat アプリの返信というテキストメッセージと、 Add a contact。ボタンをクリックするとお問い合わせフォーム
- Chat アプリにダイレクトメッセージをスラッシュコマンド（Hello など）。Chat アプリフォームを含むテキストとカードで返信する。

クリーンアップ

サービスアカウントに対する Google Cloud アカウントへの課金を回避するために、リソースがある場合は、その Terraform Registry にできます。

注意: プロジェクトを削除すると、次のような影響があります。

プロジェクト内のすべてのものが削除されます。このチュートリアルで既存のプロジェクトを使用した場合、それを削除すると、そのプロジェクトで行った他の作業もすべて削除されます。
カスタムプロジェクト ID が失われます。このプロジェクトを作成したときに、将来使用するカスタムプロジェクト ID を作成した可能性があります。appspot.com 上の URL など、プロジェクト ID を使用する URL を保持するには、プロジェクト全体を削除するのではなく、プロジェクト内の選択したリソースを削除します。

複数のチュートリアルとクイックスタートを実施する予定がある場合は、プロジェクトを再利用すると、プロジェクトの割り当て上限を超えないようにできます。

Google Cloud コンソールで、[リソースの管理] ページに移動します。メニュー > [IAM と管理] > [リソースを管理] をクリックします。
<ph type="x-smartling-placeholder"></ph> Resource Manager に移動
プロジェクトリストで、削除するプロジェクトを選択し、[削除] をクリックします。
ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックして削除します。できます。

Google Chat で連絡先を収集、管理する

前提条件

目標

アーキテクチャ

環境を準備する

Google Cloud プロジェクトを作成する

Google Cloud コンソール

gcloud CLI

認証と権限付与の設定

Chat アプリを作成してデプロイする

main.gs コードを表示

contactForm.gs コードを表示

appsscript.json コードを表示

Cloud プロジェクト番号と ID を確認する

Apps Script プロジェクトを作成する

Apps Script プロジェクトの Cloud プロジェクトを設定する

Apps Script デプロイメントを作成する

Google Cloud コンソールで Chat 用アプリを構成する

Chat アプリをテストする

クリーンアップ

関連トピック

`main.gs` コードを表示

`contactForm.gs` コードを表示

`appsscript.json` コードを表示