カードまたはダイアログにテキストと画像を追加する

このページでは、カードやダイアログ メッセージにテキストや画像を追加する方法について説明します。 メッセージ内でのテキストや画像の表示方法を変更できます。

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

カードビルダーを開く

前提条件

インタラクティブ機能を有効にする Google Chat アプリ。新しい 次のいずれかのクイックスタートを完了してください。 使用するアプリ アーキテクチャ:

画像を追加する

「 Image ウィジェット は、HTTPS URL でホストされる PNG または JPG 画像を表示します。 表示画像の幅が、表示されたカードの幅全体に表示される。 画像のアスペクト比が維持されるように高さが調整されます。Image ウィジェット サポート onclick 件のアクション ユーザーが画像をクリックしたときに発生するイベントです。onclick アクションの例:

  • ハイパーリンクを開く OpenLink, Google Chat デベロッパー向けドキュメントへのハイパーリンクや https://developers.google.com/chat。
  • アプリを実行する アクション API の呼び出しなど、カスタム関数を実行する API です。

Image ウィジェットには次の制限があります。

  • PNG と JPG の画像のみがサポートされます。
  • ホスト URL は HTTPS にする必要があります。
  • カードのパフォーマンスを向上させるには、画像サイズを 2 MB 以下にすることをおすすめします。

以下は、Image ウィジェットで構成されるカードです。表示される Google Chat デベロッパー向けドキュメントのランディング ページの画像。ユーザーが Google Chat デベロッパー向けドキュメントが新しいタブで開きます。

画像コンポーネントを追加する

Image ウィジェットは、スタイル設定が制限された画像です。「 imageCompent ウィジェット を使用すると、画像に cropStyle と borderStyle を適用できます。

次の例は、グリッド内に 2 つの画像を示しています。画像の 1 つは 切り抜き:

画像を切り抜く

画像の形状を調整するには、 cropStyle。 画像に適用する図形は次のとおりです。

  • 正方形の切り抜きを適用するには、SQUARE を使用します。
  • 円形切り抜きを適用するには、CIRCLE を使用します。
  • RECTANGLE_CUSTOM を使用して、カスタム アスペクトを持つ長方形の切り抜きを適用する できます。たとえば、RECTANGLE_4_3 を使用すると、長方形の切り抜きを適用できます。 アスペクト比 4:3 の動画を

次の例は、異なる cropStyle を持つグリッド内の 5 つの画像を示しています。 適用しています。

追加

「 Icon ウィジェット または 組み込み アイコンまたは カスタム アイコンをクリックします。Icon は次の場所で使用できます。 カード メッセージ および ダイアログ 次のように変更します。

  • スタンドアロンのアイコンを表示します。
  • 関連するテキストの前にアイコンを表示する DecoratedText ウィジェット。
  • アイコンをインタラクティブ ボタンとして表示し、 ButtonList ウィジェット。

以下は、アイコンが組み込まれた Icon コンポーネントで構成されるカードです。

次の表に、カード メッセージで使用できる組み込みアイコンを示します。

航空機 ブックマーク
バス 車
時計 CONFIRMATION_NUMBER_ICON
DESCRIPTION ドル
メールアドレス EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
ホテル HOTEL_ROOM_TYPE
INVITE MAP_PIN
メンバーシップ MULTIPLE_PEOPLE
人物 電話
RESTAURANT_ICON SHOPPING_CART
STAR ストア
チケット 電車
VIDEO_CAMERA VIDEO_PLAY

書式付きテキストの段落を追加する

「 TextParagraph ウィジェット 任意の HTML 形式でテキストの段落を表示します。設定時に 対応する HTML タグのみを含めます。 サポートされている HTML タグの詳細については、 カードのテキストの書式設定。

たとえば、段落テキストでは次の書式を使用できます。

  • HTML <b>、<u>、<i> を使用して太字、下線、斜体のテキストを表示する できます。
  • HTML <a href="https://www.google.com">hyperlinks</a> を使用しているウェブサイトへのリンク。
  • HTML の <font color="#ea9999">font tags</font> で色を追加します。

各 TextParagraph ウィジェットは新しい段落としてレンダリングされます。 HTML の <p> タグと同様です。

以下は、2 つの TextParagraph ウィジェットで構成されるカードです。これを使用して以下を行います。 2 つの段落をシンプルな HTML 形式で表示します。

装飾的な要素を含むテキストを表示する

「 DecoratedText ウィジェット は、オプションのレイアウトとケーパビリティとともにテキストを表示します。例:

  • startIcon を使用してテキストの前に icon を表示します。
  • topLabel を使用すると、テキストの前にタイトルを表示できます。
  • button でクリック可能なボタン、または switchControl で切り替え可能な切り替えボタンを追加します。

DecoratedText ウィジェットは、 インタラクティブに操作できます。このウィジェットは、 連絡先カード、注文ステータスの更新情報、作業チケット通知などがあります。

DecoratedText ウィジェットでは、単純な HTML 形式のテキストがサポートされています。設定時に 対応する HTML タグのみを含めます。対象 サポートされる HTML タグの詳細については、 カードのテキストの書式設定。

以下は、表示に使用する DecoratedText ウィジェットで構成されるカードです。 連絡先情報（メールアドレス、オンライン ステータス、電話番号、 ウェブサイト:

トラブルシューティング

Google Chat アプリまたは card がエラーを返した場合、 Chat のインターフェースに「エラーが発生しました」というメッセージが表示されている。 または「リクエストを処理できません」が表示されます。場合によっては、Chat の UI が エラー メッセージは表示されませんが、Chat 用アプリまたは 予期しない結果が生じた場合たとえば、カード メッセージに 表示されます。

Chat UI にエラー メッセージが表示されない場合がありますが、 エラーの修正に役立つ、わかりやすいエラー メッセージとログデータ Chat 用アプリのエラーロギングが有効になっている場合。表示のヘルプについては、 エラーの修正について詳しくは、このモジュールの Google Chat のエラーのトラブルシューティングと修正