このページでは、カードまたはダイアログ メッセージにテキストと画像を追加する方法と、メッセージ内でのテキストと画像の表示方法を変更する方法について説明します。
カードビルダーを使用して、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 のエラーのトラブルシューティングと修正をご覧ください。