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

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

カードの作成の詳細については、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 つの画像を示しています。そのうちの 1 つの画像は切り抜かれています。

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 電話
RESTAURANT_ICON SHOPPING_CART
STAR STORE
チケット TRAIN
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> タグに似ています。

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

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

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

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

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

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

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

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

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

トラブルシューティング

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

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