このページは Cloud Translation API によって翻訳されました。

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

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

カードの作成について詳しくは、以下をご覧ください。 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 ウィジェットを使用すると、画像に cropStyle と borderStyle を適用できます。

次の例は、グリッド内に 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 、、 を使用して太字、下線、斜体のテキストを表示するできます。
HTML <a href="https://www.google.com">hyperlinks</a> を使用しているウェブサイトへのリンク。
HTML の font tags で色を追加します。

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

以下は、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 のエラーのトラブルシューティングと修正