Google Chat アプリにアプリのホームカード メッセージを送信する

このページでは、Chat アプリのアプリのホームカード メッセージを作成して送信する方法について説明します。アプリのホームは、Chat アプリでダイレクト メッセージを開いたときに Chat アプリがユーザーに送信するカスタマイズ可能なカード メッセージです。たとえば、スラッシュ コマンドを使用して Chat アプリの操作に関するヒントを含めるようにアプリのホームカード メッセージを構成できます。

エンドユーザーに対しては、アプリ デベロッパーがこの機能を有効にしている場合にのみ、Chat アプリのダイレクト メッセージでアプリホームを使用できます。


カードビルダーでカードをデザインしてプレビューする。

カードビルダーを開く

前提条件

Python

Apps Script

Google Cloud コンソールで構成する

Python

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

    Google Chat API に移動

  2. [Manage] をクリックし、[Configuration] タブをクリックします。

  3. [Support App Home] を有効にします。

  4. [Support App Home] チェックボックスをオンにします。

  5. [App Home URL] フィールドに URL を追加します。この値は通常、[アプリの URL] と同じ URL です。この URL は APP_HOME イベントで呼び出されます。

  6. [保存] をクリックします。

Apps Script

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

    Google Chat API に移動

  2. [Manage] をクリックし、[Configuration] タブをクリックします。

  3. [Support App Home] チェックボックスをオンにします。

  4. [保存] をクリックします。

チャットアプリを構成する

アプリのホームに新しいカード メッセージを送信するように Chat アプリを構成します。

Python

ユーザーが Chat アプリからダイレクト メッセージを開くと、APP_HOME イベントが Chat アプリに送信されます。アプリがこのイベントを受信すると、push_card ナビゲーションとともに RenderActions の JSON インスタンスが返されます。

次の例は、イベントを示しています。

@app.route('/', methods=['POST'])
def on_event():
  event = request.get_json()
  chat = event.get('chat')
  if chat is not None:
    return handle_chat_event(event)

def handle_chat_event(event):
  if event['chat'].get('type') == 'APP_HOME':
    return get_app_home_card()

def get_app_home_card:
  // Return "Card v2" representing App Home.

次の例は、ドキュメントへのボタンリンクを含むように構成されたカードを示しています。

{
  action: {
    navigations: [
      {
        push_card: {
          sections: [
            {
              widgets: [
                {
                  buttonList: {
                    buttons: [
                      {
                        text: "Open documentation",
                        onClick: {
                          openLink: {
                            url: "https://developers.google.com/chat"
                          }
                        }
                      }
                    ]
                  }
                }
              ]
            }
          ]
        }
      }
    ]
  }
}

Apps Script

push_card ナビゲーションを使用して RenderActions の JSON インスタンスを返す onAppHome 関数を実装します。

// "onAppHome" is the pre-defined name of the callback that the Chat servers
// execute.
function onAppHome() {
  return {
    action: {
      navigations: [
        {
          push_card: getCard()
        }
      ]
    }
  };
}

function getCard() {
  return {
    sections: [
      {
        widgets: [
          {
            buttonList: {
              buttons: [
                {
                  text: "Open documentation",
                  onClick: {
                    openLink: {
                      url: "https://developers.google.com/chat"
                    }
                  }
                }
              ]
            }
          }
        ]
      }
    ]
  };
}

アプリのホームカード メッセージを更新する

アプリのホームカード メッセージは、ユーザーがカード メッセージで情報を送信したとき、またはダイアログを閉じたときに更新できます。たとえば、アプリの最初のホームカード メッセージは、ユーザーにフォームに記入するよう求めるウェルカム メッセージです。ユーザーがフォームに入力すると、更新されたアプリのホームカード メッセージが送信されます。アップデートは、update_card ナビゲーションを含む RenderActions のインスタンスとともに返す必要があります。

Python

HTTP アプリの場合、アプリのホームカード メッセージの更新はユーザーが入力したプロセス情報と似ていますが、RenderActions を返す必要があります。invokedFunction は、Card ウィジェットに関連付けられている、呼び出された関数の名前を表します。詳細については、CommonEventObject をご覧ください。次の例の submitForm は、ユーザーがフォームデータを送信したことを示しています。

@app.route('/', methods=['POST'])
def on_event():
  event = request.get_json()
  chat = event.get('chat')
  if chat is not None:
    return handle_chat_event(event)

def handle_chat_event(event):
  if event['chat'].get('type') == 'SUBMIT_FORM':
    event_object = event.get('commonEventObject')
    if event_object is not None:
      // Forms
      if 'submitForm' == event_object.get('invokedFunction'):
        return {
          'render_actions': {
            'action': {
              'navigations': [{
                'update_card': get_update_card
              }]
            }
          }
        }

def get_update_card:
  // Return "Card v2" representing App Home.
  ...

Apps Script

// Called from elsewhere (i.e. on button press).
function updateAppHomeCard(event) {
  return {
    render_actions: {
      action: {
        navigations: [
          {
            update_card: getCard()
          }
        ]
      }
    }
  }
}

function getCard() {
  // Return "Card v2" representing App Home.
  ...
}