このガイドでは、発生する可能性のあるカード関連の一般的なエラーと、その解決方法について説明します。
カード作成ツールを使用して、Chat アプリのメッセージ インターフェースとユーザー インターフェースを設計してプレビューできます。
カードビルダーを開くカードエラーの表示
カードエラーは次のような形で発生します。
- カードの一部（ウィジェットやコンポーネントなど）が表示されない、または想定外の表示になる。
- カード全体が表示されない。
- ダイアログが閉じる、開かない、読み込まれない。
このような動作が発生した場合は、アプリのカードにエラーがあることを意味します。
参照: エラーのないカード メッセージとダイアログ
誤ったカードの例を確認する前に、まず、この正常なカードのメッセージとダイアログについて考えてみましょう。各エラーの例とその修正方法を示すため、このカードの JSON を変更してエラーを導入しています。
エラーのないカード メッセージ
以下に、ヘッダー、セクション、ウィジェット（装飾テキストやボタンなど）を使用して連絡先情報を詳細に示す、エラーのないカード メッセージを示します。
エラーのないダイアログ
以下は、ユーザーから情報を収集して連絡先を作成する、エラーのない動作するダイアログです。フッターと、テキスト入力、スイッチ、ボタンなどの編集可能なウィジェットを備えています。
エラー: カードの一部が表示されない
カードはレンダリングされるものの、表示されるカードの一部が表示されないことがあります。考えられる原因は次のとおりです。
- 必須の JSON フィールドがありません。
- JSON フィールドのスペルが間違っているか、大文字と小文字が正しくありません。
原因: 必須の JSON フィールドがない
このエラーの例では、必須の JSON フィールド title がありません。その結果、カードはレンダリングされますが、表示される予定のカード部分が表示されません。必須フィールドを省略した場合、カードのレンダリング方法を予測することは困難です。
このエラーを修正するには、必要な JSON フィールド（この例では title）を追加します。
JSON フィールドが必須かどうかについては、Cards v2 リファレンス ドキュメントをご覧ください。この例では、CardHeader の title フィールドの説明を参照してください。
次に 2 つの例を示します。
例 1: subtitle を指定して必要な title を省略すると、ヘッダー全体が空白になります。
title がないため、このカードのヘッダーは表示されません。誤ったカードの JSON スニペットを表示する
エラー: header に必須項目 title がありません。
. . . "header": { "subtitle": "Software Engineer" } . . .
正しいカードの JSON スニペットを表示する
修正: 必須フィールド title は header 仕様の一部です。
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer" } . . .
例 2: subtitle、imageUrl、imageType、imageAltText を指定して、必須の title を省略すると、画像は想定どおりにレンダリングされますが、字幕はレンダリングされません。
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 をカードのリファレンス ドキュメントと照らし合わせてください。
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 をカードのリファレンス ドキュメントと照らし合わせてください。特に、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 オブジェクトに、スペルが正しい「parameters」配列を含む 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 アプリのデバッグをご覧ください。