このガイドでは、発生する可能性のあるカード関連の一般的なエラーとその解決方法について説明します。
カードビルダーでカードをデザインしてプレビューする。
カードビルダーを開くカードエラーの表示について
カードエラーは、次のような形で現れます。
- カードの一部(ウィジェットやコンポーネントなど)が表示されない、または想定外の方法でレンダリングされる。
- カード全体は表示されません。
- ダイアログが閉じる、開かない、読み込まれない。
このような動作が発生した場合は、アプリのカードにエラーがあります。
参考: エラーのない動作しているカード メッセージとダイアログ
誤ったカードの例を調べる前に、まず、以下の有効なカード メッセージとダイアログについて検討してください。各エラーの例とその修正を説明するために、このカードの JSON にエラーを導入して変更しています。
エラーのないカード メッセージ
以下に、連絡先情報の詳細を示すエラーのない有効なカード メッセージを示します。ヘッダー、セクション、ウィジェット(装飾されたテキストやボタンなど)を特長としています。
エラーのないダイアログ
次に示すのは、ユーザーから情報を収集して連絡先を作成する、エラーのない動作中のダイアログです。フッター、テキスト入力、スイッチ、ボタンなどの編集可能なウィジェットを備えています。
エラー: カードの一部が表示されません
カードは表示されても、表示されるはずのカードの一部が表示されないことがあります。考えられる原因は次のとおりです。
- 必須の JSON フィールドがありません。
- JSON フィールドにスペルミス、または大文字表記が不適切である。
原因: 必須の JSON フィールドがない
このエラーの例では、必須の JSON フィールド title
がありません。その結果、カードはレンダリングされますが、表示されるはずのカードの一部は表示されません。必須フィールドを省略した場合、カードがどのようにレンダリングされるかを予測することは困難です。
このエラーを修正するには、必須の JSON フィールド(この例では title
)を追加します。
JSON フィールドが必須かどうかについては、Cards v2 のリファレンス ドキュメントをご覧ください。この例では、CardHeader
の title
フィールドの説明をご覧ください。
次に 2 つの例を示します。
例 1: subtitle
を指定して、必要な title
を省略すると、ヘッダー全体が空白になります。
![必須項目「title」がないため、このカードのヘッダーは表示されません。](https://developers-dot-devsite-v2-prod.appspot.com/static/workspace/chat/images/troubleshoot/troubleshoot-cards-missing-required-entity-header-title-1.png?authuser=7&hl=ja)
title
がないため、このカードのヘッダーは表示されません。誤ったカードの JSON スニペットを表示する
エラー: header
に必須項目 title
がありません。
. . . "header": { "subtitle": "Software Engineer" } . . .
正しいカードの JSON スニペットを表示する
修正済み: 必須フィールド title
が header
仕様に含まれています。
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer" } . . .
例 2: subtitle
、imageUrl
、imageType
、imageAltText
を指定して、必須の title
を省略すると、画像は期待どおりにレンダリングされますが、サブタイトルはレンダリングされません。
![必須項目「title」がないため、このカードのヘッダーは表示されません。](https://developers-dot-devsite-v2-prod.appspot.com/static/workspace/chat/images/troubleshoot/troubleshoot-cards-missing-required-entity-header-title-2.png?authuser=7&hl=ja)
title
がないため、このカードのヘッダーにはサブタイトルが表示されませんが、画像は想定どおりに表示されます。誤ったカードの JSON スニペットを表示する
エラー: header
に必須項目 title
がありません。
. . . "header": { "subtitle": "Software Engineer", "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
正しいカードの JSON スニペットを表示する
修正済み: 必須フィールド title
が header
仕様に含まれています。
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer", "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
原因: JSON のスペルが間違っているか大文字が使われている
この例のエラーでは、カード JSON にすべての必須フィールドが含まれていますが、1 つのフィールド imageUrl
が誤って imageURL
(大文字の R
、大文字 L
)と大文字になっているため、エラーになります(ポイントしている画像がレンダリングされません)。
このエラーやその他のエラーを解決するには、正しい JSON 形式を使用してください。今回のケースでは imageUrl
が正解です。判断に迷う場合は、カード JSON を card リファレンス ドキュメントと照らし合わせて確認してください。
![必須項目「title」がないため、このカードのヘッダーは表示されません。](https://developers-dot-devsite-v2-prod.appspot.com/static/workspace/chat/images/troubleshoot/troubleshoot-cards-imageURL-instead-of-imageUrl.png?authuser=7&hl=ja)
title
がないため、このカードのヘッダーにはサブタイトルが表示されませんが、画像は想定どおりに表示されます。誤ったカードの JSON スニペットを表示する
エラー: フィールド imageURL
の大文字が正しくありません。imageUrl
にします。
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer", "imageURL": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
正しいカードの JSON スニペットを表示する
修正: フィールド imageUrl
が正しく大文字表記されるようになりました。
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer", "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
エラー: カード全体が表示されません
カード自体が表示されないことがあります。次のような原因が考えられます。
ButtonList
ウィジェットが正しく指定されていない。CardFixedFooter
ウィジェットに、誤って指定されたボタンがあります。
原因: buttonList
または cardFixedFooter
が正しく指定されていない
カード メッセージまたはダイアログに、指定された ButtonList
ウィジェットや、ボタンが正しく指定されていない CardFixedFooter
ウィジェットが含まれている場合、カード全体が表示されず、その場所には何も表示されません。指定が間違っている場合は、フィールドの欠落、フィールドのスペルミスや大文字表記、JSON の構造に誤りがある(カンマ、引用符、中かっこの欠落など)などがあります。
このエラーを修正するには、カードの JSON を card リファレンス ドキュメントと照らし合わせて確認します。特に、ButtonList
ウィジェットを ButtonList
ウィジェット ガイドと比較してください。
例: ButtonList
ウィジェット ガイドで、最初のボタンで不完全な onClick
アクションを渡すと、カード全体がレンダリングされなくなります。
誤ったカードの JSON スニペットを表示する
エラー: onClick
オブジェクトにフィールドが指定されていないため、カード全体は表示されません。
. . . { "buttonList": { "buttons": [ { "text": "Share", "onClick": { } } }, { "text": "Edit", "onClick": { "action": { "function": "goToView", "parameters": [ { "key": "viewType", "value": "EDIT", } ], } } }, ], }, } . . .
正しいカードの JSON スニペットを表示する
修正: onClick
オブジェクトに openLink
フィールドが追加されたため、カードが想定どおりに表示されるようになりました。
. . . { "buttonList": { "buttons": [ { "text": "Share", "onClick": { "openLink": { "url": "https://example.com/share", } } }, { "text": "Edit", "onClick": { "action": { "function": "goToView", "parameters": [ { "key": "viewType", "value": "EDIT", } ], } } }, ], }, } . . .
エラー: ダイアログが閉じる、停止する、開かない
ダイアログが予期せず閉じたり、読み込みに失敗したり、ダイアログが開かない場合は、カード インターフェースに問題がある可能性があります。
最も一般的な理由は次のとおりです。
CardFixedFooter
ウィジェットにはprimaryButton
がありません。CardFixedFooter
ウィジェットのボタンにonClick
アクションがないか、onClick
アクションが正しく指定されていません。TextInput
ウィジェットにname
フィールドがありません。
原因: CardFixedFooter
に primaryButton
がない
CardFixedFooter
ウィジェットを使用したダイアログでは、テキストと色の両方を含む primaryButton
を指定する必要があります。primaryButton
を省略したり、誤って設定したりすると、ダイアログ全体が表示されなくなります。
このエラーを修正するには、CardFixedFooter
ウィジェットに primaryButton
が正しく指定されていることを確認してください。
誤ったカードの JSON スニペットを表示する
エラー: fixedFooter
オブジェクトに primaryButton
フィールドが指定されていないため、ダイアログの読み込みや開くことができません。
. . . "fixedFooter": { "onClick": { . . . }, "secondaryButton": { . . . } } } . . .
正しいカードの JSON スニペットを表示する
修正: fixedFooter
に primaryButton
フィールドが指定されたため、ダイアログが想定どおりに動作するようになりました。
. . . "fixedFooter": { "primaryButton": { "text": "Submit", "color": { "red": 0, "blue": 1, "green": 0 }, "onClick": { . . . }, "secondaryButton": { . . . } } } . . .
原因: FixedFooter
の onClick
設定が正しくない
CardFixedFooter
ウィジェットを使用したダイアログで、いずれかのボタンに onClick
設定を誤って指定した、または設定しなかったために、ダイアログが閉じられる、読み込めない、開かない。
このエラーを修正するには、各ボタンに onClick
が正しく指定されていることを確認してください。
誤ったカードの JSON スニペットを表示する
エラー: primaryButton
オブジェクトの onClick
フィールドに「parameters」配列のスペルミスがあるため、ダイアログを読み込めない、または開くことができません。
. . . "fixedFooter": { "primaryButton": { "text": "Submit", "color": { "red": 0, "blue": 1, "green": 0 }, "onClick": { "action": { "function": "setLanguageType", "parrammetters": [ { "key": "languageType", "value": "C++" } ] } } }, "secondaryButton": { "text": "Cancel", "onClick": { "action": { "function": "reset" } } } } . . .
正しいカードの JSON スニペットを表示する
修正: primaryButton
オブジェクトの onClick
フィールドに正しいスペルの「パラメータ」配列が含まれるため、ダイアログが想定どおりに機能します。
. . . "fixedFooter": { "primaryButton": { "text": "Submit", "color": { "red": 0, "blue": 1, "green": 0 }, "onClick": { "action": { "function": "setLanguageType", "parameters": [ { "key": "languageType", "value": "C++" } ] } } }, "secondaryButton": { "text": "Cancel", "onClick": { "action": { "function": "reset" } } } } . . .
原因: TextInput
に name
がない
ダイアログに、name
フィールドを除外する TextInput
ウィジェットが含まれている場合、ダイアログは期待どおりに動作しません。デバイスを閉じるか、開いているが、読み込まれないか、開かないことがあります。
このエラーを修正するには、各 TextInput
ウィジェットに適切な name
フィールドが含まれていることを確認してください。カードの各 name
フィールドが一意であることを確認してください。
誤ったカードの JSON スニペットを表示する
エラー: textInput
オブジェクトに name
フィールドが指定されていないため、ダイアログが閉じるか、読み込めないか、開けません。
. . . { "textInput": { "label": "Name", "type": "SINGLE_LINE", } } . . .
正しいカードの JSON スニペットを表示する
修正: textInput
に name
フィールドが指定されたため、ダイアログが想定どおりに動作するようになりました。
. . . { "textInput": { "label": "Name", "type": "SINGLE_LINE", "name": "contactName" } } . . .
非同期アプリ アーキテクチャで、ダイアログを開く、送信、キャンセルするアクションが失敗する
ダイアログの操作中に Chat アプリがエラー メッセージ Could not load dialog. Invalid response returned by bot.
を返す場合は、アプリが Cloud Pub/Sub や Create Message API メソッドなどの非同期アーキテクチャを使用している可能性があります。
ダイアログを開く、送信、キャンセルするには、DialogEventType
を含む Chat アプリからの同期レスポンスが必要です。したがって、非同期アーキテクチャで構築されたアプリではダイアログはサポートされていません。
回避策として、ダイアログではなくカード メッセージの使用を検討してください。
カードとダイアログに関するその他のエラー
このページで説明する修正で、アプリで発生したカード関連のエラーが解決しない場合は、アプリのエラーログをクエリしてください。ログをクエリすると、カードの JSON やアプリコードのエラーを見つけるのに便利です。また、ログには、修正に役立つわかりやすいエラー メッセージが含まれます。
関連トピック
Google Chat アプリのエラーを修正する方法については、Google Chat アプリのトラブルシューティングと修正と Chat アプリをデバッグするをご覧ください。