このページでは、 Google Chat アプリ。ホームページ( Google Chat API: [ホーム] タブに表示されるカスタマイズ可能なカード インターフェース / ダイレクト メッセージ スペース ユーザーと Chat 用アプリの間での通信です。
アプリホームを使用すると、Chat アプリの操作方法や、ユーザーが Chat から外部サービスやツールにアクセスして使用できるようにする方法に関するヒントを共有できます。
カードビルダーを使用して、Chat 用アプリのメッセージとユーザー インターフェースを設計し、プレビューします。
カードビルダーを開く前提条件
Node.js
インタラクティブ機能が有効になっている Google Chat アプリ。新しい HTTP サービスを使用したインタラクティブな Chat アプリについては、こちらのクイックスタートを完了します。
Python
インタラクティブ機能を有効にする Google Chat アプリ。新しい HTTP サービスを使用したインタラクティブな Chat アプリについては、こちらのクイックスタートを完了します。
Java
インタラクティブ機能を有効にする Google Chat アプリ。HTTP サービスを使用してインタラクティブな Chat アプリを作成するには、こちらのクイックスタートを完了してください。
Apps Script
インタラクティブ機能を有効にする Google Chat アプリ。Apps Script でインタラクティブな Chat アプリを作成するには、こちらのクイックスタートを完了してください。
Chat アプリのアプリホームを構成する
アプリホームをサポートするには、APP_HOME
インタラクション イベントを受信するように Chat アプリを構成する必要があります。Chat アプリは、ユーザーが Chat アプリのダイレクト メッセージから [ホーム] タブをクリックするたびに、このイベントを受信します。
Google Cloud コンソールで構成設定を更新する手順は次のとおりです。
Google Cloud コンソールで、メニュー > [その他のプロダクト] > [Google Workspace] > [プロダクト ライブラリ] > [Google Chat API] に移動します。
[管理] をクリックしてから、[構成] タブをクリックします。
[インタラクティブ機能] の [機能] セクションに移動して、アプリのホームを構成します。
- [1 対 1 のメッセージを受信する] チェックボックスをオンにします。
- [アプリのホームをサポートする] チェックボックスをオンにします。
Chat アプリで HTTP サービスを使用する場合は、 接続設定] に移動し、接続先のエンドポイントを指定します。 [App Home URL] フィールド。URL で [HTTP エンドポイント URL] フィールド。
[保存] をクリックします。
アプリのホームカードを作成する
ユーザーがアプリのホームを開いたときに、Chat アプリは
APP_HOME
インタラクション イベントを返します。つまり、
RenderActions
pushCard
ナビゲーションと
Card
。新しい
カードにはボタンなどのインタラクティブなウィジェットを
テキスト入力、またはテキスト入力として処理でき、
追加のカードやダイアログで応答できます。
次の例では、Chat 用アプリに 最初のアプリのホームカード。カードの作成時刻と、 ボタン。ユーザーがボタンをクリックすると、更新されたカードが返され、更新されたカードの作成時間が表示されます。
Node.js
Python
Java
Apps Script
すべての APP_HOME
インタラクション イベントの後に呼び出される onAppHome
関数を実装します。
この例では、カード メッセージを送信するために、 カード JSON。 Apps Script カード サービスを使用することもできます。
アプリのホーム操作に応答する
アプリの最初のホームカードに、ボタンなどのインタラクティブなウィジェットが含まれている場合
Chat アプリは、入力または選択入力を
関連するインタラクション イベントを
RenderActions
「updateCard
」ナビゲーションを使用。インタラクティブ広告の処理と
詳細は
ユーザーが入力した情報を処理する。
上の例では、最初のアプリのホームカードにボタンが含まれていました。いつ
ユーザーがボタンをクリックしたとき(CARD_CLICKED
インタラクション イベント)
次に示すように、関数 updateAppHome
をトリガーしてアプリのホームカードを更新します。
次のコードを使用します。
ダイアログを開く
Chat アプリは、ダイアログを開いて、アプリのホームでの操作に応答することもできます。
<ph type="x-smartling-placeholder">アプリのホームからダイアログを開くには、次の方法で関連する操作イベントを処理します。
Card
を含む updateCard
ナビゲーションで renderActions
を返す
渡されます。次の例では、チャットアプリが CARD_CLICKED
インタラクション イベントを処理し、ダイアログを開くことで、アプリのホームカードからのボタンクリックに応答します。
{ renderActions: { action: { navigations: [{ updateCard: { sections: [{
header: "Add new contact",
widgets: [{ "textInput": {
label: "Name",
type: "SINGLE_LINE",
name: "contactName"
}}, { textInput: {
label: "Address",
type: "MULTIPLE_LINE",
name: "address"
}}, { decoratedText: {
text: "Add to favorites",
switchControl: {
controlType: "SWITCH",
name: "saveFavorite"
}
}}, { decoratedText: {
text: "Merge with existing contacts",
switchControl: {
controlType: "SWITCH",
name: "mergeContact",
selected: true
}
}}, { buttonList: { buttons: [{
text: "Next",
onClick: { action: { function: "openSequentialDialog" }}
}]}}]
}]}}]}}}
ダイアログを閉じるには、次のインタラクション イベントを処理します。
CLOSE_DIALOG
: ダイアログを閉じて Chat アプリの最初のアプリのホームカード。CLOSE_DIALOG_AND_EXECUTE
: ダイアログを閉じて、アプリのホームを更新します。 。
次のコードサンプルでは、CLOSE_DIALOG
を使用してダイアログを閉じて、アプリのホームカードに戻ります。
{ renderActions: { action: {
navigations: [{ endNavigation: { action: "CLOSE_DIALOG" }}]
}}}
ユーザーから情報を収集するために、連続したダイアログを作成することもできます。連続的なダイアログを作成する方法については、ダイアログを開いて応答するをご覧ください。
関連トピック
- アプリのホームを使用する Chat アプリのサンプルを確認する。
- ダイアログを開いて応答する。