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

HTTP Google Chat アプリを作成する

このページでは、HTTP Chat アプリを作成する方法について説明します。このアーキテクチャを実装するには、さまざまな方法があります。Google Cloud では、Cloud Functions、Cloud Run、App Engine を使用できます。このクイックスタートでは、Chat アプリがユーザーのメッセージに返信するために使用する Cloud Functions の関数を作成してデプロイします。

このアーキテクチャでは、次の図に示すように、HTTP を使用して Google Cloud またはオンプレミスサーバーと統合するように Chat を構成します。

オンプレミスサーバーでウェブサービスを使用している Chat アプリのアーキテクチャ。

上の図では、HTTP Chat アプリを操作しているユーザーの情報フローは次のとおりです。

ユーザーが、ダイレクトメッセージまたは Chat スペースで Chat アプリにメッセージを送信します。
HTTP リクエストが、Chat アプリのロジックを含むクラウドまたはオンプレミスシステムであるウェブサーバーに送信されます。
必要に応じて、Chat アプリのロジックを Google Workspace サービス（カレンダーやスプレッドシートなど）、他の Google サービス（マップ、YouTube、Vertex AI など）、または他のウェブサービス（プロジェクト管理システムやチケット販売ツールなど）と統合できます。
ウェブサーバーは、Chat の Chat アプリサービスに HTTP レスポンスを返します。
レスポンスがユーザーに配信されます。
必要に応じて、Chat アプリは Chat API を呼び出して、メッセージを非同期的に投稿したり、他のオペレーションを実行したりできます。

このアーキテクチャでは、これらの Chat アプリをさまざまなプログラミング言語を使用して設計できるため、システムにすでに存在する既存のライブラリとコンポーネントを柔軟に使用できます。

目標

環境をセットアップする。
Cloud Functions の関数を作成してデプロイします。
アプリを Chat に公開します。
アプリをテストします。

前提条件

Google Chat へのアクセス権を持つ Business または Enterprise の Google Workspace アカウント。
課金を有効にした Google Cloud プロジェクト。既存のプロジェクトで課金が有効になっていることを確認するには、プロジェクトの課金ステータスを確認するをご覧ください。プロジェクトを作成して課金管理を設定するには、Google Cloud プロジェクトを作成するをご覧ください。

環境を設定する

Google API を使用する前に、Google Cloud プロジェクトで API を有効にする必要があります。1 つの Google Cloud プロジェクトで 1 つ以上の API を有効にできます。

Google Cloud コンソールで、Google Chat API、Cloud Build API、Cloud Functions API、Cloud Pub/Sub API、Cloud Logging API、Artifact Registry API、Cloud Run API を有効にします。

API を有効にする

Cloud 関数を作成してデプロイする

送信者の表示名とアバター画像を含む Chat カードを生成する Cloud Functions の関数を作成してデプロイします。Chat アプリがメッセージを受信すると、関数を実行してカードで応答します。

Chat アプリの関数を作成してデプロイする手順は次のとおりです。

Node.js

Google Cloud コンソールで、[Cloud Functions] ページに移動します。

Cloud Functions に移動

Chat アプリのプロジェクトが選択されていることを確認します。
[ 関数を作成] をクリックします。
[関数の作成] ページで、関数を設定します。
1. [環境] で、[Cloud Run 関数] を選択します。
2. [関数名] に「QuickStartChatApp」と入力します。
3. [リージョン] でリージョンを選択します。
4. [認証] で [認証を要求する] を選択します。
5. [次へ] をクリックします。
[ランタイム] で、最新バージョンの Node.js を選択します。
[ソースコード] で [インラインエディタ] を選択します。
[エントリポイント] で、デフォルトのテキストを削除して avatarApp と入力します。

index.js の内容を次のコードに置き換えます。

node/avatar-app/index.js

GitHub で表示

const functions = require('@google-cloud/functions-framework');

// Command IDs (configure these in Google Chat API)
const ABOUT_COMMAND_ID = 1; // ID for the "/about" slash command
const HELP_COMMAND_ID = 2; // ID for the "Help" quick command

/**
 * Google Cloud Function that handles HTTP requests from Google Chat.
 *
 * @param {Object} req - The HTTP request object sent from Google Chat.
 * @param {Object} res - The HTTP response object.
 */
functions.http('avatarApp', (req, res) => {
  const event = req.body;

  if (event.appCommandMetadata) {
    handleAppCommands(event, res);
  } else {
    handleRegularMessage(event, res);
  }
});

/**
 * Handles slash and quick commands.
 *
 * @param {Object} event - The Google Chat event.
 * @param {Object} res - The HTTP response object.
 */
function handleAppCommands(event, res) {
  const {appCommandId, appCommandType} = event.appCommandMetadata;

  switch (appCommandId) {
    case ABOUT_COMMAND_ID:
      return res.send({
        privateMessageViewer: event.user,
        text: 'The Avatar app replies to Google Chat messages.'
      });
    case HELP_COMMAND_ID:
      return res.send({
        privateMessageViewer: event.user,
        text: 'The Avatar app replies to Google Chat messages.'
      });
  }
}

/**
 * Handles regular messages (not commands).
 *
 * @param {Object} event - The Google Chat event.
 * @param {Object} res - The HTTP response object.
 */
function handleRegularMessage(event, res) {
  const messageData = createMessage(event.user);
  res.send(messageData);
}

/**
 * Creates a card message with the user's avatar.
 *
 * @param {Object} user - The user who sent the message.
 * @param {string} user.displayName - The user's display name.
 * @param {string} user.avatarUrl - The URL of the user's avatar.
 * @return {Object} - The card message object.
 */
function createMessage({displayName, avatarUrl}) {
  return {
    text: 'Here\'s your avatar',
    cardsV2: [{
      cardId: 'avatarCard',
      card: {
        name: 'Avatar Card',
        header: {
          title: `Hello ${displayName}!`,
        },
        sections: [{
          widgets: [
            {textParagraph: {text: 'Your avatar picture:'}},
            {image: {imageUrl: avatarUrl}},
          ],
        }],
      },
    }],
  };
}

[デプロイ] をクリックします。

Python

Google Cloud コンソールで、[Cloud Functions] ページに移動します。

Cloud Functions に移動

Chat アプリのプロジェクトが選択されていることを確認します。
[ 関数を作成] をクリックします。
[関数の作成] ページで、関数を設定します。
1. [環境] で、[Cloud Run 関数] を選択します。
2. [関数名] に「QuickStartChatApp」と入力します。
3. [リージョン] でリージョンを選択します。
4. [認証] で [認証を要求する] を選択します。
5. [次へ] をクリックします。
[ランタイム] で、最新バージョンの Python を選択します。
[ソースコード] で [インラインエディタ] を選択します。
[エントリポイント] で、デフォルトのテキストを削除して avatar_app と入力します。

main.py の内容を次のコードに置き換えます。

python/avatar-app/main.py

GitHub で表示

from typing import Any, Mapping

import flask
import functions_framework

# Command IDs (configure these in Google Chat API)
ABOUT_COMMAND_ID = 1  # ID for the "/about" slash command
HELP_COMMAND_ID = 2  # ID for the "Help" quick command


@functions_framework.http
def avatar_app(req: flask.Request) -> Mapping[str, Any]:
    """Google Cloud Function that handles HTTP requests from Google Chat.

    Args:
        flask.Request: the request

    Returns:
        Mapping[str, Any]: the response
    """
    event = req.get_json(silent=True)

    if event and "appCommandMetadata" in event:
        return handle_app_commands(event)
    else:
        return handle_regular_message(event)


def handle_app_commands(event: Mapping[str, Any]) -> Mapping[str, Any]:
    """Handles slash and quick commands.

    Args:
        Mapping[str, Any] event: The Google Chat event.

    Returns:
        Mapping[str, Any]: the response
    """
    app_command_id = event["appCommandMetadata"]["appCommandId"]

    if app_command_id == ABOUT_COMMAND_ID:
        return {
            "privateMessageViewer": event["user"],
            "text": "The Avatar app replies to Google Chat messages.",
        }
    elif app_command_id == HELP_COMMAND_ID:
        return {
            "privateMessageViewer": event["user"],
            "text": "The Avatar app replies to Google Chat messages.",
        }
    return {}




def handle_regular_message(event: Mapping[str, Any]) -> Mapping[str, Any]:
    """Handles regular messages (not commands).

    Args:
        Mapping[str, Any] event: The Google Chat event.

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

    if not event or "user" not in event:
        return "Invalid request."

    message_data = create_message(event["user"])
    return message_data


def create_message(user: Mapping[str, Any]) -> Mapping[str, Any]:
    """Creates a card message with the user's avatar.

    Args:
        Mapping[str, Any] user: The user who sent the message.

    Returns:
        Mapping[str, Any]: a card with the user's avatar.
    """
    display_name = user.get("displayName", "")
    avatar_url = user.get("avatarUrl", "")

    return {
        "text": "Here's your avatar",
        "cardsV2": [
            {
                "cardId": "avatarCard",
                "card": {
                    "name": "Avatar Card",
                    "header": {"title": f"Hello {display_name}!"},
                    "sections": [
                        {
                            "widgets": [
                                {"textParagraph": {"text": "Your avatar picture:"}},
                                {"image": {"imageUrl": avatar_url}},
                            ]
                        }
                    ],
                },
            }
        ],
    }

[デプロイ] をクリックします。

Java

Google Cloud コンソールで、[Cloud Functions] ページに移動します。

Cloud Functions に移動

Chat アプリのプロジェクトが選択されていることを確認します。
[ 関数を作成] をクリックします。
[関数の作成] ページで、関数を設定します。
1. [環境] で、[Cloud Run 関数] を選択します。
2. [関数名] に「QuickStartChatApp」と入力します。
3. [リージョン] でリージョンを選択します。
4. [認証] で [認証を要求する] を選択します。
5. [次へ] をクリックします。
[ランタイム] で、最新バージョンの Java を選択します。
[ソースコード] で [インラインエディタ] を選択します。
[エントリポイント] で、デフォルトのテキストを削除して App と入力します。
src/main/java/com/example/Example.java を src/main/java/AvatarApp.java に名前変更します。

AvatarApp.java の内容を次のコードに置き換えます。

java/avatar-app/src/main/java/AvatarApp.java

GitHub で表示

import com.google.api.services.chat.v1.model.CardWithId;
import com.google.api.services.chat.v1.model.GoogleAppsCardV1Card;
import com.google.api.services.chat.v1.model.GoogleAppsCardV1CardHeader;
import com.google.api.services.chat.v1.model.GoogleAppsCardV1Image;
import com.google.api.services.chat.v1.model.GoogleAppsCardV1Section;
import com.google.api.services.chat.v1.model.GoogleAppsCardV1TextParagraph;
import com.google.api.services.chat.v1.model.GoogleAppsCardV1Widget;
import com.google.api.services.chat.v1.model.Message;
import com.google.api.services.chat.v1.model.User;
import com.google.cloud.functions.HttpFunction;
import com.google.cloud.functions.HttpRequest;
import com.google.cloud.functions.HttpResponse;
import com.google.gson.Gson;
import com.google.gson.JsonObject;
import java.util.List;

public class AvatarApp implements HttpFunction {
  private static final Gson gson = new Gson();

  // Command IDs (configure these in Google Chat API)
  private static final int ABOUT_COMMAND_ID = 1; // ID for the "/about" slash command
  private static final int HELP_COMMAND_ID = 2; // ID for the "Help" quick command

  @Override
  public void service(HttpRequest request, HttpResponse response) throws Exception {
    JsonObject event = gson.fromJson(request.getReader(), JsonObject.class);

    if (event.has("appCommandMetadata")) {
      handleAppCommands(event, response);
    } else {
      handleRegularMessage(event, response);
    }
  }

  /**
   * Handles slash and quick commands.
   *
   * @param event    The Google Chat event.
   * @param response The HTTP response object.
   */
  private void handleAppCommands(JsonObject event, HttpResponse response) throws Exception {
    int appCommandId = event.getAsJsonObject("appCommandMetadata").get("appCommandId").getAsInt();

    switch (appCommandId) {
      case ABOUT_COMMAND_ID:
        Message aboutMessage = new Message();
        aboutMessage.setText("The Avatar app replies to Google Chat messages.");
        aboutMessage.setPrivateMessageViewer(new User()
            .setName(event.getAsJsonObject("user").get("name").getAsString()));
        response.getWriter().write(gson.toJson(aboutMessage));
        return;
      case HELP_COMMAND_ID:
        Message helpMessage = new Message();
        helpMessage.setText("The Avatar app replies to Google Chat messages.");
        helpMessage.setPrivateMessageViewer(new User()
            .setName(event.getAsJsonObject("user").get("name").getAsString()));
        response.getWriter().write(gson.toJson(helpMessage));
        return;
    }
  }

  /**
   * Handles regular messages (not commands).
   *
   * @param event    The Google Chat event.
   * @param response The HTTP response object.
   */
  private void handleRegularMessage(JsonObject event, HttpResponse response) throws Exception {

    if (!event.has("user")) {
      response.getWriter().write("Invalid request.");
      return;
    }

    JsonObject user = event.getAsJsonObject("user");
    String displayName = user.has("displayName") ? user.get("displayName").getAsString() : "";
    String avatarUrl = user.has("avatarUrl") ? user.get("avatarUrl").getAsString() : "";
    Message message = createMessage(displayName, avatarUrl);
    response.getWriter().write(gson.toJson(message));
  }

  /**
   * Creates a card message with the user's avatar.
   *
   * @param displayName The user's display name.
   * @param avatarUrl   The URL of the user's avatar.
   * @return The card message object.
   */
  private Message createMessage(String displayName, String avatarUrl) {
    return new Message()
        .setText("Here's your avatar")
        .setCardsV2(List.of(new CardWithId()
            .setCardId("avatarCard")
            .setCard(new GoogleAppsCardV1Card()
                .setName("Avatar Card")
                .setHeader(new GoogleAppsCardV1CardHeader()
                    .setTitle(String.format("Hello %s!", displayName)))
                .setSections(List.of(new GoogleAppsCardV1Section().setWidgets(List.of(
                    new GoogleAppsCardV1Widget()
                        .setTextParagraph(new GoogleAppsCardV1TextParagraph()
                            .setText("Your avatar picture:")),
                    new GoogleAppsCardV1Widget()
                        .setImage(new GoogleAppsCardV1Image().setImageUrl(avatarUrl)))))))));
  }
}

pom.xml の内容を次のコードに置き換えます。

java/avatar-app/pom.xml

GitHub で表示

<project xmlns="http://maven.apache.org/POM/4.0.0"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>gcfv2</groupId>
  <artifactId>avatar-app</artifactId>
  <version>0.0.1</version>
  <name>Avatar App</name>

  <properties>
    <maven.compiler.release>21</maven.compiler.release>
  </properties>

  <dependencies>
    <dependency>
      <groupId>com.google.cloud.functions</groupId>
      <artifactId>functions-framework-api</artifactId>
      <version>1.1.4</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
    <dependency>
      <groupId>com.google.code.gson</groupId>
      <artifactId>gson</artifactId>
      <version>2.12.1</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/com.google.apis/google-api-services-chat -->
    <dependency>
      <groupId>com.google.apis</groupId>
      <artifactId>google-api-services-chat</artifactId>
      <version>v1-rev20250116-2.0.0</version>
    </dependency>

  </dependencies>

</project>

[デプロイ] をクリックします。

Cloud Functions の詳細ページが開き、関数と 2 つの進行状況インジケーター（ビルド用とサービス用）が表示されます。両方の進行状況インジケーターが消えてチェックマークに置き換えられると、関数はデプロイされ、準備が整います。

Google Chat に関数の呼び出しを許可する

Google Chat が関数を呼び出すことを許可するには、Cloud Run 起動元ロールを持つ Google Chat サービスアカウントを追加します。

Google Cloud コンソールで [Cloud Run] ページに移動します。

Cloud Run に移動します。
Cloud Run サービスリストで、受信側関数の横にあるチェックボックスをオンにします。（関数自体はクリックしないでください）。
[権限] をクリックします。[権限] パネルが開きます。
[プリンシパルを追加] をクリックします。
[新しいプリンシパル] に「chat@system.gserviceaccount.com」と入力します。
[ロールを選択] で、[Cloud Run] > [Cloud Run 起動元] を選択します。
[保存] をクリックします。

アプリを Google Chat に公開する

Cloud Functions の関数をデプロイしたら、次の手順で Google Chat アプリに変換します。

Google Cloud コンソールで、メニューアイコン > [Cloud Functions] をクリックします。

Cloud Functions に移動

Cloud Functions を有効にしたプロジェクトが選択されていることを確認します。
関数のリストで [QuickStartChatApp] をクリックします。
[トリガー] タブをクリックします。
[HTTPS] で URL をコピーします。
「Google Chat API」を検索し、[Google Chat API]、[管理] の順にクリックします。

Chat API に移動
[構成] をクリックして、Google Chat アプリを設定します。
1. [アプリ名] に「Quickstart App」と入力します。
2. [アバターの URL] に「https://developers.google.com/chat/images/quickstart-app-avatar.png」と入力します。
3. [説明] に「Quickstart app」と入力します。
4. [機能] で、[1:1 のメッセージを受信する] と [スペースとグループの会話に参加する] を選択します。
5. [接続設定] で [HTTP エンドポイント URL] を選択し、Cloud Functions トリガーの URL をボックスに貼り付けます。
6. [Authentication Audience] で [HTTP エンドポイント URL] を選択します。
7. [公開設定] で、ドメイン内の [この Google Chat アプリを特定のユーザーとグループに公開する] を選択し、メールアドレスを入力します。
8. [ログ] で [エラーを Logging にロギング] を選択します。
[保存] をクリックします。

Chat アプリは、Chat でメッセージを受信して返信できるようになりました。

Chat 用アプリをテストする

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

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

Google Chat に移動
[ 新しいチャット] をクリックします。
[1 人以上を追加] フィールドに、Chat アプリの名前を入力します。
検索結果から Chat アプリを選択します。ダイレクトメッセージが開きます。

注: 結果のリストに Chat アプリが表示されない場合は、Google Cloud コンソールの Chat API の構成ページの [公開設定] で Google Workspace アカウントが含まれていることを確認してください。
そのアプリの新しいダイレクトメッセージに、「Hello」と入力して enter を押します。

次の画像に示すように、Chat アプリのレスポンスには、送信者の名前とアバター画像を表示するカードメッセージが含まれています。

送信者の表示名とアバター画像を表示したカードで応答する Chat アプリ

信頼できるテスターを追加し、インタラクティブな機能のテストについて詳しくは、Google Chat アプリのインタラクティブな機能のテストをご覧ください。

トラブルシューティング

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

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

クリーンアップ

このチュートリアルで使用したリソースに対して Google Cloud アカウントで課金されないようにするには、Cloud プロジェクトを削除することをおすすめします。

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

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

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

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

HTTP Google Chat アプリを作成する

目標

前提条件

環境を設定する

Cloud 関数を作成してデプロイする

Node.js

Python

Java

Google Chat に関数の呼び出しを許可する

アプリを Google Chat に公開する

Chat 用アプリをテストする

トラブルシューティング

クリーンアップ

関連トピック