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

Google Chat アプリのホームページを作成する

このページでは、 Google Chat アプリ。アプリホームはカスタマイズ可能なカードインターフェースユーザーがダイレクトメッセージやチャットメッセージを開いたときにメッセージを追加できます。

2 つのウィジェットが表示されたアプリのホームカード。

たとえば操作のヒントを含めるためにアプリのホームカードのメッセージを設定する Chat 用アプリスラッシュコマンドを使用します。エンドユーザーにとって、アプリのホームは Chat アプリのダイレクトメッセージでしか使用できず、アプリデベロッパーがこの機能を有効にします。

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

カードビルダーを開く

前提条件

Python

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

Apps Script

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

Node.js

Java

Chat API を構成する

アプリのホームをサポートするには、Chat API の構成を更新する必要があります確認できます。

Python

Google Cloud コンソールで [メニュー] に移動します。 > その他のプロダクト > Google Workspace > プロダクトライブラリ > Google Chat API。

Google Chat API に移動
[管理] をクリックしてから、[構成] タブをクリックします。
[App Home をサポートする] チェックボックスをオンにします。
[App Home URL] フィールドに URL を追加します。通常この値は [App URL] に URL を入力します。この URL の呼び出し元 APP_HOME イベント。
[保存] をクリックします。

Apps Script

Google Cloud コンソールで [メニュー] に移動します。 > その他のプロダクト > Google Workspace > プロダクトライブラリ > Google Chat API。

Google Chat API に移動
[管理] をクリックしてから、[構成] タブをクリックします。
[App Home をサポートする] チェックボックスをオンにします。
[保存] をクリックします。

Node.js

Google Cloud コンソールで [メニュー] に移動します。 > その他のプロダクト > Google Workspace > プロダクトライブラリ > Google Chat API。

Google Chat API に移動
[管理] をクリックしてから、[構成] タブをクリックします。
[App Home をサポートする] チェックボックスをオンにします。
[App Home URL] フィールドに URL を追加します。通常この値は [App URL] に URL を入力します。この URL の呼び出し元 APP_HOME イベント。
[保存] をクリックします。

Java

Google Cloud コンソールで [メニュー] に移動します。 > その他のプロダクト > Google Workspace > プロダクトライブラリ > Google Chat API。

Google Chat API に移動
[管理] をクリックしてから、[構成] タブをクリックします。
[App Home をサポートする] チェックボックスをオンにします。
[App Home URL] フィールドに URL を追加します。通常この値は [App URL] に URL を入力します。この URL の呼び出し元 APP_HOME イベント。
[保存] をクリックします。

アプリのホームを作成する

アプリのホームカードは、ユーザーが Google Chat アプリから Chat 用アプリで応答として更新できます。ボタンのクリック、フォームの送信、ダイアログの閉じなどのインタラクティブなイベントです。

次の例では、Chat 用アプリに最初のアプリのホームカード。カードの作成時刻と、ボタン。ユーザーがボタンをクリックすると、Chat 用アプリがは、更新されたカードが作成された時刻を示す、更新されたカードを返します。

アプリのホームの最初のカードを作成する

アプリのホームを構築するには、Chat 用アプリで APP_HOME インタラクションイベントを実行し、 RenderActions pushCard ナビゲーション。

Python

python/app-home/main.py

GitHub で表示

@app.route('/', methods=['POST'])
def post() -> Mapping[str, Any]:
  """Handle requests from Google Chat

  Returns:
      Mapping[str, Any]: the response
  """
  event = request.get_json()
  match event['chat'].get('type'):

    case 'APP_HOME':
      # App home is requested
      body = { "action": { "navigations": [{
        "pushCard": get_home_card()
      }]}}

    case 'SUBMIT_FORM':
      # The update button from app home is clicked
      event_object = event.get('commonEventObject')
      if event_object is not None:
        if 'update_app_home' == event_object.get('invokedFunction'):
          body = update_app_home()

    case _:
      # Other response types are not supported
      body = {}

  return json.jsonify(body)


def get_home_card() -> Mapping[str, Any]:
  """Create the app home card

  Returns:
      Mapping[str, Any]: the card
  """
  return { "sections": [{ "widgets": [
    { "textParagraph": {
      "text": "Here is the app home 🏠 It's " +
        datetime.datetime.now().isoformat()
    }},
    { "buttonList": { "buttons": [{
      "text": "Update app home",
      "onClick": { "action": {
        "function": "update_app_home"
      }}
    }]}}
  ]}]}

Apps Script

すべての APP_HOME イベントの後に呼び出される onAppHome 関数を実装します。

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

apps-script/app-home/app-home.gs

GitHub で表示

/**
 * Responds to a APP_HOME event in Google Chat.
 */
function onAppHome() {
  return { action: { navigations: [{
    pushCard: getHomeCard()
  }]}};
}

/**
 * Returns the app home card.
 */
function getHomeCard() {
  return { sections: [{ widgets: [
    { textParagraph: {
      text: "Here is the app home 🏠 It's " + new Date().toTimeString()
    }},
    { buttonList: { buttons: [{
      text: "Update app home",
      onClick: { action: {
        function: "updateAppHome"
      }}
    }]}}
  ]}]};
}

Node.js

node/app-home/index.js

GitHub で表示

app.post('/', async (req, res) => {
  let event = req.body.chat;

  let body = {};
  if (event.type === 'APP_HOME') {
    // App home is requested
    body = { action: { navigations: [{
      pushCard: getHomeCard()
    }]}}
  } else if (event.type === 'SUBMIT_FORM') {
    // The update button from app home is clicked
    commonEvent = req.body.commonEventObject;
    if (commonEvent && commonEvent.invokedFunction === 'updateAppHome') {
      body = updateAppHome()
    }
  }

  return res.json(body);
});

// Create the app home card
function getHomeCard() {
  return { sections: [{ widgets: [
    { textParagraph: {
      text: "Here is the app home 🏠 It's " + new Date().toTimeString()
    }},
    { buttonList: { buttons: [{
      text: "Update app home",
      onClick: { action: {
        function: "updateAppHome"
      }}
    }]}}
  ]}]};
}

Java

java/app-home/src/main/java/com/google/chat/app/home/App.java

GitHub で表示

/**
 * Process Google Chat events
 *
 * @param event Event from chat.
 * @return GenericJson
 * @throws Exception
 */
@PostMapping("/")
@ResponseBody
public GenericJson onEvent(@RequestBody JsonNode event) throws Exception {
  switch (event.at("/chat/type").asText()) {
    case "APP_HOME":
      // App home is requested
      GenericJson navigation = new GenericJson();
      navigation.set("pushCard", getHomeCard());

      GenericJson action = new GenericJson();
      action.set("navigations", List.of(navigation));

      GenericJson response = new GenericJson();
      response.set("action", action);
      return response;
    case "SUBMIT_FORM":
      // The update button from app home is clicked
      if (event.at("/commonEventObject/invokedFunction").asText().equals("updateAppHome")) {
        return updateAppHome();
      }
  }

  return new GenericJson();
}

// Create the app home card
GoogleAppsCardV1Card getHomeCard() {
  GoogleAppsCardV1TextParagraph textParagraph = new GoogleAppsCardV1TextParagraph();
  textParagraph.setText("Here is the app home 🏠 It's " + new Date());

  GoogleAppsCardV1Widget textParagraphWidget = new GoogleAppsCardV1Widget();
  textParagraphWidget.setTextParagraph(textParagraph);

  GoogleAppsCardV1Action action = new GoogleAppsCardV1Action();
  action.setFunction("updateAppHome");

  GoogleAppsCardV1OnClick onClick = new GoogleAppsCardV1OnClick();
  onClick.setAction(action);

  GoogleAppsCardV1Button button = new GoogleAppsCardV1Button();
  button.setText("Update app home");
  button.setOnClick(onClick);

  GoogleAppsCardV1ButtonList buttonList = new GoogleAppsCardV1ButtonList();
  buttonList.setButtons(List.of(button));

  GoogleAppsCardV1Widget buttonListWidget = new GoogleAppsCardV1Widget();
  buttonListWidget.setButtonList(buttonList);

  GoogleAppsCardV1Section section = new GoogleAppsCardV1Section();
  section.setWidgets(List.of(textParagraphWidget, buttonListWidget));

  GoogleAppsCardV1Card card = new GoogleAppsCardV1Card();
  card.setSections(List.of(section));

  return card;
}

アプリのホームカードを更新する

アプリの最初のホームカードに、ボタンなどのインタラクティブなウィジェットが含まれている場合 Chat アプリは、入力または選択入力を関連するインタラクションイベントを RenderActions 「updateCard」ナビゲーションを使用。インタラクティブランナーの処理と詳細はユーザーが入力した情報を処理する。

Python

python/app-home/main.py

GitHub で表示

def update_app_home() -> Mapping[str, Any]:
  """Update the app home

  Returns:
      Mapping[str, Any]: the update card render action
  """
  return { "renderActions": { "action": { "navigations": [{
    "updateCard": get_home_card()
  }]}}}

Apps Script

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

apps-script/app-home/app-home.gs

GitHub で表示

/**
 * Updates the home app.
 */
function updateAppHome() {
  return { renderActions: { action: { navigations: [{
    updateCard: getHomeCard()
  }]}}};
}

Node.js

node/app-home/index.js

GitHub で表示

// Update the app home
function updateAppHome() {
  return { renderActions: { action: { navigations: [{
    updateCard: getHomeCard()
  }]}}}
};

Java

java/app-home/src/main/java/com/google/chat/app/home/App.java

GitHub で表示

// Update the app home
GenericJson updateAppHome() {
  GenericJson navigation = new GenericJson();
  navigation.set("updateCard", getHomeCard());

  GenericJson action = new GenericJson();
  action.set("navigations", List.of(navigation));

  GenericJson renderActions = new GenericJson();
  renderActions.set("action", action);

  GenericJson response = new GenericJson();
  response.set("renderActions", renderActions);
  return response;
}

制限事項

一般的に navigation: Chat アプリでは利用できない。カードのスタックを返すことはできません。 pushCard（初回応答用）と updateCard（アップデート用）のみ Chat 用アプリで利用できます。

アプリのホームを使用する Chat アプリのサンプルを見る。
ダイアログを開くには、OPEN_DIALOG インタラクションを使用します。詳しくはアプリのホームカードに応じてダイアログを開く。
ダイアログを閉じるには、CLOSE_DIALOG インタラクションを使用してダイアログを閉じますアプリのホームカードに戻るか、CLOSE_DIALOG_EXECUTEを使用します。操作でダイアログを閉じて、アプリのホームカードを更新します。対象詳細については、以下をご覧ください。アプリのホームカードのダイアログに応答する。
アプリのホームの使用例については、 Codelab: 問題管理用の Chat アプリ Gemini を使用して Google Chat 用アプリを構築する。

Google Chat アプリのホームページを作成する

前提条件

Python

Apps Script

Node.js

Java

Chat API を構成する

Python

Apps Script

Node.js

Java

アプリのホームを作成する

アプリのホームの最初のカードを作成する

Python

Apps Script

Node.js

Java

アプリのホームカードを更新する

Python

Apps Script

Node.js

Java

制限事項

関連トピック