このページでは、カードまたはダイアログ メッセージにテキストと画像を追加する方法と、メッセージ内のテキストと画像の表示方法を変更する方法について説明します。
カードビルダーでカードをデザインしてプレビューする。
カードビルダーを開く前提条件
画像を追加する
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 ウィジェットは、組み込みアイコンまたはカスタム アイコンのいずれかを表します。カード メッセージとダイアログでは、次の方法で Icon を使用できます。
- スタンドアロンのアイコンを表示する。
DecoratedTextウィジェットの一部として、関連するテキストの前にアイコンを表示します。- アイコンを、
ButtonListウィジェットの一部としてインタラクティブなボタンとして表示します。
アイコンが組み込まれた Icon コンポーネントで構成されるカードを次に示します。
次の表に、カード メッセージに使用できる組み込みアイコンを示します。
| 飛行機 | BOOKMARK | ||
| BUS | 車 | ||
| 時計 | CONFIRMATION_NUMBER_ICON | ||
| DESCRIPTION | ドル | ||
| メールアドレス | EVENT_SEAT | ||
| FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
| ホテル | HOTEL_ROOM_TYPE | ||
| 招待 | MAP_PIN | ||
| メンバーシップ | MULTIPLE_PEOPLE | ||
| 人物 | 電話 | ||
| RESTAURANT_ICON | SHOPPING_CART | ||
| スターを付ける | 店舗 | ||
| チケット | 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 のエラーのトラブルシューティングと修正をご覧ください。