Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

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

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

カードの作成の詳細については、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 ウィジェットは、スタイル設定が制限された画像です。ImageComponent ウィジェットを使用すると、画像に cropStyle と borderStyle を適用できます。

次の例は、グリッド内の 2 つの画像を示しています。一方の画像は切り抜かれています。

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

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

次の例では、5 つの画像がグリッドに表示され、各画像に異なる cropStyle が適用されています。

追加

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

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

次のカードは、組み込みアイコンを含む Icon コンポーネントで構成されています。

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

	AIRPLANE		BOOKMARK
	BUS		CAR
	CLOCK		CONFIRMATION_NUMBER_ICON
	説明		DOLLAR
	メールアドレス		EVENT_SEAT
	FLIGHT_ARRIVAL		FLIGHT_DEPARTURE
	HOTEL		HOTEL_ROOM_TYPE
	招待		MAP_PIN
	メンバーシップ		MULTIPLE_PEOPLE
	PERSON		PHONE
	RESTAURANT_ICON		SHOPPING_CART
	STAR		STORE
	チケット		トレーニング
	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 ウィジェットで構成されており、シンプルな HTML 形式の 2 つの段落を表示するために使用されます。

折りたたみ可能なテキスト段落を追加する

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

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

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

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

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

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

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

トラブルシューティング

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

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

カードにテキストや画像を追加する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。