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

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

カードビルダーを使用して、Chat 用アプリ用の JSON カード メッセージを設計し、プレビューします。

カードビルダーを開く

カードエラーの表示

カードエラーはいくつかの方法で発生します。

  • ウィジェットやコンポーネントなど、カードの一部が意図せず表示されないか、レンダリングされます。
  • カード全体は表示されません。
  • ダイアログが閉じる、開かない、読み込まれない。

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

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

誤ったカードの例を調べる前に、まず、正常に機能するカード メッセージとダイアログについて考えてみましょう。各エラーの例とその修正を説明するために、このカードの JSON にエラーを導入して変更しています。

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

以下は、正常に機能するエラーのないカード メッセージです。このメッセージには、リクエストした連絡先情報が詳しく記載されています。 には、ヘッダー、セクション、ウィジェット（装飾テキストやボタンなど）が含まれます。

エラーのないダイアログ

このダイアログは正しく機能し、エラーのない テキスト入力などの編集可能なウィジェット、フッター、編集可能なウィジェットを表示 およびスイッチ、ボタン:

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

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

  • 必須の JSON フィールドが指定されていません。
  • JSON フィールドのスペルが正しくないか、大文字が誤って使用されています。

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

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

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

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

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

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

<ph type="x-smartling-placeholder">
</ph> 必須項目（タイトル）が指定されていないため、このカードのヘッダーは表示されません。
図 1: 必須項目 title がないため、このカードのヘッダーが表示されません。

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

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

    . . .
    "header": {

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

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

修正済み: 必須フィールド title は header 仕様の一部です。

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

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

<ph type="x-smartling-placeholder">
</ph> 必須項目（タイトル）が指定されていないため、このカードのヘッダーは表示されません。
図 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 の参照ドキュメントと照らし合わせて確認します。

<ph type="x-smartling-placeholder">
</ph> 必須項目（タイトル）が指定されていないため、このカードのヘッダーは表示されません。
図 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 オブジェクトに、正しいスペルの「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 メソッドを使用します。

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

回避策として、 カード メッセージが表示されます。

カードとダイアログのその他のエラー

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

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