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

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

このページでは、カードにテキストと画像を追加してフォーマットする方法について説明します。

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

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

カードビルダーを開く

前提条件

インタラクティブ機能が有効になっている Google Chat アプリ。インタラクティブな Chat アプリを作成するには、使用するアプリのアーキテクチャに基づいて、次のいずれかのクイックスタートを完了します。

画像やアイコンを追加する

このセクションでは、画像、画像コンポーネント、アイコンなどのビジュアル要素をカードに追加する方法について説明します。

画像を追加する

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

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

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

PNG 画像と JPG 画像のみがサポートされています。
ホスト URL は HTTPS にする必要があります。
カードのパフォーマンスを確保するため、推奨される画像サイズは最大 2 MB です。

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

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

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

次の例は、グリッドに 2 つの画像を配置し、一方の画像を切り抜いたものです。

画像コンポーネントの形状を調整するには、cropStyle を適用します。画像に適用できるシェイプはいくつかあります。

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

次の例は、グリッドに 5 つの画像があり、各画像に異なる cropStyle が適用されていることを示しています。

追加

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

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

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

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

	AIRPLANE		BOOKMARK
	BUS		CAR
	時計		CONFIRMATION_NUMBER_ICON
	DESCRIPTION		DOLLAR
	メールアドレス		EVENT_SEAT
	FLIGHT_ARRIVAL		FLIGHT_DEPARTURE
	HOTEL		HOTEL_ROOM_TYPE
	招待		MAP_PIN
	メンバーシップ		MULTIPLE_PEOPLE
	PERSON		電話
	RESTAURANT_ICON		SHOPPING_CART
	STAR		ストア
	TICKET		トレイン
	VIDEO_CAMERA		VIDEO_PLAY

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

このセクションでは、カードにテキストを追加して書式設定する方法について説明します。

書式設定されたテキストの段落を追加する

TextParagraph ウィジェットは、HTML 形式で表示するテキストの段落を表示します。これらのウィジェットのテキストコンテンツを設定するときは、対応する HTML タグを追加するだけです。サポートされている HTML タグの詳細については、カードに表示されるテキストをフォーマットするをご覧ください。

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

HTML 、、 タグを使用して、太字、下線、斜体のテキストを表示します。
HTML <a href="https://www.google.com">hyperlinks</a> を使用してウェブサイトにリンクします。
HTML font tags を使用して色を追加します。

各 TextParagraph ウィジェットは新しい段落としてレンダリングされ、HTML  タグに似ていると見なすことができます。

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

折りたたみ可能なテキストパラグラフを追加する

折りたたみ可能なテキストの段落では、ユーザーがオンデマンドで詳細を表示できます。このウィジェットは、長いコンテンツや補足情報を提供する場合に最適です。選択したときに展開して見ることができるので、動的でインタラクティブなユーザーエクスペリエンスになります。

装飾要素付きのテキストを表示する

DecoratedText ウィジェットは、オプションのレイアウトと機能を備えたテキストを表示します。次に例を示します。

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

情報を使いやすくインタラクティブな方法で表示する必要がある場合は、DecoratedText ウィジェットを使用します。このウィジェットは、連絡先カード、注文ステータスの更新、作業チケットの通知などのユースケースに最適です。

DecoratedText ウィジェットは、シンプルなテキストの HTML 形式をサポートしています。これらのウィジェットのテキストコンテンツを設定する際は、対応する HTML タグを追加するだけです。サポートされている HTML タグの詳細については、カードのテキストの書式設定をご覧ください。

以下は、メールアドレス、オンラインステータス、電話番号、ウェブサイトなどの連絡先情報を表示するために使用される DecoratedText ウィジェットからなるカードです。

トラブルシューティング

Google Chat アプリまたはカードからエラーが返されると、Chat インターフェースに「エラーが発生しました」というメッセージが表示されます。または「リクエストを処理できません」というメッセージが表示されます。Chat UI にエラーメッセージが表示されない場合でも、Chat アプリまたはカードで予期しない結果が生成されることがあります（カードメッセージが表示されないなど）。

チャット UI にエラーメッセージが表示されない場合でも、チャットアプリのエラーロギングがオンになっている場合は、エラーの修正に役立つ説明的なエラーメッセージとログデータが利用できます。エラーの表示、デバッグ、修正については、Google Chat エラーのトラブルシューティングと修正をご覧ください。