カード
Google Chat のメッセージまたは Google Workspace アドオンに表示されたカード インターフェース。
カードでは、定義済みのレイアウト、インタラクティブな UI 要素(ボタンなど)、リッチメディアなどのリッチメディアがサポートされます。カードを使用して詳細情報を表示し、ユーザーから情報を収集し、ユーザーを次のステップに導く。
カードビルダーでカードをデザインしてプレビューする。
カードビルダーを開く
カードを作成する方法については、次のドキュメントをご覧ください。
- Google Chat アプリについては、 カードまたはダイアログのコンポーネントを設計します。
- Google Workspace アドオンについては、以下をご覧ください。 カードベースのインターフェース。
例: Google Chat アプリのカード メッセージ
Google Chat でカード メッセージのサンプルを作成するには、次の JSON を使用します。
{
"cardsV2": [
{
"cardId": "unique-card-id",
"card": {
"header": {
"title": "Sasha",
"subtitle": "Software Engineer",
"imageUrl":
"https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png",
"imageType": "CIRCLE",
"imageAltText": "Avatar for Sasha"
},
"sections": [
{
"header": "Contact Info",
"collapsible": true,
"uncollapsibleWidgetsCount": 1,
"widgets": [
{
"decoratedText": {
"startIcon": {
"knownIcon": "EMAIL"
},
"text": "sasha@example.com"
}
},
{
"decoratedText": {
"startIcon": {
"knownIcon": "PERSON"
},
"text": "<font color=\"#80e27e\">Online</font>"
}
},
{
"decoratedText": {
"startIcon": {
"knownIcon": "PHONE"
},
"text": "+1 (555) 555-1234"
}
},
{
"buttonList": {
"buttons": [
{
"text": "Share",
"onClick": {
"openLink": {
"url": "https://example.com/share"
}
}
},
{
"text": "Edit",
"onClick": {
"action": {
"function": "goToView",
"parameters": [
{
"key": "viewType",
"value": "EDIT"
}
]
}
}
}
]
}
}
]
}
]
}
}
]
}
JSON 表現 |
---|
{ "header": { object ( |
フィールド | |
---|---|
header
|
カードのヘッダー。通常、ヘッダーには先頭の画像とタイトルが含まれます。ヘッダーは常にカードの上部に表示されます。 |
sections[]
|
ウィジェットのコレクションが含まれています。各セクションには独自のオプションのヘッダーがあります。セクションは線の区切りで視覚的に区切られます。Google Chat アプリの例については、 カードのセクションを定義する。 |
sectionDividerStyle
|
セクション間の分割線のスタイル。 |
cardActions[]
|
カードの操作。アクションがカードのツールバー メニューに追加されます。
たとえば、次の JSON は、カード アクション メニューを
|
name
|
カードの名前。カード ナビゲーションでカード ID として使用されます。
|
fixedFooter
|
このカードの下部に表示される固定フッター。
設定
|
displayStyle
|
Google Workspace アドオンで、
|
peekCardHeader
|
コンテキスト コンテンツを表示する場合、ピークカードのヘッダーはプレースホルダとして機能するため、ユーザーはホームページ カードとコンテキスト カードの間を行き来できます。
|
CardHeader
カードヘッダーを表します。Google Chat アプリの例については、 ヘッダーを追加します。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{
"title": string,
"subtitle": string,
"imageType": enum ( |
フィールド | |
---|---|
title
|
必須。カードヘッダーのタイトル。ヘッダーの高さは固定されています。タイトルとサブタイトルの両方を指定すると、それぞれが 1 行になります。タイトルのみを指定する場合は、2 行に記述します。 |
subtitle
|
カードヘッダーのサブタイトル。指定した場合、
|
imageType
|
画像の切り抜きに使用される図形。
|
imageUrl
|
カードヘッダーの画像の HTTPS URL。 |
imageAltText
|
ユーザー補助に使用されるこの画像の代替テキスト。 |
ImageType
画像の切り抜きに使用される図形。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
列挙型 | |
---|---|
SQUARE
|
デフォルト値。画像に正方形のマスクを適用します。たとえば、4x3 の画像は 3x3 になります。 |
CIRCLE
|
画像に円形マスクを適用します。たとえば、4x3 の画像は、直径が 3 の円になります。 |
セクション
セクションには、指定された順序で垂直にレンダリングされるウィジェットのコレクションが含まれます。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{ "header": string, "widgets": [ { object ( |
フィールド | |
---|---|
header
|
セクションの上部に表示されるテキスト。シンプルな HTML 形式のテキストをサポートします。テキストの書式設定について詳しくは、このモジュールの Google Chat アプリでのテキストの書式設定 および Google Workspace アドオンでのテキストの書式設定。 |
widgets[]
|
セクションのすべてのウィジェット。ウィジェットを 1 つ以上含める必要があります。 |
collapsible
|
このセクションが折りたたみ可能かどうかを示します。 折りたたみ可能なセクションでは一部またはすべてのウィジェットが非表示になりますが、 もっと見るウィジェットを非表示にするには、 一部を表示。
非表示のウィジェットを特定するには、次のように指定します。
|
uncollapsibleWidgetsCount
|
セクションを折りたたんだ状態でも表示されたままになる、折りたたみできないウィジェットの数です。
たとえば、セクションに 5 つのウィジェットがあり、
|
collapseControl
|
<ph type="x-smartling-placeholder">
省略可。セクションの展開ボタンと折りたたみボタンを定義します。このボタンは、セクションが折りたたみ可能な場合にのみ表示されます。このフィールドが設定されていない場合は、デフォルトのボタンが使用されます。
|
ウィジェット
各カードはウィジェットで構成されています。
ウィジェットは、テキスト、画像、ボタン、その他のオブジェクト タイプのいずれかを表すことができる複合オブジェクトです。
JSON 表現 |
---|
{ "horizontalAlignment": enum ( |
フィールド | |
---|---|
horizontalAlignment
|
ウィジェットの配置を、左、右、中央のいずれにするかを指定します。 |
共用体フィールド
data 。ウィジェットには、以下のアイテムのうち 1 つのみを含めることができます。複数のウィジェット フィールドを使用して、さらにアイテムを表示できます。
data
は次のいずれか 1 つのみを指定できます。
|
|
textParagraph
|
段落テキストを表示します。シンプルな HTML 形式のテキストをサポートします。テキストの書式設定について詳しくは、このモジュールの Google Chat アプリでのテキストの書式設定 および Google Workspace アドオンでのテキストの書式設定。 たとえば、次の JSON は太字のテキストを作成します。
|
image
|
画像を表示します。 たとえば、次の JSON は代替テキストを含む画像を作成します。
|
decoratedText
|
装飾されたテキスト アイテムを表示します。 たとえば、次の JSON はメールアドレスを表示する装飾テキスト ウィジェットを作成します。
|
buttonList
|
ボタンのリスト。 たとえば、次の JSON は 2 つのボタンを作成します。1 つ目は青色のテキストボタン、2 つ目はリンクを開く画像ボタンです。
|
textInput
|
ユーザーが入力できるテキスト ボックスを表示します。 たとえば、次の JSON はメールアドレスのテキスト入力を作成します。
別の例として、次の JSON は静的な候補を使用してプログラミング言語のテキスト入力を作成します。
|
selectionInput
|
ユーザーがアイテムを選択できる選択コントロールを表示します。選択コントロールには、チェックボックス、ラジオボタン、スイッチ、プルダウン メニューなどがあります。 たとえば、次の JSON は、ユーザーがサイズを選択できるプルダウン メニューを作成します。
|
dateTimePicker
|
ユーザーが日付、時刻、または日時を入力できるウィジェットを表示します。 たとえば、次の JSON は、予約をスケジュールする日時選択ツールを作成します。
|
divider
|
ウィジェット間に水平の線分割を表示します。 たとえば、次の JSON は分割線を作成します。
|
grid
|
アイテムのコレクションを含むグリッドを表示します。 グリッドは、任意の数の列とアイテムをサポートします。行数は、項目数の上限を列数で割ることによって決定されます。10 個のアイテムと 2 列のグリッドが 5 行あります。11 のアイテムと 2 列のグリッドは 6 行あります。
たとえば、次の JSON は、1 つのアイテムを含む 2 列のグリッドを作成します。
|
columns
|
最大 2 列を表示します。
3 つ以上の列を含める、または行を使用する場合は、
たとえば、次の JSON は、それぞれテキスト段落を含む 2 つの列を作成します。
|
chipList
|
<ph type="x-smartling-placeholder">
チップのリスト。 たとえば、次の JSON は 2 つのチップを作成します。1 つ目はテキストチップ、2 つ目はリンクを開くアイコンチップです。
|
TextParagraph
書式設定に対応するテキストの段落。Google Chat アプリの例については、 書式付きテキストの段落を追加します。テキストの書式設定について詳しくは、このモジュールの Google Chat アプリでのテキストの書式設定 および Google Workspace アドオンでのテキストの書式設定。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{ "text": string, "maxLines": integer } |
フィールド | |
---|---|
text
|
ウィジェットに表示されるテキストです。 |
maxLines
|
<ph type="x-smartling-placeholder">
ウィジェットに表示されるテキストの最大行数。テキストが指定の最大行数を超えると、超過分のコンテンツは もっと見る ] ボタンを離します。テキストが指定された最大行数以下の場合、 もっと見る ボタンは表示されません。
デフォルト値は 0 で、この場合、すべてのコンテキストが表示されます。負の値は無視されます。
|
画像
URL で指定される画像。
onClick
できます。例については以下をご覧ください。
画像を追加します。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{
"imageUrl": string,
"onClick": {
object ( |
フィールド | |
---|---|
imageUrl
|
イメージをホストする HTTPS URL。 次に例を示します。
|
onClick
|
ユーザーが画像をクリックすると、この操作がトリガーされます。 |
altText
|
ユーザー補助に使用されるこの画像の代替テキスト。 |
OnClick
カード上のインタラクティブな要素(ボタンなど)をユーザーがクリックしたときの応答方法を表します。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{ // Union field |
フィールド | |
---|---|
共用体フィールド
|
|
action
|
指定すると、このエンティティによってアクションがトリガーされます。
|
openLink
|
指定すると、この
|
openDynamicLinkAction
|
リンクを開く必要がある場合は、アドオンによってこのアクションがトリガーされます。これは Pod の
|
card
|
指定されている場合、クリックすると新しいカードがカードスタックにプッシュされます。
|
overflowMenu
|
<ph type="x-smartling-placeholder">
指定すると、この
|
対応
フォームを送信したときの動作を説明するアクション。たとえば、Apps Script スクリプトを呼び出してフォームを処理できます。アクションがトリガーされると、フォームの値がサーバーに送信されます。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{ "function": string, "parameters": [ { object ( |
フィールド | |
---|---|
function
|
要素を含む要素がクリックされるかアクティブ化されたときに呼び出されるカスタム関数。 使用例については、以下をご覧ください。 フォームデータを読み取る。 |
parameters[]
|
アクション パラメータのリスト。 |
loadIndicator
|
アクションの呼び出し中に表示される読み込みインジケーターを指定します。 |
persistValues
|
アクション後にフォームの値が保持されるかどうかを示します。デフォルト値は
条件
条件
|
interaction
|
省略可。ファイルを開く際に必須 ダイアログ。 ユーザーとのやり取り(カード メッセージのボタンのクリックなど)に対する応答内容。
指定しない場合、アプリは
Pod の
|
requiredWidgets[]
|
<ph type="x-smartling-placeholder">で確認できます。 省略可。このアクションが有効な送信に必要とするウィジェットの名前をこのリストに入力します。
このアクションが呼び出されたときにここにリストされているウィジェットに値がない場合、フォームの送信は中止されます。
|
allWidgetsAreRequired
|
<ph type="x-smartling-placeholder">で確認できます。 省略可。true の場合、このアクションではすべてのウィジェットが必須と見なされます。
|
ActionParameter
アクション メソッドが呼び出されたときに指定する文字列パラメータのリスト。例えば、「今すぐスヌーズ」、「1 日スヌーズ」、「来週スヌーズ」の 3 つのスヌーズボタンを考えてみましょう。用途
action method = snooze()
: スヌーズの種類とスヌーズ時間を文字列パラメータのリストに渡します。
詳しくは以下をご覧ください。
CommonEventObject
。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{ "key": string, "value": string } |
フィールド | |
---|---|
key
|
アクション スクリプトのパラメータの名前。 |
value
|
パラメータの値。 |
LoadIndicator
アクションの呼び出し中に表示される読み込みインジケーターを指定します。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
列挙型 | |
---|---|
SPINNER
|
コンテンツの読み込み中であることを示すスピナーが表示されます。 |
NONE
|
何も表示されていません。 |
操作
省略可。ファイルを開く際に必須 ダイアログ。
ユーザーとのやり取り(カード メッセージのボタンのクリックなど)に対する応答内容。
指定しない場合、アプリは
action
(リンクを開く、関数を実行するなど)を通常どおりに行うことができます。
Pod の
interaction
: アプリは特別なインタラクティブな方法で応答できます。たとえば、
interaction
から
OPEN_DIALOG
の場合、アプリは
ダイアログで表示できます。
指定すると、読み込みインジケーターは表示されません。アドオンに対して指定すると、カード全体が削除され、クライアントには何も表示されません。
Google Chat アプリで利用でき、Google Workspace アドオンでは利用できません。
列挙型 | |
---|---|
INTERACTION_UNSPECIFIED
|
デフォルト値。「
action
通常どおり実行されます
|
OPEN_DIALOG
|
アプリを開く ダイアログ: Chat アプリがユーザーとやり取りするために使用する、ウィンドウ形式のカードベースのインターフェースです。 カード メッセージのボタンクリックに対して Chat アプリでのみサポートされます。アドオンに対して指定すると、カード全体が削除され、クライアントには何も表示されません。
|
OpenLink
特定のトピックを
onClick
ハイパーリンクを開くことができます
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{ "url": string, "openAs": enum ( |
フィールド | |
---|---|
url
|
開く URL。 |
openAs
|
リンクの開き方
|
onClose
|
クライアントがリンクを開いた後にリンクを忘れたか、ウィンドウが閉じるまでリンクを監視するか。
|
OpenAs
特定の
OnClick
アクションでリンクが開くと、クライアントはそのリンクをフルサイズ ウィンドウ(クライアントが使用するフレームの場合)またはオーバーレイ(ポップアップなど)として開くことができます。実装はクライアントのプラットフォームの機能によって異なります。クライアントがサポートしていない場合、選択した値は無視されることがあります。
FULL_SIZE
すべてのクライアントでサポートされています。
Google Workspace アドオンでは利用でき、Google Chat アプリでは利用できません。
列挙型 | |
---|---|
FULL_SIZE
|
リンクはフルサイズのウィンドウで開きます(クライアントがそのフレームを使用している場合)。 |
OVERLAY
|
リンクがポップアップなどのオーバーレイとして開きます。 |
OnClose
リンクが開いたときのクライアントの動作
OnClick
アクションが終了します。
実装はクライアントのプラットフォーム機能によって異なります。たとえば、ウェブブラウザで表示されるポップアップ ウィンドウでリンクが
OnClose
使用します。
両方が
OnOpen
および
OnClose
設定されていて、クライアント プラットフォームで両方の値をサポートできない場合、
OnClose
が優先されます。
Google Workspace アドオンでは利用でき、Google Chat アプリでは利用できません。
列挙型 | |
---|---|
NOTHING
|
デフォルト値。カードが再読み込みされない何も起こりません。 |
RELOAD
|
子ウィンドウが閉じた後に、カードを再読み込みする。
以下と組み合わせて使用する場合:
|
OverflowMenu
<ph type="x-smartling-placeholder">
ユーザーが呼び出すことができる 1 つ以上のアクションを含むポップアップ メニューを表示するウィジェット。たとえば、メイン以外のアクションをカードに表示する場合などです。このウィジェットは、利用可能なスペースにアクションが収まらない場合に使用します。使用するには、このウィジェットを
OnClick
サポートするウィジェットのアクションを
簡単に返すことができますたとえば、
Button
。
Google Chat アプリで利用でき、Google Workspace アドオンでは利用できません。
JSON 表現 |
---|
{
"items": [
{
object ( |
フィールド | |
---|---|
items[]
|
必須。メニュー オプションのリスト。 |
OverflowMenuItem
<ph type="x-smartling-placeholder">で確認できます。 ユーザーがオーバーフロー メニューで呼び出すことができるオプション。
Google Chat アプリで利用でき、Google Workspace アドオンでは利用できません。
JSON 表現 |
---|
{ "startIcon": { object ( |
フィールド | |
---|---|
startIcon
|
テキストの前に表示されるアイコン。 |
text
|
必須。ユーザーがアイテムを識別または説明するテキスト。 |
onClick
|
必須。メニュー オプションが選択されたときに呼び出されるアクション。この
|
disabled
|
メニュー オプションを無効にするかどうか。デフォルトは false です。 |
アイコン
カードのウィジェットに表示されるアイコン。Google Chat アプリの例については、 アイコンを追加します。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{ "altText": string, "imageType": enum ( |
フィールド | |
---|---|
altText
|
省略可。ユーザー補助機能に使用されるアイコンの説明。指定しない場合、デフォルト値
アイコンが
|
imageType
|
画像に適用された切り抜きスタイル。場合によっては
|
共用体フィールド
icons 。カードのウィジェットに表示されるアイコン。
icons
は次のいずれか 1 つのみを指定できます。
|
|
knownIcon
|
Google Workspace に組み込まれているアイコンのいずれかを表示します。
たとえば、飛行機のアイコンを表示するには、
サポートされているアイコンの全一覧については、 組み込みのアイコン。 |
iconUrl
|
HTTPS URL でホストされるカスタム アイコンを表示します。 次に例を示します。
サポートされているファイル形式は次のとおりです。
|
materialIcon
|
次のいずれかを表示 Google マテリアル アイコン。 たとえば、 チェックボックス アイコンを使う場合は、
|
MaterialIcon
Google のマテリアル アイコン: 2, 500 以上のオプションが含まれています。
たとえば、 チェックボックス アイコン 体重と成績をカスタマイズして、次の文章を書いてください。
{
"name": "check_box",
"fill": true,
"weight": 300,
"grade": -25
}
Google Chat アプリで利用でき、Google Workspace アドオンでは利用できません。
JSON 表現 |
---|
{ "name": string, "fill": boolean, "weight": integer, "grade": integer } |
フィールド | |
---|---|
name
|
アイコンの名前が
Google マテリアル アイコンなど
|
fill
|
アイコンを塗りつぶしとしてレンダリングするかどうか。デフォルト値は false です。 さまざまなアイコン設定をプレビューするには、 Google フォント アイコン [設定]で カスタマイズ: |
weight
|
アイコンのストロークの太さ。{100、200、300、400、500、600、700} から選択できます。指定しない場合、デフォルト値は 400 です。他の値が指定されている場合は、デフォルト値が使用されます。 さまざまなアイコン設定をプレビューするには、 Google フォント アイコン [設定]で カスタマイズ: |
grade
|
重量とグレードはシンボルの太さに影響します。グレードの調整は、重みの調整よりも細かく、記号のサイズに小さな影響を及ぼします。{-25, 0, 200} から選択できます。指定しない場合、デフォルト値は 0 です。他の値が指定されている場合は、デフォルト値が使用されます。 さまざまなアイコン設定をプレビューするには、 Google フォント アイコン [設定]で カスタマイズ: |
DecoratedText
テキストの上または下にラベル、テキストの前にアイコン、選択ウィジェット、テキストの後にボタンなど、オプションの装飾が付いたテキストを表示するウィジェット。Google Chat アプリの例については、 装飾テキストでテキストを表示します。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{ "icon": { object ( |
フィールド | |
---|---|
icon
|
廃止により廃止
|
startIcon
|
テキストの前に表示されるアイコン。 |
topLabel
|
上に表示されるテキスト
|
text
|
必須。プライマリ テキスト。 シンプルな書式をサポートします。テキストの書式設定について詳しくは、このモジュールの Google Chat アプリでのテキストの書式設定 および Google Workspace アドオンでのテキストの書式設定。 |
wrapText
|
テキストの折り返しの設定。条件
適用対象
|
bottomLabel
|
その下に表示されるテキストは
|
onClick
|
この操作は、ユーザーが広告をクリックして
|
共用体フィールド
control 。ページのテキストの右側に表示されるボタン、スイッチ、チェックボックス、または画像。
decoratedText
追加します。
control
は次のいずれか 1 つのみを指定できます。
|
|
button
|
ユーザーがクリックしてアクションをトリガーできるボタン。 |
switchControl
|
ユーザーがクリックして状態を変更し、アクションをトリガーできる切り替えウィジェット。 |
endIcon
|
テキストの後に表示されるアイコン。 |
ボタン
ユーザーがクリックできるテキスト、アイコン、またはテキストとアイコンボタン。Google Chat アプリの例については、 ボタンを追加する。
画像をクリック可能なボタンにするには、
(
Image
)を指定し、
ImageComponent
onClick
できます。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{ "text": string, "icon": { object ( |
フィールド | |
---|---|
text
|
ボタン内に表示されるテキスト。 |
icon
|
アイコン画像。両方が
|
color
|
設定すると、ボタンは無地の背景色で塗りつぶされ、フォントの色は背景色とのコントラストが維持されます。たとえば、背景を青色に設定すると、テキストが白になる可能性が高くなります。 未設定の場合、画像の背景は白、フォントの色は青です。
赤、緑、青の場合、各フィールドの値は
必要に応じて設定
対象
たとえば、次の色は半透明な赤を表しています。
|
onClick
|
必須。ハイパーリンクを開く、カスタム関数を実行するなど、ユーザーがボタンをクリックしたときに実行するアクション。 |
disabled
|
条件
|
altText
|
ユーザー補助に使用される代替テキスト。 ボタンの役割をユーザーに示す説明テキストを設定します。たとえば、ボタンでハイパーリンクが開く場合、次のように記述します。「新しいブラウザタブを開き、次の場所にある Google Chat デベロッパー向けドキュメントに移動 https://developers.google.com/workspace/chat". |
type
|
<ph type="x-smartling-placeholder">
ボタンのタイプを決定します。
|
色
RGBA カラースペースのカラーを表します。この表現は、コンパクトさよりも、さまざまな言語の色表現との変換をシンプルにするために設計されています。たとえば、この表現のフィールドは、この表現のコンストラクタに
java.awt.Color
。また、UIColor の
+colorWithRed:green:blue:alpha
メソッド(iOS の場合)少し手を加えるだけで、簡単に CSS にフォーマットできます。
rgba()
使用します。
このリファレンス ページには、RGB 値の解釈に使用する絶対色空間(sRGB、Adobe RGB、DCI-P3、BT.2020 など)に関する情報が記載されていません。デフォルトでは、アプリは sRGB 色空間を想定する必要があります。
色の等価性を判断する必要がある場合、実装では、特に明記されていない限り、赤、緑、青、アルファの値の差が最大で 2 つあるときは 2 つの色を等しいものとして扱います
1e-5
。
例(Java):
import com.google.type.Color;
// ...
public static java.awt.Color fromProto(Color protocolor) {
float alpha = protocolor.hasAlpha()
? protocolor.getAlpha().getValue()
: 1.0;
return new java.awt.Color(
protocolor.getRed(),
protocolor.getGreen(),
protocolor.getBlue(),
alpha);
}
public static Color toProto(java.awt.Color color) {
float red = (float) color.getRed();
float green = (float) color.getGreen();
float blue = (float) color.getBlue();
float denominator = 255.0;
Color.Builder resultBuilder =
Color
.newBuilder()
.setRed(red / denominator)
.setGreen(green / denominator)
.setBlue(blue / denominator);
int alpha = color.getAlpha();
if (alpha != 255) {
result.setAlpha(
FloatValue
.newBuilder()
.setValue(((float) alpha) / denominator)
.build());
}
return resultBuilder.build();
}
// ...
例(iOS / Obj-C):
// ...
static UIColor* fromProto(Color* protocolor) {
float red = [protocolor red];
float green = [protocolor green];
float blue = [protocolor blue];
FloatValue* alpha_wrapper = [protocolor alpha];
float alpha = 1.0;
if (alpha_wrapper != nil) {
alpha = [alpha_wrapper value];
}
return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
}
static Color* toProto(UIColor* color) {
CGFloat red, green, blue, alpha;
if (![color getRed:&red green:&green blue:&blue alpha:&alpha]) {
return nil;
}
Color* result = [[Color alloc] init];
[result setRed:red];
[result setGreen:green];
[result setBlue:blue];
if (alpha <= 0.9999) {
[result setAlpha:floatWrapperWithValue(alpha)];
}
[result autorelease];
return result;
}
// ...
例(JavaScript):
// ...
var protoToCssColor = function(rgb_color) {
var redFrac = rgb_color.red || 0.0;
var greenFrac = rgb_color.green || 0.0;
var blueFrac = rgb_color.blue || 0.0;
var red = Math.floor(redFrac * 255);
var green = Math.floor(greenFrac * 255);
var blue = Math.floor(blueFrac * 255);
if (!('alpha' in rgb_color)) {
return rgbToCssColor(red, green, blue);
}
var alphaFrac = rgb_color.alpha.value || 0.0;
var rgbParams = [red, green, blue].join(',');
return ['rgba(', rgbParams, ',', alphaFrac, ')'].join('');
};
var rgbToCssColor = function(red, green, blue) {
var rgbNumber = new Number((red << 16) | (green << 8) | blue);
var hexString = rgbNumber.toString(16);
var missingZeros = 6 - hexString.length;
var resultBuilder = ['#'];
for (var i = 0; i < missingZeros; i++) {
resultBuilder.push('0');
}
resultBuilder.push(hexString);
return resultBuilder.join('');
};
// ...
JSON 表現 |
---|
{ "red": number, "green": number, "blue": number, "alpha": number } |
フィールド | |
---|---|
red
|
色の赤の量を [0, 1] の範囲内の値として表します。 |
green
|
カラーの緑色の量。区間 [0, 1] 内の値として示されます。 |
blue
|
カラーの青色の量。区間 [0, 1] 内の値として示されます。 |
alpha
|
ピクセルに適用する必要があるこのカラーの割合。つまり、最終的なピクセルの色は、次の式で定義されます。
つまり、値 1.0 はソリッドカラーに相当し、値 0.0 は透明色に相当します。これは、単純な浮動小数点スカラーではなくラッパー メッセージを使用します。これにより、デフォルト値が設定されたのか未設定値だったのかを区別できます。省略すると、このカラー オブジェクトはソリッド カラーとしてレンダリングされます(アルファ値を明示的に 1.0 に設定した場合と同様です)。 |
種類
<ph type="x-smartling-placeholder">
「 種類 できます。
Google Chat アプリで利用でき、Google Workspace アドオンでは利用できません。
列挙型 | |
---|---|
TYPE_UNSPECIFIED
|
使用しないでください。指定されていません。 |
OUTLINED
|
枠線付きのボタンは、中強調のボタンです。通常、重要なアクションが含まれますが、Chat アプリやアドオンの主要アクションではありません。 |
FILLED
|
塗りつぶしボタンには単色のコンテナがあります。最も視覚的な効果があり、Chat アプリやアドオンの重要な主要な操作に使用することをおすすめします。 |
FILLED_TONAL
|
塗りつぶしの色調ボタンは、塗りつぶしボタンと枠線付きボタンの中間に位置します。この方法は、枠線ボタンよりも優先度の低いボタンを強調する必要がある場合に便利です。 |
BORDERLESS
|
ボタンに、デフォルト状態の非表示のコンテナがありません。優先度が最も低いアクション、特に複数のオプションを提示する場合によく使用されます。 |
SwitchControl
切り替えスタイルのスイッチか、チェックボックスを
decoratedText
追加します。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
サポートされているのは
decoratedText
追加します。
JSON 表現 |
---|
{ "name": string, "value": string, "selected": boolean, "onChangeAction": { object ( |
フィールド | |
---|---|
name
|
フォーム入力イベントでスイッチ ウィジェットが識別される名前。 フォーム入力の操作について詳しくは、以下をご覧ください。 フォームデータの受信。 |
value
|
ユーザーが入力した値。フォーム入力イベントの一部として返されます。 フォーム入力の操作について詳しくは、以下をご覧ください。 フォームデータの受信。 |
selected
|
日時
|
onChangeAction
|
実行する関数など、切り替え状態が変更されたときに実行するアクション。 |
controlType
|
ユーザー インターフェースにスイッチがどのように表示されるか。
|
ControlType
ユーザー インターフェースにスイッチがどのように表示されるか。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
列挙型 | |
---|---|
SWITCH
|
切り替え式のスイッチ。 |
CHECKBOX
|
廃止により廃止
CHECK_BOX 。
|
CHECK_BOX
|
チェックボックス。 |
ButtonList
横方向に並べられたボタンのリスト。Google Chat アプリの例については、 ボタンを追加する。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{
"buttons": [
{
object ( |
フィールド | |
---|---|
buttons[]
|
ボタンの配列。 |
TextInput
ユーザーがテキストを入力できるフィールド。提案と変更時のアクションをサポートします。Google Chat アプリの例については、 ユーザーがテキストを入力できるフィールドを追加します。
Chat アプリは、フォーム入力イベント中に入力されたテキストの値を受信して処理できます。フォーム入力の操作について詳しくは、以下をご覧ください。 フォームデータの受信。
未定義または抽象的なデータをユーザーから収集する必要がある場合は、テキスト入力を使用します。定義済みまたは列挙データをユーザーから収集するには、
SelectionInput
追加します。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{ "name": string, "label": string, "hintText": string, "value": string, "type": enum ( |
フィールド | |
---|---|
name
|
フォーム入力イベントでテキスト入力を識別するための名前。 フォーム入力の操作について詳しくは、以下をご覧ください。 フォームデータの受信。 |
label
|
ユーザー インターフェースのテキスト入力フィールドの上に表示されるテキスト。
アプリが必要とする情報を入力するのに役立つテキストを指定します。たとえば、誰かの名前を尋ねるが、特に姓が必要とされる場合は、次のように記述します。
次の場合は必須
|
hintText
|
テキスト入力フィールドの下に表示されるテキストで、ユーザーに特定の値を入力するよう促すために使用します。このテキストは常に表示されます。
次の場合は必須
|
value
|
ユーザーが入力した値。フォーム入力イベントの一部として返されます。 フォーム入力の操作について詳しくは、以下をご覧ください。 フォームデータの受信。 |
type
|
ユーザー インターフェースにテキスト入力フィールドがどのように表示されるか。たとえば、フィールドが 1 行か複数行かを示します。 |
onChangeAction
|
テキスト入力フィールドの変化があった場合の処理方法。(フィールドへの追加やテキストの削除など)。 必要な操作の例としては、カスタム関数の実行、 ダイアログ Google Chat で管理できます。 |
initialSuggestions
|
ユーザーが入力できる候補値。これらの値は、ユーザーがテキスト入力フィールドをクリックすると表示されます。ユーザーの入力に応じて、ユーザーの入力内容に合わせて候補の値が動的にフィルタリングされます。
たとえば、プログラミング言語のテキスト入力フィールドでは、Java、JavaScript、Python、C++ などが候補として表示されます。ユーザーが入力を開始したとき
候補値により、アプリが理解できる値をユーザーが入力しやすくなります。JavaScript について言及する場合、
指定すると、
|
autoCompleteAction
|
省略可。テキスト入力フィールドを操作するユーザーに候補が提示されたときに実行するアクションを指定します。
指定しない場合、候補は
指定すると、ここで指定したアクション(カスタム関数の実行など)が実行されます。
|
validation
|
<ph type="x-smartling-placeholder">で確認できます。 このテキスト入力フィールドに必要な検証を指定します。
|
placeholderText
|
テキスト入力フィールドが空の場合に表示されるテキスト。このテキストを使用して、ユーザーに値の入力を促します。たとえば
|
種類
ユーザー インターフェースにテキスト入力フィールドがどのように表示されるか。たとえば、入力欄が 1 行か複数行かなどです。条件
initialSuggestions
指定されている場合、
type
常に
SINGLE_LINE
(次の設定の場合も同様)
MULTIPLE_LINE
。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
列挙型 | |
---|---|
SINGLE_LINE
|
テキスト入力フィールドの高さは 1 行に固定されています。 |
MULTIPLE_LINE
|
テキスト入力フィールドの高さは複数行に固定されています。 |
RenderActions
カードにアクションの実行を指示する一連のレンダリング手順 アドオンのホストアプリまたは Chat アプリに、アプリ固有のアクションを実行するように指示します。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
フィールド | |
---|---|
action |
アクション
フィールド | |
---|---|
navigations[] |
表示されたカードのプッシュまたは更新を行います。 |
候補
ユーザーが入力できる候補値。これらの値は、ユーザーがテキスト入力フィールドをクリックすると表示されます。ユーザーの入力に応じて、ユーザーの入力内容に合わせて候補の値が動的にフィルタリングされます。
たとえば、プログラミング言語のテキスト入力フィールドでは、Java、JavaScript、Python、C++ などが候補として表示されます。ユーザーが入力を開始したとき
Jav
、表示する候補フィルタのリスト
Java
および
JavaScript
。
候補値により、アプリが理解できる値をユーザーが入力しやすくなります。JavaScript について言及する場合、
javascript
など
java script
。提案
JavaScript
は、ユーザーによるアプリの操作方法を標準化できます。
指定すると、
TextInput.type
常に
SINGLE_LINE
(以下の設定の場合も同様)
MULTIPLE_LINE
。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{
"items": [
{
object ( |
フィールド | |
---|---|
items[]
|
テキスト入力フィールドで予測入力の推奨事項に使用される候補のリスト。 |
SuggestionItem
ユーザーがテキスト入力フィールドに入力できる 1 つの推奨値。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{ // Union field |
フィールド | |
---|---|
共用体フィールド
|
|
text
|
テキスト入力フィールドへの入力候補の値。これは、ユーザーが自分で入力した値と同じです。 |
確認事項
<ph type="x-smartling-placeholder">で確認できます。 接続されているウィジェットを検証するために必要なデータを表します。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{
"characterLimit": integer,
"inputType": enum ( |
フィールド | |
---|---|
characterLimit
|
<ph type="x-smartling-placeholder">で確認できます。 テキスト入力ウィジェットの文字数制限を指定します。これはテキスト入力にのみ使用され、他のウィジェットでは無視されます。
|
inputType
|
<ph type="x-smartling-placeholder">で確認できます。 入力ウィジェットのタイプを指定します。
|
InputType
入力ウィジェットのタイプ。
列挙型 | |
---|---|
INPUT_TYPE_UNSPECIFIED
|
未指定のタイプ。使用しないでください。 |
TEXT
|
すべての文字を使用できる通常のテキスト。 |
INTEGER
|
整数値。 |
FLOAT
|
浮動小数点値。 |
EMAIL
|
メールアドレス。 |
EMOJI_PICKER
|
システム提供の絵文字選択ツールから選択された絵文字。 |
SelectionInput
ユーザーが選択できる 1 つ以上の UI アイテムを作成するウィジェット。たとえば、プルダウン メニューやチェックボックスなどです。このウィジェットを使用して、予測や列挙が可能なデータを収集できます。Google Chat アプリの例については、 選択可能な UI 要素を追加します。
Chat アプリは、ユーザーが選択または入力したアイテムの値を処理できます。フォーム入力の操作について詳しくは、以下をご覧ください。 フォームデータの受信。
ユーザーから未定義のデータや抽象データを収集するには、
TextInput
追加します。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{ "name": string, "label": string, "type": enum ( |
フィールド | |
---|---|
name
|
必須。フォーム入力イベントで選択入力を識別する名前。 フォーム入力の操作について詳しくは、以下をご覧ください。 フォームデータの受信。 |
label
|
ユーザー インターフェースの選択入力フィールドの上に表示されるテキスト。 アプリが必要とする情報を入力するのに役立つテキストを指定します。たとえば、ユーザーがプルダウン メニューから作業チケットの緊急度を選択する場合、ラベルは「緊急度」になります。または [緊急度を選択]を選択します |
type
|
フォーマットでユーザーに表示されるアイテムのタイプ
|
items[]
|
選択可能な項目の配列。たとえば、ラジオボタンやチェックボックスの配列です。最大 100 個のアイテムをサポートします。 |
onChangeAction
|
指定すると、選択が変更されたときにフォームが送信されます。指定しない場合は、フォームを送信する個別のボタンを指定する必要があります。 フォーム入力の操作について詳しくは、以下をご覧ください。 フォームデータの受信。 |
multiSelectMaxSelectedItems
|
複数選択メニューの場合、ユーザーが選択できる項目の最大数。最小値は 1 アイテムです。指定しない場合のデフォルトは 3 項目です。 |
multiSelectMinQueryLength
|
複数選択メニューの場合、アプリがクエリする前にユーザーが入力したテキスト文字数が予測入力され、メニューの候補アイテムが表示されます。 指定しない場合のデフォルトは、静的データソースでは 0 文字、外部データソースでは 3 文字です。 |
validation
|
プルダウン メニューの場合、この選択入力フィールドの検証。
|
共用体フィールド
|
|
externalDataSource
|
リレーショナル データベースなどの外部データソース。 |
platformDataSource
|
Google Workspace のデータソース。 |
SelectionType
ユーザーが選択できるアイテムの形式。オプションによって、サポートされる操作の種類が異なります。たとえば、複数のチェックボックスをオンにすることはできますが、プルダウン メニューから選択できるのは 1 つのアイテムのみです。
各選択入力は、1 種類の選択をサポートします。たとえば、チェックボックスとスイッチを混在させることはできません。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
列挙型 | |
---|---|
CHECK_BOX
|
チェックボックスのセット。ユーザーは 1 つ以上のチェックボックスを選択できます。 |
RADIO_BUTTON
|
ラジオボタンのセット。ユーザーはラジオボタンを 1 つ選択できます。 |
SWITCH
|
スイッチのセット。ユーザーはスイッチを 1 つ以上有効にできます。 |
DROPDOWN
|
プルダウン メニュー。メニューから 1 つのアイテムを選択できます。 |
MULTI_SELECT
|
静的データと動的データの複数選択メニュー。ユーザーはメニューバーから 1 つ以上のアイテムを選択します。ユーザーは値を入力して動的データを取り込むこともできます。たとえば、ユーザーが Google Chat スペースの名前の入力を開始すると、ウィジェットがスペースを自動的に提案します。 複数選択メニューのアイテムを入力するには、次のいずれかのタイプのデータソースを使用します。
複数選択メニューの実装例については、以下をご覧ください。 複数選択メニューを追加します。
|
SelectionItem
チェックボックスやスイッチなど、ユーザーが選択入力で選択できる項目。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{ "text": string, "value": string, "selected": boolean, "startIconUri": string, "bottomText": string } |
フィールド | |
---|---|
text
|
ユーザーがアイテムを識別または説明するテキスト。 |
value
|
このアイテムに関連付けられた値。クライアントはこれをフォームの入力値として使用する必要があります。 フォーム入力の操作について詳しくは、以下をご覧ください。 フォームデータの受信。 |
selected
|
アイテムがデフォルトで選択されるかどうか。選択入力で 1 つの値のみを受け入れる場合(ラジオボタンやプルダウン メニューなど)、このフィールドは 1 つの項目に対してのみ設定します。 |
startIconUri
|
複数選択メニューの場合、アイテムの隣に表示されるアイコンの URL
|
bottomText
|
複数選択メニューの場合は、アイテムの下部に表示されるテキストの説明またはラベル
|
PlatformDataSource
1 つの
Google Workspace のデータソースである複数選択メニューを使用するウィジェット。複数選択メニューのアイテムを入力するために使用されます。
SelectionInput
Google Chat アプリで利用でき、Google Workspace アドオンでは利用できません。
JSON 表現 |
---|
{ // Union field |
フィールド | |
---|---|
共用体フィールド
data_source 。データソース。
data_source
は次のいずれか 1 つのみを指定できます。
|
|
commonDataSource
|
Google Workspace 組織内のユーザーなど、すべての Google Workspace アプリケーションで共有されるデータソース。 |
hostAppDataSource
|
Google Workspace ホスト アプリケーションに固有のデータソース(Google Chat のスペースなど)。 |
CommonDataSource
全員が共有するデータソース Google Workspace アプリケーション。
Google Chat アプリで利用でき、Google Workspace アドオンでは利用できません。
列挙型 | |
---|---|
UNKNOWN
|
デフォルト値。使用しないでください。 |
USER
|
Google Workspace ユーザー。ユーザーは、各自の Google Workspace 組織のユーザーのみを表示および選択できます。 |
HostAppDataSourceMarkup
1 つの
Google Workspace アプリケーションのデータソースである複数選択メニューを使用するウィジェット。データソースにより、複数選択メニューの選択項目が入力されます。
SelectionInput
Google Chat アプリで利用でき、Google Workspace アドオンでは利用できません。
JSON 表現 |
---|
{ // Union field |
フィールド | |
---|---|
共用体フィールド
data_source 。複数選択メニューのアイテムを入力する Google Workspace アプリケーション。
data_source
は次のいずれか 1 つのみを指定できます。
|
|
chatDataSource
|
Google Chat のデータソース。 |
ChatClientDataSourceMarkup
1 つの
複数選択メニューを使用するウィジェットです。Google Chat のデータソースです。データソースにより、複数選択メニューの選択項目が入力されます。たとえば、ユーザーは自分がメンバーとなっている Google Chat スペースを選択できます。
SelectionInput
Google Chat アプリで利用でき、Google Workspace アドオンでは利用できません。
JSON 表現 |
---|
{ // Union field |
フィールド | |
---|---|
共用体フィールド
source 。Google Chat のデータソース。
source
は次のいずれか 1 つのみを指定できます。
|
|
spaceDataSource
|
そのユーザーがメンバーになっている Google Chat スペース。 |
SpaceDataSource
複数選択メニューの選択項目として Google Chat スペースにデータを入力するデータソース。ユーザーがメンバーになっているスペースにのみデータを入力します。
Google Chat アプリで利用でき、Google Workspace アドオンでは利用できません。
JSON 表現 |
---|
{ "defaultToCurrentSpace": boolean } |
フィールド | |
---|---|
defaultToCurrentSpace
|
「
|
DateTimePicker
ユーザーは日付、時刻、またはその両方を入力できます。Google Chat アプリの例については、 ユーザーが日時を選択できるようにする。
ユーザーはテキストを入力するか、選択ツールを使用して日付と時刻を選択できます。ユーザーが無効な日時を入力すると、選択ツールにエラーが表示され、情報を正しく入力するよう求められます。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{ "name": string, "label": string, "type": enum ( |
フィールド | |
---|---|
name
|
ファイアウォール ルールで
フォーム入力の操作について詳しくは、以下をご覧ください。 フォームデータの受信。 |
label
|
日付、時刻、または日時の入力をユーザーに促すテキスト。たとえば、ユーザーが予約をスケジュールしている場合は、
|
type
|
ウィジェットが日付、時刻、または日時の入力をサポートしているかどうか。 |
valueMsEpoch
|
ウィジェットに表示されるデフォルト値( Unix エポック時刻。
選択ツールのタイプ(
|
timezoneOffsetDate
|
UTC からのタイムゾーン オフセットを表す数値(分単位)。設定すると、
|
onChangeAction
|
ユーザーがクリックするとトリガーされます
保存
または
クリア
取得
|
validation
|
<ph type="x-smartling-placeholder">で確認できます。 省略可。この日時選択ツールに必要な検証を指定します。
|
DateTimePickerType
日時の形式は、
DateTimePicker
追加します。ユーザーが日付、時刻、またはその両方を入力できるかどうかを決定します。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
列挙型 | |
---|---|
DATE_AND_TIME
|
ユーザーが日時を入力します。 |
DATE_ONLY
|
ユーザーが日付を入力します。 |
TIME_ONLY
|
ユーザーが時刻を入力します。 |
分割線
この型にはフィールドがありません。
ウィジェットを区切る線を水平線で表示します。Google Chat アプリの例については、 ウィジェット間に水平方向の分割線を追加する。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
たとえば、次の JSON は分割線を作成します。
"divider": {}
グリッド
アイテムのコレクションを含むグリッドを表示します。アイテムにはテキストまたは画像のみを含めることができます。レスポンシブな列の場合、またはテキストや画像以外の列を含める場合は、
。Google Chat アプリの例については、
アイテムのコレクションでグリッドを表示する。
Columns
グリッドは、任意の数の列とアイテムをサポートします。行数は、アイテムを列数で割って算出されます。10 個のアイテムと 2 列のグリッドが 5 行あります。11 のアイテムと 2 列のグリッドは 6 行あります。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
たとえば、次の JSON は、1 つのアイテムを含む 2 列のグリッドを作成します。
"grid": {
"title": "A fine collection of items",
"columnCount": 2,
"borderStyle": {
"type": "STROKE",
"cornerRadius": 4
},
"items": [
{
"image": {
"imageUri": "https://www.example.com/image.png",
"cropStyle": {
"type": "SQUARE"
},
"borderStyle": {
"type": "STROKE"
}
},
"title": "An item",
"textAlignment": "CENTER"
}
],
"onClick": {
"openLink": {
"url": "https://www.example.com"
}
}
}
JSON 表現 |
---|
{ "title": string, "items": [ { object ( |
フィールド | |
---|---|
title
|
グリッドのヘッダーに表示されるテキスト。 |
items[]
|
グリッドに表示するアイテム。 |
borderStyle
|
各グリッド アイテムに適用する枠線のスタイル。 |
columnCount
|
グリッドに表示する列の数。このフィールドが指定されていない場合はデフォルト値が使用されます。デフォルト値は、グリッドが表示される場所(ダイアログまたはコンパニオン)によって異なります。 |
onClick
|
このコールバックは個々のグリッド アイテムで再利用されますが、コールバックのパラメータにはアイテムリスト内のアイテムの識別子とインデックスが追加されます。 |
GridItem
グリッド レイアウト内のアイテムを表します。アイテムには、テキスト、画像、またはテキストと画像の両方を含めることができます。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{ "id": string, "image": { object ( |
フィールド | |
---|---|
id
|
このグリッド アイテムのユーザー指定の識別子。この識別子は、親グリッドの
|
image
|
グリッド アイテムに表示される画像。 |
title
|
グリッド アイテムのタイトル。 |
subtitle
|
グリッド アイテムのサブタイトル。 |
layout
|
グリッド アイテムに使用するレイアウト。 |
ImageComponent
画像を表します。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{ "imageUri": string, "altText": string, "cropStyle": { object ( |
フィールド | |
---|---|
imageUri
|
画像の URL。 |
altText
|
画像のユーザー補助ラベル。 |
cropStyle
|
画像に適用する切り抜きスタイル。 |
borderStyle
|
画像に適用する枠線のスタイル。 |
ImageCropStyle
画像に適用される切り抜きスタイルを表します。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
たとえば、アスペクト比 16:9 を適用する方法は次のとおりです。
cropStyle {
"type": "RECTANGLE_CUSTOM",
"aspectRatio": 16/9
}
JSON 表現 |
---|
{
"type": enum ( |
フィールド | |
---|---|
type
|
切り抜きの種類。 |
aspectRatio
|
切り抜きタイプが
たとえば、アスペクト比 16:9 を適用する方法は次のとおりです。
|
ImageCropType
画像に適用される切り抜きスタイルを表します。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
列挙型 | |
---|---|
IMAGE_CROP_TYPE_UNSPECIFIED
|
使用しないでください。指定されていません。 |
SQUARE
|
デフォルト値。正方形の切り抜きを適用します。 |
CIRCLE
|
円形切り抜きを適用します。 |
RECTANGLE_CUSTOM
|
カスタムのアスペクト比で長方形の切り抜きを適用します。カスタム アスペクト比を設定する
aspectRatio 。
|
RECTANGLE_4_3
|
アスペクト比 4:3 の長方形の切り抜きを適用します。 |
BorderStyle
カードまたはウィジェットの枠線のスタイル オプション(枠線の種類や色など)。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{ "type": enum ( |
フィールド | |
---|---|
type
|
枠線の種類。 |
strokeColor
|
タイプが
|
cornerRadius
|
枠線の角の半径です。 |
BorderType
ウィジェットに適用される枠線タイプを表します。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
列挙型 | |
---|---|
BORDER_TYPE_UNSPECIFIED
|
使用しないでください。指定されていません。 |
NO_BORDER
|
デフォルト値。枠線なし。 |
STROKE
|
Outline。 |
GridItemLayout
グリッド アイテムで利用可能なさまざまなレイアウト オプションを表します。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
列挙型 | |
---|---|
GRID_ITEM_LAYOUT_UNSPECIFIED
|
使用しないでください。指定されていません。 |
TEXT_BELOW
|
タイトルとサブタイトルは、グリッド アイテムの画像の下に表示されます。 |
TEXT_ABOVE
|
タイトルとサブタイトルは、グリッド アイテムの画像の上に表示されます。 |
列
「
Columns
ウィジェットは、カードまたはダイアログに最大 2 列を表示します。各列にウィジェットを追加できます。ウィジェットは指定された順序で表示されます。Google Chat アプリの例については、
列内にカードとダイアログを表示する。
各列の高さは列の高さによって決まります。たとえば、最初の列が 2 番目の列よりも高い場合、どちらの列も 1 番目の列の高さになります。各列には異なる数のウィジェットを含めることができるため、行を定義したり、列間でウィジェットを並べたりすることはできません。
列は並べて表示されます。各列の幅は、
HorizontalSizeStyle
表示されます。ユーザーの画面幅が狭すぎる場合、2 列目は 1 列目より下の列で折り返します。
- ウェブでは、画面幅が 480 ピクセル以下の場合、2 列目が折り返します。
- iOS デバイスでは、画面幅が 300 pt 以下の場合、2 列目が折り返します。
- Android デバイスでは、画面の幅が 320 dp 以下の場合、2 番目の列が折り返します。
3 つ以上の列を含める、または行を使用する場合は、
追加します。
Grid
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
JSON 表現 |
---|
{
"columnItems": [
{
object ( |
フィールド | |
---|---|
columnItems[]
|
列の配列。カードまたはダイアログには最大 2 列を含めることができます。 |
Column
列。
JSON 表現 |
---|
{ "horizontalSizeStyle": enum ( |
フィールド | |
---|---|
horizontalSizeStyle
|
カードの幅を列で埋める方法を指定します。 |
horizontalAlignment
|
ウィジェットの配置を、左、右、中央のいずれにするかを指定します。 |
verticalAlignment
|
ウィジェットを列の上部、下部、中央のどちらに揃えるかを指定します。 |
widgets[]
|
列に含まれるウィジェットの配列。ウィジェットは指定された順序で表示されます。 |
HorizontalSizeStyle
カードの幅を列で埋める方法を指定します。各列の幅は、
HorizontalSizeStyle
列内のウィジェットの幅などです
列挙型 | |
---|---|
HORIZONTAL_SIZE_STYLE_UNSPECIFIED
|
使用しないでください。指定されていません。 |
FILL_AVAILABLE_SPACE
|
デフォルト値。列は利用可能なスペース全体に表示されます(最大でカードの幅の 70% まで)。両方の列が
FILL_AVAILABLE_SPACE : 各列がスペースの 50% を占めます。
|
FILL_MINIMUM_SPACE
|
列を埋めるスペースは可能な限り最小限で、カードの幅の 30% を超えないようにします。 |
HorizontalAlignment
ウィジェットの配置を、左、右、中央のいずれにするかを指定します。
Google Chat アプリで利用でき、Google Workspace アドオンでは利用できません。
列挙型 | |
---|---|
HORIZONTAL_ALIGNMENT_UNSPECIFIED
|
使用しないでください。指定されていません。 |
START
|
デフォルト値。ウィジェットを列の開始位置に揃えます。左から右にレイアウトする場合、左揃えになります。右から左に読むレイアウトの場合は、右に揃えます。 |
CENTER
|
ウィジェットを列の中央に揃えます。 |
END
|
ウィジェットを列の最終位置に揃えます。左から右のレイアウトの場合は、ウィジェットを右に揃えます。右から左のレイアウトの場合は、ウィジェットを左に揃えます。 |
VerticalAlignment
ウィジェットを列の上部、下部、中央のどちらに揃えるかを指定します。
列挙型 | |
---|---|
VERTICAL_ALIGNMENT_UNSPECIFIED
|
使用しないでください。指定されていません。 |
CENTER
|
デフォルト値。ウィジェットを列の中央に揃えます。 |
TOP
|
ウィジェットを列の上部に配置します。 |
BOTTOM
|
ウィジェットを列の下部に揃えます。 |
ウィジェット
列に含めることができるサポートされているウィジェット。
JSON 表現 |
---|
{ // Union field |
フィールド | |
---|---|
共用体フィールド
|
|
textParagraph
|
|
image
|
|
decoratedText
|
|
buttonList
|
|
textInput
|
|
selectionInput
|
|
dateTimePicker
|
|
chipList
|
<ph type="x-smartling-placeholder">
|
ChipList
<ph type="x-smartling-placeholder">
横方向にレイアウトされたチップのリスト。横方向にスクロールするか、次の行に折り返すことができます。
Google Chat アプリで利用でき、Google Workspace アドオンでは利用できません。
JSON 表現 |
---|
{ "layout": enum ( |
フィールド | |
---|---|
layout
|
指定されたチップリストのレイアウト。 |
chips[]
|
チップの配列。 |
レイアウト
チップリストのレイアウト。
列挙型 | |
---|---|
LAYOUT_UNSPECIFIED
|
使用しないでください。指定されていません。 |
WRAPPED
|
デフォルト値。チップリストは水平方向に十分なスペースがない場合、次の行に折り返します。 |
HORIZONTAL_SCROLLABLE
|
チップが使用可能なスペースに収まらない場合、チップは横方向にスクロールします。 |
チップ
<ph type="x-smartling-placeholder">
ユーザーがクリックできるテキスト、アイコン、テキスト、アイコンチップ。
Google Chat アプリで利用でき、Google Workspace アドオンでは利用できません。
JSON 表現 |
---|
{ "icon": { object ( |
フィールド | |
---|---|
icon
|
アイコン画像。両方が
|
label
|
チップ内に表示されるテキスト。 |
onClick
|
省略可。ハイパーリンクを開く、カスタム関数を実行するなど、ユーザーがチップをクリックしたときに実行するアクション。 |
enabled
|
チップがアクティブ状態にあり、ユーザーの操作に応答するかどうか。デフォルトは
|
disabled
|
チップが非アクティブな状態にあり、ユーザーの操作を無視するかどうか。デフォルトは
|
altText
|
ユーザー補助に使用される代替テキスト。 チップの機能をユーザーに示す説明テキストを設定します。たとえば、チップでハイパーリンクが開く場合は、「新しいブラウザタブを開き、次の場所にある Google Chat デベロッパー向けドキュメントに移動します。 https://developers.google.com/workspace/chat". |
CollapseControl
<ph type="x-smartling-placeholder">
展開と折りたたみのコントロールを表します。
Google Chat アプリで利用でき、Google Workspace アドオンでは利用できません。
JSON 表現 |
---|
{ "horizontalAlignment": enum ( |
フィールド | |
---|---|
horizontalAlignment
|
展開ボタンと折りたたみボタンの水平方向の配置。 |
expandButton
|
省略可。セクションを展開するカスタマイズ可能なボタンを定義します。ExpandButton フィールドと expandButton フィールドの両方を設定する必要があります。1 つのフィールド セットのみが有効になりません。このフィールドが設定されていない場合は、デフォルトのボタンが使用されます。 |
collapseButton
|
省略可。セクションを折りたたむためのカスタマイズ可能なボタンを定義します。ExpandButton フィールドと expandButton フィールドの両方を設定する必要があります。1 つのフィールド セットのみが有効になりません。このフィールドが設定されていない場合は、デフォルトのボタンが使用されます。 |
DividerStyle
カードの分割線のスタイル。現在は、カード セクション間の分割線にのみ使用されます。
Google Chat アプリと Google Workspace アドオンでご利用いただけます。
列挙型 | |
---|---|
DIVIDER_STYLE_UNSPECIFIED
|
使用しないでください。指定されていません。 |
SOLID_DIVIDER
|
デフォルトのオプションです。セクション間は無地の分割線をレンダリングします。 |
NO_DIVIDER
|
設定すると、セクション間に分割線はレンダリングされません。 |
CardAction
カード アクションとは、カードに関連付けられているアクションです。請求書カードには、請求書の削除、請求書のメール送信、ブラウザでの請求書の表示などの操作が含まれている場合があります。
Google Workspace アドオンでは利用でき、Google Chat アプリでは利用できません。
JSON 表現 |
---|
{
"actionLabel": string,
"onClick": {
object ( |
フィールド | |
---|---|
actionLabel
|
操作メニュー項目として表示されるラベル。 |
onClick
|
「
|
DisplayStyle
Google Workspace アドオンでのカードの表示方法を決定します。
Google Workspace アドオンでは利用でき、Google Chat アプリでは利用できません。
列挙型 | |
---|---|
DISPLAY_STYLE_UNSPECIFIED
|
使用しないでください。指定されていません。 |
PEEK
|
カードのヘッダーはサイドバーの下部に表示され、現在のスタックの一番上のカードを覆います。ヘッダーをクリックすると、カードがカードスタックにポップされます。カードにヘッダーがない場合は、代わりに生成されたヘッダーが使用されます。 |
REPLACE
|
デフォルト値。カードスタックの一番上のカードのビューが置き換えられてカードが表示されます。 |