このページでは、カードやダイアログ メッセージにテキストや画像を追加する方法について説明します。 メッセージ内でのテキストや画像の表示方法を変更できます。
カードビルダーを使用して、Chat 用アプリ用の JSON カード メッセージを設計し、プレビューします。
カードビルダーを開く前提条件
画像を追加する
「
Image ウィジェット
は、HTTPS URL でホストされる PNG または JPG 画像を表示します。
表示画像の幅が、表示されたカードの幅全体に表示される。
画像のアスペクト比が維持されるように高さが調整されます。Image ウィジェット
サポート
onclick 件のアクション
ユーザーが画像をクリックしたときに発生するイベントです。onclick アクションの例:
- ハイパーリンクを開く
OpenLinkGoogle Chat デベロッパー向けドキュメントへのハイパーリンクやhttps://developers.google.com/chat。 - アプリを実行する アクション API の呼び出しなど、カスタム関数を実行する 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 の動画を
次の例は、異なる cropStyle を持つグリッド内の 5 つの画像を示しています。
適用しています。
追加
「
Icon ウィジェット
または
組み込み
アイコンまたは
カスタム
アイコンをクリックします。Icon は次の場所で使用できます。
カード メッセージ
および
ダイアログ
次のように変更します。
- スタンドアロンのアイコンを表示します。
- 関連するテキストの前にアイコンを表示する
DecoratedTextウィジェット。 - アイコンをインタラクティブ ボタンとして表示し、
ButtonListウィジェット。
以下は、アイコンが組み込まれた Icon コンポーネントで構成されるカードです。
次の表に、カード メッセージで使用できる組み込みアイコンを示します。
| 航空機 | ブックマーク | ||
| バス | 車 | ||
| 時計 | CONFIRMATION_NUMBER_ICON | ||
| DESCRIPTION | ドル | ||
| メールアドレス | EVENT_SEAT | ||
| FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
| ホテル | HOTEL_ROOM_TYPE | ||
| INVITE | MAP_PIN | ||
| メンバーシップ | MULTIPLE_PEOPLE | ||
| 人物 | 電話 | ||
| RESTAURANT_ICON | SHOPPING_CART | ||
| STAR | ストア | ||
| チケット | 電車 | ||
| 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 ウィジェットで構成されるカードです。これを使用して以下を行います。
2 つの段落をシンプルな HTML 形式で表示します。
装飾的な要素を含むテキストを表示する
「
DecoratedText ウィジェット
は、オプションのレイアウトとケーパビリティとともにテキストを表示します。例:
startIconを使用してテキストの前にiconを表示します。topLabelを使用すると、テキストの前にタイトルを表示できます。buttonでクリック可能なボタン、またはswitchControlで切り替え可能な切り替えボタンを追加します。
DecoratedText ウィジェットは、
インタラクティブに操作できます。このウィジェットは、
連絡先カード、注文ステータスの更新情報、作業チケット通知などがあります。
DecoratedText ウィジェットでは、単純な HTML 形式のテキストがサポートされています。設定時に
対応する HTML タグのみを含めます。対象
サポートされる HTML タグの詳細については、
カードのテキストの書式設定。
以下は、表示に使用する DecoratedText ウィジェットで構成されるカードです。
連絡先情報（メールアドレス、オンライン ステータス、電話番号、
ウェブサイト:
トラブルシューティング
Google Chat アプリまたは card がエラーを返した場合、 Chat のインターフェースに「エラーが発生しました」というメッセージが表示されている。 または「リクエストを処理できません」が表示されます。場合によっては、Chat の UI が エラー メッセージは表示されませんが、Chat 用アプリまたは 予期しない結果が生じた場合たとえば、カード メッセージに 表示されます。
Chat UI にエラー メッセージが表示されない場合がありますが、 エラーの修正に役立つ、わかりやすいエラー メッセージとログデータ Chat 用アプリのエラーロギングが有効になっている場合。表示のヘルプについては、 エラーの修正について詳しくは、このモジュールの Google Chat のエラーのトラブルシューティングと修正