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

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

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

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

カード作成ツールを開く

前提条件

インタラクション イベントを受信して応答するように構成された Google Chat アプリ。インタラクティブな Chat アプリを作成するには、使用するアプリのアーキテクチャに基づいて、次のいずれかのクイックスタートを完了します。

画像またはアイコンを追加する

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

画像を追加する

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

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

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

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

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

Image ウィジェットは、スタイリングが制限された画像です。An 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
DESCRIPTION DOLLAR
EMAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
INVITE MAP_PIN
MEMBERSHIP MULTIPLE_PEOPLE
PERSON PHONE
RESTAURANT_ICON SHOPPING_CART
STAR STORE
TICKET 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> タグと同様に考えることができます。

以下は、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 のエラーのトラブルシューティングと修正をご覧ください。