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

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

カード作成ツールを使用して、Chat アプリのメッセージングとユーザー インターフェースを設計してプレビューします。

カード作成ツールを開く

カードのエラーの表示方法

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

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

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

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

エラーのあるカードの例を確認する前に、正常に動作するカード メッセージとダイアログについて説明します。各エラーの例とその修正方法を示すために、このカードの JSON にエラーを挿入して変更します。

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

ヘッダー、セクション、装飾テキストやボタンなどのウィジェットを備えた、連絡先情報の詳細を示す、正常に動作するエラーのないカード メッセージを次に示します。

エラーのないダイアログ

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

エラー: カードの一部が表示されない

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

  • 必須の JSON フィールドがありません。
  • JSON フィールドのスペルが間違っているか、大文字と小文字が正しくありません。

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

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

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

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

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

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

必須フィールドのタイトルがないため、このカードのヘッダーが表示されません。
図 1: 必須フィールド title がないため、このカードのヘッダーが表示されません。

エラーのあるカードの JSON スニペットを表示

エラー: 必須フィールド title が header にありません。

    . . .
    "header": {

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

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

修正済み: 必須フィールド title が header 仕様の一部になっています。

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

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

必須フィールドのタイトルがないため、このカードのヘッダーが表示されません。
図 2: 必須フィールド title がないため、このカードのヘッダーにサブタイトルが表示されませんが、画像は想定どおりにレンダリングされます。

エラーのあるカードの JSON スニペットを表示

エラー: 必須フィールド title が header にありません。

    . . .
    "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 を確認してください。

必須フィールドのタイトルがないため、このカードのヘッダーが表示されません。
図 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 を確認してください。特に、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 設定が正しくない

dialogs で CardFixedFooter ウィジェット を使用する場合、ボタンの onClick 設定を正しく指定しないか省略すると、ダイアログが閉じる、読み込まれない、開かないことがあります。

このエラーを修正するには、各ボタンに正しく指定された onClick 設定が含まれていることを確認してください。

エラーのあるカードの JSON スニペットを表示

エラー: primaryButton オブジェクトに、スペルが間違っている `parameters` 配列を含む onClick フィールドがあるため、ダイアログを読み込むか開くことができません。

    . . .
    "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 がない

ダイアログに TextInput ウィジェット が含まれていて、name フィールドが除外されている場合、ダイアログは想定どおりに動作しません。閉じる、開くが読み込まれない、開かないことがあります。

このエラーを修正するには、各 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 メソッドなどの非同期アーキテクチャを使用していることが原因である可能性があります。

ダイアログを開く、送信する、キャンセルするには、 Chat アプリから DialogEventType を使用して同期レスポンスが必要です。 そのため、非同期アーキテクチャで構築されたアプリではダイアログはサポートされていません。

回避策として、ダイアログの代わりに カード メッセージを使用することを検討してください。

カードとダイアログに関するその他のエラー

このページで説明した修正を行っても、アプリで発生するカード関連のエラーが解決しない場合は、アプリのエラーログをクエリします。ログをクエリすると、カードの JSON またはアプリのコードのエラーを見つけることができます。ログには、エラーを修正するのに役立つ説明的なエラー メッセージが含まれています。

Google Chat アプリのエラーの修正については、Google Chat アプリのトラブルシューティングと修正とChat アプリのデバッグをご覧ください。