カードとダイアログのトラブルシューティングと修正

このガイドでは、発生する可能性のあるカード関連の一般的なエラーとその解決方法について説明します。

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

カードビルダーを開く

カードエラーの表示について

カードエラーは、次のような形で現れます。

  • カードの一部（ウィジェットやコンポーネントなど）が表示されない、または想定外の方法でレンダリングされる。
  • カード全体は表示されません。
  • ダイアログが閉じる、開かない、読み込まれない。

このような動作が発生した場合は、アプリのカードにエラーがあります。

参考: エラーのない動作しているカード メッセージとダイアログ

誤ったカードの例を調べる前に、まず、以下の有効なカード メッセージとダイアログについて検討してください。各エラーの例とその修正を説明するために、このカードの JSON にエラーを導入して変更しています。

エラーのないカード メッセージ

以下に、連絡先情報の詳細を示すエラーのない有効なカード メッセージを示します。ヘッダー、セクション、ウィジェット（装飾されたテキストやボタンなど）を特長としています。

エラーのないダイアログ

次に示すのは、ユーザーから情報を収集して連絡先を作成する、エラーのない動作中のダイアログです。フッター、テキスト入力、スイッチ、ボタンなどの編集可能なウィジェットを備えています。

エラー: カードの一部が表示されません

カードは表示されても、表示されるはずのカードの一部が表示されないことがあります。考えられる原因は次のとおりです。

  • 必須の JSON フィールドがありません。
  • JSON フィールドにスペルミス、または大文字表記が不適切である。

原因: 必須の JSON フィールドがない

このエラーの例では、必須の JSON フィールド title がありません。その結果、カードはレンダリングされますが、表示されるはずのカードの一部は表示されません。必須フィールドを省略した場合、カードがどのようにレンダリングされるかを予測することは困難です。

このエラーを修正するには、必須の JSON フィールド（この例では title）を追加します。

JSON フィールドが必須かどうかについては、Cards v2 のリファレンス ドキュメントをご覧ください。この例では、CardHeader の title フィールドの説明をご覧ください。

次に 2 つの例を示します。

例 1: subtitle を指定して、必要な title を省略すると、ヘッダー全体が空白になります。

必須項目「title」がないため、このカードのヘッダーは表示されません。
図 1: 必須フィールド title がないため、このカードのヘッダーは表示されません。

誤ったカードの JSON スニペットを表示する

エラー: header に必須項目 title がありません。

    . . .
    "header": {

            "subtitle": "Software Engineer"
          }
    . . .

正しいカードの JSON スニペットを表示する

修正済み: 必須フィールド title が header 仕様に含まれています。

    . . .
    "header": {
            "title": "Sasha",
            "subtitle": "Software Engineer"
          }
    . . .

例 2: subtitle、imageUrl、imageType、imageAltText を指定して、必須の title を省略すると、画像は期待どおりにレンダリングされますが、サブタイトルはレンダリングされません。

必須項目「title」がないため、このカードのヘッダーは表示されません。
図 2: 必須フィールドの 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」がないため、このカードのヘッダーは表示されません。
図 3: 必須フィールドの 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 ウィジェットが含まれている場合、カード全体が表示されず、その場所には何も表示されません。指定が間違っている場合は、フィールドの欠落、フィールドのスペルミスや大文字表記、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 ウィジェットを使用したダイアログでは、テキストと色の両方を含む 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 アプリをデバッグするをご覧ください。