このページでは、カードまたはダイアログ メッセージにテキストと画像を追加する方法と、メッセージ内でのテキストと画像の表示方法を変更する方法について説明します。
カードビルダーを使用して、Chat 用アプリ用の JSON カード メッセージを設計し、プレビューします。
カードビルダーを開きます前提条件
画像を追加する
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 ウィジェットは、組み込みアイコンまたはカスタム アイコンのいずれかを表します。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 のエラーのトラブルシューティングと修正をご覧ください。