カードにテキストや画像を追加する

このページでは、カードにテキストや画像を追加して書式を設定する方法について説明します。

カードの作成について詳しくは、以下をご覧ください。 Google Chat アプリのカードを作成する


カードビルダーを使用して、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 ウィジェット を使用すると、画像に cropStyleborderStyle を適用できます。

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

画像コンポーネントのシェイプを調整するには、 cropStyle。 画像に適用する図形は次のとおりです。

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

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

追加

Icon ウィジェット または 組み込み アイコンまたは カスタム アイコンをクリックします。カードにアイコンを追加すると、次のことができます。

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

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

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

航空機 ブックマーク
バス
時計 CONFIRMATION_NUMBER_ICON
DESCRIPTION ドル
メールアドレス EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
ホテル HOTEL_ROOM_TYPE
招待 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 のエラーのトラブルシューティングと修正